feat(graph): Connect upload node to backend (#57)

Co-authored-by: Armin <[email protected]>

src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.html

@@ -6,8 +6,10 @@
 @switch (current) { @case (0) {
 <div class="upload-container">
   <h4 nz-typography>Create a node category</h4>
-  <p nz-paragraph>Or dont , you can use existing categories</p>
-  <input nz-input placeholder="Node category" type="text" [(ngModel)]="nodecategory" />
+  <div class="input-container">
+    <p nz-paragraph>Or dont , you can use existing categories</p>
+    <input nz-input placeholder="Node category" type="text" [(ngModel)]="nodecategory" />
+  </div>
   <div class="upload-container__btn-container">
     <div class="upload-container__btn-container__nav-btn-container">
       @if (current !==0) {
@@ -23,27 +25,56 @@ <h4 nz-typography>Create a node category</h4>
 } @case (1) {
 <div class="upload-container">
   <h4 nz-typography>Upload nodes file</h4>
-  <h5 nz-typography>Select which node category</h5>
-  <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a node category">
-    @for (item of nodeCategoryList; track $index) {
-    <nz-option nzLabel="{{ item }}" nzValue="{{ item }}"></nz-option>
-    }
-  </nz-select>
-  <h5 nz-typography>UniqueKey header name</h5>
-  <input nz-input placeholder="UniqueKey header name" type="number" />
-  <h5 nz-typography>Upload nodes file</h5>
-  <nz-upload
-  [nzBeforeUpload]="beforeUpload"
-  [nzHeaders]="{ authorization: 'authorization-text' }"
->
-  <button nz-button>
-    <span nz-icon nzType="upload"></span>
-    Click to Upload
-  </button>
-</nz-upload>
-  <div class="upload-container__btn-container">
-    <button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="back()">Back</button>
-    <button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="submit()">Submit</button>
-  </div>
+  <form nz-form [formGroup]="uploadForm">
+    <div class="input-container">
+      <h5 nz-typography>Select which node category</h5>
+      <nz-select
+        nzShowSearch
+        nzAllowClear
+        nzPlaceHolder="Select a node category"
+        formControlName="NodeCategoryName"
+        [(ngModel)]="nodecategory"
+      >
+        @for (item of nodeCategoryList; track $index) {
+        <nz-option nzLabel="{{ item }}" nzValue="{{ item }}"></nz-option>
+        }
+      </nz-select>
+    </div>
+
+    <div class="input-container">
+      <h5 nz-typography>UniqueKey header name</h5>
+      <input nz-input formControlName="UniqueKeyHeaderName" placeholder="UniqueKey header name" type="text" />
+    </div>
+
+    <div>
+      <h5 nz-typography>Upload nodes file</h5>
+      <nz-upload [nzBeforeUpload]="beforeUpload">
+        <button nz-button>
+          <span nz-icon nzType="upload"></span>
+          Click to Upload
+        </button>
+      </nz-upload>
+    </div>
+
+    <div class="upload-container__btn-container">
+      <button class="btn" nz-button nzType="primary" [nzSize]="'default'" nzShape="round" (click)="back()">Back</button>
+      <button
+        class="btn"
+        nz-button
+        nzType="primary"
+        [nzSize]="'default'"
+        nzShape="round"
+        (click)="submit()"
+        [disabled]="!uploadForm.valid"
+      >
+      @if(isPending){
+        <nz-spin nzSimple></nz-spin>
+      }@else{
+        Submit
+      }
+
+      </button>
+    </div>
+  </form>
 </div>
 } }

src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.scss

@@ -1,21 +1,44 @@
-.upload-container{
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  h4, h5 {
+    margin: 0;
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &__btn-container {
+    display: flex;
+    justify-content: space-between;
+
+    &__nav-btn-container {
+      display: flex;
+      gap: 1rem;
+    }
+  }
+
+  form {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 
-    &__btn-container{
-        display: flex;
-        justify-content: space-between;
-
-        &__nav-btn-container{
-            display: flex;
-            gap: 1rem;
-        }
+    button:disabled {
+      color: rgba(0, 0, 0, 0.25);
+      border-color: #d9d9d9;
+      background: #f5f5f5;
+      text-shadow: none;
+      box-shadow: none;
     }
+  }
 }
 
-.btn{
-    background-color: #1f66a8;
-    border: 0;
+.btn {
+  background-color: #1f66a8;
+  border: 0;
 }
-

src/app/components/graph-components/toolbarl/toolbar-components/upload-component/upload-node/upload-node.component.ts

@@ -10,9 +10,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NgIf } from '@angular/common';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { UploadGraphService } from '../../../../../../services/upload-graph/upload-graph.service';
-import { FormsModule } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NotificationService } from '../../../../../../services/notification/notification.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 @Component({
   selector: 'app-upload-node',
@@ -27,22 +28,35 @@ import { HttpErrorResponse } from '@angular/common/http';
     NzUploadModule,
     NzIconModule,
     FormsModule,
+    ReactiveFormsModule,
+    NgIf,
+    NzSpinModule
+
   ],
-  providers: [NgIf],
+  providers: [FormControl],
   templateUrl: './upload-node.component.html',
   styleUrl: './upload-node.component.scss',
 })
 export class UploadNodeComponent {
+  uploadForm: FormGroup;
   nodecategory = '';
   nodeCategoryList!: string[];
   current = 0;
   selectedFile: NzUploadFile | null = null;
+  isPending = false;
 
   constructor(
+    private fb: FormBuilder,
     private msg: NzMessageService,
     private uploadGraphService: UploadGraphService,
     private notificationService: NotificationService
-  ) {}
+  ) {
+    this.uploadForm = this.fb.group({
+      NodeCategoryName: ['', Validators.required],
+      UniqueKeyHeaderName: ['', Validators.required],
+      File: [null, Validators.required],
+    });
+  }
 
   next() {
     if (this.current !== 1) {
@@ -66,7 +80,7 @@ export class UploadNodeComponent {
         if (error.status === 401) {
           errorMessage = 'Unauthorized: Invalid username or password';
         } else if (error.status === 400) {
-          errorMessage = 'Bad Request: Old password is wrong!';
+          errorMessage = 'Bad Request: input cannot be empty!';
         }
 
         this.notificationService.createNotification('error', 'Unexpected Error', errorMessage);
@@ -89,20 +103,39 @@ export class UploadNodeComponent {
 
   beforeUpload = (file: NzUploadFile): boolean => {
     this.selectedFile = file;
-    this.msg.success(`${file.name} file uploaded successfully`);
+    this.uploadForm.patchValue({ 'File': file });
+    this.uploadForm.get('File')?.updateValueAndValidity();
+    this.msg.success(`${file.name} file selected successfully`);
+
+    console.log(this.uploadForm.value);
     return false;
   };
 
   submit() {
-    if (this.selectedFile) {
-      // this.uploadGraphService.uploadNodeData(this.selectedFile).subscribe({
-      //   next: (response) => {
-      //     console.log(response);
-      //   },
-      //   error: (error: HttpErrorResponse) => {
-      //     console.log(error);
-      //   },
-      // });
+    if (this.uploadForm.valid) {
+      this.isPending = true;
+      const formData = new FormData();
+      formData.append('NodeCategoryName', this.uploadForm.value.NodeCategoryName);
+      formData.append('UniqueKeyHeaderName', this.uploadForm.value.UniqueKeyHeaderName);
+      formData.append('File', this.uploadForm.get('File')?.value as File);
+
+
+      this.uploadGraphService.uploadNodeData(formData).subscribe({
+        next: (response) => {
+          this.notificationService.createNotification('success', 'Success', response.message);
+          this.isPending = false;
+        },
+        error: (error: HttpErrorResponse) => {
+          let errorMessage = 'An unexpected error occurred';
+          if (error.status === 401) {
+            errorMessage = 'Unauthorized: Invalid username or password';
+          } else if (error.status === 400) {
+            errorMessage = error.error.message;
+          }
+
+          this.notificationService.createNotification('error', 'Unexpected Error', errorMessage);
+        },
+      });
     }
   }
 }

src/app/models/node-upload.ts

@@ -0,0 +1,5 @@
+export interface nodeUpload {
+  NodeCategoryName: string;
+  UniqueKeyHeaderName: string;
+  File: File;
+}

src/app/services/upload-graph/upload-graph.service.ts

@@ -22,12 +22,11 @@ export class UploadGraphService {
     return this.http.get<string[]>(`${this.URL}/api/Node/categories`, { headers, withCredentials: true });
   }
 
-  // uploadNodeData(data: any) {
+  uploadNodeData(data: FormData) {
+    console.log(data.get('file'));
 
-  //   const headers = { 'Content-Type': 'application/json' };
-
-  //   return this.http.post<loginResponse>(`${this.URL}/api/Node`, data, { headers, withCredentials: true });
-  // }
+    return this.http.post<loginResponse>(`${this.URL}/api/Node`, data, {withCredentials: true});
+  }
 
   addEdgeCategory(edgeCategory: string) {
     const data = { edgeCategoryName: edgeCategory };