@ldquocc/dynamic-form 0.0.9 → 0.0.10

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

@@ -1,317 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,130 +0,0 @@
-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,
-];