Skip to content

P
portal-apps-manage
Commit dcab6692 by sawit
Options

config menumodule

parent fe894dc1
Showing with 394 additions and 8 deletions
src/app/portal-manage/permission-management/permission-employeelist/permission-menulist/permission-menulist.component.html
<p>
permission-menulist works!
</p>
<app-page-header [title]="'จัดการสิทธิ์พนักงานตามแอปบริษัท'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'จัดการสิทธิ์พนักงาน'" [title1Link]="'/portal-manage/permission-management/permission-employeelist'" [title2]="'จัดการสิทธิ์พนักงานตามแอปบริษัท'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
<span> แอปบริษัท : {{this.appName}}</span>
<span> รหัสพนักงาน : {{this.employeeId}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full me-2" *ngIf="someSelected"
(click)="adjustSelect(1)"><i class="ri-user-follow-line font-semibold align-middle"></i>{{ 'Active' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-secondary-full me-2"
*ngIf="someSelected" (click)="adjustSelect(0)"><i
class="ri-user-unfollow-line font-semibold align-middle"></i>{{ 'Unactive' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหารายชื่อบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">รายชื่อบริษัท</th>
<!-- <th scope="col" class="text-start">อีเมล</th> -->
<th scope="col" class="text-start">{{"Status" | translate}}</th>
<!-- <th scope="col" class="text-start">{{"Update Date" | translate}}</th> -->
<!-- <th scope="col" class="text-start">{{ 'Action' | translate}}</th> -->
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (pagedList.length > 0) {
@for (item of pagedList; track item.companyId) {
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox">
<input class="form-check-input" type="checkbox" [checked]="selectedItems.get(item.companyId) || false"
(change)="onCheckboxChange(item.companyId)" aria-label="...">
</td>
<td>
<div class="flex items-center">
<span class="avatar avatar-sm p-1 me-1 bg-light !rounded-full">
<img [src]="item.getPicture()" alt="" id="profile-img">
</span>
<div class="ms-2">
<p class="font-semibold mb-0 flex items-center text-primary">
<a routerLink="/company/home/{{item.companyId}}" routerLinkActive="active">
{{item.thName}}
</a>
</p>
</div>
</div>
</td>
<!-- <td>
<div>
<span class="block mb-1">
{{item.email}}
</span>
</div>
</td> -->
<td>
<span class="badge bg-{{ item.status == 1 ? 'primary' : 'warning'}} text-white">
{{item.getStatus()}}
</span>
</td>
<!-- <td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
<i class="ri-pencil-line"></i>
</a>
</div>
</td> -->
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{ (pageIndex * pageSize) + 1 }} – {{ showingEnd }} {{'entries' | translate}}
<i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation" *ngIf="totalPages > 1">
<ul class="ti-pagination mb-0">
<li class="page-item" [class.disabled]="pageIndex === 0">
<a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="goPrev()">{{'Previous' | translate}}</a>
</li>
<li class="page-item" *ngFor="let p of pages">
<a class="page-link px-3 py-[0.375rem] cursor-pointer"
[class.active]="p === pageIndex"
(click)="goTo(p)">{{ p + 1 }}</a>
</li>
<li class="page-item" [class.disabled]="pageIndex >= totalPages - 1">
<a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="goNext()">{{'Next' | translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/portal-manage/permission-management/permission-employeelist/permission-menulist/permission-menulist.component.ts
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { SharedModule } from '../../../../shared/shared.module';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import swal from 'sweetalert';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { FileUploadModule } from 'ng2-file-upload';
import { environment } from '../../../../../environments/environment';
import { TokenService } from '../../../../shared/services/token.service';
import { CompanyModelS } from '../../../models/companys.mode';
import { CompanyServiceS } from '../../../services/companys.service';
import { UserService } from '../../../services/user.service';
import { AuthModel } from '../../../models/auth.model';
import { RoleModel } from '../../../models/role.model';
import { Observable, forkJoin } from 'rxjs';
import { MyhrcompanyService } from '../../../services/mylearn/myhrcompany.service';
import { HrcompanyModel, MyHrcompanyModel } from '../../../models/mylearn/myhrcompany.model';
@Component({
selector: 'app-permission-menulist',
templateUrl: './permission-menulist.component.html',
styleUrls: ['./permission-menulist.component.css'],
standalone: true,
imports: [RouterModule, CommonModule, SharedModule]
imports: [CommonModule, SharedModule, TranslateModule, NgSelectModule, FormsModule, RouterModule, FileUploadModule],
})
export class PermissionMenulistComponent implements OnInit {
constructor() { }
allSelected = false;
someSelected = false;
itemsList: CompanyModelS[] = [];
filterList: CompanyModelS[] = [];
selectedItems = new Map<string, boolean>();
// empList: CompanyModelS[] = [];
// descName = 'engName';
pageIndex = 0;
pageSize = 10;
totalCount = 0;
totalPages = 1;
pagedList: CompanyModelS[] = [];
ngOnInit() {
appName: string | null = null;
displayName: string | null = null;
employeeId: string | null = null;
MyhrcompanyList: MyHrcompanyModel[] = [];
HrcompanyList: HrcompanyModel[] = [];
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false;
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.filterList = this.itemsList.slice(); // ให้กลับมาเป็นทั้งหมด
}
this.onSearchChange(); // ← อัปเดตเพจทุกครั้ง
}
_searchTerm = "";
constructor(
private comService: CompanyServiceS,
private userService: UserService,
public translate: TranslateService,
private tokenService: TokenService,
private route: ActivatedRoute,
private myhrcompanyservice: MyhrcompanyService,
) {
}
getCompany() {
this.comService.getList().subscribe({
next: (response: CompanyModelS[]) => {
this.itemsList = response.map((x: any) => new CompanyModelS(x, this.translate));
this.filterList = this.itemsList.slice();
this.updatePagedItems();
},
error: (error) => {
console.error('error cant get company', error);
swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
}
});
}
getMyHRCompany() {
this.myhrcompanyservice.getList().subscribe({
next: (response: HrcompanyModel[]) => {
const mappedList = response.map((x: HrcompanyModel) => {
const company = new CompanyModelS({}, this.translate); // Create an empty model
company.companyId = x.companyId;
company.thName = x.companyName;
company.photoGraph = x.logo; // Map logo to photoGraph
company.status = 1; // Default status to 1 (Public) as it's missing
return company;
});
this.itemsList = mappedList;
this.filterList = this.itemsList.slice();
this.updatePagedItems();
},
error: (error) => {
console.error('error cant get mylearn company list', error);
swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
}
});
}
// ngOnInit(): void {
// this.getCompany();
// }
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
this.appName = params['app'];
this.displayName = params['displayName'];
this.employeeId = params['employeeId'];
console.log('App Name:', this.appName);
console.log('Display Name:', this.displayName);
console.log('Employee ID:', this.employeeId);
if (this.appName == 'MYJOB' && this.employeeId) {
this.getCompany();
}else if (this.appName == 'MYLEARN' && this.employeeId){
this.getMyHRCompany();
}else{
this.getCompany();
}
});
}
filter(v: string) {
return this.itemsList?.filter(
(x) =>
x.companyId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.getStatus().toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
updatePagedItems() {
this.totalCount = this.filterList.length;
this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
const startIndex = this.pageIndex * this.pageSize;
const endIndex = startIndex + this.pageSize;
this.pagedList = this.filterList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.companyId, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.companyId));
}
onCheckboxChange(companyId: string) {
const isSelected = this.selectedItems.get(companyId) || false;
this.selectedItems.set(companyId, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.companyId));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.companyId));
}
adjustSelect(status: number) {
let title = "คุณแน่ใจหรือไม่?";
let companyInfo = '';
const selectedCompanies: CompanyModelS[] = [];
this.selectedItems.forEach((isSelected, companyId) => {
if (isSelected) {
const company = this.itemsList.find(c => c.companyId === companyId);
if (company) {
companyInfo += `${this.translate.instant('ชื่อบริษัท')}: ${company.thName}\n`;
selectedCompanies.push(company);
}
}
});
if (selectedCompanies.length === 0) {
swal("ข้อผิดพลาด", "กรุณาเลือกบริษัทที่ต้องการปรับสถานะ", "warning");
return;
}
swal({
title: title,
text: companyInfo,
icon: "warning",
dangerMode: false,
buttons: ["ยกเลิก", "ยืนยัน"],
})
.then((willAdjust: any) => {
if (willAdjust) {
const updatePromises = selectedCompanies.map(company => {
company.status = status;
console.log(company);
const respone = new CompanyModelS(company);
return this.comService.saveOrUpdateCompany(respone).toPromise()
.then(() => true)
.catch(error => {
console.error(`Error updating status for company ${company.companyId}:`, error);
return false;
});
});
Promise.all(updatePromises)
.then(results => {
const allSuccessful = results.every(success => success);
if (allSuccessful) {
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสำเร็จ", "success");
} else {
swal("สำเร็จบางส่วน/ข้อผิดพลาด!!", "มีการอัปเดตสถานะบางส่วนไม่สำเร็จ หรือมีข้อผิดพลาด", "warning");
}
this.ngOnInit();
this.selectedItems.clear();
this.allSelected = false;
this.someSelected = false;
});
}
});
}
onSearchChange() {
this.pageIndex = 0;
this.updatePagedItems();
}
get pages(): number[] {
return Array.from({ length: this.totalPages }, (_, i) => i);
}
get showingEnd(): number {
return Math.min((this.pageIndex + 1) * this.pageSize, this.totalCount);
}
goPrev() {
if (this.pageIndex > 0) {
this.pageIndex--;
this.updatePagedItems();
}
}
goNext() {
if (this.pageIndex < this.totalPages - 1) {
this.pageIndex++;
this.updatePagedItems();
}
}
goTo(p: number) {
if (p >= 0 && p < this.totalPages && p !== this.pageIndex) {
this.pageIndex = p;
this.updatePagedItems();
}
}
}
src/app/portal-manage/permission-management/permission-employeelist/permission-menumodule/permission-menumodule.component.ts
......@@ -225,7 +225,13 @@ export class PermissionMenumoduleComponent implements OnInit {
];
}
navigateToApp(app: AppModule) {
this.router.navigate(['/portal-manage/permission-management/permission-menulist'], {
queryParams: {
app: app.name,
displayName: app.displayName,
employeeId: this.employeeId
}
});
}
}
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