dev(ui): Make FormUploadComponent standalone

Signed-off-by: Kwong Tung Nan <[email protected]> (cherry picked from commit dc9eb09)
kwongtn · Jun 8, 2024 · 86c5883 · 86c5883
1 parent 311d77c
commit 86c5883
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 35 deletions.
diff --git a/src/app/@ui/spotting-image-list/spotting-image-list.module.ts b/src/app/@ui/spotting-image-list/spotting-image-list.module.ts
@@ -2,11 +2,13 @@ import { NzEmptyModule } from "ng-zorro-antd/empty";
 import { NzGridModule } from "ng-zorro-antd/grid";
 import { NzImageModule } from "ng-zorro-antd/image";
 import { NzSpinModule } from "ng-zorro-antd/spin";
+import {
+    FormUploadComponent,
+} from "src/app/@ui/spotting/form-upload/form-upload.component";
 
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { FormUploadModule } from "../spotting/form-upload/form-upload.module";
 import { SpottingImageListComponent } from "./spotting-image-list.component";
 
 @NgModule({
@@ -17,7 +19,7 @@ import { SpottingImageListComponent } from "./spotting-image-list.component";
         NzGridModule,
         NzSpinModule,
         NzEmptyModule,
-        FormUploadModule,
+        FormUploadComponent,
     ],
     exports: [SpottingImageListComponent],
 })

diff --git a/src/app/@ui/spotting/form-upload/form-upload.component.ts b/src/app/@ui/spotting/form-upload/form-upload.component.ts
@@ -1,10 +1,13 @@
 import { Message } from "ng-devui";
-import { IFileOptions, IUploadOptions } from "ng-devui/upload";
+import { IFileOptions, IUploadOptions, UploadModule } from "ng-devui/upload";
+import { NzPopconfirmModule } from "ng-zorro-antd/popconfirm";
+import { NzSpinModule } from "ng-zorro-antd/spin";
 import {
     ImageCompressionService,
 } from "src/app/services/image-compression/image-compression.service";
 import { ToastService } from "src/app/services/toast/toast.service";
 
+import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 const MAX_MEGABYTE = 9e6;
@@ -38,7 +41,9 @@ export class ImageFile {
         this.compressServiceInstance
             .ResizeImage(file, 300, 300)
             .then((resizedFile: File) => {
-                return this.compressServiceInstance.FileBlobToDataUrl(resizedFile);
+                return this.compressServiceInstance.FileBlobToDataUrl(
+                    resizedFile
+                );
             })
             .then((dataUrl: string) => {
                 this.buffer = dataUrl;
@@ -79,6 +84,8 @@ export class ImageFile {
     selector: "spotting-form-upload",
     templateUrl: "./form-upload.component.html",
     styleUrls: ["./form-upload.component.scss"],
+    standalone: true,
+    imports: [CommonModule, NzPopconfirmModule, NzSpinModule, UploadModule],
 })
 export class FormUploadComponent {
     @Input() imageWidth: string = "100px";
@@ -104,10 +111,12 @@ export class FormUploadComponent {
         return;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     beforeUpload(file: any) {
         return false;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     alertMsgEvent(messages: Message[]) {
         this.toastService.addMessage(
             `You can only upload images of type ${VALID_TYPES.join(", ")}`,
@@ -138,7 +147,7 @@ export class FormUploadComponent {
     onImageClick(fileName: string) {
         console.log(`Removing ${fileName} from upload list`);
         delete this.files[fileName];
-        
+
         this.newImageEvent.emit(this.files);
     }
 }
diff --git a/src/app/@ui/spotting/form-upload/form-upload.module.ts b/src/app/@ui/spotting/form-upload/form-upload.module.ts
diff --git a/src/app/insiden/insiden.module.ts b/src/app/insiden/insiden.module.ts
@@ -21,8 +21,8 @@ import { FormsModule } from "@angular/forms";
 
 import { ImageGridModule } from "../@ui/image-grid/image-grid.module";
 import {
-    FormUploadModule,
-} from "../@ui/spotting/form-upload/form-upload.module";
+    FormUploadComponent,
+} from "../@ui/spotting/form-upload/form-upload.component";
 import {
     CalendarIncidentSeverityModule,
 } from "../pipes/calendar-incident-severity/calendar-incident-severity.module";
@@ -72,7 +72,7 @@ import { InsidenMainComponent } from "./insiden.component";
 
         // Self-imports
         CalendarIncidentSeverityModule,
-        FormUploadModule,
+        FormUploadComponent,
         ImageGridModule,
     ],
     providers: [],

diff --git a/src/app/spotting/spotting.module.ts b/src/app/spotting/spotting.module.ts
@@ -25,8 +25,8 @@ import {
     SpottingImageListModule,
 } from "src/app/@ui/spotting-image-list/spotting-image-list.module";
 import {
-    FormUploadModule,
-} from "src/app/@ui/spotting/form-upload/form-upload.module";
+    FormUploadComponent,
+} from "src/app/@ui/spotting/form-upload/form-upload.component";
 import {
     SpottingStorageService,
 } from "src/app/services/spotting/storage.service";
@@ -109,7 +109,7 @@ import {
         // Internal Imports
         ActionListModule,
         CoordinatesHumanizerModule,
-        FormUploadModule,
+        FormUploadComponent,
         GraphQLModule,
         ImagePreviewButtonModule,
         LineStatusTagComponent,