@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/components/fields/upload/multi-image-upload/multi-image-upload.component.ts

@@ -0,0 +1,288 @@
+import {
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  signal,
+} from "@angular/core";
+import { CORE_MODULES } from "../../../../consts/common";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import {
+  NzUploadFile,
+  NzUploadModule,
+  NzUploadXHRArgs,
+} from "ng-zorro-antd/upload";
+import { MultiImageUploadField } from "../../../../models/fields/upload/multi-image-upload-field.model";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { isValidJSON } from "../../../../utils/common";
+import { MyUploadFile } from "../../../../models/common/common.model";
+import { ObjectStorage } from "../../../../models/common";
+import { FileService } from "../../../../services/file.service";
+import { finalize, Observable, of, Subscription } from "rxjs";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { formatFileSize } from "../../../../utils/file";
+import { FileSizeTypeEnum } from "../../../../enums/common";
+import { FormConfigService } from "../../../../services/form-config.service";
+import { NzImageModule } from "ng-zorro-antd/image";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzNotificationService } from "ng-zorro-antd/notification";
+
+const ZORRO_MODULES = [
+  NzUploadModule,
+  NzIconModule,
+  NzButtonModule,
+  NzImageModule,
+];
+
+@Component({
+  selector: "app-multi-image-upload",
+  standalone: true,
+  imports: [...CORE_MODULES, ...ZORRO_MODULES],
+  templateUrl: "./multi-image-upload.component.html",
+  styleUrl: "./multi-image-upload.component.less",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MultiImageUploadComponent),
+      multi: true,
+    },
+  ],
+})
+export class MultiImageUploadComponent extends BaseValueAccessor<
+  string | File | NzUploadFile
+> {
+  // Cast lại đúng instance là MultiImageUploadField.
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof MultiImageUploadField) ||
+      (base.type !== FieldTypeEnum.MultiImageUpload &&
+        base.controlType !== ControlTypeEnum.Upload)
+    ) {
+      throw new Error("Expected MultiImageUploadField");
+    }
+    return base;
+  });
+
+  // Mảng lưu trữ objectStorage liên quan đến hình ảnh.
+  readonly objStorageList = signal<ObjectStorage[]>([]);
+
+  // Mảng đại diện các images.
+  readonly allFiles = signal<MyUploadFile[]>([]);
+  readonly uploading = signal(false);
+
+  private fileService = inject(FileService);
+  private nzNotification = inject(NzNotificationService);
+  private formConfigService = inject(FormConfigService);
+
+  constructor() {
+    super();
+  }
+
+  // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
+  protected override writeValueToView(value: string): void {
+    this.handleInitAllData(value);
+
+    if (!this.isAddOrEdit()) return;
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(this.fieldKey(), value);
+  }
+
+  // Xử lý init các data cần thiết: objStorageList, allFiles, fileList, lưu giữ first value.
+  // value sẽ là 1 string json mảng các objStorage.
+  private handleInitAllData(value: string): void {
+    // Reset khi đổi mode, hoặc model, hoặc fields.
+    this.objStorageList.set([]);
+    this.allFiles.set([]);
+
+    if (isValidJSON(value)) {
+      // Khởi tạo danh sách ObjectStorage từ data json.
+      const objStorageList = JSON.parse(value) as ObjectStorage[];
+      this.objStorageList.set(objStorageList);
+
+      // Khởi tạo danh sách MyUploadFile từ data json.
+      const myUploadFiles = objStorageList.map(
+        (objStorage) =>
+          ({
+            objStorage,
+            isTemp: false,
+            previewUrl: this.formConfigService.getViewFileUrl(
+              objStorage.name ?? "",
+              false,
+            ),
+          }) as MyUploadFile,
+      );
+      this.allFiles.set(myUploadFiles);
+    }
+  }
+
+  // Xử lý trước khi upload.
+  beforeUpload = (file: NzUploadFile): boolean | Observable<boolean> => {
+    // const originFile = file?.originFileObj as unknown as File; // có thể ở version mới nhất đã fix lỗi NzUploadFile nhưng trả về File của tham số file.
+    // Xử lý gán vào CVA để tiến hành validation theo các props đã truyền vào.
+    const originFile = file as unknown as File;
+    this.propagateValue(originFile);
+
+    const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.field();
+    // Kiểm tra số lượng tối đa hình ảnh có thể tải lên.
+    if (this.allFiles().length + 1 > maxFileCount) {
+      this.nzNotification.warning(
+        "Cảnh báo",
+        `Chỉ được phép tải lên tối đa ${maxFileCount} hình ảnh`,
+        { nzDuration: 4500 },
+      );
+      return false;
+    }
+
+    const fileSizeInMB = formatFileSize(file.size!, FileSizeTypeEnum.MB);
+    const fileType = file.type;
+    if (fileSizeInMB > maxSizeInMB || !acceptedMimeTypes.includes(fileType!)) {
+      return false;
+    }
+
+    // Luôn trả về true vì lúc này chưa bắt kịp control là valid hay invalid.
+    return true;
+  };
+
+  customRequest = (item: NzUploadXHRArgs): Subscription => {
+    // const originFile = nzUploadFile?.originFileObj;
+    const originFile = item.file as unknown as File;
+
+    // Nếu validation không thỏa, dừng tại đây.
+    if (this.control?.invalid) {
+      return of(null).subscribe(); // fake subscription.
+    }
+
+    // Validation đã thỏa, tiến hành upload file.
+    return this.uploadFile(originFile);
+  };
+
+  private uploadFile(file: File) {
+    this.uploading.set(true);
+    const { apiFileConfig, uploadTemp } = this.field();
+    const newFileName = this.formConfigService.generateRandomFileName(
+      file.name,
+      "file",
+    );
+    const renamedFile = new File([file], newFileName, { type: file.type });
+
+    const mimeCfg = apiFileConfig.perMimeTypeConfig?.[file.type]; // Lấy mimeTypes file upload.
+    const uploadUrl = mimeCfg?.uploadUrl ?? apiFileConfig.uploadUrl; // Nếu có config upload riêng cho mimeTypes đang kiểm tra.
+    const formData = mimeCfg?.buildFormData // Nếu có hàm custon buildFormData.
+      ? mimeCfg.buildFormData(file, {})
+      : (() => {
+          // Mặc định
+          const fd = new FormData();
+          fd.append("File", renamedFile);
+          // fd.append('isTemp', 'true');
+          return fd;
+        })();
+
+    if (uploadTemp) formData.append("isTemp", "true");
+
+    return this.fileService
+      .uploadFile(renamedFile, formData, { uploadUrl })
+      .pipe(
+        this.takeUntilDestroy(),
+        finalize(() => this.uploading.set(false)),
+      )
+      .subscribe({
+        next: (res) => {
+          const { code, data, message } = res;
+          if (code === 0) {
+            this.objStorageList.update((curr) => [...curr, data]);
+
+            this.allFiles.update((curr) => [
+              ...curr,
+              {
+                objStorage: data,
+                isTemp: true,
+                previewUrl: this.formConfigService.getViewFileUrl(
+                  data.name ?? "",
+                  true,
+                ),
+              } as MyUploadFile,
+            ]);
+
+            this.patchFormData(
+              this.fieldKey(),
+              JSON.stringify(this.objStorageList()),
+            );
+          } else {
+            console.error(message);
+          }
+        },
+        error: (err: Error) => {
+          console.error("Lỗi trong quá trình tải hình ảnh đến máy chủ!!");
+        },
+      });
+  }
+
+  handleDelete(file: MyUploadFile): void {
+    const { objStorage } = file;
+
+    // Loại bỏ và cập nhật danh sách ObjectStorage.
+    const newObjStorageList = this.objStorageList().filter(
+      (item) => item.id !== objStorage?.id,
+    );
+    this.objStorageList.set(newObjStorageList);
+
+    // Loại bỏ và cập nhật danh sách MyUploadFile.
+    const newAllFiles = this.allFiles().filter(
+      (item) => item.objStorage?.id !== objStorage?.id,
+    );
+    this.allFiles.set(newAllFiles);
+
+    // Cập nhật đầu ra cho form.
+    this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
+  }
+
+  deleteObjStorage(id: string) {
+    return this.fileService
+      .deleteObjStorage(id, {
+        deleteUrl: this.field().apiFileConfig.deleteUrl,
+      })
+      .pipe(this.takeUntilDestroy())
+      .subscribe({
+        next: (res) => {
+          const { code, message } = res;
+          if (code === 0) {
+            const newObjStorageList = this.objStorageList().filter(
+              (item) => item.id !== id,
+            );
+            this.objStorageList.set(newObjStorageList);
+
+            this.patchFormData(
+              this.fieldKey(),
+              JSON.stringify(this.objStorageList()),
+            );
+          } else {
+            console.error(message);
+          }
+        },
+        error: (err: Error) => {
+          console.error("Lỗi trong quá trình xóa tập tin khỏi máy chủ!!");
+          // Fake vì hiện api xóa đang có vấn đề.
+          const newObjStorageList = this.objStorageList().filter(
+            (item) => item.id !== id,
+          );
+          this.objStorageList.set(newObjStorageList);
+
+          this.patchFormData(
+            this.fieldKey(),
+            JSON.stringify(this.objStorageList()),
+          );
+          // Fake vì hiện api xóa đang có vấn đề.
+        },
+      });
+  }
+
+  protected handlePreview(file: MyUploadFile): void {
+    const imgRef = document.getElementById(file.objStorage.id);
+    if (imgRef) imgRef.click();
+  }
+}

