Skip to content

M
myhr-portal
Commit 32691b69 by Nakarin Luankla
Options

UPDATE Widgets BI

parent 8bc1d607
Showing with 536 additions and 6 deletions
src/app/apps/apps.module.ts
......@@ -96,6 +96,7 @@ import { ViewListCourseComponent } from './view-list-course/view-list-course.com
import { TagInputModule } from 'ngx-chips';
import { ApprovedListComponent } from './approved-list/approved-list.component';
import { OpenImageComponent } from './open-image/open-image.component';
import { ListWidgetsComponent } from './list-widgets/list-widgets.component';
@NgModule({
......@@ -169,7 +170,8 @@ import { OpenImageComponent } from './open-image/open-image.component';
ViewListDocComponent,
ViewListCourseComponent,
ApprovedListComponent,
OpenImageComponent
OpenImageComponent,
ListWidgetsComponent
],
providers: [
ContactService,
......
src/app/apps/apps.routing.ts
......@@ -47,6 +47,7 @@ import { ViewListCourseComponent } from "./view-list-course/view-list-course.com
import { ViewListExcelComponent } from "./view-list-excel/view-list-excel.component";
import { ViewListDocComponent } from "./view-list-doc/view-list-doc.component";
import { ApprovedListComponent } from "./approved-list/approved-list.component";
import { ListWidgetsComponent } from "./list-widgets/list-widgets.component";
export const AppsRoutes: Routes = [
{
path: "",
......@@ -402,6 +403,17 @@ export const AppsRoutes: Routes = [
},
},
{
path: "list-widgets",
component: ListWidgetsComponent,
data: {
title: "รายการวิทเจ็ท",
urls: [
{ title: "รายการอัพโหลดเอกสาร", url: "apps/list-widgets" },
{ title: "รายการวิทเจ็ท" },
],
},
},
{
path: "usersrxjs",
component: UserRxjsComponent,
data: {
......
src/app/apps/list-excell/list-excell.component.html
......@@ -12,7 +12,6 @@
<tr>
<th class="text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<!-- <th scope="col">รหัสเอกสาร</th> -->
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col" class="text-center">ลิงค์</th>
......@@ -25,7 +24,6 @@
<tr *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<td class="text-center">{{i+1}}</td>
<td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
<!-- <td >{{data.id}}</td> -->
<td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td>
<td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)" ></i></td>
......@@ -79,6 +77,30 @@
</div>
</div>
<div class="row" >
<div class="col-12">
<div class="py-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 mb-3" *ngFor="let data of filterListExcel()">
<div class="card border-5 border border-excel h-100 shadow" >
<div class=" p-2 border-5">
<img width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())">
</div>
<div class="card-body">
<h4 class="card-title">{{ data.thName }}</h4>
<p class="card-text ">{{ data.thDesc }}</p>
<p class="text-info pointer mb-0" (click)="downloadFile(data.excelId)"><i class="fas fa-download mr-1"></i> ดาวน์โหลด</p>
<p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i> ตัวอย่างวิธีใช้งาน</p>
</div>
<div class="card-footer border-bottom-5" >
<small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
</div>
</div>
</div>
</div>
<ng-template #editTemplateModal let-modal>
<div class="modal-header">
......
src/app/apps/list-excell/list-excell.component.ts
......@@ -257,5 +257,7 @@ export class ListExcelComponent implements OnInit {
closeBtnClick() {
this.modalService.dismissAll();
}
coverDate(date:string){
return date.split('-').reverse().join('/')
}
}
src/app/apps/list-widgets/list-widgets.component.html 0 → 100644
<div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการวิทเจ็ท</h4>
<div class="d-flex mb-3 mt-3">
<input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
<button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal)">เพิ่มวิทเจ็ท</button>
</div>
<div class="table-responsive">
<table class="table table-striped mb-0 no-wrap v-middle ">
<thead class="bg-info text-white">
<tr>
<th class="text-center" scope="col">#</th>
<th scope="col">รูปภาพ</th>
<!-- <th scope="col">รหัสเอกสาร</th> -->
<th scope="col">ชื่อ</th>
<th scope="col">รายละเอียด</th>
<th scope="col" class="text-center">ลิงค์</th>
<th scope="col" class="text-center">สถานะ</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<td class="text-center">{{i+1}}</td>
<td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
<!-- <td >{{data.id}}</td> -->
<td>{{ data.thName }}</td>
<td>{{ data.thDesc }}</td>
<td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)" ></i></td>
<td class="text-center">
<span class="fa-stack rt_anim" *ngIf="data.status == '0'" ngbTooltip="รออนุมัติ" container="body" tooltipClass="myhrcolor-1">
<i class="fa fa-circle fa-stack-2x text-info"></i>
<i class=" fas fa-hourglass-half fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack rt_anim" *ngIf="data.status == '1'" ngbTooltip="เปิดใช้งาน" container="body" tooltipClass="myhrcolor-2">
<i class="fa fa-circle fa-stack-2x text-success"></i>
<i class=" fas fa-check fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack rt_anim" *ngIf="data.status == '2'" ngbTooltip="ไม่อนุมัติ" container="body" tooltipClass="myhrcolor-3">
<i class="fa fa-circle fa-stack-2x text-danger"></i>
<i class="fas fa-times fa-stack-1x fa-inverse" style="font-size: 1.25em;"></i>
</span>
</td>
<td>
<button type="button" [disabled]="data.status != 0" class="btn btn-circle btn-primary rounded-circle btn-sm mr-2" (click)="openModal(editTemplateModal,data)" placement="top" ngbTooltip="แก้ไข">
<i class="fas fa-edit"></i>
</button>
<button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-end py-2">
<select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
<option [ngValue]="10">รายการต่อหน้า: 10</option>
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listDoc.length" [maxSize]="3" [rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
</div>
</div>
</div>
</div>
<ng-template #editTemplateModal let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">{{checkEdit?"แก้ไขวิทเจ็ท":"เพิ่มวิทเจ็ท"}}</h5>
<button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="nameth" class="col-sm-4 col-form-label">ชื่อ (ไทย)</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nameth" [(ngModel)]="modelDoc.thName">
</div>
</div>
<div class="form-group row">
<label for="nameeng" class="col-sm-4 col-form-label">ชื่อ (อังกฤษ)</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.engName">
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">รายละเอียด (ไทย)</label>
<div class="col-sm-8">
<textarea class="form-control" [(ngModel)]="modelDoc.thDesc"></textarea>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">รายละเอียด (อังกฤษ)</label>
<div class="col-sm-8">
<textarea class="form-control" [(ngModel)]="modelDoc.engDesc"></textarea>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">ภาษาที่รองรับ</label>
<div class="col-sm-8">
<select class="custom-select" [(ngModel)]="modelDoc.langSupport">
<option value="THA">ไทย</option>
<option value="ENG">English</option>
</select>
<!-- <input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.langSupport"> -->
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">รูปภาพตัวอย่าง</label>
<div class="col-sm-8">
<input type="file" class="form-control" (change)="onUploadImage($event)">
<div class="msg-detail">ไฟล์ที่อนุญาต:*.jpeg, *.jpg, *.png</div>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">Link ตัวอย่าง</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.link1">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">แท็ก</label>
<div class="col-sm-8">
<tag-input [theme]="'bootstrap'" [(ngModel)]='modelDoc.tags' placeholder="+แท็ก" [onlyFromAutocomplete]="true"
secondaryPlaceholder="กดปุ่ม Enter เพื่อเพิ่มแท็กใหม่" [addOnBlur]="true" [clearOnBlur]="true">
<tag-input-dropdown [autocompleteItems]="listTag" [showDropdownIfEmpty]="true">
</tag-input-dropdown>
</tag-input>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">กลุ่ม</label>
<div class="col-sm-8">
<select class="custom-select" [(ngModel)]="modelDoc.group.groupId" (change)="selectGroup()">
<option *ngFor="let item of listGroup" [ngValue]="item.groupId">{{item.thName}}</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">หมายเหตุ</label>
<div class="col-sm-8">
<textarea class="form-control"[(ngModel)]="modelDoc.remark"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-info" (click)="onSumit()" [disabled]="!modelDoc.thName||!modelDoc.engName">บันทึก</button>
<button type="button" class="btn btn-danger" (click)="closeBtnClick()">ปิด</button>
</div>
</div>
</ng-template>
\ No newline at end of file
src/app/apps/list-widgets/list-widgets.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ListWidgetsComponent } from './list-widgets.component';
describe('ListWidgetsComponent', () => {
let component: ListWidgetsComponent;
let fixture: ComponentFixture<ListWidgetsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ListWidgetsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ListWidgetsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/apps/list-widgets/list-widgets.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { DocumentService } from 'src/app/service/document.service';
import { DocumentModel } from 'src/app/model/document.model';
import { UploadService } from 'src/app/service/upload.service';
import { TagService } from 'src/app/service/tag.service';
import { TagModel } from 'src/app/model/tag.mmodel';
import { GroupModel } from 'src/app/model/group.mmodel';
import { GroupService } from 'src/app/service/group.service';
import { OpenImageComponent } from '../open-image/open-image.component';
declare var require: any
const FileSaver = require('file-saver');
@Component({
selector: 'app-list-widgets',
templateUrl: './list-widgets.component.html',
styleUrls: ['./list-widgets.component.scss']
})
export class ListWidgetsComponent implements OnInit {
page = 1;
pageSize = 10;
listDoc: DocumentModel[] = []
modelDoc: DocumentModel = new DocumentModel({});
checkEdit: boolean = false
search: string = ''
listTag: TagModel[] = []
listGroup: GroupModel[] = []
constructor(private modalService: NgbModal, private documentService: DocumentService, private uploadService: UploadService, private tagService: TagService, private groupService: GroupService) {
}
async onUploadImage(event: any) {
try {
if (event.target.files.length > 0) {
let fileData = event.target.files[0];
const formData = new FormData();
formData.append('file', fileData);
const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
if (!allowedTypes.includes(fileData.type)) {
this.openAlertModal('อัพโหลดได้เฉพาะไฟล์ *.jpeg, *.jpg, *.png เท่านั้น')
} else {
const data = await this.uploadService.uploadImage(formData).toPromise();
if (data) {
this.modelDoc.thumbnail = data.body.fileId
}
}
}
} catch (error) {
console.error('Error loading data:', error);
}
}
onSelectFile(event: any, lang: string) {
if (event.target.files && event.target.files[0]) {
const reader = new FileReader();
const file: File = event.target.files[0];
reader.readAsDataURL(event.target.files[0]); // read file as data url
reader.onload = (event) => { // called once readAsDataURL is completed
if (event) {
const allowedTypes = ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword'];
if (!allowedTypes.includes(file.type)) {
this.openAlertModal('อัพโหลดได้เฉพาะไฟล์ *.doc เท่านั้น')
} else {
let base64 = event.target!.result as string
if (lang == 'th') {
this.modelDoc.thDocObj = base64.split(',')[1];
} else {
this.modelDoc.engDocObj = base64.split(',')[1];
}
}
}
}
}
}
async downloadFile(logId: string, lang: string) {
try {
const data = await this.documentService.downloadFile(logId, lang).toPromise();
if (data) {
FileSaver.saveAs(new Blob([data]), "file_download.doc");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
deleteFile(item: DocumentModel) {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.deleteExcel(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้')
}
}, error => {
this.openAlertModal(error.message)
})
}, reject => { })
}
openAlertModal(message?: string) {
const modalRef = this.modalService.open(AlertModalComponent, {
centered: true,
backdrop: 'static'
})
modalRef.componentInstance.message = message ? message : ""
modalRef.result.then(result => {
// this.modalService.dismissAll()
}, reason => {
// this.modalService.dismissAll()
})
}
onUpdate() {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการอัพเดทข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.createDoc(this.modelDoc).subscribe(result => {
this.modalService.dismissAll()
this.openAlertModal('อัพเดทข้อมูลสำเร็จ')
this.getListDoc();
// if (result) {
// this.modalService.dismissAll()
// this.openAlertModal('อัพเดทข้อมูลสำเร็จ')
// this.getListDoc();
// } else {
// this.openAlertModal('ไม่สามารถอัพเดทข้อมูลได้')
// }
}, error => {
this.openAlertModal(error.message)
})
}, reject => { })
}
onCreate() {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการบันทึกข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.createDoc(this.modelDoc).subscribe(result => {
if (result) {
this.modalService.dismissAll()
this.openAlertModal('บันทึกข้อมูลสำเร็จ')
this.getListDoc();
} else {
this.openAlertModal('ไม่สามารถสร้างเอกสารได้')
}
}, error => {
this.openAlertModal(error.message)
})
}, reject => { })
}
onSumit() {
if (this.checkEdit) {
this.onUpdate();
} else {
this.onCreate();
}
}
async getExcelById(targetModal: NgbModal, id: string) {
try {
const data = await this.documentService.getDocById(id).toPromise();
this.modelDoc = new DocumentModel(data)
if (data) {
this.modalService.open(targetModal, {
centered: true,
backdrop: 'static',
size: 'lg'
});
}
} catch (error) {
console.error('Error loading data:', error);
}
}
openModal(targetModal: NgbModal, item?: DocumentModel) {
if (item) {
this.getExcelById(targetModal, item.logId)
this.checkEdit = true
} else {
this.modelDoc = new DocumentModel({});
this.checkEdit = false
this.modalService.open(targetModal, {
centered: true,
backdrop: 'static',
size: 'lg'
});
}
}
getStatus(status: string) {
if (status == '0') {
return 'รออนุมัติ'
} else if (status == '1') {
return 'เปิดใช้งาน'
} else if (status == '2') {
return 'ไม่อนุมัติ'
}
}
async getListDoc() {
try {
const data = await this.documentService.getListDoc().toPromise();
this.listDoc = data.map(x => new DocumentModel(x))
} catch (error) {
console.error('Error loading data:', error);
}
}
filterListDoc() {
return this.listDoc.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
}
ngOnInit() {
this.getListDoc();
this.getListTag();
this.getListGroup();
}
async getListGroup() {
try {
const data = await this.groupService.getList().toPromise();
this.listGroup = data.map(x => new GroupModel(x))
} catch (error) {
console.error('Error loading data:', error);
}
}
selectGroup() {
let findData = this.listGroup.find(x => x.groupId == this.modelDoc.group.groupId)
this.modelDoc.group = findData ? new GroupModel(findData) : new GroupModel({})
}
async getListTag() {
try {
const data = await this.tagService.getList().toPromise();
this.listTag = data.map(x => new TagModel(x))
} catch (error) {
console.error('Error loading data:', error);
}
}
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()
})
}
closeBtnClick() {
this.modalService.dismissAll();
}
openLink(url: string) {
window.open(url, "_blank");
}
}
src/app/apps/portal-category-list/portal-category-list.component.html
......@@ -3,7 +3,7 @@
<div class="card card-body">
<h4 class="card-title">รายการเอกสาร</h4>
<div class="row justify-content-center">
<div class="col-md-4 " *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<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">
......
src/app/apps/portal-category-list/portal-category-list.component.ts
......@@ -49,6 +49,20 @@ export class PortalCategoryListComponent implements OnInit {
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'4',
img: "assets/images/icon/course.png",
name: "BI",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'5',
img: "assets/images/icon/course.png",
name: "Widgets",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
];
this.getListCount();
}
......
src/app/apps/portal-create-category/portal-create-category.component.ts
......@@ -49,6 +49,20 @@ export class PortalCreateCategoryComponent implements OnInit {
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'4',
img: "assets/images/icon/course.png",
name: "Widgets",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'5',
img: "assets/images/icon/course.png",
name: "BI",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
}
];
this.getListCount();
}
......@@ -77,6 +91,8 @@ export class PortalCreateCategoryComponent implements OnInit {
this.routes.navigate(['apps/list-doc']);
}else if(id =='3'){
this.routes.navigate(['apps/list-course']);
}else if(id =='4'){
this.routes.navigate(['apps/list-widgets']);
}
}
openModal(targetModal: NgbModal) {
......
src/app/apps/view-list-course/view-list-course.component.html
......@@ -70,7 +70,7 @@
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 mb-3" *ngFor="let data of filterListCourse()">
<div class="card border-5 border border-excel h-100 shadow" >
<div class="card border-5 border border-course h-100 shadow" >
<div class=" p-2 border-5">
<img width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())">
</div>
......
src/styles.scss
......@@ -98,6 +98,10 @@ body {
border:1px solid #2091eb !important;
border-color: #2091eb !important;
}
.border-course {
border:1px solid #7460ee !important;
border-color: #7460ee !important;
}
.border-5{
border-radius: 10px
}
......
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