Commit 7ade5710 by Nattana Chaiyamat

fix company demo

parent f4a36e36
import { Component, OnInit } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { DocumentService } from '../../../../services/document.service';
import { CourseService } from '../../../../services/course.service';
import { ExcelService } from '../../../../services/excel.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../../../../../shared/shared.module';
import { SharedModule } from '../../../shared/shared.module';
import { CourseService } from '../../services/course.service';
import { DocumentService } from '../../services/document.service';
import { ExcelService } from '../../services/excel.service';
@Component({
selector: 'app-approved-list',
templateUrl: './approved-list.component.html',
styleUrls: ['./approved-list.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
TranslateModule,
SharedModule,
],
imports: [
CommonModule,
FormsModule,
RouterModule,
TranslateModule,
SharedModule,
],
})
export class ApprovedListComponent implements OnInit {
path: {
data: string,
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
} = {
data: '',
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
}
constructor(
private routes: Router,
private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService
) {}
private router: Router,
private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
}
page = 1;
pageSize = 10;
testdata: {
id:string;
id: string;
img: String;
name: String;
details: String;
......@@ -41,21 +65,21 @@ export class ApprovedListComponent implements OnInit {
this.testdata = [
{
id:'1',
id: '1',
img: "assets/images/icons/excel.png",
name: "Excel",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'2',
id: '2',
img: "assets/images/icons/document.png",
name: "Document",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'3',
id: '3',
img: "assets/images/icons/course.png",
name: "Course",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
......@@ -64,17 +88,17 @@ export class ApprovedListComponent implements OnInit {
];
this.getListCount();
}
async getListCount(){
async getListCount() {
try {
const countExcel = await this.excelService.getCountContent().toPromise();
const countDoc = await this.documentService.getCountContent().toPromise();
const countCourse = await this.courseService.getCountContent().toPromise();
this.testdata.forEach((x ,i) => {
if(i == 0){
this.testdata.forEach((x, i) => {
if (i == 0) {
x.document = (countExcel ?? 0).toString()
}else if(i == 1){
} else if (i == 1) {
x.document = (countDoc ?? 0).toString()
}else if(i == 2){
} else if (i == 2) {
x.document = (countCourse ?? 0).toString()
}
})
......@@ -82,13 +106,13 @@ export class ApprovedListComponent implements OnInit {
console.error('Error loading data:', error);
}
}
openView(id:string){
if(id =='1'){
this.routes.navigate(['/myskill-x/view-list-excel/1']);
}else if(id =='2'){
this.routes.navigate(['/myskill-x/view-list-doc/1']);
}else if(id =='3'){
this.routes.navigate(['/myskill-x/view-list-course/1']);
openView(id: string) {
if (id == '1') {
this.router.navigate(['/' + this.path.data + '/view-list-excel/1']);
} else if (id == '2') {
this.router.navigate(['/' + this.path.data + '/view-list-doc/1']);
} else if (id == '3') {
this.router.navigate(['/' + this.path.data + '/view-list-course/1']);
}
}
}
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { firstValueFrom } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { CourseContentModel } from '../../../../../models/course-content.model';
import { CourseService } from '../../../../../services/course.service';
declare var require: any
import FileSaver from 'file-saver';
import swal from 'sweetalert';
import { SharedModule } from '../../../../shared/shared.module';
import { CourseContentModel } from '../../../models/course-content.model';
import { CourseService } from '../../../services/course.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-view-list-course',
templateUrl: './view-list-course.component.html',
......@@ -40,7 +38,8 @@ export class ViewListCourseComponent implements OnInit {
search: string = ''
checkType: string = '0'
pagedItems: CourseContentModel[];
constructor(private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute) {
dialogRef: any;
constructor(private dialog: MatDialog, private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
......@@ -71,15 +70,28 @@ export class ViewListCourseComponent implements OnInit {
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// })
// modalRef.componentInstance.linkImage = image
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll()
// })
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
async downloadFile(logId: string) {
try {
......
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { firstValueFrom } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { DocumentContentModel } from '../../../../../models/document-content.model';
import { DocumentService } from '../../../../../services/document.service';
declare var require: any
import FileSaver from 'file-saver';
import swal from 'sweetalert';
import { SharedModule } from '../../../../shared/shared.module';
import { DocumentContentModel } from '../../../models/document-content.model';
import { DocumentService } from '../../../services/document.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-view-list-doc',
templateUrl: './view-list-doc.component.html',
......@@ -40,7 +38,8 @@ export class ViewListDocComponent implements OnInit {
search: string = ''
checkType: string = '0'
pagedItems: DocumentContentModel[] = [];
constructor(private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute) {
dialogRef: any;
constructor(private dialog: MatDialog, private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
......@@ -71,15 +70,28 @@ export class ViewListDocComponent implements OnInit {
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// })
// modalRef.componentInstance.linkImage = image
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll()
// })
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
deleteFile(item: DocumentContentModel) {
swal({
......@@ -92,13 +104,13 @@ export class ViewListDocComponent implements OnInit {
if (willDelete) {
this.documentService.deleteExcelContent(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ','success')
this.openAlertModal('ลบข้อมูลสำเร็จ', 'success')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้','error')
this.openAlertModal('ไม่สามารถลบข้อมูลได้', 'error')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { ExcelContentModel } from '../../../../../models/excel-content.model';
import { ExcelService } from '../../../../../services/excel.service';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { firstValueFrom } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
declare var require: any
import FileSaver from 'file-saver';
import swal from 'sweetalert';
import { SharedModule } from '../../../../shared/shared.module';
import { ExcelContentModel } from '../../../models/excel-content.model';
import { ExcelService } from '../../../services/excel.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-view-list-excel',
templateUrl: './view-list-excel.component.html',
......@@ -40,7 +38,8 @@ export class ViewListExcelComponent implements OnInit {
search: string = ''
checkType: string = '0'
pagedItems: ExcelContentModel[] = [];
constructor(private modalService: NgbModal, private excelService: ExcelService, private activatedRoute: ActivatedRoute,) {
dialogRef: any;
constructor(private dialog: MatDialog, private modalService: NgbModal, private excelService: ExcelService, private activatedRoute: ActivatedRoute,) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
......@@ -71,15 +70,28 @@ export class ViewListExcelComponent implements OnInit {
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// })
// modalRef.componentInstance.linkImage = image
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll()
// })
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
deleteFile(item: ExcelContentModel) {
swal({
......
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { CourseModel } from '../../../../../models/course.model';
import { CourseService } from '../../../../../services/course.service';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { firstValueFrom } from 'rxjs';
declare var require: any
import FileSaver from 'file-saver';
import swal from 'sweetalert';
import { SharedModule } from '../../../../shared/shared.module';
import { CourseModel } from '../../../models/course.model';
import { CourseService } from '../../../services/course.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-approve-course',
templateUrl: './approve-course.component.html',
......@@ -38,7 +36,8 @@ export class ApproveCourseComponent implements OnInit {
listCourse: CourseModel[] = []
search: string = ''
pagedItems: CourseModel[] = [];
constructor(private modalService: NgbModal, private courseService: CourseService) {
dialogRef: any;
constructor(private modalService: NgbModal, private courseService: CourseService, private dialog: MatDialog) {
}
get totalItems(): number {
return this.search == ''
......@@ -66,15 +65,28 @@ export class ApproveCourseComponent implements OnInit {
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// })
// modalRef.componentInstance.linkImage = image
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll()
// })
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
async downloadFile(logId: string) {
try {
......@@ -110,13 +122,13 @@ export class ApproveCourseComponent implements OnInit {
this.courseService.approve(item).subscribe(result => {
if (result) {
this.modalService.dismissAll()
this.openAlertModal('บันทึกข้อมูลสำเร็จ','error')
this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'error')
this.getListCourse();
} else {
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','success')
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'success')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......@@ -133,13 +145,13 @@ export class ApproveCourseComponent implements OnInit {
item.status = 2
this.courseService.approve(item).subscribe(result => {
if (result) {
this.openAlertModal('บันทึกข้อมูลสำเร็จ','success')
this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'success')
this.getListCourse();
} else {
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','error')
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'error')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......@@ -159,13 +171,13 @@ export class ApproveCourseComponent implements OnInit {
if (willDelete) {
this.courseService.deleteCourse(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ','success')
this.openAlertModal('ลบข้อมูลสำเร็จ', 'success')
this.getListCourse();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้','error')
this.openAlertModal('ไม่สามารถลบข้อมูลได้', 'error')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { DocumentModel } from '../../../../../models/document.model';
import { DocumentService } from '../../../../../services/document.service';
import { firstValueFrom } from 'rxjs';
declare var require: any
import FileSaver from 'file-saver';
import swal from 'sweetalert';
import { SharedModule } from '../../../../shared/shared.module';
import { DocumentModel } from '../../../models/document.model';
import { DocumentService } from '../../../services/document.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-approve-doc',
templateUrl: './approve-doc.component.html',
......@@ -38,7 +36,8 @@ export class ApproveDocComponent implements OnInit {
listDoc: DocumentModel[] = []
search: string = ''
pagedItems: DocumentModel[] = [];
constructor(private modalService: NgbModal, private documentService: DocumentService) {
dialogRef: any;
constructor(private modalService: NgbModal, private documentService: DocumentService, private dialog: MatDialog) {
}
get totalItems(): number {
return this.search == ''
......@@ -66,15 +65,28 @@ export class ApproveDocComponent implements OnInit {
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// })
// modalRef.componentInstance.linkImage = image
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll()
// })
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
async downloadFile(logId: string, lang: string) {
try {
......@@ -113,13 +125,13 @@ export class ApproveDocComponent implements OnInit {
this.documentService.approve(item).subscribe(result => {
if (result) {
this.modalService.dismissAll()
this.openAlertModal('บันทึกข้อมูลสำเร็จ','success')
this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'success')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','error')
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'error')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......@@ -136,13 +148,13 @@ export class ApproveDocComponent implements OnInit {
item.status = 2
this.documentService.approve(item).subscribe(result => {
if (result) {
this.openAlertModal('บันทึกข้อมูลสำเร็จ','success')
this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'success')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','error')
this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'error')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......@@ -161,13 +173,13 @@ export class ApproveDocComponent implements OnInit {
if (willDelete) {
this.documentService.deleteExcel(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ','success')
this.openAlertModal('ลบข้อมูลสำเร็จ', 'success')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้','error')
this.openAlertModal('ไม่สามารถลบข้อมูลได้', 'error')
}
}, error => {
this.openAlertModal(error.message,'error')
this.openAlertModal(error.message, 'error')
})
}
})
......
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { OpenImageComponent } from '../../../open-image/open-image.component';
import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../../shared/shared.module';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { ExcelModel } from '../../../../../models/excel.model';
import { ExcelService } from '../../../../../services/excel.service';
import { firstValueFrom } from 'rxjs';
declare var require: any
import FileSaver from 'file-saver';
import swal from 'sweetalert';
import { TemplateModel } from '../../../../../models/template.model';
import { SharedModule } from '../../../../shared/shared.module';
import { ExcelModel } from '../../../models/excel.model';
import { ExcelService } from '../../../services/excel.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-approve-excel',
templateUrl: './approve-excel.component.html',
......@@ -39,7 +36,8 @@ export class ApproveExcelComponent implements OnInit {
listExcel: ExcelModel[] = []
search: string = ''
pagedItems: ExcelModel[] = [];
constructor(private modalService: NgbModal, private excelService: ExcelService) {
dialogRef: any;
constructor(private modalService: NgbModal, private excelService: ExcelService, private dialog: MatDialog) {
}
get totalItems(): number {
return this.search == ''
......@@ -67,15 +65,28 @@ export class ApproveExcelComponent implements OnInit {
this.pagedItems = data.slice(start, end);
}
openEmployeeModal(image: string) {
const modalRef = this.modalService.open(OpenImageComponent, {
centered: true,
windowClass: 'my-dialog-img-preview'
})
modalRef.componentInstance.linkImage = image
modalRef.result.then(result => {
}, reason => {
this.modalService.dismissAll()
})
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// })
// modalRef.componentInstance.linkImage = image
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll()
// })
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
async downloadFile(logId: string) {
try {
......
......@@ -2,17 +2,17 @@ import { Component, OnInit } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { FormBuilder, FormGroup, FormsModule, Validators } from "@angular/forms";
import { Router, RouterModule } from "@angular/router";
import { ExcelService } from "../../../../services/excel.service";
import { DocumentService } from "../../../../services/document.service";
import { CourseService } from "../../../../services/course.service";
import { CommonModule } from "@angular/common";
import { TranslateModule } from "@ngx-translate/core";
import { SharedModule } from "../../../../../shared/shared.module";
import { SharedModule } from "../../../shared/shared.module";
import { CourseService } from "../../services/course.service";
import { DocumentService } from "../../services/document.service";
import { ExcelService } from "../../services/excel.service";
@Component({
selector: "app-portal-category-list-approve",
templateUrl: "./portal-category-list-approve.component.html",
styleUrls: ["./portal-category-list-approve.component.scss"],
selector: "app-category-list-approve",
templateUrl: "./category-list-approve.component.html",
styleUrls: ["./category-list-approve.component.scss"],
standalone: true,
imports: [
CommonModule,
......@@ -22,12 +22,37 @@ import { SharedModule } from "../../../../../shared/shared.module";
SharedModule,
],
})
export class PortalCategoryListApproveComponent implements OnInit {
export class CategoryListApproveComponent implements OnInit {
path: {
data: string,
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
} = {
data: '',
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
}
constructor(
private modalService: NgbModal,
private router: Router,
private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
) { }
) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
}
page = 1;
pageSize = 7;
......@@ -70,11 +95,11 @@ export class PortalCategoryListApproveComponent implements OnInit {
}
openView(id: string) {
if (id == '1') {
this.router.navigate(['/myskill-x/approve-excel']);
this.router.navigate(['/' + this.path.data + '/approve-excel']);
} else if (id == '2') {
this.router.navigate(['/myskill-x/approve-doc']);
this.router.navigate(['/' + this.path.data + '/approve-doc']);
} else if (id == '3') {
this.router.navigate(['/myskill-x/approve-course']);
this.router.navigate(['/' + this.path.data + '/approve-course']);
}
}
async getListCount() {
......
<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสาร'"></app-page-header>
<!-- <div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการเอกสาร</h4>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-6 col-12" *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="card border-border-2">
<div class="card-body text-center">
<img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
<h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
</div>
<div class="d-flex justify-content-between bg-light border-top p-3">
<div>
<span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div >
<button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<ng-template #name>
<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">{{companyFilter().length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchText'>
</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 text-white" style="background-color: #49b6f5;">
<th class="text-center" scope="col">บริษัท</th>
</tr>
</thead>
<tbody *ngIf="company.loading">
<tr>
<td colspan="1" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
</tbody>
@if(!company.loading && !companyFilter().length){
<tbody>
<tr style="background-color:#ebf2f6">
<td colspan="1" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
}
@if(!company.loading && companyFilter().length){
<tbody id="tableBody">
@for (items of companyFilter() | slice: page * pageSize : (page + 1) * pageSize; track $index) {
<tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
(click)="selectCompany(items)">
<td colspan="6" class="font-16 font-medium">
{{items.companyName}}
</td>
</tr>
}
</tbody>
}
</table>
</div>
</div>
<div class="box-footer">
@if(companyFilter().length > 0){
<div class="flex items-center flex-wrap overflow-auto">
<div class="d-flex justify-content-end p-2">
<select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
[(ngModel)]="pageSize" (ngModelChange)="page">
<option *ngFor="let item of [10,50,100]" [ngValue]="item">
{{"รายการต่อหน้า"}}: {{item}}
</option>
</select>
</div>
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{companyFilter().length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
@if(page > 0){
<li class="page-item {{page==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page - 1">{{'Previous' |
translate}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="page = page - 1">{{page}}</a>
</li>
}
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]" href="javascript:void(0);">{{page
+
1}}</a>
</li>
@if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 1">{{page +
2}}</a></li>
}
@if((page + 2) * pageSize < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 2">{{page
+
3}}</a></li>
}
@if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page + 1">{{'Next' |
translate}}</a>
</li>
}
</ul>
</nav>
</div>
</div>
}
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<!-- <ng-container *ngTemplateOutlet="name2"></ng-container> -->
<!-- <ng-template #name2> -->
<div class="max-w-7xl mx-auto">
<div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
<!-- Flex แทน Grid -->
<div class="flex flex-wrap justify-center gap-6">
<div
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="p-8 text-center">
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
<img src="{{ c.img }}" class="" alt="" />
</div>
<h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
</div>
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
<div>
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div>
<button class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700
text-white text-sm font-medium rounded-md shadow-md ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
active hover:bg-success hover:scale-110 transition duration-300" (click)="openView(c.id)">
รายละเอียด
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </ng-template> -->
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs';
import { DashboardService } from '../../../shared/services/dashboard.service';
import { Router, RouterModule } from '@angular/router';
import { CourseService } from '../../services/course.service';
import { DocumentService } from '../../services/document.service';
import { ExcelService } from '../../services/excel.service';
import { WidgetService } from '../../services/widgets.service';
import { SharedModule } from '../../../shared/shared.module';
import { DatasourseTableService } from '../../services/datasourse-table.service';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { TokenService } from '../../../shared/services/token.service';
@Component({
selector: 'app-category-list',
standalone: true,
imports: [SharedModule],
templateUrl: './category-list.component.html',
styleUrls: ['./category-list.component.scss']
})
export class CategorylistComponent implements OnInit {
path: {
data: string,
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
} = {
data: '',
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
}
company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
searchText: string = '';
tableHover: Map<string, boolean> = new Map<string, boolean>()
buttonHover: Map<string, boolean> = new Map<string, boolean>()
constructor(
private router: Router,
private excelService: ExcelService,
private documentService: DocumentService,
private courseService: CourseService,
private widgetService: WidgetService,
private datasourceTable: DatasourseTableService,
private tokenService: TokenService
) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
}
page = 1;
pageSize = 10;
testdata: {
id: string;
img: String;
name: String;
details: String;
document: String;
}[] = [];
ngOnInit() {
this.testdata = [
{
id: '1',
img: "assets/images/icons/excel.png",
name: "Excel",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id: '2',
img: "assets/images/icons/document.png",
name: "Document",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id: '3',
img: "assets/images/icons/course.png",
name: "Course",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
// {
// id: '4',
// img: "assets/images/icons/widget.png",
// name: "Widgets",
// details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
// document: "0"
// },
// {
// id: '5',
// img: "assets/images/faces/1.jpg",
// name: "BI",
// details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
// document: "0"
// },
];
this.getListCount();
this.getCompany()
}
getCompany() {
this.company.loading = true
this.datasourceTable.getList().subscribe({
next: (response: DatasourceTableModel[]) => {
this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
this.company.loading = false
},
error: (error) => {
this.company.loading = false
}
});
}
companyFilter() {
return this.company.list.filter(e => e.companyName.includes(this.searchText))
}
selectCompany(body: DatasourceTableModel) {
this.tokenService.saveSelectCompany(body as any)
this.getListCount();
}
async getListCount() {
try {
const countExcel = await this.excelService.getCountContent().toPromise();
const countDoc = await this.documentService.getCountContent().toPromise();
const countCourse = await this.courseService.getCountContent().toPromise();
const countWidgets = await this.widgetService.getCount().toPromise();
this.testdata.forEach((x, i) => {
if (i == 0) {
x.document = countExcel!.toString()
} else if (i == 1) {
x.document = countDoc!.toString()
} else if (i == 2) {
x.document = countCourse!.toString()
} else if (i == 3) {
x.document = countWidgets!.toString()
}
})
} catch (error) {
console.error('Error loading data:', error);
}
}
openView(id: string) {
if (id == '1') {
this.router.navigate(['/' + this.path.data + '/view-list-excel']);
} else if (id == '2') {
this.router.navigate(['/' + this.path.data + '/view-list-doc']);
} else if (id == '3') {
this.router.navigate(['/' + this.path.data + '/view-list-course']);
}
// else if (id == '4') {
// this.router.navigate(['/' + this.path.data + '/view-list-widgets']);
// }
}
}
import { Component, OnInit } from '@angular/core';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { CourseContentModel } from '../../../models/course-content.model';
import { CourseService } from '../../../services/course.service';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { OpenImageComponent } from '../open-image/open-image.component';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
......@@ -14,6 +11,7 @@ import { SharedModule } from '../../../../shared/shared.module';
import { TranslateModule } from '@ngx-translate/core';
import saveAs from 'file-saver';
import swal from 'sweetalert';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-view-list-course',
......
import { Component, OnInit } from '@angular/core';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { DocumentContentModel } from '../../../models/document-content.model';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { OpenImageComponent } from '../open-image/open-image.component';
import { DocumentService } from '../../../services/document.service';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
......@@ -14,6 +11,7 @@ import { SharedModule } from '../../../../shared/shared.module';
import swal from 'sweetalert';
import { saveAs } from 'file-saver';
import { TranslateModule } from '@ngx-translate/core';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-view-list-doc',
......
import { Component, OnInit } from '@angular/core';
import { ExcelService } from '../../../services/excel.service';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { ExcelContentModel } from '../../../models/excel-content.model';
import { OpenImageComponent } from '../open-image/open-image.component';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../shared/shared.module';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import swal from 'sweetalert';
import { saveAs } from 'file-saver';
import { SharedModule } from '../../../../shared/shared.module';
import { ExcelContentModel } from '../../../models/excel-content.model';
import { ExcelService } from '../../../services/excel.service';
import { OpenImageComponent } from '../../open-image/open-image.component';
@Component({
selector: 'app-view-list-excel',
......
import { Component, OnInit } from '@angular/core';
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { Router, RouterModule } from '@angular/router';
import { ExcelService } from '../../../services/excel.service';
import { DocumentService } from '../../../services/document.service';
import { CourseService } from '../../../services/course.service';
import { WidgetService } from '../../../services/widgets.service';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../shared/shared.module';
import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../../../shared/shared.module';
import { CourseService } from '../../services/course.service';
import { DocumentService } from '../../services/document.service';
import { ExcelService } from '../../services/excel.service';
import { WidgetService } from '../../services/widgets.service';
@Component({
selector: 'app-portal-category-list',
templateUrl: './portal-category-list.component.html',
styleUrls: ['./portal-category-list.component.scss'],
selector: 'app-create-category',
templateUrl: './create-category.component.html',
styleUrls: ['./create-category.component.scss'],
standalone: true,
imports: [
CommonModule,
......@@ -24,14 +25,41 @@ import { SharedModule } from '../../../../shared/shared.module';
SharedModule,
],
})
export class PortalCategoryListComponent implements OnInit {
constructor(
private routes: Router,
private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService, private widgetService: WidgetService
) { }
export class CreateCategoryComponent implements OnInit {
path: {
data: string,
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
} = {
data: '',
list: [
"myhr-plus",
"myhr-lite",
"zeeme",
"myface",
"mylearn",
"myjob",
"myskill-x"
]
}
constructor(private modalService: NgbModal, private router: Router,
private excelService: ExcelService,
private documentService: DocumentService,
private courseService: CourseService,
private widgetService: WidgetService
) {
this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
}
page = 1;
pageSize = 10;
testdata: {
id: string;
img: String;
......@@ -41,7 +69,6 @@ export class PortalCategoryListComponent implements OnInit {
}[] = [];
ngOnInit() {
this.testdata = [
{
id: '1',
......@@ -64,29 +91,28 @@ export class PortalCategoryListComponent implements OnInit {
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id: '4',
img: "assets/images/icons/widget.png",
name: "Widgets",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id: '5',
img: "assets/images/faces/1.jpg",
name: "BI",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
// {
// id: '4',
// img: "assets/images/icons/widget.png",
// name: "Widgets",
// details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
// document: "0"
// },
// {
// id: '5',
// img: "assets/images/faces/1.jpg",
// name: "BI",
// details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
// document: "0"
// }
];
this.getListCount();
}
async getListCount() {
try {
const countExcel = await this.excelService.getCountContent().toPromise();
const countDoc = await this.documentService.getCountContent().toPromise();
const countCourse = await this.courseService.getCountContent().toPromise();
const countExcel = await this.excelService.getCount().toPromise();
const countDoc = await this.documentService.getCount().toPromise();
const countCourse = await this.courseService.getCount().toPromise();
const countWidgets = await this.widgetService.getCount().toPromise();
this.testdata.forEach((x, i) => {
if (i == 0) {
......@@ -105,14 +131,26 @@ export class PortalCategoryListComponent implements OnInit {
}
openView(id: string) {
if (id == '1') {
this.routes.navigate(['/myskill-x/view-list-excel']);
this.router.navigate(['/' + this.path.data + '/list-excel']);
} else if (id == '2') {
this.routes.navigate(['/myskill-x/view-list-doc']);
this.router.navigate(['/' + this.path.data + '/list-doc']);
} else if (id == '3') {
this.routes.navigate(['/myskill-x/view-list-course']);
} else if (id == '4') {
this.routes.navigate(['/myskill-x/view-list-widgets']);
this.router.navigate(['/' + this.path.data + '/list-course']);
}
// else if (id == '4') {
// this.router.navigate(['/' + this.path.data + '/list-widgets']);
// }
}
openModal(targetModal: NgbModal) {
this.modalService.open(targetModal, {
centered: true,
backdrop: "static",
});
}
closeBtnClick() {
this.modalService.dismissAll();
}
}
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { OpenImageComponent } from '../open-image/open-image.component';
import { UploadService } from '../../../services/upload.service';
import { TagService } from '../../../services/tag.service';
import { TagModel } from '../../../models/tag.mmodel';
......@@ -21,6 +18,8 @@ import { CourseModel } from '../../../models/course.model'; // Corrected model i
import saveAs from 'file-saver';
import { TagInputModule } from 'ngx-chips';
import swal from 'sweetalert';
import { OpenImageComponent } from '../../open-image/open-image.component';
import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
@Component({
selector: 'app-list-course',
......
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component'; // ตรวจสอบว่ามี ConfirmModalComponent นี้อยู่จริง
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { OpenImageComponent } from '../open-image/open-image.component'; // ตรวจสอบว่ามี OpenImageComponent นี้อยู่จริง
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
......@@ -20,6 +17,8 @@ import { DocumentModel } from '../../../models/document.model';
import { DocumentService } from '../../../services/document.service';
import saveAs from 'file-saver';
import swal from 'sweetalert';
import { OpenImageComponent } from '../../open-image/open-image.component';
import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
@Component({
......
......@@ -323,7 +323,7 @@
<div class="xl:col-span-12 col-span-12">
<label for="group" class="block text-primary mb-2 font-bold font-14">{{ 'กลุ่ม' | translate }}</label>
<select
<select *ngIf="modelExcel.group"
class="custom-select w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
id="group" [(ngModel)]="modelExcel.group.groupId" (change)="selectGroup()" name="group">
<option *ngFor="let item of listGroup" [ngValue]="item.groupId">{{item.thName}}</option>
......
......@@ -2,12 +2,10 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ExcelModel } from '../../../models/excel.model';
import { ExcelService } from '../../../services/excel.service';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { UploadService } from '../../../services/upload.service';
import { TagService } from '../../../services/tag.service';
import { TagModel } from '../../../models/tag.mmodel';
import { GroupModel } from '../../../models/group.mmodel';
import { OpenImageComponent } from '../open-image/open-image.component';
import { GroupService } from '../../../services/group.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
......@@ -19,12 +17,14 @@ import { TranslateModule } from '@ngx-translate/core';
import saveAs from 'file-saver';
import { TagInputModule } from 'ngx-chips';
import swal from 'sweetalert';
import { OpenImageComponent } from '../../open-image/open-image.component';
import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
@Component({
selector: 'app-list-excel',
templateUrl: './list-excell.component.html', // Note: original was list-excell.component.html
styleUrls: ['./list-excell.component.scss'],
templateUrl: './list-excel.component.html',
styleUrls: ['./list-excel.component.scss'],
standalone: true,
imports: [
CommonModule,
......@@ -403,7 +403,7 @@ export class ListExcelComponent implements OnInit {
}
get pages(): number[] {
const pages = [];
const pages:number[] = [];
const startPage = Math.max(0, this.pageIndex - Math.floor(this.maxPagesToShow / 2));
const endPage = Math.min(this.totalPages - 1, startPage + this.maxPagesToShow - 1);
......
import { Component, ElementRef, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Router, RouterModule } from '@angular/router';
import { SharedModule } from '../../../../shared/shared.module';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import swal from 'sweetalert';
import { MatPaginator } from '@angular/material/paginator';
......@@ -10,13 +9,12 @@ import { NgSelectModule } from '@ng-select/ng-select';
import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
import { environment } from '../../../../../environments/environment';
import { TokenService } from '../../../../shared/services/token.service'
import { QuillModule } from 'ngx-quill';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { DatasourseTableService } from '../../../services/datasourse-table.service';
import { NgbPagination } from '@ng-bootstrap/ng-bootstrap';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../../models/datasource-table.model';
import { TokenService } from '../../../shared/services/token.service';
import { SharedModule } from '../../../shared/shared.module';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { DatasourseTableService } from '../../services/datasourse-table.service';
@Component({
selector: 'app-datasource-table',
......
......@@ -27,4 +27,4 @@
/* เผื่อ modal มี overflow ซ่อนอยู่ */
::ng-deep .ti-modal-content {
overflow: visible !important;
}
}
\ No newline at end of file
......@@ -4,26 +4,26 @@ import { forkJoin, Subscription } from 'rxjs';
import { NgbDate, NgbDatepickerModule, NgbModal, NgbModalRef, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ColumnModel } from '@syncfusion/ej2-angular-grids';
import * as FileSaver from 'file-saver';
import { MyTemplateFileModel, MyTemplateModel, TemplateFileModel, TemplateModel } from '../../../../models/template.model';
import { ModuleModel, MyModuleModel } from '../../../../models/module.model';
import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel, MyExcelPortalGroupModel, MyExcelPortalModel, MyExcelPortalTagsModel } from '../../../../models/excel-portal.model';
import { ExcelReportService } from '../../../../services/excel-report.service';
import { CustomCubeService } from '../../../../services/custom-cube.service';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../shared/shared.module';
import { MatPaginator } from '@angular/material/paginator';
import { QuillModule } from 'ngx-quill';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { FileUploadModule } from 'ng2-file-upload';
import { FormsModule, NgModel } from '@angular/forms';
import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
import { PivotSyncfutionComponent } from "../../../../../pivot-syncfution/pivot-syncfution.component";
import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
import swal from 'sweetalert';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../../../models/datasource-table.model';
import { DatasourseTableService } from '../../../../services/datasourse-table.service';
import { SafeUrlPipe } from '../../../../pipe/safe-url.pipe';
import { DatagridSyncfutionComponent } from '../../../datagrid-syncfution/datagrid-syncfution.component';
import { PivotSyncfutionComponent } from '../../../pivot-syncfution/pivot-syncfution.component';
import { SharedModule } from '../../../shared/shared.module';
import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
import { ExcelPortalModel, ExcelPortalGroupModel, ExcelPortalTagsModel, MyExcelPortalModel, MyExcelPortalGroupModel, MyExcelPortalTagsModel } from '../../models/excel-portal.model';
import { ModuleModel, MyModuleModel } from '../../models/module.model';
import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
import { CustomCubeService } from '../../services/custom-cube.service';
import { DatasourseTableService } from '../../services/datasourse-table.service';
import { ExcelReportService } from '../../services/excel-report.service';
export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] }
}
......@@ -301,7 +301,7 @@ export class ExcelListComponent implements OnInit {
edesc: this.bodyTemplate.data.edesc,
module: this.bodyTemplate.data.module
}
this.excelReportService.postTemplate(body).subscribe(response => {
this.excelReportService.postTemplate(this.bodyTemplate.data.companyId, body).subscribe(response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getExcelList()
......@@ -477,7 +477,7 @@ export class ExcelListComponent implements OnInit {
const file: File = event.target.files[0];
if (!file) {
this.showAlert('กรุณาเลือกไฟล์','warning');
this.showAlert('กรุณาเลือกไฟล์', 'warning');
return;
}
......@@ -485,7 +485,7 @@ export class ExcelListComponent implements OnInit {
const fileExtension = file.name.split('.').pop()?.toLowerCase();
if (!this.allowedExtensions.includes(fileExtension || '')) {
this.showAlert('รองรับเฉพาะไฟล์ Excel (.xls, .xlsx, .xlsm) เท่านั้น','error');
this.showAlert('รองรับเฉพาะไฟล์ Excel (.xls, .xlsx, .xlsm) เท่านั้น', 'error');
return;
}
......@@ -964,7 +964,7 @@ export class ExcelListComponent implements OnInit {
}
closeModalexcel_portal(result?: ExcelPortalModel) {
if(result){
if (result) {
this.templateFile.portalId = result.excelId
}
this.modalRefexcel_portal?.close()
......
.ti-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom-width: 1px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
::ng-deep [ngbDatepickerDayView].today {
background-color: #e0f2fe !important;
}
::ng-deep [ngbDatepickerDayView].bg-primary {
background-color: rgb(var(--primary)) !important;
color: #ffffff !important;
}
/* ให้ datepicker popup ทะลุ modal ได้ */
::ng-deep ngb-datepicker,
::ng-deep .ngb-datepicker-container {
z-index: 2000 !important;
}
/* เผื่อ modal มี overflow ซ่อนอยู่ */
::ng-deep .ti-modal-content {
overflow: visible !important;
}
......@@ -2,25 +2,23 @@ import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild } from '@a
import { ActivatedRoute, RouterModule } from '@angular/router';
import { NgbDate, NgbDatepickerModule, NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import * as FileSaver from 'file-saver';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { forkJoin, Subscription } from 'rxjs';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { MyTemplateFileModel, MyTemplateModel, TemplateFileModel, TemplateModel } from '../../../../models/template.model';
import { ModuleModel } from '../../../../models/module.model';
import { ExcelReportService } from '../../../../services/excel-report.service';
import { CustomCubeService } from '../../../../services/custom-cube.service';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../../../../shared/shared.module';
import { TranslateModule } from '@ngx-translate/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule, NgModel } from '@angular/forms';
import { FileUploadModule } from 'ng2-file-upload';
import { QuillModule } from 'ngx-quill';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
import { PivotSyncfutionComponent } from '../../../../../pivot-syncfution/pivot-syncfution.component';
import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
import swal from 'sweetalert';
import { DatagridSyncfutionComponent } from '../../../datagrid-syncfution/datagrid-syncfution.component';
import { PivotSyncfutionComponent } from '../../../pivot-syncfution/pivot-syncfution.component';
import { SharedModule } from '../../../shared/shared.module';
import { ModuleModel } from '../../models/module.model';
import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
import { CustomCubeService } from '../../services/custom-cube.service';
import { ExcelReportService } from '../../services/excel-report.service';
export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] }
}
......@@ -265,7 +263,7 @@ export class ExcelReportToggleComponent implements OnInit {
return { date: `${day}-${month}-${year}`, time: `${hours}:${minutes}` };
}
showAlert(text: string, type: 'success' | 'error') {
swal("แจ้งเตือน", text,type);
swal("แจ้งเตือน", text, type);
}
openPrintModal(templateFile: TemplateFileModel) {
......@@ -390,7 +388,7 @@ export class ExcelReportToggleComponent implements OnInit {
this.cdr.detectChanges()
}, (err) => {
this.loadingExcel = false
this.showAlert(err.message,'error')
this.showAlert(err.message, 'error')
this.cdr.detectChanges()
})
}
......@@ -421,7 +419,7 @@ export class ExcelReportToggleComponent implements OnInit {
}
getExcelColumn() {
if(this.excelReport){
if (this.excelReport) {
const body = {
templateId: this.excelReport.templateId,
......@@ -454,7 +452,7 @@ export class ExcelReportToggleComponent implements OnInit {
})
});
}, error => {
})
}
}
......@@ -520,7 +518,7 @@ export class ExcelReportToggleComponent implements OnInit {
pivotStr: "",
}
this.customCubeService.saveExcelPerspective(body).subscribe(response => {
if(response.success) {
if (response.success) {
this.loadingExcel = false
this.showAlert(response.message, 'success')
} else {
......@@ -542,7 +540,7 @@ export class ExcelReportToggleComponent implements OnInit {
pivotStr: this.pivotLayout.data,
}
this.customCubeService.saveExcelPerspective(body).subscribe(response => {
if(response.success) {
if (response.success) {
this.loadingExcel = false
this.showAlert(response.message, 'success')
} else {
......
......@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../shared/shared.module';
import { ExcelReportService } from '../../../services/excel-report.service';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
import FileSaver from 'file-saver';
import { TemplateFileMiniModel } from '../../../models/template-file-mini.model';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { SharedModule } from '../../../shared/shared.module';
import { TemplateFileMiniModel } from '../../models/template-file-mini.model';
import { ExcelReportService } from '../../services/excel-report.service';
export interface ValueDetailItem {
id: string;
......
......@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; // น
@Component({
selector: 'app-open-image',
templateUrl: './open-image.component.html',
styleUrls: ['./open-image.component.scss']
styleUrls: ['./open-image.component.scss'],
})
export class OpenImageComponent implements OnInit {
linkImage: string = '';
......
import { Component, OnInit } from '@angular/core';
import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import swal from 'sweetalert';
import { saveAs } from 'file-saver';
import { SharedModule } from '../../../../shared/shared.module';
import { ExcelContentModel } from '../../../models/excel-content.model';
import { ExcelService } from '../../../services/excel.service';
import { OpenImageComponent } from '../../../open-image/open-image.component';
@Component({
selector: 'app-view-list-excel',
templateUrl: './view-list-excel.component.html',
styleUrls: ['./view-list-excel.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
NgSelectModule,
SharedModule,
MatDialogModule,
TranslateModule,
NgbPaginationModule,
],
})
export class ViewListExcelComponent implements OnInit {
page = 1;
pageSize = 10;
listExcel: ExcelContentModel[] = [];
search: string = '';
checkType: string = '0';
dialogRef: any;
constructor(
private modalService: NgbModal,
private excelService: ExcelService,
private activatedRoute: ActivatedRoute,
private dialog: MatDialog,
) {
this.activatedRoute.paramMap.subscribe(result => {
this.checkType = result.get("type")!;
});
}
openDialog(image: string) {
const dialogConfig = {
width: '750px',
disableClose: false,
data: {
linkImage: image
},
panelClass: 'my-dialog-img-preview',
};
this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
this.dialogRef.afterClosed().subscribe((result: any) => {
console.log('The dialog was closed', result);
}, (reason: any) => {
});
}
// openEmployeeModal(image: string) {
// const modalRef = this.modalService.open(OpenImageComponent, {
// centered: true,
// windowClass: 'my-dialog-img-preview'
// });
// modalRef.componentInstance.linkImage = image;
// modalRef.result.then(result => {
// }, reason => {
// this.modalService.dismissAll();
// });
// }
deleteFile(item: ExcelContentModel) {
swal({
title: "คุณแน่ใจหรือไม่?",
text: "คุณต้องการลบข้อมูลนี้หรือไม่",
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ยืนยัน"],
}).then((willDelete: boolean) => {
if (willDelete) {
this.excelService.deleteExcelContent(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ','success');
this.getListExcel();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้','error');
}
}, error => {
this.openAlertModal(error.message,'error');
});
}
});
}
async downloadFile(logId: string) {
try {
const data = await this.excelService.downloadFileContent(logId).toPromise();
if (data) {
saveAs(new Blob([data]), "file_download.xlsx");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
getStatus(status: string): string {
if (status == '0') {
return 'รออนุมัติ';
} else if (status == '1') {
return 'เปิดใช้งาน';
} else if (status == '2') {
return 'ไม่อนุมัติ';
}
return '';
}
filterListExcel() {
return this.listExcel.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()));
}
async getListExcel() {
try {
const data = await this.excelService.getListExcelContent().toPromise();
this.listExcel = data!.map(x => new ExcelContentModel(x));
} catch (error) {
console.error('Error loading data:', error);
}
}
ngOnInit() {
this.getListExcel();
}
openLink(url: string) {
window.open(url, "_blank");
}
openAlertModal(text: string, type: 'success' | 'error') {
swal("แจ้งเตือน", text, type);
}
coverDate(date: string) {
return date.split('-').reverse().join('/');
}
}
\ No newline at end of file
......@@ -5,11 +5,111 @@ import { RouterModule, Routes } from '@angular/router';
export const myhrplus: Routes = [
{
path: "myhr-plus", children:[
path: "myhr-plus", children: [
{
path: 'dashboard',
loadComponent: () =>
import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
loadComponent: () =>
import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
},
{
path: 'category-list',
loadComponent: () =>
import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
},
{
path: 'view-list-excel',
loadComponent: () =>
import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc',
loadComponent: () =>
import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course',
loadComponent: () =>
import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'create-category',
loadComponent: () =>
import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
},
{
path: 'list-excel',
loadComponent: () =>
import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
},
{
path: 'list-doc',
loadComponent: () =>
import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
},
{
path: 'list-course',
loadComponent: () =>
import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
},
{
path: 'category-list-approve',
loadComponent: () =>
import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
},
{
path: 'approve-excel',
loadComponent: () =>
import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
},
{
path: 'approve-doc',
loadComponent: () =>
import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
},
{
path: 'approve-course',
loadComponent: () =>
import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
},
{
path: 'approved-list',
loadComponent: () =>
import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
},
{
path: 'view-list-excel/:type',
loadComponent: () =>
import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc/:type',
loadComponent: () =>
import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course/:type',
loadComponent: () =>
import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'excel-list',
loadComponent: () =>
import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
},
{
path: 'excel-report-toggle',
loadComponent: () =>
import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
},
{
path: 'datasource-table',
loadComponent: () =>
import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
},
{
path: 'excel-report',
loadComponent: () =>
import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
},
]
}
......@@ -24,4 +124,4 @@ export const myhrplus: Routes = [
})
export class MyhrPlusModule {
static routes = myhrplus;
}
}
<app-page-header [title]="'Analytics'" [activeTitle]="'Dashboards'" [title1]="'Analytics'"></app-page-header>
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-7 col-span-12">
<div class="grid grid-cols-12 gap-x-6">
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12">
<div class="box">
<div class="box-body">
<div class="flex flex-wrap items-center justify-between">
<div>
<h6 class="font-semibold mb-3 text-[1rem]">Total Users</h6>
<span class="text-[1.5625rem] font-semibold">9,789</span>
<span class="block text-success text-[0.75rem]">+0.892 <i class="ti ti-trending-up ms-1"></i></span>
</div>
<div id="analytics-users">
<apx-chart [series]="chartOptions1.series" [chart]="chartOptions1.chart"
[xaxis]="chartOptions1.xaxis" [dataLabels]="chartOptions1.dataLabels"
[colors]="chartOptions1.colors" [fill]="chartOptions1.fill"
[markers]="chartOptions1.markers" [stroke]="chartOptions1.stroke"></apx-chart>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12">
<div class="box">
<div class="box-body">
<div class="flex items-center justify-between">
<div>
<h6 class="font-semibold mb-3 text-[1rem]">Live Visitors</h6>
<span class="text-[1.5625rem] font-semibold">12,240</span>
<span class="block text-danger text-[0.75rem]">+0.59<i class="ti ti-trending-down ms-1 inline-flex"></i></span>
</div>
<div>
<span class="avatar avatar-md bg-secondary text-white">
<i class="ri-user-3-line"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 lg:col-span-4 md:col-span-4 sm:col-span-6 col-span-12">
<div class="box overflow-hidden">
<div class="box-body mb-3">
<div class="flex items-center justify-between">
<div>
<h6 class="font-semibold text-primary mb-4 text-[1rem]">Bounce Rate</h6>
<span class="text-[1.5625rem] flex items-center">77.3% <span class=" text-[0.75rem] text-warning opacity-[0.7] ms-2">+0.59<i class="ti ti-arrow-big-up-line ms-1 inline-flex"></i></span></span>
</div>
</div>
</div>
<div id="analytics-bouncerate" class="mt-1 w-full">
<apx-chart [series]="chartOptions2.series" [chart]="chartOptions2.chart"
[xaxis]="chartOptions2.xaxis" [dataLabels]="chartOptions2.dataLabels"
[colors]="chartOptions2.colors" [fill]="chartOptions2.fill"
[markers]="chartOptions2.markers" [stroke]="chartOptions2.stroke"></apx-chart>
</div>
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Audience Report
</div>
<div>
<button type="button" class="ti-btn ti-btn-primary ti-btn-wave !font-medium"><i class="ri-share-forward-line me-1 align-middle inline-block"></i>Export</button>
</div>
</div>
<div class="box-body">
<div id="audienceReport">
<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart"
[yaxis]="chartOptions.yaxis" [xaxis]="chartOptions.xaxis"
[labels]="chartOptions.labels" [stroke]="chartOptions.stroke"
[plotOptions]="chartOptions.plotOptions" [markers]="chartOptions.markers"
[fill]="chartOptions.fill" [tooltip]="chartOptions.tooltip" [legend]="chartOptions.legend" [colors]="chartOptions.colors"></apx-chart>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-6 xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Top Countries Sessions vs Bounce Rate
</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body">
<div id="country-sessions">
<apx-chart [series]="chartOptions3.series" [chart]="chartOptions3.chart"
[yaxis]="chartOptions3.yaxis" [xaxis]="chartOptions3.xaxis"
[labels]="chartOptions3.labels" [stroke]="chartOptions3.stroke"
[plotOptions]="chartOptions3.plotOptions" [markers]="chartOptions3.markers"
[fill]="chartOptions3.fill" [tooltip]="chartOptions3.tooltip" [legend]="chartOptions3.legend" [colors]="chartOptions3.colors"></apx-chart>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-6 xl:col-span-12 col-span-12">
<div class="box overflow-hidden">
<div class="box-header justify-between">
<div class="box-title">
Traffic Sources
</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body !p-0">
<div class="table-responsive">
<table class="table table-hover whitespace-nowrap min-w-full">
<thead>
<tr>
<th scope="col" class="text-start">Browser</th>
<th scope="col" class="text-start">Sessions</th>
<th scope="col" class="text-start">Traffic</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-google-fill text-[1.125rem] text-primary"></i>
</span>
<div class="font-semibold">Google</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>23,379</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[78%]" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-safari-line text-[1.125rem] text-secondary"></i>
</span>
<div class="font-semibold">Safari</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>78,973</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[32%]" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-opera-fill text-[1.125rem] text-success"></i>
</span>
<div class="font-semibold">Opera</div>
</div>
</td>
<td>
<span><i class="ri-arrow-down-s-fill me-1 text-danger align-middle text-[1.125rem]"></i>12,457</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[21%]" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-edge-fill text-[1.125rem] text-info"></i>
</span>
<div class="font-semibold">Edge</div>
</div>
</td>
<td>
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>8,570</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-1/4" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td>
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-firefox-fill text-[1.125rem] text-warning"></i>
</span>
<div class="font-semibold">Firefox</div>
</div>
</td>
<td>
<span><i class="ri-arrow-down-s-fill me-1 text-danger align-middle text-[1.125rem]"></i>6,135</span>
</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[35%]" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
<tr class="border-t border-inherit border-solid hover:bg-gray-100 dark:hover:bg-light dark:border-defaultborder/10">
<td class="border-bottom-0">
<div class="flex items-center">
<span class="avatar avatar-rounded avatar-sm p-2 bg-light me-2">
<i class="ri-ubuntu-fill text-[1.125rem] text-danger"></i>
</span>
<div class="font-semibold">Ubuntu</div>
</div>
</td>
<td class="border-bottom-0">
<span><i class="ri-arrow-up-s-fill me-1 text-success align-middle text-[1.125rem]"></i>4,789</span>
</td>
<td class="border-bottom-0">
<div class="progress progress-xs">
<div class="progress-bar bg-primary w-[12%]" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-5 col-span-12">
<div class="grid grid-cols-12 gap-x-6">
<div class="xxl:col-span-5 cxl:ol-span-12 col-span-12">
<div class="box custom-card upgrade-card text-white">
<div class="box-body text-white">
<span class="avatar avatar-xxl !border-0">
<img src="./assets/images/media/media-84.png" alt="">
</span>
<div class="upgrade-card-content">
<span class="opacity-[0.7] font-normal mb-1 !text-white">Plan is expiring !</span>
<span class="text-[0.9375rem] font-semibold block mb-[3rem] upgrade-text !text-white">Upgrade to premium</span>
<button type="button" class="ti-btn !py-1 !px-2 bg-light text-defaulttextcolor !text-[0.75rem] font-medium ti-btn-wave">Upgrade Now</button>
</div>
</div>
</div>
<div class="box">
<div class="box-body !p-1">
<div class="flex items-center flex-wrap">
<div id="analytics-followers">
<apx-chart [series]="optionsCircle2.series" [chart]="optionsCircle2.chart"
[xaxis]="optionsCircle2.xaxis" [colors]="optionsCircle2.colors"
[labels]="optionsCircle2.labels" [legend]="optionsCircle2.legend"
[stroke]="optionsCircle2.stroke" [tooltip]="optionsCircle2.tooltip"
[plotOptions]="optionsCircle2.plotOptions"
[dataLabels]="optionsCircle2.dataLabels"></apx-chart>
</div>
<div class="ms-1">
<p class="mb-1 text-[#8c9097] dark:text-white/50">Impressions</p>
<h5 class="font-semibold mb-0 text-[1.25rem]">9,903</h5>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-body !p-1">
<div class="flex items-center flex-wrap">
<div id="analytics-views">
<apx-chart [series]="optionsCircle3.series" [chart]="optionsCircle3.chart"
[xaxis]="optionsCircle3.xaxis" [colors]="optionsCircle3.colors"
[labels]="optionsCircle3.labels" [legend]="optionsCircle3.legend"
[stroke]="optionsCircle3.stroke" [tooltip]="optionsCircle3.tooltip"
[plotOptions]="optionsCircle3.plotOptions"
[dataLabels]="optionsCircle3.dataLabels"></apx-chart>
</div>
<div class="ms-1">
<p class="mb-1 text-[#8c9097] dark:text-white/50">Clicks</p>
<h5 class="font-semibold mb-0 text-[1.25rem]">16,789</h5>
</div>
</div>
</div>
</div>
</div>
<div class="xxl:col-span-7 xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
Sessions By Device
</div>
<div>
<button type="button" class="ti-btn ti-btn-primary 1 !text-[0.85rem] !m-0 !font-medium">View All</button>
</div>
</div>
<div class="box-body !my-2 !py-6 !px-2">
<div id="sessions">
<apx-chart [series]="optionsCircle1.series" [chart]="optionsCircle1.chart"
[xaxis]="optionsCircle1.xaxis"
[labels]="optionsCircle1.labels" [legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke" [tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"[colors]="optionsCircle1.colors"></apx-chart>
</div>
</div>
<div class="box-footer !p-0">
<div class="grid grid-cols-12 justify-center">
<div class="col-span-3 pe-0 text-center">
<div class="sm:p-4 p-2 ">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Mobile</span>
<span class="block text-[1rem] font-semibold">68.3%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Tablet</span>
<span class="block text-[1rem] font-semibold">17.68%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2 ">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Desktop</span>
<span class="block text-[1rem] font-semibold">10.5%</span>
</div>
</div>
<div class="col-span-3 px-0 text-center">
<div class="sm:p-4 p-2">
<span class="text-[#8c9097] dark:text-white/50 text-[0.6875rem]">Others</span>
<span class="block text-[1rem] font-semibold">5.16%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">Sessions Duration By New Users</div>
<div class="hs-dropdown ti-dropdown">
<a href="javascript:void(0);" class="px-2 font-normal text-[0.75rem] text-[#8c9097] dark:text-white/50"
aria-expanded="false">
View All<i class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden" role="menu">
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Today</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">This Week</a></li>
<li><a class="ti-dropdown-item !py-2 !px-[0.9375rem] !text-[0.8125rem] !font-medium block"
href="javascript:void(0);">Last Week</a></li>
</ul>
</div>
</div>
<div class="box-body">
<div id="session-users">
<apx-chart [series]="chartOptions4.series" [chart]="chartOptions4.chart"
[yaxis]="chartOptions4.yaxis" [xaxis]="chartOptions4.xaxis"
[labels]="chartOptions4.labels" [stroke]="chartOptions4.stroke"
[plotOptions]="chartOptions4.plotOptions" [markers]="chartOptions4.markers"
[fill]="chartOptions4.fill" [tooltip]="chartOptions4.tooltip" [colors]="chartOptions4.colors" [legend]="chartOptions4.legend"></apx-chart>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { HomeCommonComponent } from './home-common.component';
describe('HomeCommonComponent', () => {
let component: HomeCommonComponent;
let fixture: ComponentFixture<HomeCommonComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeCommonComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeCommonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { ChangeDetectorRef, Component, ElementRef, Renderer2 } from '@angular/core';
import { RouterModule } from '@angular/router';
import ApexCharts from 'apexcharts'
import { SharedModule } from '../../../shared/shared.module';
import { NgApexchartsModule } from 'ng-apexcharts';
@Component({
selector: 'app-home-common',
imports: [RouterModule,SharedModule,NgApexchartsModule],
standalone: true,
templateUrl: './home-common.component.html',
styleUrls: ['./home-common.component.css']
})
export class HomeCommonComponent {
chartOptions1:any;
chartOptions2:any;
chartOptions3:any
chartOptions:any;
optionsCircle1:any;
chartOptions4:any;
optionsCircle2:any;
optionsCircle3:any
constructor(private el: ElementRef, private renderer: Renderer2,private cdr: ChangeDetectorRef){
this.chartOptions1={
chart: {
type: 'line',
height: 40,
width: 120,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.1
},
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
},
stroke: {
show: true,
curve: 'straight',
lineCap: 'butt',
width: 1.5,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [0, 21, 54, 38, 56, 24, 65]
}],
yaxis: {
min: 0,
show: false
},
xaxis: {
show: false,
axisTicks: {
show: false,
axisBorder: {
show: false
},
},
axisBorder: {
show: false
}
},
colors: ['#23b7e5'],
}
this.chartOptions2={
chart: {
type: 'line',
height: 45,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 1,
color: '#fff',
opacity: 0.05
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
}],
yaxis: {
min: 0,
show: false,
axisBorder: {
show: false
},
},
xaxis: {
axisBorder: {
show: false
},
},
colors: ["rgba(132, 90, 223, 0.1)"],
tooltip: {
enabled: false,
}
}
this.optionsCircle1 = {
series: [1754, 1234, 878, 270],
labels: ["Mobile", "Tablet", "Desktop", "Others"],
chart: {
height: 250,
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}
},
},
},
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
};
this.chartOptions = {
series: [
{
name: 'Views',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35],
},
{
name: 'Followers',
type: 'line',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43, 27],
},
],
chart: {
toolbar: {
show: false,
},
type: 'line',
height: 250,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3,
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
dataLabels: {
enabled: false,
},
stroke: {
width: [1, 1.1],
curve: ['straight', 'smooth'],
},
legend: {
show: true,
position: 'top',
},
xaxis: {
axisBorder: {
color: '#e9e9e9',
},
},
plotOptions: {
bar: {
columnWidth: '20%',
borderRadius: 2,
},
},
colors: ["rgba(132, 90, 223, 1)", '#23b7e5'],
};
this.chartOptions3 = {
series: [
{
name: 'Session',
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
type: 'line',
},
{
name: 'Bounce Rate',
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
type: 'bar',
},
],
chart: {
height: 328,
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3
},
legend: {
show: true,
position: 'top',
},
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: "40%",
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
colors: ["rgb(132, 90, 223)", "#ededed"],
stroke: {
curve: ['smooth', 'stepline'],
width: [2, 0],
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
color: '#e9e9e9',
},
}
};
this.chartOptions4 = {
series: [
{
name: 'New Users',
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
},
{
name: 'Sessions',
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136],
},
{
name: 'Avg Session Duration',
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98],
},
],
chart: {
height: 425,
type: 'line',
toolbar: {
show: false,
},
background: 'none',
fill: '#fff',
},
grid: {
borderColor: '#f2f6f7',
},
colors: ['rgb(132, 90, 223)', '#23b7e5', '#f5b849'],
background: 'transparent',
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: 3,
},
legend: {
show: true,
position: 'top',
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
show: false,
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.05)',
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: false,
borderType: 'solid',
color: 'rgba(119, 119, 142, 0.05)',
width: 6,
offsetX: 0,
offsetY: 0,
},
labels: {
rotate: -90,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
};
this.optionsCircle2={
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [48],
colors: ["#23b7e5"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
}
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Followers"]
}
this.optionsCircle3={
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [65],
colors: ["#ffc107"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
},
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Views"]
}
}
// ngAfterViewInit(): void {
// this.setChartWidth();
// this.cdr.detectChanges();
// }
// private setChartWidth(): void {
// const chartContainer = this.el.nativeElement.querySelector('.chart-container');
// const chartContainer1 = this.el.nativeElement.querySelector('.chart-container1');
// const chartContainer2 = this.el.nativeElement.querySelector('.chart-container2');
// const chartContainer3 = this.el.nativeElement.querySelector('.chart-container3');
// const chart = new ApexCharts(chartContainer1, this.chartOptions);
// const chart1 = new ApexCharts(chartContainer, this.optionsCircle1);
// const chart2 = new ApexCharts(chartContainer2, this.chartOptions3);
// const chart3 = new ApexCharts(chartContainer3, this.chartOptions4);
// chart.render();
// chart2.render();
// chart1.render();
// chart3.render();
// }
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ApprovedListComponent } from './approved-list.component';
describe('ApprovedListComponent', () => {
let component: ApprovedListComponent;
let fixture: ComponentFixture<ApprovedListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ApprovedListComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ApprovedListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ManagementComponent } from './management.component';
describe('ManagementComponent', () => {
let component: ManagementComponent;
let fixture: ComponentFixture<ManagementComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ManagementComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ManagementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-management',
templateUrl: './management.component.html',
styleUrls: ['./management.component.css']
})
export class ManagementComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { MyportalComponent } from './myportal.component';
describe('MyportalComponent', () => {
let component: MyportalComponent;
let fixture: ComponentFixture<MyportalComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyportalComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyportalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-myportal',
templateUrl: './myportal.component.html',
styleUrls: ['./myportal.component.css']
})
export class MyportalComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสาร'"></app-page-header>
<!-- <div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการเอกสาร</h4>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-6 col-12" *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<div class="card border-border-2">
<div class="card-body text-center">
<img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
<h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
</div>
<div class="d-flex justify-content-between bg-light border-top p-3">
<div>
<span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div >
<button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<div class="max-w-7xl mx-auto">
<div class="box p-4">
<h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
<!-- Flex แทน Grid -->
<div class="flex flex-wrap justify-center gap-6">
<div
class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;"
*ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"
>
<div class="p-8 text-center">
<div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
<img src="{{ c.img }}" class="" alt="" />
</div>
<h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
</div>
<!-- Footer -->
<div class="mt-auto">
<div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
<div>
<span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
</div>
<div>
<button
class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700
text-white text-sm font-medium rounded-md shadow-md ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
active hover:bg-success hover:scale-110 transition duration-300"
(click)="openView(c.id)"
>
รายละเอียด
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { Router, RouterModule } from '@angular/router';
import { ExcelService } from '../../../services/excel.service';
import { DocumentService } from '../../../services/document.service';
import { CourseService } from '../../../services/course.service';
import { WidgetService } from '../../../services/widgets.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../../../../shared/shared.module';
import { TranslateModule } from '@ngx-translate/core';
@Component({
selector: 'app-portal-create-category',
templateUrl: './portal-create-category.component.html',
styleUrls: ['./portal-create-category.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
TranslateModule,
SharedModule,
],
})
export class PortalCreateCategoryComponent implements OnInit {
constructor(private modalService: NgbModal,private routes: Router,
private excelService:ExcelService,
private documentService:DocumentService,
private courseService:CourseService,
private widgetService:WidgetService
) {}
page = 1;
pageSize = 10;
testdata: {
id:string;
img: String;
name: String;
details: String;
document: String;
}[] = [];
ngOnInit() {
this.testdata = [
{
id:'1',
img: "assets/images/icons/excel.png",
name: "Excel",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'2',
img: "assets/images/icons/document.png",
name: "Document",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'3',
img: "assets/images/icons/course.png",
name: "Course",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'4',
img: "assets/images/icons/widget.png",
name: "Widgets",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'5',
img: "assets/images/faces/1.jpg",
name: "BI",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
}
];
this.getListCount();
}
async getListCount(){
try {
const countExcel = await this.excelService.getCount().toPromise();
const countDoc = await this.documentService.getCount().toPromise();
const countCourse = await this.courseService.getCount().toPromise();
const countWidgets= await this.widgetService.getCount().toPromise();
this.testdata.forEach((x ,i) => {
if(i == 0){
x.document = countExcel!.toString()
}else if(i == 1){
x.document = countDoc!.toString()
}else if(i == 2){
x.document = countCourse!.toString()
}else if(i == 3){
x.document = countWidgets!.toString()
}
})
} catch (error) {
console.error('Error loading data:', error);
}
}
openView(id:string){
if(id =='1'){
this.routes.navigate(['/myskill-x/list-excell']);
}else if(id =='2'){
this.routes.navigate(['/myskill-x/list-doc']);
}else if(id =='3'){
this.routes.navigate(['/myskill-x/list-course']);
}else if(id =='4'){
this.routes.navigate(['/myskill-x/list-widgets']);
}
}
openModal(targetModal: NgbModal) {
this.modalService.open(targetModal, {
centered: true,
backdrop: "static",
});
}
closeBtnClick() {
this.modalService.dismissAll();
}
}
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { SetExcelReportsComponent } from './set-excel-reports.component';
describe('SetExcelReportsComponent', () => {
let component: SetExcelReportsComponent;
let fixture: ComponentFixture<SetExcelReportsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SetExcelReportsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SetExcelReportsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-set-excel-reports',
templateUrl: './set-excel-reports.component.html',
styleUrls: ['./set-excel-reports.component.css']
})
export class SetExcelReportsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
......@@ -8,127 +8,107 @@ import { QuillModule } from 'ngx-quill';
export const myportal: Routes = [
{
path: 'myskill-x', children: [
//////////////MyPortal/////////////////
{
path: 'portal-category-list',
loadComponent: () =>
import('../myskill-x/myportal/portal-category-list/portal-category-list.component').then((m) => m.PortalCategoryListComponent),
},
{
path: 'view-list-excel',
loadComponent: () =>
import('../myskill-x/myportal/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc',
loadComponent: () =>
import('../myskill-x/myportal/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course',
loadComponent: () =>
import('../myskill-x/myportal/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'excel-report',
loadComponent: () =>
import('../myskill-x/myportal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
},
{
path: 'portal-create-category',
loadComponent: () =>
import('../myskill-x/myportal/portal-create-category/portal-create-category.component').then((m) => m.PortalCreateCategoryComponent),
},
{
path: 'list-excell',
loadComponent: () =>
import('../myskill-x/myportal/list-excell/list-excell.component').then((m) => m.ListExcelComponent),
},
{
path: 'list-course',
loadComponent: () =>
import('../myskill-x/myportal/list-course/list-course.component').then((m) => m.ListCourseComponent),
},
{
path: 'list-doc',
loadComponent: () =>
import('../myskill-x/myportal/list-doc/list-doc.component').then((m) => m.ListDocComponent),
},
{
path: 'excel-list',
loadComponent: () =>
import('../myskill-x/myportal/set-excel-reports/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
},
{
path: 'datasource-table',
loadComponent: () =>
import('../myskill-x/myportal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
},
{
path: 'excel-report-toggle',
loadComponent: () =>
import('../myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
},
{
path: 'management',
loadComponent: () =>
import('../myskill-x/myportal/management/management.component').then((m) => m.ManagementComponent),
},
{
path: 'portal-category-list-approve',
loadComponent: () =>
import('../myskill-x/myportal/management/portal-category-list-approve/portal-category-list-approve.component').then((m) => m.PortalCategoryListApproveComponent),
},
{
path: 'approve-excel',
loadComponent: () =>
import('../myskill-x/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
},
{
path: 'approve-doc',
loadComponent: () =>
import('../myskill-x/myportal/management/portal-category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
},
{
path: 'approve-course',
loadComponent: () =>
import('../myskill-x/myportal/management/portal-category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
},
{
path: 'approved-list',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
},
{
path: 'view-list-excel',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-excel/:type',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-doc/:type',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'view-list-course/:type',
loadComponent: () =>
import('../myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
//////////////MyPortal/////////////////
{
path: 'category-list',
loadComponent: () =>
import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
},
{
path: 'view-list-excel',
loadComponent: () =>
import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc',
loadComponent: () =>
import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course',
loadComponent: () =>
import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'create-category',
loadComponent: () =>
import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
},
{
path: 'list-excel',
loadComponent: () =>
import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
},
{
path: 'list-doc',
loadComponent: () =>
import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
},
{
path: 'list-course',
loadComponent: () =>
import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
},
{
path: 'category-list-approve',
loadComponent: () =>
import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
},
{
path: 'approve-excel',
loadComponent: () =>
import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
},
{
path: 'approve-doc',
loadComponent: () =>
import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
},
{
path: 'approve-course',
loadComponent: () =>
import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
},
{
path: 'approved-list',
loadComponent: () =>
import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
},
{
path: 'view-list-excel/:type',
loadComponent: () =>
import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
},
{
path: 'view-list-doc/:type',
loadComponent: () =>
import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
},
{
path: 'view-list-course/:type',
loadComponent: () =>
import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
},
{
path: 'excel-list',
loadComponent: () =>
import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
},
{
path: 'excel-report-toggle',
loadComponent: () =>
import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
},
{
path: 'datasource-table',
loadComponent: () =>
import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
},
{
path: 'excel-report',
loadComponent: () =>
import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
},
]
}
];
......
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { environment } from '../../../environments/environment';
import { TemplateFileModel, TemplateModel } from '../models/template.model';
import { ModuleModel } from '../models/module.model';
import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model';
import { AlertModel } from '../models/alert.model';
import { TemplateFileMiniModel } from '../models/template-file-mini.model';
@Injectable({
providedIn: 'root'
})
export class ExcelReportService {
constructor(private http: HttpClient,
private translateService: TranslateService
) { }
getExcelList(): Observable<TemplateModel[]> {
return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
}
getModuleList(): Observable<ModuleModel[]> {
return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
}
getExcelPortalList(): Observable<ExcelPortalModel[]> {
return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
}
getExcelPortalgGroupList(): Observable<ExcelPortalGroupModel[]> {
return this.http.get<ExcelPortalGroupModel[]>(environment.url + "portal-group/lists")
}
getExcelPortalTagsList(): Observable<ExcelPortalTagsModel[]> {
return this.http.get<ExcelPortalTagsModel[]>(environment.url + "tag/lists")
}
postTemplate(body: {
templateId: string,
tname: string,
ename: string,
tdesc: string,
edesc: string,
module: string
}) {
return this.http.post(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
deleteTemplate(body: TemplateModel): Observable<AlertModel> {
let option = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
}
return this.http.delete<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
}
postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
let option = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
}
return this.http.delete<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
}
downloadTemplateFile(fileName: string) {
return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", { responseType: 'blob' })
}
printExcelReport(body: {
fileName: string,
paramObj: string
}) {
return this.http.post(environment.url + "template-file/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body, { responseType: 'blob' })
}
getTemplateFile(templateid: string, filename: string): Observable<AlertModel> {
return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
}
getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
}
}
\ No newline at end of file
......@@ -18,10 +18,10 @@ export class ExcelReportService {
private translateService: TranslateService
) { }
getExcelList(): Observable<TemplateModel[]> {
return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=DEMO")
}
getModuleList(): Observable<ModuleModel[]> {
return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=DEMO")
}
getExcelPortalList(): Observable<ExcelPortalModel[]> {
return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
......@@ -33,7 +33,7 @@ export class ExcelReportService {
return this.http.get<ExcelPortalTagsModel[]>(environment.url + "tag/lists")
}
postTemplate(body: {
postTemplate(companyId: string, body: {
templateId: string,
tname: string,
ename: string,
......@@ -41,7 +41,7 @@ export class ExcelReportService {
edesc: string,
module: string
}) {
return this.http.post<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
return this.http.post<AlertModel>(environment.url + "template?companyid=" + companyId, body)
}
deleteTemplate(body: TemplateModel): Observable<AlertModel> {
let option = {
......@@ -50,10 +50,10 @@ export class ExcelReportService {
}),
body: body
}
return this.http.delete<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
return this.http.delete<AlertModel>(environment.url + "template?companyid=DEMO", option)
}
postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
return this.http.post<AlertModel>(environment.url + "template-file?companyid=DEMO", body)
}
deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
let option = {
......@@ -62,22 +62,22 @@ export class ExcelReportService {
}),
body: body
}
return this.http.delete<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
return this.http.delete<AlertModel>(environment.url + "template-file?companyid=DEMO", option)
}
downloadTemplateFile(fileName: string) {
return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", { responseType: 'blob' })
return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=DEMO", { responseType: 'blob' })
}
printExcelReport(body: {
fileName: string,
paramObj: string
}) {
return this.http.post(environment.url + "template-file/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body, { responseType: 'blob' })
return this.http.post(environment.url + "template-file/export-to-excel?companyid=DEMO", body, { responseType: 'blob' })
}
getTemplateFile(templateid: string, filename: string): Observable<AlertModel> {
return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=DEMO",)
}
getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=DEMO",)
}
}
\ No newline at end of file
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold mb-4">Widget Stock</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div *ngFor="let widget of availableWidgets$ | async" class="bg-white shadow-md rounded-lg p-4">
<h3 class="text-lg font-semibold">{{ widget.name }}</h3>
<p class="text-gray-600">ID: {{ widget.id }}</p>
<pre class="text-sm bg-gray-100 p-2 mt-2 rounded">Config: {{ widget.config | json }}</pre>
</div>
</div>
</div>
......@@ -242,8 +242,6 @@ export class SidebarComponent {
this.menuItems = this.navServices.getZeemeMenu();
} else if (this.isMyhrPlusRoute){
this.menuItems = this.navServices.getMyhrPlusMenu();
}else{
this.menuItems = this.navServices.getCommonMenu()
}
// เพิ่มรายการรายงาน Excel เข้าไปในเมนู หากมีข้อมูลและยังไม่ได้เพิ่ม
......
......@@ -54,7 +54,7 @@ export class NavService implements OnDestroy {
public fullScreen = false;
active: any;
constructor(private router: Router , private tokenService : TokenService) {
constructor(private router: Router, private tokenService: TokenService) {
this.setScreenWidth(window.innerWidth);
fromEvent(window, 'resize')
.pipe(debounceTime(1000), takeUntil(this.unsubscriber))
......@@ -111,99 +111,53 @@ export class NavService implements OnDestroy {
]
};
}
private createPortalMenu(appName: string): Menu[] {
return [{
icon: 'receipt',
path: `/${appName}/category-list`,
title: 'รายการเอกสาร',
type: 'link',
}, {
icon: 'receipt',
path: `/${appName}/create-category`,
title: 'รายการอัพโหลดเอกสาร',
type: 'link',
},
{
icon: 'cog',
path: '',
title: 'การจัดการ',
type: 'sub',
children: [
{ path: `/${appName}/category-list-approve`, title: 'รายการรอการอนุมัติ', type: 'link' },
{ path: `/${appName}/approved-list`, title: 'รายการผ่านการอนุมัติ', type: 'link' }
],
},
{
icon: 'slider',
path: '',
title: 'ตั้งรายงานเอ็กเซล',
type: 'sub',
children: [
{ path: `/${appName}/excel-list`, title: 'เพิ่มรายงาน Excel', type: 'link' },
{ path: `/${appName}/excel-report-toggle`, title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
],
},
{
icon: 'data',
path: `/${appName}/datasource-table`,
title: 'DataSource Table',
type: 'link',
},
{
icon: 'file',
path: `/${appName}/excel-report`,
title: 'รายงาน Excel',
type: 'link',
},]
}
getCommonMenu() {
return [
// Dashboard
{ headTitle: 'MyJob' },
this.createDashboardMenu('admin'), // Assuming 'admin' is the appName for common
{
icon: 'news bx-flip-horizontal',
path: '/admin/pdpa-manage',
title: 'จัดการ PDPA',
type: 'link',
},
{
icon: 'receipt',
path: '/admin/manage-articles',
title: 'จัดการบทความ',
type: 'link',
},
{
icon: 'user',
path: '/admin/company-departments',
title: 'จัดการผู้ใช้',
type: 'sub',
children: [
{ path: '/admin/manage-companys', title: 'จัดการบริษัท', type: 'link' },
{ path: '/admin/member-manage', title: 'จัดการผู้สมัครงาน', type: 'link' }
],
},
{
icon: 'buildings',
path: '/admin/company-departments',
title: 'ทะเบียนบริษัท',
type: 'sub',
children: [
{ path: '/admin/career-cluster', title: 'จัดการกลุ่มอาชีพ', type: 'link' },
{ path: '/admin/position', title: 'จัดการตำแหน่ง', type: 'link' },
{ path: '/admin/job-types', title: 'จัดการประเภทงาน', type: 'link' },
{ path: '/admin/category-company', title: 'จัดการประเภทธุรกิจ', type: 'link' },
{ path: '/admin/degree-manage', title: 'จัดการระดับการศึกษา', type: 'link' },
{ path: '/admin/country-registration', title: 'จัดการประเทศ', type: 'link' },
{ path: '/admin/provinces', title: 'จัดการจังหวัด', type: 'link' },
],
},
{ headTitle: 'MyPortal' },
{
icon: 'news bx-flip-horizontal',
path: '/admin/portal-category-list',
title: 'รายการเอกสาร',
type: 'link',
},
{
icon: 'receipt',
path: '/admin/portal-create-category',
title: 'รายการอัพโหลดเอกสาร',
type: 'link',
},
{
icon: 'cog',
path: '/admin/management',
title: 'การจัดการ',
type: 'sub',
children: [
{ path: '/admin/portal-category-list-approve', title: 'รายการรอการอนุมัติ', type: 'link' },
{ path: '/admin/approved-list', title: 'รายการผ่านการอนุมัติ', type: 'link' }
],
},
{
icon: 'slider',
path: '/admin/set-excel-reports',
title: 'ตั้งรายงานเอ็กเซล',
type: 'sub',
children: [
{ path: '/admin/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
{ path: '/admin/excel-report-toggle', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
],
},
{
icon: 'data',
path: '/admin/datasource-table',
title: 'DataSource Table',
type: 'link',
},
{
icon: 'file',
path: '/admin/excel-report',
title: 'รายงาน Excel',
type: 'link',
},
// { headTitle: 'User Management' },
];
}
getCompanyMenu() {
return [
......@@ -247,53 +201,8 @@ export class NavService implements OnDestroy {
// Myportal
{ headTitle: 'MyPortal' },
this.createDashboardMenu('myskill-x'),
{
icon: 'receipt',
path: '/myskill-x/portal-category-list',
title: 'รายการเอกสาร',
type: 'link',
},
{
icon: 'receipt',
path: '/myskill-x/portal-create-category',
title: 'รายการอัพโหลดเอกสาร',
type: 'link',
},
{
icon: 'cog',
path: '/myskill-x/management',
title: 'การจัดการ',
type: 'sub',
children: [
{ path: '/myskill-x/portal-category-list-approve', title: 'รายการรอการอนุมัติ', type: 'link' },
{ path: '/myskill-x/approved-list', title: 'รายการผ่านการอนุมัติ', type: 'link' }
],
},
{
icon: 'user',
path: '/myskill-x/set-excel-reports',
title: 'ตั้งรายงานเอ็กเซล',
type: 'sub',
children: [
{ path: '/myskill-x/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
{ path: '/myskill-x/excel-report-toggle', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
],
},
{
icon: 'data',
path: '/myskill-x/datasource-table',
title: 'DataSource Table',
type: 'link',
},
{
icon: 'file',
path: '/myskill-x/excel-report',
title: 'รายงาน Excel',
type: 'link',
},
// { headTitle: 'User Management' },
...this.createPortalMenu('myskill-x'),
{}
];
}
......@@ -420,6 +329,7 @@ export class NavService implements OnDestroy {
title: 'dashboard',
type: 'link',
},
...this.createPortalMenu('myhr-plus')
];
}
......
......@@ -40,10 +40,10 @@ import { QuillModule } from 'ngx-quill';
],
imports: [
FormsModule,
CommonModule,
RouterModule,
SimplebarAngularModule,
FormsModule,
ReactiveFormsModule,
ColorPickerModule,
TranslateModule,
......@@ -51,6 +51,7 @@ import { QuillModule } from 'ngx-quill';
// NgxColorsModule
],
exports: [
FormsModule,
HeaderComponent,
SidebarComponent,
ContentLayoutComponent,
......@@ -63,9 +64,11 @@ import { QuillModule } from 'ngx-quill';
AuthenticationLayoutComponent,
LandingSwitcherComponent,
LandingLayoutComponent,
RenderedHtmlComponent
RenderedHtmlComponent,
TranslateModule,
CommonModule
],
providers: [ColorPickerService, AuthService , TranslateModule],
providers: [ColorPickerService, AuthService, TranslateModule],
})
export class SharedModule { }
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