user

Synto-Angular/src/app/admin/admin.module.ts

@@ -11,12 +11,15 @@ import { TransectionProductManagementComponent } from './transection-product-man
 import { HistoryProductComponent } from './history-product/history-product.component';
 import { AdminRoutingModule } from './admin.routing';
 import { SharedModule } from '../shared/sharedmodule';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     CommonModule,
     AdminRoutingModule,
-    SharedModule
+    SharedModule,
+    FormsModule,
+    ReactiveFormsModule,
   ],
   declarations: [AdminComponent, UserManagementComponent, ProjectManagementComponent, ProductManagementComponent, ProjectEmployeeManagementComponent, ProjectProductManagementComponent, HomeAdminComponent, TransectionProductManagementComponent, HistoryProductComponent]
 })

Synto-Angular/src/app/admin/user-management/user-management.component.html

@@ -32,7 +32,7 @@
                   <a class="ti-dropdown-item" href="javascript:void(0)">All</a>
                 </div>
               </div> -->
-              <a href="javascript:void(0);"
+              <a (click)="newEmp()"
                 class="team-add-btn m-0 ti-btn ti-btn-secondary mx-1 whitespace-nowrap mt-1">
                 <i class="ti ti-circle-plus leading-none"> </i>Add New Contact
               </a>
@@ -84,10 +84,10 @@
                       <i class="ri ri-more-2-line text-lg leading-none"></i>
                     </a>
                     <div class="hs-dropdown-menu ti-dropdown-menu">
-                      <a class="ti-dropdown-item" href="javascript:void(0);"><i
-                          class="ri-share-line me-2 align-middle"></i>แก้ไข</a>
+                      <!-- <a class="ti-dropdown-item" href="javascript:void(0);"><i
+                          class="ri-share-line me-2 align-middle"></i>แก้ไข</a> -->
 
-                      <a class="ti-dropdown-item" href="javascript:void(0);"><i
+                      <a class="ti-dropdown-item" (click)="deleteUser(item)"><i
                           class="ri-delete-bin-5-line me-2 align-middle"></i>ลบ</a>
                     </div>
                   </div>
@@ -146,32 +146,44 @@
           </div>
         </div>
         <div class="mt-14 space-y-5">
-          <div class="mt-4 text-center">
-            <h2 class="text-xl font-semibold">{{selectedUser.first_name+ " "+selectedUser.last_name}}</h2>
-            <p class="text-sm text-gray-500 dark:text-white/70 font-semibold">
-              {{selectedUser.position}}
-            </p>
-          </div>
-          <h5 class="box-title my-3">ข้อมูลการติดต่อ</h5>
-          <div class="flex space-x-3 rtl:space-x-reverse">
-            <i
-              class="ri ri-phone-line text-lg leading-none p-3 avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm"></i>
-            <div class="my-auto">
-              <h5 class="text-sm font-semibold">เบอร์ติดต่อ</h5>
-              <a href="javascript:void(0);" class="text-xs text-gray-500 dark:text-white/70">{{selectedUser.phone}}</a>
-            </div>
-          </div>
-          <div class="flex space-x-3 rtl:space-x-reverse">
-            <i
-              class="ri ri-mail-line text-lg leading-none p-3 avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm"></i>
-            <div class="my-auto">
-              <h5 class="text-sm font-semibold">อีเมล</h5>
-              <a class="text-xs text-gray-500 dark:text-white/70">{{selectedUser.email}}</a>
+          <div class="mt-5">
+            <div class="space-y-4 text-start">
+              <div class="grid sm:grid-cols-12 gap-x-6">
+                <label class="col-span-3 my-auto ti-form-label whitespace-nowrap">ชื่อ:</label>
+                <input type="text" class="col-span-9 ti-form-input" placeholder="Enter Full Name"
+                  [(ngModel)]="selectedUser.first_name" />
+              </div>
+              <div class="grid sm:grid-cols-12 gap-x-6">
+                <label class="col-span-3 my-auto ti-form-label whitespace-nowrap">นามสกุล:</label>
+                <input type="text" class="col-span-9 ti-form-input" placeholder="Enter Full Name"
+                  [(ngModel)]="selectedUser.last_name" />
+              </div>
+              <div class="grid sm:grid-cols-12 gap-x-6">
+                <label class="col-span-3 my-auto ti-form-label whitespace-nowrap">อีเมล:</label>
+                <input type="email" class="col-span-9 ti-form-input" placeholder="Enter Email"
+                  [(ngModel)]="selectedUser.email" />
+              </div>
+              <div class="grid sm:grid-cols-12 gap-x-6">
+                <label class="col-span-3 my-auto ti-form-label whitespace-nowrap">รหัสผ่าน:</label>
+                <input type="password" class="col-span-9 ti-form-input" placeholder="Enter Email"
+                  [(ngModel)]="selectedUser.password" />
+              </div>
+              <div class="grid sm:grid-cols-12 gap-x-6">
+                <label class="col-span-3 my-auto ti-form-label whitespace-nowrap">เบอร์:</label>
+                <input type="number" class="col-span-9 ti-form-input" placeholder="Enter Phone No"
+                  [(ngModel)]="selectedUser.phone" />
+              </div>
+              <div class="grid sm:grid-cols-12 gap-x-6">
+                <label class="col-span-3 my-auto ti-form-label whitespace-nowrap">ตำแหน่ง:</label>
+                <input type="number" class="col-span-9 ti-form-input" placeholder="Enter Phone No"
+                  [(ngModel)]="selectedUser.position" />
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="box-footer"><button type="button" (click)="selectedUser = undefined"
+      <div class="box-footer"> <button type="button" class="w-full ti-btn ti-btn-primary" (click)="save()">
+          <i class="ti ti-report"></i>บันทึก</button><button type="button" (click)="selectedUser = undefined"
           class="w-full ti-btn font-medium border-gray-200 bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
           <i class="ti ti-ban"></i>ปิด
         </button>

