@ldquocc/dynamic-form 0.0.9 → 0.0.11

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

@@ -1,480 +0,0 @@
-import {
-  Component,
-  computed,
-  effect,
-  forwardRef,
-  inject,
-  signal,
-  untracked,
-} 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 { MultiFileUploadField } from "../../../../models/fields/upload/multi-file-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 { Observable, of, Subscription } from "rxjs";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import { ControlTypeEnum } from "../../../../enums/controls";
-import { formatFileSize, getExtensions } from "../../../../utils/file";
-import { FileSizeTypeEnum } from "../../../../enums/common";
-import { FormConfigService } from "../../../../services/form-config.service";
-import { NzIconModule } from "ng-zorro-antd/icon";
-import { NzButtonModule } from "ng-zorro-antd/button";
-import { NzMessageService } from "ng-zorro-antd/message";
-import { NzNotificationService } from "ng-zorro-antd/notification";
-
-const ZORRO_MODULES = [NzUploadModule, NzIconModule, NzButtonModule];
-
-@Component({
-  selector: "app-multi-file-upload",
-  standalone: true,
-  imports: [...CORE_MODULES, ...ZORRO_MODULES],
-  templateUrl: "./multi-file-upload.component.html",
-  styleUrl: "./multi-file-upload.component.scss",
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MultiFileUploadComponent),
-      multi: true,
-    },
-  ],
-})
-export class MultiFileUploadComponent extends BaseValueAccessor<
-  string | File | NzUploadFile
-> {
-  // Cast lại đúng instance là MultiFileUploadFile.
-  readonly field = computed(() => {
-    const base = this.fieldInput();
-    if (
-      !(base instanceof MultiFileUploadField) ||
-      (base.type !== FieldTypeEnum.MultiFileUpload &&
-        base.controlType !== ControlTypeEnum.Upload)
-    ) {
-      throw new Error("Expected MultiFileUploadField");
-    }
-    return base;
-  });
-
-  // Mảng lưu trữ objectStorage liên quan đến tập tin.
-  objStorageList = signal<ObjectStorage[]>([]);
-
-  // Mảng đại diện các images.
-  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(", ")}`;
-  });
-
-  // Đếm số file đã pass beforeUpload nhưng chưa upload xong (đang trong hàng chờ customRequest/uploadFile).
-  // Dùng để tính toán count chính xác khi user chọn nhiều file cùng lúc.
-  pendingCount = signal<number>(0);
-
-  // Buffer chứa các file đang chờ xử lý trong một batch (một lần chọn file từ dialog).
-  private _batchBuffer: Array<{
-    file: NzUploadFile;
-    resolve: (pass: boolean) => void;
-  }> = [];
-
-  // Timer dùng để phát hiện kết thúc một batch (setTimeout(0)).
-  private _batchTimer: ReturnType<typeof setTimeout> | null = null;
-
-  private fileService = inject(FileService);
-  private nzMessage = inject(NzMessageService);
-  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.
-      // File từ server luôn ở trạng thái success.
-      const myUploadFiles = objStorageList.map(
-        (objStorage) =>
-          ({
-            objStorage,
-            isTemp: false,
-            previewUrl: this.formConfigService.getViewFileUrl(
-              objStorage.name ?? "",
-              false,
-            ),
-            uploadStatus: "success",
-          }) as MyUploadFile,
-      );
-      this.allFiles.set(myUploadFiles);
-    }
-  }
-
-  /**
-   * Xử lý trước khi upload — trả về Observable<boolean> để hỗ trợ batch detection.
-   *
-   * Cơ chế batch detection:
-   * nz-upload gọi beforeUpload() từng file một (đồng bộ) trong cùng 1 JS tick khi user
-   * chọn nhiều file. Mỗi lần gọi, file được đẩy vào _batchBuffer. Sau khi tất cả các
-   * lần gọi đồng bộ kết thúc, setTimeout(0) kích hoạt _processBatch() để xử lý toàn bộ
-   * batch một lần, cho phép kiểm tra tổng số lượng chính xác trước khi upload.
-   */
-  beforeUpload = (file: NzUploadFile): Observable<boolean> => {
-    return new Observable<boolean>((subscriber) => {
-      // Đẩy file vào buffer với hàm resolve tương ứng.
-      this._batchBuffer.push({
-        file,
-        resolve: (pass: boolean) => {
-          subscriber.next(pass);
-          subscriber.complete();
-        },
-      });
-
-      // Reset timer mỗi lần có file mới vào buffer.
-      // Khi tất cả beforeUpload synchronous calls kết thúc, timer sẽ fire và gọi _processBatch().
-      if (this._batchTimer !== null) clearTimeout(this._batchTimer);
-      this._batchTimer = setTimeout(() => this._processBatch(), 0);
-    });
-  };
-
-  /**
-   * Xử lý toàn bộ batch file sau khi tất cả beforeUpload calls trong cùng 1 tick đã hoàn tất.
-   *
-   * Logic:
-   * 1. Nếu tổng (file hiện tại + pending + batch) vượt maxFileCount → reject TOÀN BỘ batch.
-   * 2. Validate từng file trong batch:
-   *    - File thỏa (MIME + size) → pendingCount++, resolve(true) → cho phép upload.
-   *    - File không thỏa → hiển thị NzMessage lỗi, resolve(false) → bỏ qua.
-   */
-  private _processBatch(): void {
-    const batch = [...this._batchBuffer];
-    this._batchBuffer = [];
-    this._batchTimer = null;
-
-    const { maxFileCount, maxSizeInMB, acceptedMimeTypes } = this.field();
-
-    // Số file hiện tại: đã upload xong + đang trong hàng chờ upload.
-    const currentCount = this.allFiles().length + this.pendingCount();
-
-    // ── CHECK 1: Tổng batch vượt maxFileCount → reject TOÀN BỘ batch ──
-    if (currentCount + batch.length > maxFileCount) {
-      this.nzNotification.warning(
-        "Cảnh báo",
-        `Không thể tải lên: số lượng file tải lên vượt quá giới hạn cho phép. Tối đa ${maxFileCount} tập tin.`,
-        { nzDuration: 4500 },
-      );
-      batch.forEach(({ resolve }) => resolve(false));
-      return;
-    }
-
-    // ── CHECK 2: Validate từng file — upload file thỏa, báo lỗi file không thỏa ──
-    for (const { file, resolve } of batch) {
-      const originFile = file as unknown as File;
-      const fileSizeInMB = formatFileSize(file.size!, FileSizeTypeEnum.MB);
-      const fileType = file.type ?? "";
-
-      const isSizeOk = fileSizeInMB <= maxSizeInMB;
-      const isMimeOk = acceptedMimeTypes.includes(fileType);
-
-      if (!isSizeOk || !isMimeOk) {
-        // Xây dựng thông báo lỗi chi tiết cho từng file không thỏa.
-        const reasons: string[] = [];
-        if (!isMimeOk) reasons.push(`định dạng không hợp lệ`);
-        if (!isSizeOk) reasons.push(`kích thước vượt ${maxSizeInMB}MB`);
-
-        this.nzMessage.error(
-          `"${file.name}" không được tải lên: ${reasons.join(", ")}.`,
-        );
-
-        // Propagate để CVA/validator hiển thị trạng thái lỗi trên control.
-        this.propagateValue(originFile);
-        resolve(false);
-        continue;
-      }
-
-      // File hợp lệ: thêm optimistic entry vào allFiles với trạng thái loading ngay lập tức.
-      // Dùng file.uid (do nz-upload tự tạo, duy nhất cho mỗi NzUploadFile) làm key để track và update sau này.
-      const uid = file.uid;
-      this.allFiles.update((curr) => [
-        ...curr,
-        {
-          uid,
-          objStorage: { id: uid, name: originFile.name }, // placeholder, sẽ được thay bằng data thật sau khi upload
-          isTemp: true,
-          previewUrl: "",
-          uploadStatus: "loading",
-        } as MyUploadFile,
-      ]);
-
-      // Propagate để trigger validator, tăng pendingCount, cho phép upload.
-      this.propagateValue(originFile);
-      this.pendingCount.update((c) => c + 1);
-      resolve(true);
-    }
-  }
-
-  customRequest = (item: NzUploadXHRArgs): Subscription => {
-    // const originFile = nzUploadFile?.originFileObj;
-    const uid = item.file.uid; // Stable key để map với optimistic entry trong allFiles.
-    const originFile = item.file as unknown as File;
-
-    // Nếu validation không thỏa, dừng tại đây và xóa optimistic entry khỏi list.
-    if (this.control?.invalid) {
-      this.pendingCount.update((c) => Math.max(0, c - 1));
-      this.allFiles.update((curr) => curr.filter((f) => f.uid !== uid));
-      return of(null).subscribe(); // fake subscription.
-    }
-
-    // Validation đã thỏa, tiến hành upload file.
-    return this.uploadFile(originFile, uid);
-  };
-
-  private uploadFile(file: File, uid: string) {
-    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())
-      .subscribe({
-        next: (res) => {
-          // Giảm pending dù thành công hay thất bại.
-          this.pendingCount.update((c) => Math.max(0, c - 1));
-
-          const { code, data, message } = res;
-          if (code === 0) {
-            // Cập nhật objStorageList với data thật từ server.
-            this.objStorageList.update((curr) => [...curr, data]);
-
-            // Thay thế optimistic entry (uid) bằng data thật, chuyển sang trạng thái success.
-            this.allFiles.update((curr) =>
-              curr.map((f) =>
-                f.uid === uid
-                  ? ({
-                      ...f,
-                      objStorage: data,
-                      previewUrl: this.formConfigService.getViewFileUrl(
-                        data.name ?? "",
-                        true,
-                      ),
-                      uploadStatus: "success",
-                    } as MyUploadFile)
-                  : f,
-              ),
-            );
-
-            this.patchFormData(
-              this.fieldKey(),
-              JSON.stringify(this.objStorageList()),
-            );
-            // Đồng bộ control value → validators (required) nhận biết có file thành công.
-            this._syncControlValue();
-          } else {
-            // Cập nhật optimistic entry sang trạng thái error.
-            this.allFiles.update((curr) =>
-              curr.map((f) =>
-                f.uid === uid
-                  ? ({ ...f, uploadStatus: "error" } as MyUploadFile)
-                  : f,
-              ),
-            );
-            console.error(message);
-            // Đồng bộ control value → nếu tất cả file đều fail, objStorageList rỗng → required kích hoạt.
-            this._syncControlValue();
-          }
-        },
-        error: () => {
-          // Giảm pending khi upload thất bại.
-          this.pendingCount.update((c) => Math.max(0, c - 1));
-          // Cập nhật optimistic entry sang trạng thái error.
-          this.allFiles.update((curr) =>
-            curr.map((f) =>
-              f.uid === uid
-                ? ({ ...f, uploadStatus: "error" } as MyUploadFile)
-                : f,
-            ),
-          );
-          console.error("Lỗi trong quá trình tải tập đến máy chủ!!");
-          // Đồng bộ control value → nếu tất cả file đều fail → required kích hoạt.
-          this._syncControlValue();
-        },
-      });
-  }
-
-  handleDelete(file: MyUploadFile): void {
-    const { objStorage, uploadStatus } = file;
-    const { uploadTemp } = this.field();
-
-    // 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);
-
-    // File ở trạng thái error: upload chưa thành công, không cần gọi API xoá trên server.
-    if (uploadStatus === "error") {
-      this.patchFormData(
-        this.fieldKey(),
-        JSON.stringify(this.objStorageList()),
-      );
-      // Đồng bộ control value → nếu xóa hết file error còn lại → required kích hoạt.
-      this._syncControlValue();
-      return;
-    }
-
-    if (uploadTemp) {
-      this.deleteObjStorage(objStorage.id || "");
-      return;
-    }
-
-    // Cập nhật đầu ra cho form.
-    this.patchFormData(this.fieldKey(), JSON.stringify(this.objStorageList()));
-    // Đồng bộ control value → nếu xóa hết file → required kích hoạt.
-    this._syncControlValue();
-  }
-
-  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()),
-            );
-            // Đồng bộ control value sau khi server xác nhận xóa.
-            this._syncControlValue();
-          } else {
-            console.error(message);
-          }
-        },
-        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()),
-          );
-          // Đồng bộ control value (fake delete thành công).
-          this._syncControlValue();
-          // Fake vì hiện api xóa đang có vấn đề.
-        },
-      });
-  }
-
-  /**
-   * Xử lý click vào file item:
-   * - Không làm gì nếu file đang loading hoặc ở trạng thái error.
-   * - Gọi fileClick để xem file nếu đã upload thành công.
-   */
-  onFileItemClick(file: MyUploadFile): void {
-    if (file.uploadStatus === "loading" || file.uploadStatus === "error")
-      return;
-    this.fileService.onFileClick(file.objStorage);
-  }
-
-  fileClick(objStorage: ObjectStorage): void {
-    this.fileService.onFileClick(objStorage);
-  }
-
-  /**
-   * Hủy toàn bộ batch đang chờ xử lý:
-   * - Clear timer batch detection.
-   * - Reject tất cả file trong buffer (resolve false).
-   * - Reset pendingCount về 0.
-   * Gọi khi form bị reset từ bên ngoài.
-   */
-  private _clearBatch(): void {
-    if (this._batchTimer !== null) {
-      clearTimeout(this._batchTimer);
-      this._batchTimer = null;
-    }
-    this._batchBuffer.forEach(({ resolve }) => resolve(false));
-    this._batchBuffer = [];
-    this.pendingCount.set(0);
-  }
-
-  /**
-   * Đồng bộ control value với trạng thái thực tế của danh sách file đã upload thành công.
-   *
-   * Gọi sau mỗi thay đổi về danh sách file (upload xong, xóa file) để đảm bảo:
-   * - Không có file nào thành công → propagateValue('') → Validators.required kích hoạt.
-   * - Có ít nhất 1 file thành công → propagateValue(JSON string) → validators pass.
-   *
-   * Validators hiện tại tương thích:
-   * - acceptedMimeTypesValidator: bỏ qua nếu value falsy; parse JSON nếu là string.
-   * - maxFileSizeInMBValidator: bỏ qua nếu value.size undefined (JSON string).
-   */
-  private _syncControlValue(): void {
-    const list = this.objStorageList();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.propagateValue((list.length > 0 ? JSON.stringify(list) : "") as any);
-  }
-}

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

@@ -1,82 +0,0 @@
-@if (isAddOrEdit()) {
-  <div class="upload">
-    <nz-upload
-      [nzDisabled]="
-        allFiles().length >= field().maxFileCount ||
-        disabledSignal() ||
-        uploading()
-      "
-      [nzShowUploadList]="false"
-      [nzMultiple]="false"
-      [nzBeforeUpload]="beforeUpload"
-      [nzCustomRequest]="customRequest"
-    >
-      <button nz-button class="btn-upload" [nzLoading]="uploading()">
-        Tải lên
-        @if (!uploading()) {
-          <nz-icon nzType="upload" nzTheme="outline" />
-        }
-      </button>
-
-      <span class="ms-2 text-muted fs-12">
-        (Đã tải lên {{ allFiles().length }}/{{ field().maxFileCount }}
-        hình ảnh)
-      </span>
-    </nz-upload>
-  </div>
-}
-
-<!-- Custom hiển thị danh sách hình ảnh -->
-@if (allFiles().length > 0) {
-  <ng-container *ngTemplateOutlet="imageGroupTpl"></ng-container>
-}
-
-<!-- Template custom hiển thị danh sách hình ảnh -->
-<ng-template #imageGroupTpl>
-  <nz-image-group>
-    <div class="image-list">
-      @for (file of allFiles(); track file.objStorage?.id; let i = $index) {
-        <div
-          class="image-card-container"
-          [ngStyle]="{
-            width: field().imageCardWidth,
-            height: field().imageCardHeight,
-          }"
-        >
-          <div class="image-item">
-            <div class="image-item-info">
-              <img
-                [id]="file.objStorage.id"
-                nz-image
-                nzSrc="{{ file.previewUrl }}"
-                alt="{{ file.objStorage.originalName }}"
-              />
-            </div>
-
-            <div class="image-item-actions">
-              <button
-                nz-button
-                nzType="text"
-                nzSize="small"
-                (click)="handlePreview(file)"
-              >
-                <nz-icon nzType="eye" nzTheme="outline" />
-              </button>
-
-              @if (isAddOrEdit()) {
-                <button
-                  nz-button
-                  nzType="text"
-                  nzSize="small"
-                  (click)="handleDelete(file)"
-                >
-                  <nz-icon nzType="delete" nzTheme="outline" />
-                </button>
-              }
-            </div>
-          </div>
-        </div>
-      }
-    </div>
-  </nz-image-group>
-</ng-template>

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

@@ -1,80 +0,0 @@
-.upload {
-  margin-bottom: 0.625rem;
-  nz-upload {
-    .btn-upload {
-      margin-right: 0.75rem;
-    }
-  }
-}
-
-.image-list {
-  display: flex;
-  gap: 8px;
-  flex-wrap: nowrap;
-  overflow-x: auto; /* bật scroll ngang */
-  //max-width: 20%;
-
-  .image-card-container {
-    display: inline-block;
-    margin: 0px 0.5rem 0.5rem 0;
-    // width: 108px;
-    // height: 108px;
-    flex: 0 0 auto; /* item không co giãn, giữ kích thước */
-
-    .image-item {
-      padding: 0.5rem;
-      border: 1px solid #cbd5e1;
-      height: 100%;
-      cursor: pointer;
-      position: relative;
-
-      .image-item-info {
-        position: relative;
-        height: 100%;
-        overflow: hidden;
-
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-      }
-
-      .image-item-info::before {
-        position: absolute;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        opacity: 0;
-        transition: all 0.3s;
-        content: ' ';
-      }
-
-      .image-item-actions {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 10;
-        white-space: nowrap;
-        transform: translate(-50%, -50%);
-        transition: all 0.5s;
-        opacity: 0;
-        > button {
-          nz-icon {
-            font-size: 1rem !important;
-            color: #fdfdfdd9;
-          }
-        }
-      }
-    }
-
-    .image-item:hover {
-      .image-item-info::before,
-      .image-item-actions {
-        opacity: 1;
-      }
-    }
-  }
-}

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

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiImageUploadComponent } from './multi-image-upload.component';
-
-describe('MultiImageUploadComponent', () => {
-  let component: MultiImageUploadComponent;
-  let fixture: ComponentFixture<MultiImageUploadComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MultiImageUploadComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MultiImageUploadComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});