download upload

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.html

@@ -2,12 +2,13 @@
     <div class="flex justify-between">
         <div class="flex pr-2">
             <div class="px-1">
-                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
+                    data-hs-overlay="#department-register-upload-modal">
                     <i class="ri-add-line"></i>
                     นำเข้าข้อมูล
                 </button>
                 <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
-                    href="javascript:void(0);">
+                    href="javascript:void(0);" (click)="downloadFile()">
                     ดาวน์โหลดตัวอย่างไฟล์
                 </a>
             </div>
@@ -333,4 +334,34 @@
             </div>
         </div>
     </div>
+</div>
+
+<div id="department-register-upload-modal" class="hs-overlay hidden ti-modal">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+        <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
+            <h5 class="text-xxl font-bold text-white">
+                นำเข้าฝ่าย
+            </h5>
+        </div>
+        <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
+            <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
+            <div class="mt-2 p-2">
+                <div class="flex rounded-md">
+                    <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
+                    <input type="text" [value]="selectedFileName" readonly
+                        class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
+                    <button type="button" (click)="fileInput.click()"
+                        class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
+                        <i class="ti ti-upload"></i>
+                    </button>
+                </div>
+                <div class="flex justify-center mt-2rem mb-1rem space-x-4">
+                    <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
+                        [disabled]="!selectedFile">
+                        อัปโหลด
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, } from '@ang
 import { ToastrService } from 'ngx-toastr';
 import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
 import { Bu1Service } from 'src/app/shared/services/bu1.service';
+import { FileService } from 'src/app/shared/services/file.service';
 
 @Component({
   selector: 'app-department-register',
@@ -15,13 +16,63 @@ export class DepartmentRegisterComponent implements OnInit {
   bu1ListLoading = false
   bu1: Bu1Model = new MyBu1Model({})
   search = ""
+
+  selectedFile: File | null = null;
+  selectedFileName: string = 'กรุณาเลือกไฟล์';
   constructor(private bu1Service: Bu1Service,
     private toastr: ToastrService,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private fileService: FileService
   ) { }
   ngOnInit(): void {
     this.getBu1List()
   }
+  onFileSelected(event: any) {
+    this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
+    this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
+  }
+
+  uploadFile() {
+    if (!this.selectedFile) {
+      alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
+      return
+    }
+    const formData = new FormData();
+    formData.append('file', this.selectedFile);
+    this.fileService.upload(formData, 'mbu1').subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getBu1List()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+      }
+    })
+  }
+
+  downloadFile() {
+    const fileName = 'IMPORT_BU.xlsx'
+    this.fileService.download(fileName).subscribe({
+      next: response => {
+        const url = window.URL.createObjectURL(response);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+      }
+    })
+
+  }
+
+
   getBu1List() {
     this.bu1ListLoading = true
     this.bu1Service.getList().subscribe({
@@ -41,39 +92,45 @@ export class DepartmentRegisterComponent implements OnInit {
     this.page = Array.from({ length: Math.ceil(this.bu1ListFilter().length / 10) }, (_, i) => i + 1);
   }
   bu1ListFilter() {
-    return this.bu1List.filter(x => x.bu1id.includes(this.search) ||
-      x.tdesc.includes(this.search) ||
-      x.edesc.includes(this.search))
+    return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.search.toLowerCase()))
   }
   selectBu1(bu1?: Bu1Model) {
     this.bu1 = new MyBu1Model(bu1 || {})
   }
 
-  showSuccessAdd() {
-    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
-  }
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
-    });
+    })
   }
   addBu1() {
-    this.bu1Service.post(this.bu1).subscribe((response: any) => {
-      if (response.success) {
-        this.showSuccessAdd()
-        this.getBu1List()
+    this.bu1Service.post(this.bu1).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getBu1List()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
       }
     })
   }
   deleteBu1() {
-    this.bu1Service.delete(this.bu1).subscribe((response: any) => {
-      if (response.success) {
-        this.showSuccessDelete()
-        this.getBu1List()
+    this.bu1Service.delete(this.bu1).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getBu1List()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
       }
     })
   }

src/app/components/dashboard/dashboard.module.ts

@@ -129,6 +129,7 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { NativeDateAdapter } from '@angular/material/core';
 import { BranchService } from 'src/app/shared/services/่branch.service';
 import { JobCodeService } from 'src/app/shared/services/่job-code.service';
+import { FileService } from 'src/app/shared/services/file.service';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -288,6 +289,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     EmployeeService,
     JobCodeService,
     BranchService,
+    FileService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/services/bu1.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { Bu1Model } from '../model/bu1.model';
+import { AlertModel } from '../model/alert.model';
 @Injectable({
   providedIn: 'root'
 })
@@ -17,16 +18,16 @@ export class Bu1Service {
   getById(bu1id: string): Observable<Bu1Model> {
     return this.http.get<Bu1Model>(this.urlApi + "/" + bu1id)
   }
-  post(body: Bu1Model) {
-    return this.http.post(this.urlApi, body)
+  post(body: Bu1Model): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi, body)
   }
-  delete(body: Bu1Model) {
+  delete(body: Bu1Model): Observable<AlertModel> {
     const options = {
       headers: new HttpHeaders({
         "Content-Type": "application/json",
       }),
       body: body
     };
-    return this.http.delete(this.urlApi, options)
+    return this.http.delete<AlertModel>(this.urlApi, options)
   }
 }

src/app/shared/services/file.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { AlertModel } from '../model/alert.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService {
+  constructor(private http: HttpClient) {
+  }
+
+  upload(formData: any, table: string): Observable<AlertModel> {
+    return this.http.post<AlertModel>(environment.baseUrl + '/import/excel/' + table, formData)
+  }
+  download(fileName: string) {
+    return this.http.get("/assets/template/" + fileName, { responseType: "blob" })
+  }
+}