@ldquocc/dynamic-form 0.0.9 → 0.0.11

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

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

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

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

@@ -1,21 +0,0 @@
-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();
-  });
-});