Skip to content

B
BookingMyHrManagement
Commit cac967b5 by Ooh-Ao
Options

หน้าข้อมูลพนักงาน

parent 3adaa773
Showing with 191 additions and 256 deletions
Synto-Angular/src/app/admin/admin.module.ts
......@@ -10,11 +10,13 @@ import { HomeAdminComponent } from './home-admin/home-admin.component';
import { TransectionProductManagementComponent } from './transection-product-management/transection-product-management.component';
import { HistoryProductComponent } from './history-product/history-product.component';
import { AdminRoutingModule } from './admin.routing';
import { SharedModule } from '../shared/sharedmodule';
@NgModule({
imports: [
CommonModule,
AdminRoutingModule
AdminRoutingModule,
SharedModule
],
declarations: [AdminComponent, UserManagementComponent, ProjectManagementComponent, ProductManagementComponent, ProjectEmployeeManagementComponent, ProjectProductManagementComponent, HomeAdminComponent, TransectionProductManagementComponent, HistoryProductComponent]
})
......
Synto-Angular/src/app/admin/user-management/user-management.component.html
<!-- Page Header -->
<div class="block justify-between page-header sm:flex">
<div>
<h3
class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"
>
Members
</h3>
</div>
<ol class="flex items-center whitespace-nowrap min-w-0">
<li class="text-sm">
<a
class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate"
href="javascript:void(0);"
>
Pages
<i
class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"
></i>
</a>
</li>
<li
class="text-sm text-gray-500 hover:text-primary dark:text-white/70"
aria-current="page"
>
Members
</li>
</ol>
</div>
<!-- Page Header Close -->
<app-page-header title="Contacts" title1="Contacts" activeitem="Pages"></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12">
<div class="grid grid-cols-12 gap-x-5">
<div class="col-span-12 xxl:col-span-9">
<div class="box">
<div class="box-body">
<div class="lg:grid grid-cols-12 gap-6 space-y-6 lg:space-y-0">
<div class="box-header">
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12 lg:col-span-4">
<div class="relative max-w-xs">
<div class="relative sm:max-w-xs max-w-[210px]">
<label for="hs-table-search" class="sr-only">Search</label>
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4"
>
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none ltr:pr-4 rtl:pl-4">
<i class="ti ti-search"></i>
</div>
<input
type="text"
name="hs-table-search"
id="hs-table-search"
class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input"
placeholder="Enter Your Text"
/>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="text-center max-w-xs lg:mx-auto">
<nav
class="flex justify-center space-x-3 rtl:space-x-reverse"
aria-label="Tabs"
role="tablist"
></nav>
<input type="text" name="hs-table-search" id="hs-table-search"
class="p-2 ltr:pr-10 rtl:pl-10 ti-form-input" placeholder="Search Contact" />
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div
class="flex space-x-3 rtl:space-x-reverse lg:justify-end team-right"
>
<div class="hs-tooltip ti-main-tooltip">
<a
href="javascript:void(0);"
class="team-add-btn m-0 hs-tooltip-toggle ti-btn ti-btn-primary"
routerLink="../profile/profilesettings"
>
Add Profile
<i class="ti ti-circle-plus text-xl leading-none"></i>
<span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
role="tooltip"
>
Add member
</span>
</a>
</div>
<div class="col-span-12 lg:sm:col-span-8">
<div class="flex items-center flex-wrap lg:justify-end team-right rtl:space-x-reverse">
<!-- <div class="hs-dropdown ti-dropdown me-2 mt-1">
<button id="hs-dropdown-custom-icon-trigger2" type="button"
class="hs-dropdown-toggle ti-btn ti-btn-primary m-0">
Sort By<i class="ri-arrow-down-s-line align-middle"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="hs-dropdown-custom-icon-trigger2">
<a class="ti-dropdown-item" href="javascript:void(0)">A To Z</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Z To A</a>
<a class="ti-dropdown-item" href="javascript:void(0)">Favorites</a>
<a class="ti-dropdown-item" href="javascript:void(0)">All</a>
</div>
</div> -->
<a href="javascript:void(0);"
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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->
<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12">
<div class="ti-tab-content">
<div id="tab-style-1" role="tabpanel" aria-labelledby="tab-1">
<section class="mb-6">
<div class="flex flex-wrap">
<div class="w-full px-4">
<div class="mx-auto max-w-lg text-center"></div>
</div>
</div>
</section>
<div class="grid grid-cols-12 gap-6">
<div
class="col-span-12 md:col-span-6 xxl:col-span-3 team-box"
*ngFor="let user of memberlist"
>
<div class="box overflow-hidden mb-0">
<div
class="block relative -mb-32 before:bg-primary/70 before:absolute before:w-full before:h-full"
>
<img
src="./assets/img/png-images/2.png"
alt=""
class="w-full h-32"
/>
<div class="box-body">
<div class="sm:grid sm:space-y-0 space-y-6 xl:!grid-cols-3 md:grid-cols-2 gap-6">
<div class="box mb-0" *ngFor="let item of memberlist">
<div class="box-body space-y-5">
<div class="flex">
<div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
<img class="avatar avatar-lg rounded-sm"
src="{{item.picture ? item.picture : './assets/img/users/1.jpg'}}" alt="Image Description" />
<div class="space-y-1 my-auto truncate">
<h5 class="font-semibold text-base leading-none">
{{item.first_name+' '+item.last_name}}
</h5>
<p class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]">
{{item.email}}
</p>
<p class="text-primary dark:text-primary text-xs font-semibold">
{{item.phone}}
</p>
</div>
</div>
<!-- <div class="ltr:ml-auto rtl:mr-auto">
<a aria-label="anchor" href="javascript:void(0);"><i
class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
</div> -->
</div>
<div class="box-body">
<div class="justify-center text-center relative">
<a
class="relative inline-block mt-8"
routerLink="/profile/home"
>
<img
src="./assets/img/users/5.jpg"
class="w-24 h-24 rounded-full ring-4 ring-gray-100 mx-auto dark:ring-white/10"
alt="user-img"
/>
<span
class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white dark:ring-white/10 text-gray-500 dark:text-white/70 bg-gray-100 dark:bg-bgdark leading-none"
><i class="ri ri-pencil-line"></i
></span>
</div>
<div class="box-footer">
<div class="grid grid-cols-12">
<div class="sm:col-span-10 col-span-4" (click)="detailEmp(item)">
<a href="javascript:void(0);"
class="inline-flex !p-1 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
<i class="ri-chat-2-line text-lg leading-none"></i>
<span class="text-sm leading-none hidden sm:block">ข้อมูล</span>
</a>
<div class="space-y-2">
<div class="mt-4">
<h2 class="text-base font-semibold">
{{ user.first_name }}{{ user.last_name }}
</h2>
<p class="text-xs text-gray-500 dark:text-white/70">
{{ user.email }}
</p>
</div>
<div class="sm:col-span-2 col-span-4">
<div class="hs-dropdown ti-dropdown flex justify-end">
<a aria-label="anchor" href="javascript:void(0);"
class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-1 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/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-delete-bin-5-line me-2 align-middle"></i>ลบ</a>
</div>
<span
class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-sm text-xs font-medium bg-primary/20 text-primary"
>{{ user.role }}</span
>
<div
class="flex space-x-1 rtl:space-x-reverse justify-center text-center"
></div>
</div>
<a
aria-label="anchor"
href="javascript:void(0);"
class="z-40 absolute top-0 ltr:left-0 rtl:right-0 block text-yellow-500 text-base hover:text-yellow-500"
></a>
<div
class="hs-dropdown ti-dropdown z-40 absolute top-0 ltr:right-0 rtl:left-0 block text-gray-100 dark:text-white/70 text-base"
>
<button
aria-label="button"
type="button"
class="hs-dropdown-toggle p-0 !bg-transparent border-0 shadow-none focus:ring-0 focus:ring-offset-0 ti-dropdown-toggle"
>
<i
class="ri-more-2-line leading-none text-base text-gray-100"
></i>
</button>
<!-- <div class="hs-dropdown-menu ti-dropdown-menu">
<a
class="ti-dropdown-item"
routerLink="/profile/editprofile"
><i class="ri ri-edit-2-line text-lg"></i>Edit</a
>
<a
class="team-remove ti-dropdown-item"
href="javascript:void(0);"
(click)="deleteMember(user.member_id)"
><i class="ri ri-delete-bin-6-line text-lg"></i
>Delete</a
>
</div> -->
</div>
</div>
</div>
<div
class="box-footer bg-gray-100 dark:bg-bgdark p-0 text-center"
>
<div class="grid grid-cols-12 gap-6">
<div
class="col-span-12 ltr:border-r rtl:border-l p-3 border-gray-200 dark:border-white/10"
>
<a
[routerLink]="['/profile/home', user.user_id]"
class="space-x-3"
><i class="ri-user-line"></i><span>Profile</span></a
>
</div>
</div>
</div>
</div>
</div>
<nav class="mt-6 flex justify-end items-center space-x-2 rtl:space-x-reverse">
<a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
href="javascript:void(0);">
<span aria-hidden="true">Prev</span>
<span class="sr-only">Previous</span>
</a>
<a class="bg-primary text-white py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
href="javascript:void(0);" aria-current="page">1</a>
<a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
href="javascript:void(0);">2</a>
<a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center text-sm font-medium rounded-sm"
href="javascript:void(0);">3</a>
<a class="text-gray-500 dark:text-white/70 hover:text-primary e py-1 px-2 leading-none inline-flex items-center gap-2 rounded-sm"
href="javascript:void(0);">
<span class="sr-only">Next</span>
<span aria-hidden="true">Next</span>
</a>
</nav>
</div>
</div>
</div>
<div class="col-span-12 xxl:col-span-3" *ngIf="selectedUser">
<div class="box">
<div class="box-body">
<div class="relative">
<div class="flex relative before:bg-black/50 before:absolute before:w-full before:h-full before:rounded-sm">
<img [src]="'./assets/img/users/1.jpg'" alt="" class="h-[150px] w-full rounded-sm" id="profile-img2" />
<span
class="absolute top-5 ltr:right-5 rtl:left-5 flex p-2 rounded-sm ring-1 ring-black/10 text-white bg-black/10 leading-none">
<i class="ri ri-pencil-line"></i>
<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change2" />
</span>
</div>
<div class="absolute top-[5.5rem] inset-x-0 text-center space-y-3">
<div class="flex justify-center w-full">
<div class="relative">
<img [src]="selectedUser.picture ? selectedUser.picture : './assets/img/users/1.jpg'"
class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto" id="profile-img" alt="pofile-img" />
<span
class="absolute top-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white/10 text-white bg-white/10 dark:bg-bgdark leading-none">
<i class="ri ri-pencil-line"></i>
<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
id="profile-change" />
</span>
</div>
</div>
</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>
</div>
</div>
</div>
<div class="box-footer"><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>
</div>
</div>
<nav
class="flex justify-end items-center space-x-2 rtl:space-x-reverse my-4"
>
<a
class="w-10 h-10 text-gray-500 dark:text-white/70 bg-gray-200 dark:bg-bgdark hover:text-primary p-4 inline-flex items-center gap-2 rounded-full"
href="javascript:void(0);"
>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
<a
class="w-10 h-10 bg-primary text-white p-4 inline-flex items-center text-sm font-medium rounded-full"
href="javascript:void(0);"
aria-current="page"
>1</a
>
<a
class="w-10 h-10 bg-gray-200 dark:bg-bgdark text-gray-500 dark:text-white/70 hover:text-primary p-4 inline-flex items-center text-sm font-medium rounded-full"
href="javascript:void(0);"
>2</a
>
<a
class="w-10 h-10 bg-gray-200 dark:bg-bgdark text-gray-500 dark:text-white/70 hover:text-primary p-4 inline-flex items-center text-sm font-medium rounded-full"
href="javascript:void(0);"
>3</a
>
<a
class="w-10 h-10 text-gray-500 dark:text-white/70 bg-gray-200 dark:bg-bgdark hover:text-primary p-4 inline-flex items-center gap-2 rounded-full"
href="javascript:void(0);"
>
<span class="sr-only">Next</span>
<span aria-hidden="true">»</span>
</a>
</nav>
</div>
</div>
<!-- End::row-2 -->
<!-- End::row-1 -->
Synto-Angular/src/app/admin/user-management/user-management.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
import { UserService } from 'src/app/services/user.service';
import { UserProfileModel } from 'src/app/models/user.model';
......@@ -56,45 +53,36 @@ export class UserManagementComponent {
}
}
// memberlist: any[] = [];
detailEmp(emp: UserProfileModel) {
this.selectedUser = emp
}
// url = '';
// onSelectFile(event: any) {
// if (event.target && event.target.files && event.target.files[0]) {
// const reader = new FileReader();
// ngOnInit(): void {
// // จำลองข้อมูลตัวอย่าง
// this.memberlist = [
// { id: 1, member_firstname: 'Alice', member_lastname: 'Smith', role: 'Admin' },
// { id: 2, member_firstname: 'Bob', member_lastname: 'Johnson', role: 'User' },
// { id: 3, member_firstname: 'Charlie', member_lastname: 'Brown', role: 'Manager' }
// ];
// reader.readAsDataURL(event.target.files[0]); // read file as data URL
// reader.onload = (event: any) => {
// // called once readAsDataURL is completed
// this.url1 = event.target.result;
// };
// }
// }
// constructor(private http: HttpClient) {}
// ngOnInit() {
// this.http.get<any[]>(environment.api + '/users')
// .subscribe(
// (data) => {
// this.memberlist = data;
// console.log('Data loaded:', this.memberlist);
// },
// (error) => {
// console.error('Error fetching data', error);
// }
// );
// url1 = '';
// onSelectFile2(event: any) {
// if (event.target && event.target.files && event.target.files[0]) {
// const reader = new FileReader();
// reader.readAsDataURL(event.target.files[0]); // read file as data URL
// reader.onload = (event: any) => {
// // called once readAsDataURL is completed
// this.url = event.target.result;
// };
// }
// deleteMember(userId: number): void {
// if (confirm('Are you sure you want to delete this member?')) {
// this.http.delete(`${environment.api}/users/${userId}`).subscribe(
// (result: any) => {
// const index = this.memberlist.findIndex(user => user.user_id === userId);
// if (index !== -1) {
// this.memberlist.splice(index, 1);
// }
// console.log(result);
// },
// (error: HttpErrorResponse) => {
// alert(error.message);
// }
// );
// }}}
// }
}
Synto-Angular/src/app/models/user.model.ts
......@@ -5,6 +5,9 @@ export class UserProfileModel extends BaseModel {
user_id: string;
first_name: string;
last_name: string;
picture: string;
phone: string = "-";
position: string = "-";
email: string;
role: string;
constructor(
......@@ -15,7 +18,10 @@ export class UserProfileModel extends BaseModel {
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!
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment