@ldquocc/dynamic-form 0.0.9 → 0.0.10

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

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

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

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

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