package/src/lib/shared/components/fields/upload/single-file-upload/single-file-upload.component.html

@@ -0,0 +1,104 @@
+<div class="d-flex">
+  @if (modeSignal() === formModeEnum.View) {
+    @if (viewMode() === viewModeEnum.form) {
+      <input nz-input [value]="viewDisplayValue()" class="modeView" />
+    }
+    @if (viewMode() === viewModeEnum.text) {
+      <span class="modeView">{{ viewDisplayValue() }}</span>
+    }
+  }
+  @if (isAddOrEdit()) {
+    <div class="flex w-100">
+      <nz-input-group
+        [nzSuffix]="
+          uploading() || (allFiles().length > 0 && isAddOrEdit())
+            ? actionIcon
+            : undefined
+        "
+        class="flex-1"
+      >
+        <input
+          nz-input
+          [value]="
+            uploading() ? 'Đang tải lên tập tin...' : addEditDisplayValue()
+          "
+          class="no-events"
+        />
+      </nz-input-group>
+
+      <nz-upload
+        [nzShowUploadList]="false"
+        [nzMultiple]="false"
+        [nzBeforeUpload]="beforeUpload"
+        [nzCustomRequest]="customRequest"
+      >
+        <button
+          nz-button
+          class="btn-upload h-100 text-white"
+          [disabled]="uploading()"
+        >
+          <span class="fs-12">Tải lên</span>
+          <nz-icon nzType="upload" nzTheme="outline" />
+        </button>
+      </nz-upload>
+    </div>
+  }
+
+  @if (field().suffixes.length > 0) {
+    @for (suffix of field().suffixes; track $index) {
+      @if (suffix.visibleOn?.includes(this.modeSignal())) {
+        <app-suffix [suffixConfig]="suffix" [formId]="formId"> </app-suffix>
+      }
+    }
+  }
+</div>
+
+<ng-template #actionIcon>
+  @if (uploading()) {
+    <span
+      nz-icon
+      nzType="loading"
+      nzTheme="outline"
+      class="text-primary"
+    ></span>
+  } @else if (allFiles().length > 0 && isAddOrEdit()) {
+    <span
+      title="Xóa"
+      class="mdi mdi-delete pointer text-danger"
+      (click)="handleDelete(allFiles()[0])"
+    ></span>
+  }
+</ng-template>
+
+@if (field().showAcceptedExtensionGuide && fileExtensionGuide()) {
+  <div class="file-extension-guide">{{ fileExtensionGuide() }}</div>
+}
+
+<!-- Custom hiển thị danh sách tập tin -->
+<!-- @if (allFiles().length > 0) { -->
+<!-- <ng-container *ngTemplateOutlet="renderFileTpl"></ng-container> -->
+<!-- } -->
+
+<!-- Template custom hiển thị danh sách tập tin -->
+<!-- <ng-template #renderFileTpl>
+  <ul class="custom-upload-list">
+    @for (file of allFiles() | slice: 0 : 1; track file.objStorage?.id) {
+      <li class="upload-item">
+        <span nz-icon nzType="paper-clip" nzTheme="outline" class="paper-clip-icon"></span>
+
+        <span class="filename">{{ file.objStorage.name }}</span>
+
+        @if (isAddOrEdit()) {
+          <span
+            nz-icon
+            nzType="delete"
+            nzTheme="outline"
+            title="Xóa"
+            class="delete-icon"
+            (click)="handleDelete(file)"
+          ></span>
+        }
+      </li>
+    }
+  </ul>
+</ng-template> -->