Synto-Angular/src/app/admin/user-management/user-management.component.ts

@@ -20,6 +20,7 @@ export class UserManagementComponent {
   getUser() {
     this.userService.getLists().subscribe(result => {
       this.memberlist = result
+      this.selectedUser = undefined
     })
   }
 
@@ -29,32 +30,51 @@ export class UserManagementComponent {
     })
   }
 
-  saveUser() {
+  save() {
+    console.log(this.selectedUser)
+    if (!this.selectedUser?.user_id) {
+      this.createUser()
+    } else {
+      this.updateUser()
+    }
+  }
+
+  createUser() {
     if (this.selectedUser) {
       this.userService.save(this.selectedUser).subscribe(result => {
         console.log(result)
+        this.getUser()
       })
     }
   }
 
-  deleteUser() {
+  updateUser() {
     if (this.selectedUser) {
-      this.userService.delete(this.selectedUser).subscribe(result => {
+      this.userService.update(this.selectedUser).subscribe(result => {
         console.log(result)
+        this.getUser()
       })
     }
   }
 
-  updateUser() {
+  deleteUser(item: UserProfileModel) {
+    this.selectedUser = new UserProfileModel(item)
     if (this.selectedUser) {
-      this.userService.update(this.selectedUser).subscribe(result => {
+      this.userService.delete(this.selectedUser).subscribe(result => {
         console.log(result)
+        this.getUser()
       })
     }
   }
 
+
+
+  newEmp() {
+    this.selectedUser = new UserProfileModel()
+  }
+
   detailEmp(emp: UserProfileModel) {
-    this.selectedUser = emp
+    this.selectedUser = new UserProfileModel(emp)
 
   }
 

Synto-Angular/src/app/models/user.model.ts

-import { TranslateService } from "@ngx-translate/core";
-import { BaseModel } from "./base.model";
-
-export class UserProfileModel extends BaseModel {
-  user_id: string;
+export class UserProfileModel {
+  user_id?: string;
   first_name: string;
   last_name: string;
   picture: string;
   phone: string = "-";
   position: string = "-";
   email: string;
-  role: string;
+  password: string;
+  role: string = "employee";
   constructor(
-    data?: Partial<UserProfileModel>,
-    translateService?: TranslateService
+    data?: Partial<UserProfileModel>
   ) {
-    super(data, translateService);
     this.user_id = data?.user_id!;
     this.first_name = data?.first_name!
     this.last_name = data?.last_name!
     this.picture = data?.picture!
     this.phone = data?.phone ? data.phone : this.phone
     this.email = data?.email!
-    this.position =  data?.position ? data.position : this.position
-    this.role = data?.role!
+    this.position = data?.position ? data.position : this.position
+    this.password = data?.password!
+    this.role = data?.role ? data.role : this.role
   }
 }