@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

@@ -0,0 +1,217 @@
+import {
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  Input,
+  signal,
+} from "@angular/core";
+import {
+  NzUploadFile,
+  NzUploadModule,
+  NzUploadXHRArgs,
+} from "ng-zorro-antd/upload";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { AvatarUploadField } from "../../../../models/fields/upload/avatar-upload-field.model";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { ObjectStorage } from "../../../../models/common";
+import { FileService } from "../../../../services/file.service";
+import { isValidJSON } from "../../../../utils/common";
+import { finalize, Observable, of, Subscription } from "rxjs";
+import { formatFileSize } from "../../../../utils/file";
+import { FileSizeTypeEnum } from "../../../../enums/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { FormConfigService } from "../../../../services/form-config.service";
+import { NzNotificationService } from "ng-zorro-antd/notification";
+import { CommonModule } from "@angular/common";
+import {
+  DELETE_FILE_ERROR,
+  UPLOAD_FILE_ERROR,
+} from "../../../../consts/common";
+
+const modules = [CommonModule];
+const zorroModules = [NzUploadModule, NzIconModule];
+
+@Component({
+  selector: "app-avatar-upload",
+  standalone: true,
+  imports: [...modules, ...zorroModules],
+  templateUrl: "./avatar-upload.component.html",
+  styleUrl: "./avatar-upload.component.scss",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AvatarUploadComponent),
+      multi: true,
+    },
+  ],
+})
+export class AvatarUploadComponent extends BaseValueAccessor<string | File> {
+  @Input() size: number = 100; // kích thước avatar
+
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof AvatarUploadField) ||
+      (base.type !== FieldTypeEnum.AvatarUpload &&
+        base.controlType !== ControlTypeEnum.Upload)
+    ) {
+      throw new Error("Expected AvatarUploadField");
+    }
+    return base;
+  });
+
+  // Inject services
+  private readonly fileService = inject(FileService);
+  private readonly formConfigService = inject(FormConfigService);
+  private readonly nzNotification = inject(NzNotificationService);
+
+  readonly avatarUrl = signal<string | null>(null);
+  readonly uploading = signal(false);
+
+  // Mảng lưu trữ objectStorage liên quan đến tập tin.
+  readonly objStorageList = signal<ObjectStorage[]>([]);
+
+  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.avatarUrl.set(null);
+
+    if (isValidJSON(value)) {
+      const objStorageList = JSON.parse(value) as ObjectStorage[];
+      this.objStorageList.set(objStorageList);
+      this.avatarUrl.set(
+        this.formConfigService.getViewFileUrl(
+          objStorageList[0]?.name ?? "",
+          false,
+        ),
+      );
+    }
+  }
+
+  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 { uploadTemp } = this.field();
+    const newFileName = this.formConfigService.generateRandomFileName(
+      file.name,
+      "avatar",
+    );
+    const renamedFile = new File([file], newFileName, { type: file.type });
+
+    const formData = new FormData();
+    formData.append("File", renamedFile);
+    if (uploadTemp) formData.append("isTemp", "true");
+
+    return this.fileService
+      .uploadFile(renamedFile, formData, {
+        uploadUrl: this.field().apiFileConfig.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.avatarUrl.set(
+              this.formConfigService.getViewFileUrl(data?.name ?? "", true),
+            );
+
+            this.patchFormData(
+              this.fieldKey(),
+              JSON.stringify(this.objStorageList()),
+            );
+          } else {
+            console.error(message);
+          }
+        },
+        error: () => {
+          console.error(UPLOAD_FILE_ERROR);
+        },
+      });
+  }
+
+  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: (err: 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/components/fields/upload/multi-file-upload/multi-file-upload.component.html

@@ -0,0 +1,101 @@
+@if (isAddOrEdit()) {
+  <nz-upload
+    [nzShowUploadList]="false"
+    [nzMultiple]="true"
+    [nzBeforeUpload]="beforeUpload"
+    [nzCustomRequest]="customRequest"
+  >
+    <button nz-button class="btn-upload" nzType="primary" nzSize="small">
+      <nz-icon nzType="upload" nzTheme="outline" />
+      <span class="font-size-12">Tải lên</span>
+    </button>
+
+    <span class="font-size-12"
+      >( Tối đa {{ field().maxFileCount }} tập tin )</span
+    >
+
+    @if (field().showAcceptedExtensionGuide) {
+      <div class="file-extension-guide">{{ fileExtensionGuide() }}</div>
+    }
+  </nz-upload>
+}
+
+<!-- Custom hiển thị danh sách tập tin -->
+@if (allFiles().length > 0) {
+  <ng-container *ngTemplateOutlet="renderFileTpl"></ng-container>
+} @else {
+  @if (isView()) {
+    <span class="no-text-info">Không có thông tin</span>
+  }
+}
+
+<!-- Template custom hiển thị danh sách tập tin -->
+<ng-template #renderFileTpl>
+  <ul class="custom-upload-list">
+    @for (file of allFiles(); track file.objStorage?.id) {
+      <li
+        class="upload-item"
+        [class.is-loading]="file.uploadStatus === 'loading'"
+        [class.is-error]="file.uploadStatus === 'error'"
+        (click)="onFileItemClick(file)"
+      >
+        <!-- Icon trạng thái bên trái -->
+        @switch (file.uploadStatus) {
+          @case ("loading") {
+            <span
+              nz-icon
+              nzType="loading"
+              nzTheme="outline"
+              class="status-icon loading-icon"
+            ></span>
+          }
+          @case ("error") {
+            <span
+              nz-icon
+              nzType="close-circle"
+              nzTheme="fill"
+              class="status-icon error-icon"
+            ></span>
+          }
+          @default {
+            <span
+              nz-icon
+              nzType="paper-clip"
+              nzTheme="outline"
+              class="paper-clip-icon"
+            ></span>
+          }
+        }
+
+        <span class="file-name" [title]="file.objStorage.name ?? ''">{{
+          file.objStorage.name
+        }}</span>
+
+        @if (isAddOrEdit() && file.uploadStatus !== "loading") {
+          <span
+            nz-icon
+            nzType="delete"
+            nzTheme="outline"
+            title="Xóa"
+            class="delete-icon"
+            (click)="handleDelete(file); $event.stopPropagation()"
+          ></span>
+        }
+
+        @if (
+          !isAddOrEdit() &&
+          file.uploadStatus !== "error" &&
+          file.uploadStatus !== "loading"
+        ) {
+          <span
+            nz-icon
+            nzType="eye"
+            nzTheme="outline"
+            class="view-icon"
+            title="Xem file"
+          ></span>
+        }
+      </li>
+    }
+  </ul>
+</ng-template>

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

@@ -0,0 +1,117 @@
+.upload {
+  display: flex;
+}
+
+nz-upload {
+  .btn-upload {
+    margin-right: 0.75rem;
+  }
+
+  .file-extension-guide {
+    font-size: 11px;
+    margin-top: 8px;
+    font-style: italic;
+    color: #0f766e;
+  }
+}
+
+.no-text-info {
+  pointer-events: none;
+  background-color: white;
+  // font-size: 12px;
+  color: #575757 !important;
+}
+
+.custom-upload-list {
+  margin-top: 0.625rem;
+  list-style-type: none;
+  padding-inline-start: 10px;
+
+  .upload-item {
+    margin-bottom: 0.25rem;
+    display: flex;
+    align-items: center;
+    max-width: 100%;
+    gap: 0.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+
+    .paper-clip-icon {
+      margin-right: 0.5rem;
+      color: #595959;
+      flex-shrink: 0;
+    }
+
+    // Icon trạng thái chung
+    .status-icon {
+      flex-shrink: 0;
+    }
+
+    // Icon loading: màu xanh primary, animation spin tự động của nz-icon nzType="loading"
+    .loading-icon {
+      color: #1677ff;
+    }
+
+    // Icon error: màu đỏ
+    .error-icon {
+      color: #ff4d4f;
+    }
+
+    .file-name {
+      flex: 1; // chiếm hết không gian còn lại
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .file-name:hover {
+      text-decoration: underline;
+      color: #0a4c9f;
+      cursor: pointer;
+    }
+
+    .delete-icon {
+      color: red;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+
+    // Icon con mắt: chỉ hiển thị ở view mode, gợi ý click để xem file
+    .view-icon {
+      color: #1677ff;
+      flex-shrink: 0;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    &:hover .view-icon {
+      opacity: 1;
+    }
+
+    // Trạng thái đang upload: không cho click, mờ nhẹ
+    &.is-loading {
+      cursor: default;
+      opacity: 0.75;
+
+      .file-name:hover {
+        text-decoration: none;
+        color: inherit;
+        cursor: default;
+      }
+    }
+
+    // Trạng thái lỗi upload: nền đỏ nhạt, không cho click view
+    &.is-error {
+      cursor: default;
+
+      .file-name {
+        color: #ff4d4f;
+      }
+      .file-name:hover {
+        text-decoration: none;
+        color: #ff4d4f;
+        cursor: default;
+      }
+    }
+  }
+}

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

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