package/src/lib/shared/components/fields/upload/single-file-upload/single-file-upload.component.scss

@@ -0,0 +1,37 @@
+.file-extension-guide {
+  font-size: 11px;
+  margin-top: 8px;
+  font-style: italic;
+  color: #0f766e;
+}
+
+.custom-upload-list {
+  margin-top: 0.625rem;
+  list-style-type: none;
+  padding-inline-start: 10px;
+
+  .paper-clip-icon {
+    margin-right: 0.5rem;
+  }
+
+  .delete-icon {
+    color: red;
+    cursor: pointer;
+    margin-left: 0.5rem;
+  }
+}
+
+.file-name:hover {
+  text-decoration: underline;
+  color: #0a4c9f;
+  cursor: pointer;
+}
+
+.btn-upload {
+  background-color: #2666ab;
+}
+
+.no-events {
+  pointer-events: none;
+  color: #cdbfbf;
+}

package/src/lib/shared/components/fields/upload/single-file-upload/single-file-upload.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SingleFileUploadComponent } from './single-file-upload.component';
+
+describe('SingleFileUploadComponent', () => {
+  let component: SingleFileUploadComponent;
+  let fixture: ComponentFixture<SingleFileUploadComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SingleFileUploadComponent],
+    });
+    fixture = TestBed.createComponent(SingleFileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});