@sotoa-ui/dynamic-form 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,6 +4,7 @@ import { distinctUntilChanged, isObservable, take } from 'rxjs';
|
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormBuilder, Validators, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import * as _ from 'lodash-es';
|
|
7
|
+
import { isArray } from 'lodash-es';
|
|
7
8
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
9
|
import { debounceTime } from 'rxjs/operators';
|
|
9
10
|
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
@@ -921,23 +922,26 @@ class MatInputFileComponent {
|
|
|
921
922
|
constructor() {
|
|
922
923
|
}
|
|
923
924
|
ngOnInit() {
|
|
924
|
-
|
|
925
|
+
const value = this.group().get(this.field().name)?.value;
|
|
926
|
+
console.log(value);
|
|
927
|
+
if (value) {
|
|
925
928
|
if (!this.field().multiple) {
|
|
926
|
-
this.fichier =
|
|
929
|
+
this.fichier = { file: value, srcUrl: null };
|
|
930
|
+
this.readFile(this.fichier, value);
|
|
927
931
|
}
|
|
928
932
|
else {
|
|
929
|
-
|
|
933
|
+
if (isArray(value)) {
|
|
934
|
+
this.fileList = value.map((f) => {
|
|
935
|
+
const item = {
|
|
936
|
+
file: f,
|
|
937
|
+
srcUrl: null
|
|
938
|
+
};
|
|
939
|
+
this.readFile(item, f);
|
|
940
|
+
return item;
|
|
941
|
+
});
|
|
942
|
+
}
|
|
930
943
|
}
|
|
931
944
|
}
|
|
932
|
-
// @ts-ignore
|
|
933
|
-
this.group()
|
|
934
|
-
.get(this.field().name)
|
|
935
|
-
.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
|
|
936
|
-
.subscribe((value1) => {
|
|
937
|
-
if (JSON.stringify(value1) !== JSON.stringify(this.fileList)) {
|
|
938
|
-
this.fileList = value1;
|
|
939
|
-
}
|
|
940
|
-
});
|
|
941
945
|
}
|
|
942
946
|
writeValue(value) {
|
|
943
947
|
this.value = value && (!this.field().multiple || value.length > 0) ? value : null;
|
|
@@ -954,33 +958,39 @@ class MatInputFileComponent {
|
|
|
954
958
|
}
|
|
955
959
|
onSelectFile(event) {
|
|
956
960
|
if (event && event.target && event.target.files && event.target.files.length > 0) {
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
961
|
+
console.log(event.target.files);
|
|
962
|
+
for (let i = 0; i < event.target.files.length; i++) {
|
|
963
|
+
console.log(i, event.target.files[i]);
|
|
964
|
+
const fichier = { file: event.target.files[i], srcUrl: null };
|
|
965
|
+
this.readFile(fichier, fichier.file);
|
|
966
|
+
if (!this.field().multiple) {
|
|
967
|
+
this.addSimpleFile(fichier);
|
|
968
|
+
}
|
|
969
|
+
else {
|
|
970
|
+
this.addMultipleFile(fichier);
|
|
962
971
|
}
|
|
963
972
|
}
|
|
964
|
-
else {
|
|
965
|
-
this.addFile();
|
|
966
|
-
}
|
|
967
973
|
}
|
|
968
974
|
}
|
|
969
|
-
|
|
970
|
-
|
|
975
|
+
addSimpleFile(file) {
|
|
976
|
+
this.fichier = file;
|
|
977
|
+
this.writeValue(this.fichier?.file);
|
|
978
|
+
if (this.field().onAddFile) {
|
|
979
|
+
this.field().onAddFile(this.fichier?.file ?? null);
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
addMultipleFile(file) {
|
|
983
|
+
console.log(file.file.name);
|
|
984
|
+
if (file) {
|
|
971
985
|
if (!this.fileList) {
|
|
972
986
|
this.fileList = [];
|
|
973
987
|
}
|
|
974
|
-
this.fileList.push(
|
|
988
|
+
this.fileList.push(file);
|
|
975
989
|
if (this.field().onAddFile) {
|
|
976
|
-
this.field().onAddFile(
|
|
977
|
-
}
|
|
978
|
-
this.fichier = null;
|
|
979
|
-
if (this.fileInput && this.fileInput.nativeElement) {
|
|
980
|
-
this.fileInput.nativeElement.value = null;
|
|
990
|
+
this.field().onAddFile(file.file);
|
|
981
991
|
}
|
|
982
992
|
}
|
|
983
|
-
this.writeValue(this.fileList);
|
|
993
|
+
this.writeValue(this.fileList.map((f) => f.file));
|
|
984
994
|
}
|
|
985
995
|
deleteFile(file) {
|
|
986
996
|
if (!this.field().multiple) {
|
|
@@ -989,10 +999,19 @@ class MatInputFileComponent {
|
|
|
989
999
|
}
|
|
990
1000
|
else {
|
|
991
1001
|
this.fileList.splice(this.fileList.indexOf(file), 1);
|
|
992
|
-
this.writeValue(this.fileList);
|
|
1002
|
+
this.writeValue(this.fileList.map((f) => f.file));
|
|
993
1003
|
}
|
|
994
1004
|
if (this.field().onDeleteFile) {
|
|
995
|
-
this.field().onDeleteFile(file);
|
|
1005
|
+
this.field().onDeleteFile(file.file);
|
|
1006
|
+
}
|
|
1007
|
+
}
|
|
1008
|
+
readFile(item, f) {
|
|
1009
|
+
if (f instanceof File && f.type.match('image.*')) {
|
|
1010
|
+
const reader = new FileReader();
|
|
1011
|
+
reader.onload = () => {
|
|
1012
|
+
item.srcUrl = reader.result;
|
|
1013
|
+
};
|
|
1014
|
+
reader.readAsDataURL(f);
|
|
996
1015
|
}
|
|
997
1016
|
}
|
|
998
1017
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -1002,17 +1021,17 @@ class MatInputFileComponent {
|
|
|
1002
1021
|
multi: true,
|
|
1003
1022
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1004
1023
|
},
|
|
1005
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n
|
|
1024
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\" [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button mat-icon-button\n type=\"button\"\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n } @else {\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>\n @if (fichier.srcUrl) {\n <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n } @else {\n {{ fichier.file.name }}\n }\n </div>\n @if (!field().disabled) {\n <button type=\"button\" mat-button (click)=\"deleteFile(fichier!)\">Supprimer</button>\n }\n </div>\n }\n }\n </div>\n <div class=\"sot-file-button\">\n <button matButton type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">\n Choisir un fichier\n </button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n [multiple]=\"field().multiple\"\n />\n </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1006
1025
|
}
|
|
1007
1026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, decorators: [{
|
|
1008
1027
|
type: Component,
|
|
1009
|
-
args: [{ selector: 'sot-mat-input-file', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatIconModule], providers: [
|
|
1028
|
+
args: [{ selector: 'sot-mat-input-file', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatIconModule, NgClass], providers: [
|
|
1010
1029
|
{
|
|
1011
1030
|
provide: NG_VALUE_ACCESSOR,
|
|
1012
1031
|
multi: true,
|
|
1013
1032
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1014
1033
|
},
|
|
1015
|
-
], template: "<div class=\"sot-file-wrapper\">\n
|
|
1034
|
+
], template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\" [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button mat-icon-button\n type=\"button\"\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n } @else {\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>\n @if (fichier.srcUrl) {\n <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n } @else {\n {{ fichier.file.name }}\n }\n </div>\n @if (!field().disabled) {\n <button type=\"button\" mat-button (click)=\"deleteFile(fichier!)\">Supprimer</button>\n }\n </div>\n }\n }\n </div>\n <div class=\"sot-file-button\">\n <button matButton type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">\n Choisir un fichier\n </button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n [multiple]=\"field().multiple\"\n />\n </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"] }]
|
|
1016
1035
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], fileInput: [{
|
|
1017
1036
|
type: ViewChild,
|
|
1018
1037
|
args: ['fileInput']
|