@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

@@ -0,0 +1,317 @@
+import { Component, computed, forwardRef, inject, signal } from "@angular/core";
+import {
+  DELETE_FILE_ERROR,
+  NO_FILE_NAME,
+  NO_INFO_TEXT,
+  UPLOAD_FILE_ERROR,
+  UPLOAD_FILE_TEXT,
+} from "../../../../consts/common";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { SingleFileUploadField } from "../../../../models/fields/upload/single-file-upload-field.model";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import {
+  NzUploadFile,
+  NzUploadModule,
+  NzUploadXHRArgs,
+} from "ng-zorro-antd/upload";
+import { finalize, Observable, of, Subscription } from "rxjs";
+import { FileService } from "../../../../services/file.service";
+import { ObjectStorage } from "../../../../models/common/object-storage.model";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { MyUploadFile } from "../../../../models/common/common.model";
+import { formatFileSize, getExtensions } from "../../../../utils/file";
+import { isValidJSON } from "../../../../utils/common";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { FileSizeTypeEnum } from "../../../../enums/common";
+import { FormUtils } from "../../../../services/form-utils";
+import { FormConfigService } from "../../../../services/form-config.service";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { SuffixComponent } from "../../components/suffix/suffix.component";
+import { NzSpinModule } from "ng-zorro-antd/spin";
+import { NzNotificationService } from "ng-zorro-antd/notification";
+import { CommonModule } from "@angular/common";
+
+const modules = [CommonModule];
+const zorroModules = [
+  NzUploadModule,
+  NzIconModule,
+  NzInputModule,
+  NzButtonModule,
+  NzSpinModule,
+];
+const components = [SuffixComponent];
+
+@Component({
+  selector: "app-single-file-upload",
+  standalone: true,
+  imports: [...modules, ...zorroModules, ...components],
+  templateUrl: "./single-file-upload.component.html",
+  styleUrls: ["./single-file-upload.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SingleFileUploadComponent),
+      multi: true,
+    },
+  ],
+})
+export class SingleFileUploadComponent extends BaseValueAccessor<
+  string | File | NzUploadFile
+> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof SingleFileUploadField) ||
+      (base.type !== FieldTypeEnum.SingleFileUpload &&
+        base.controlType !== ControlTypeEnum.Upload)
+    ) {
+      throw new Error("Expected SingleFileUploadField");
+    }
+    return base;
+  });
+
+  // Inject services
+  private readonly fileService = inject(FileService);
+  private readonly nzNotification = inject(NzNotificationService);
+  private readonly formConfigService = inject(FormConfigService);
+
+  // Mảng lưu trữ objectStorage liên quan đến tập tin.
+  readonly objStorageList = signal<ObjectStorage[]>([]);
+
+  // Mảng đại diện các files.
+  readonly allFiles = signal<MyUploadFile[]>([]);
+
+  // Text hướng dẫn các loại extension được upload.
+  readonly fileExtensionGuide = computed(() => {
+    if (!this.isAddOrEdit()) return "";
+    const { acceptedMimeTypes } = this.field();
+    return `Hỗ trợ định dạng ${getExtensions(acceptedMimeTypes).join(", ")}`;
+  });
+
+  readonly viewDisplayValue = computed(() => {
+    // 1. Nếu không phải View thì không cần quan tâm text này
+    if (!this.isView()) return "";
+
+    if (this.allFiles().length === 0) return NO_INFO_TEXT;
+
+    const { objStorage } = this.allFiles()[0];
+    const { nameAlias, name } = objStorage;
+    if (!nameAlias && !name) return NO_INFO_TEXT;
+
+    return nameAlias ?? name;
+  });
+
+  readonly addEditDisplayValue = computed(() => {
+    if (!this.isAddOrEdit()) return "";
+
+    if (this.allFiles().length === 0) return UPLOAD_FILE_TEXT;
+
+    const { objStorage } = this.allFiles()[0];
+    const { nameAlias, name } = objStorage;
+    if (!nameAlias && !name) return NO_FILE_NAME;
+
+    return nameAlias ?? name;
+  });
+
+  readonly uploading = signal(false);
+
+  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: objStorage, myFile, 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)) {
+      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.getStorageUrl()}${objStorage.bucket}/${objStorage.path}`,
+          }) as MyUploadFile,
+      );
+      this.allFiles.set(myUploadFiles);
+    } else {
+      if (value) {
+        this.allFiles.set([
+          {
+            isTemp: false,
+            objStorage: { id: "", name: value },
+            previewUrl: "",
+          } as MyUploadFile,
+        ]);
+      }
+    }
+  }
+
+  beforeUpload = (
+    file: NzUploadFile,
+    fileList: 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 { maxSizeInMB, acceptedMimeTypes } = this.field();
+    const fileSizeInMB = formatFileSize(file.size!, FileSizeTypeEnum.MB);
+    const fileType = file.type;
+    if (fileSizeInMB > maxSizeInMB || !acceptedMimeTypes.includes(fileType!)) {
+      return false;
+    }
+
+    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 = FormUtils.randomFileName(file.name);
+
+    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, {
+          fileName: newFileName,
+        })
+      : (() => {
+          // Mặc định
+          const fd = new FormData();
+          fd.append("File", file, newFileName);
+          if (apiFileConfig.uploadByPath && apiFileConfig.uploadPath) {
+            fd.append("path", apiFileConfig.uploadPath);
+          }
+
+          if (apiFileConfig.isOriginName) {
+            fd.append("nameAlias", file.name);
+          }
+          // fd.append('isTemp', 'true');
+          return fd;
+        })();
+
+    if (uploadTemp) formData.append("isTemp", "true");
+
+    return this.fileService
+      .uploadFile(file, formData, { uploadUrl })
+      .pipe(
+        this.takeUntilDestroy(),
+        finalize(() => this.uploading.set(false)),
+      )
+      .subscribe({
+        next: (res) => {
+          const { code, data, message } = res;
+          if (code === 0) {
+            this.objStorageList.set([data]);
+
+            this.allFiles.set([
+              {
+                objStorage: data,
+                isTemp: true,
+                previewUrl: uploadTemp
+                  ? this.formConfigService.getViewFileUrl(data.name ?? "", true)
+                  : `${this.formConfigService.getStorageUrl()}${data.bucket}/${data.path}`,
+              } as MyUploadFile,
+            ]);
+
+            this.patchFormData(
+              this.fieldKey(),
+              JSON.stringify(this.objStorageList()),
+            );
+          } else {
+            console.error(message);
+          }
+        },
+        error: () => {
+          console.error(UPLOAD_FILE_ERROR);
+        },
+      });
+  }
+
+  handleDelete(file: MyUploadFile): void {
+    const { objStorage } = file;
+    const { uploadTemp } = this.field();
+
+    this.objStorageList.set([]);
+
+    // 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);
+
+    if (!uploadTemp) {
+      this.deleteObjStorage(objStorage.id || "");
+      return;
+    }
+    this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
+
+    return;
+  }
+
+  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) {
+            this.objStorageList.set([]);
+
+            this.patchFormData(
+              this.fieldKey(),
+              JSON.stringify(this.objStorageList()),
+            );
+          } else {
+            console.error(message);
+          }
+        },
+        error: () => {
+          console.error(DELETE_FILE_ERROR);
+          // Tạm do api xóa có vấn đề
+          this.objStorageList.set([]);
+
+          this.patchFormData(
+            this.fieldKey(),
+            JSON.stringify(this.objStorageList()),
+          );
+        },
+      });
+  }
+}

package/src/lib/shared/config/dynamic-form.config.ts

@@ -0,0 +1,11 @@
+import { InjectionToken } from '@angular/core';
+
+export interface DynamicFormConfig {
+  prefix: string;
+  mainApiUrl: string;
+  systemApiUrl: string;
+  portalApiUrl: string;
+  storageUrl: string;
+}
+
+export const DYNAMIC_FORM_CONFIG = new InjectionToken<DynamicFormConfig>('DYNAMIC_FORM_CONFIG');

package/src/lib/shared/consts/common/common.const.ts

@@ -0,0 +1,5 @@
+export const NO_INFO_TEXT = "Không có thông tin";
+export const UPLOAD_FILE_TEXT = "Tải lên tập tin";
+export const NO_FILE_NAME = "Chưa có thông tin tên tập tin";
+export const UPLOAD_FILE_ERROR = "Lỗi trong quá trình tải tập tin đến máy chủ!";
+export const DELETE_FILE_ERROR = "Lỗi trong quá trình xóa tập tin đến máy chủ!";

package/src/lib/shared/consts/common/field-dependency.const.ts

@@ -0,0 +1 @@
+export const COMBINE_DEPEND_TYPES = ['skip', 'null', 'valid'] as const;

package/src/lib/shared/consts/common/file.const.ts

@@ -0,0 +1,130 @@
+export const IMAGE_TYPES = {
+  apng: 'image/apng',
+  avif: 'image/avif',
+  bmp: 'image/bmp',
+  gif: 'image/gif',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  tif: 'image/tiff',
+  tiff: 'image/tiff',
+  webp: 'image/webp',
+};
+
+export const AUDIO_TYPES = {
+  aac: 'audio/aac',
+  mp3: 'audio/mpeg',
+  oga: 'audio/ogg',
+  opus: 'audio/ogg',
+  wav: 'audio/wav',
+  weba: 'audio/webm',
+};
+
+export const VIDEO_TYPES = {
+  avi: 'video/avi',
+  mp4: 'video/mp4',
+  mpeg: 'video/mpeg',
+  ogv: 'video/ogg',
+  ts: 'video/mp2t',
+  webm: 'video/webm',
+};
+
+export const videoTypesPath = ['mp4', 'avi'];
+
+export const TEXT_TYPES = {
+  css: 'text/css',
+  csv: 'text/csv',
+  html: 'text/html',
+  ics: 'text/calendar',
+  js: 'text/javascript ',
+  mjs: 'text/javascript ',
+  txt: 'text/plain',
+};
+
+export const APPLICATION_TYPES = {
+  abw: 'application/x-abiword',
+  arc: 'application/x-freearc',
+  azw: 'application/vnd.amazon.ebook',
+  bin: 'application/octet-stream',
+  bz: 'application/x-bzip',
+  bz2: 'application/x-bzip2',
+  cda: 'application/x-cdf',
+  csh: 'application/x-csh',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  eot: 'application/vnd.ms-fontobject',
+  epub: 'application/epub+zip',
+  jar: 'application/java-archive',
+  json: 'application/json',
+  jsonld: 'application/ld+json',
+  mpkg: 'application/vnd.apple.installer+xml',
+  ods: 'application/vnd.oasis.opendocument.spreadsheet',
+  odt: 'application/vnd.oasis.opendocument.text',
+  ogx: 'application/ogg',
+  pdf: 'application/pdf',
+  php: 'application/x-httpd-php',
+  ppt: 'application/vnd.ms-powerpoint',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  rar: 'application/vnd.rar',
+  rarX: 'application/x-rar',
+  rtf: 'application/rtf',
+  sh: 'application/x-sh',
+  tar: 'application/x-tar',
+  vsd: 'application/vnd.visio',
+  xhtml: 'application/xhtml+xml',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  zip: 'application/x-zip-compressed',
+  zipN: 'application/zip',
+  sevenZ: 'application/x-7z-compressed',
+  csv: 'text/csv',
+};
+
+export const MIME_TYPES_TO_EXTENSION = Object.entries(APPLICATION_TYPES).reduce(
+  (acc, [key, value]) => {
+    acc[value] = key;
+    return acc;
+  },
+  {} as Record<string, string>,
+);
+
+export const ALL_MIME_TYPES = {
+  ...IMAGE_TYPES,
+  ...AUDIO_TYPES,
+  ...VIDEO_TYPES,
+  ...TEXT_TYPES,
+  ...APPLICATION_TYPES,
+};
+
+export const ALL_MIME_TYPES_VALUE = Object.values({
+  ...IMAGE_TYPES,
+  ...AUDIO_TYPES,
+  ...VIDEO_TYPES,
+  ...TEXT_TYPES,
+  ...APPLICATION_TYPES,
+});
+
+export const DEFAULT_ACCEPTED_MIME_TYPES = [
+  IMAGE_TYPES.jpg,
+  IMAGE_TYPES.jpeg,
+  IMAGE_TYPES.png,
+  IMAGE_TYPES.svg,
+  APPLICATION_TYPES.doc,
+  APPLICATION_TYPES.docx,
+  APPLICATION_TYPES.pdf,
+  APPLICATION_TYPES.xls,
+  APPLICATION_TYPES.xlsx,
+  APPLICATION_TYPES.zip,
+  APPLICATION_TYPES.zipN,
+  TEXT_TYPES.txt,
+  VIDEO_TYPES.mp4,
+  VIDEO_TYPES.avi,
+];
+
+export const DEFAULT_ACCEPTED_IMAGE_MIME_TYPES = [
+  IMAGE_TYPES.jpg,
+  IMAGE_TYPES.jpeg,
+  IMAGE_TYPES.png,
+  IMAGE_TYPES.svg,
+];

package/{lib/shared/consts/common/index.d.ts → src/lib/shared/consts/common/index.ts}

@@ -1,4 +1,4 @@
-export * from './standalone-import.const';
-export * from './common.const';
-export * from './file.const';
-export * from './field-dependency.const';
+export * from './standalone-import.const';
+export * from './common.const';
+export * from './file.const';
+export * from './field-dependency.const';