Skip to content

M
myhr-portal
Commit dde94786 by Nakarin Luankla
Options

UPDATE list-widgets

parent 32691b69
Showing with 219 additions and 150 deletions
src/app/apps/list-widgets/list-widgets.component.html
......@@ -15,30 +15,28 @@
<!-- <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">
<tr *ngFor="let data of filterListWidget() | 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.widgetTname }}</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">
<span class="fa-stack rt_anim" *ngIf="data.status == '0'" ngbTooltip="Private" 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>
<i class=" fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack rt_anim" *ngIf="data.status == '1'" ngbTooltip="เปิดใช้งาน" container="body" tooltipClass="myhrcolor-2">
<span class="fa-stack rt_anim" *ngIf="data.status == '1'" ngbTooltip="Public" 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>
<i class="fas fa-globe fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack rt_anim" *ngIf="data.status == '2'" ngbTooltip="ไม่อนุมัติ" container="body" tooltipClass="myhrcolor-3">
......@@ -48,7 +46,7 @@
</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="แก้ไข">
<button type="button" 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="ลบ">
......@@ -66,7 +64,7 @@
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listDoc.length" [maxSize]="3" [rotate]="true">
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="filterListWidget().length" [maxSize]="3" [rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
......@@ -90,40 +88,40 @@
<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">
<input type="text" class="form-control" id="nameth" [(ngModel)]="modelWidget.widgetTname">
</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">
<input type="text" class="form-control" id="nameeng" [(ngModel)]="modelWidget.widgetEname">
</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>
<textarea class="form-control" [(ngModel)]="modelWidget.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>
<textarea class="form-control" [(ngModel)]="modelWidget.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>
<label for="position" class="col-sm-4 col-form-label">สถานะ</label>
<div class="col-sm-8">
<select class="custom-select" [(ngModel)]="modelWidget.status">
<option [value]="0">Private</option>
<option [value]="1">Public</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">
......@@ -132,41 +130,28 @@
</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"
<tag-input [theme]="'bootstrap'" [(ngModel)]='modelWidget.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>
<textarea class="form-control"[(ngModel)]="modelWidget.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="submit" class="btn btn-info" (click)="onSumit()" [disabled]="!modelWidget.widgetTname||!modelWidget.widgetEname">บันทึก</button>
<button type="button" class="btn btn-danger" (click)="closeBtnClick()">ปิด</button>
</div>
</div>
......
src/app/apps/list-widgets/list-widgets.component.scss
::ng-deep ng2-dropdown-menu {
z-index: 9999 !important;
.ng2-dropdown-menu {
z-index: 9999 !important;
ng2-menu-item {
z-index: 9999 !important;
}
}
}
\ No newline at end of file
src/app/apps/list-widgets/list-widgets.component.spec.ts deleted 100644 → 0
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
......@@ -2,7 +2,6 @@ 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';
......@@ -10,6 +9,8 @@ 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';
import { WidgetModel } from 'src/app/model/widgets.model';
import { WidgetService } from 'src/app/service/widgets.service';
declare var require: any
const FileSaver = require('file-saver');
@Component({
......@@ -20,13 +21,15 @@ const FileSaver = require('file-saver');
export class ListWidgetsComponent implements OnInit {
page = 1;
pageSize = 10;
listDoc: DocumentModel[] = []
modelDoc: DocumentModel = new DocumentModel({});
listWidgets: WidgetModel[] = []
modelWidget: WidgetModel = new WidgetModel({});
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) {
constructor(private modalService: NgbModal, private widgetService: WidgetService,
private uploadService: UploadService,
private tagService: TagService,
private groupService: GroupService) {
}
async onUploadImage(event: any) {
try {
......@@ -40,7 +43,7 @@ export class ListWidgetsComponent implements OnInit {
} else {
const data = await this.uploadService.uploadImage(formData).toPromise();
if (data) {
this.modelDoc.thumbnail = data.body.fileId
this.modelWidget.picture = data.body.fileId
}
}
}
......@@ -48,49 +51,18 @@ export class ListWidgetsComponent implements OnInit {
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) {
deleteFile(item: WidgetModel) {
const modalRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.deleteExcel(item).subscribe(result => {
this.widgetService.deleteWidget(item).subscribe(result => {
if (result) {
this.openAlertModal('ลบข้อมูลสำเร็จ')
this.getListDoc();
this.getListWidgets();
} else {
this.openAlertModal('ไม่สามารถลบข้อมูลได้')
}
......@@ -119,17 +91,18 @@ export class ListWidgetsComponent implements OnInit {
})
modalRef.componentInstance.message = 'คุณต้องการอัพเดทข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.createDoc(this.modelDoc).subscribe(result => {
this.modelWidget.status = Number(this.modelWidget.status)
this.widgetService.createWidget(this.modelWidget).subscribe(result => {
this.modalService.dismissAll()
this.openAlertModal('อัพเดทข้อมูลสำเร็จ')
this.getListDoc();
// if (result) {
// this.modalService.dismissAll()
// this.openAlertModal('อัพเดทข้อมูลสำเร็จ')
// this.getListDoc();
// } else {
// this.openAlertModal('ไม่สามารถอัพเดทข้อมูลได้')
// }
this.getListWidgets();
if (result) {
this.modalService.dismissAll()
this.openAlertModal('อัพเดทข้อมูลสำเร็จ')
this.getListWidgets();
} else {
this.openAlertModal('ไม่สามารถอัพเดทข้อมูลได้')
}
}, error => {
this.openAlertModal(error.message)
})
......@@ -142,11 +115,12 @@ export class ListWidgetsComponent implements OnInit {
})
modalRef.componentInstance.message = 'คุณต้องการบันทึกข้อมูลหรือไม่'
modalRef.result.then(result => {
this.documentService.createDoc(this.modelDoc).subscribe(result => {
this.modelWidget.status = Number(this.modelWidget.status)
this.widgetService.createWidget(this.modelWidget).subscribe(result => {
if (result) {
this.modalService.dismissAll()
this.openAlertModal('บันทึกข้อมูลสำเร็จ')
this.getListDoc();
this.getListWidgets();
} else {
this.openAlertModal('ไม่สามารถสร้างเอกสารได้')
}
......@@ -162,10 +136,10 @@ export class ListWidgetsComponent implements OnInit {
this.onCreate();
}
}
async getExcelById(targetModal: NgbModal, id: string) {
async getWidgetById(targetModal: NgbModal, id: string) {
try {
const data = await this.documentService.getDocById(id).toPromise();
this.modelDoc = new DocumentModel(data)
const data = await this.widgetService.getWidgetById(id).toPromise();
this.modelWidget = new WidgetModel(data)
if (data) {
this.modalService.open(targetModal, {
centered: true,
......@@ -177,12 +151,13 @@ export class ListWidgetsComponent implements OnInit {
console.error('Error loading data:', error);
}
}
openModal(targetModal: NgbModal, item?: DocumentModel) {
openModal(targetModal: NgbModal, item?: WidgetModel) {
console.log("🚀 ~ ListWidgetsComponent ~ openModal ~ item:", item)
if (item) {
this.getExcelById(targetModal, item.logId)
this.getWidgetById(targetModal, item.widgetId)
this.checkEdit = true
} else {
this.modelDoc = new DocumentModel({});
this.modelWidget = new WidgetModel({});
this.checkEdit = false
this.modalService.open(targetModal, {
centered: true,
......@@ -194,45 +169,31 @@ export class ListWidgetsComponent implements OnInit {
}
getStatus(status: string) {
if (status == '0') {
return 'รออนุมัติ'
return 'Private'
} else if (status == '1') {
return 'เปิดใช้งาน'
} else if (status == '2') {
return 'ไม่อนุมัติ'
}
return 'Public'
}
}
async getListDoc() {
async getListWidgets() {
try {
const data = await this.documentService.getListDoc().toPromise();
this.listDoc = data.map(x => new DocumentModel(x))
const data = await this.widgetService.getListWidgets().toPromise();
this.listWidgets = data.map(x => new WidgetModel(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()))
filterListWidget() {
return this.listWidgets.filter(x => x.widgetTname.toLowerCase().includes(this.search.toLowerCase()) || x.widgetEname.toLowerCase().includes(this.search.toLowerCase()))
}
ngOnInit() {
this.getListDoc();
this.getListWidgets();
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();
const data = await this.tagService.getListWidgets().toPromise();
this.listTag = data.map(x => new TagModel(x))
} catch (error) {
console.error('Error loading data:', error);
......
src/app/apps/portal-create-category/portal-create-category.component.ts
......@@ -6,6 +6,7 @@ import { Router } from '@angular/router';
import { ExcelService } from 'src/app/service/excel.service';
import { DocumentService } from 'src/app/service/document.service';
import { CourseService } from 'src/app/service/course.service';
import { WidgetService } from 'src/app/service/widgets.service';
@Component({
selector: 'app-portal-create-category',
......@@ -14,7 +15,12 @@ import { CourseService } from 'src/app/service/course.service';
})
export class PortalCreateCategoryComponent implements OnInit {
constructor(private modalService: NgbModal,private routes: Router,private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService) {}
constructor(private modalService: NgbModal,private routes: Router,
private excelService:ExcelService,
private documentService:DocumentService,
private courseService:CourseService,
private widgetService:WidgetService
) {}
page = 1;
pageSize = 10;
......@@ -71,6 +77,7 @@ export class PortalCreateCategoryComponent implements OnInit {
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()
......@@ -78,6 +85,8 @@ export class PortalCreateCategoryComponent implements OnInit {
x.document = countDoc.toString()
}else if(i == 2){
x.document = countCourse.toString()
}else if(i == 3){
x.document = countWidgets.toString()
}
})
} catch (error) {
......
src/app/model/widgets.model.ts 0 → 100644
import { environment } from "src/environments/environment"
import { TagModel } from "./tag.mmodel"
import { GroupModel } from "./group.mmodel"
export interface WidgetModel {
widgetId: string
widgetTname: string
widgetEname: string
thDesc: string
engDesc: string
chartType: string
widgetHeight: number
widgetWidth: number
seriesColumn: string
picture: string
remark: string
status: number
tags: TagModel[]
}
export class WidgetModel implements WidgetModel {
widgetId: string
widgetTname: string
widgetEname: string
thDesc: string
engDesc: string
chartType: string
widgetHeight: number
widgetWidth: number
seriesColumn: string
picture: string
remark: string
status: number
tags: TagModel[]
constructor(data: Partial<any>) {
this.widgetId = data.widgetId?data.widgetId:''
this.widgetTname = data.widgetTname?data.widgetTname:''
this.widgetEname = data.widgetEname?data.widgetEname:''
this.thDesc = data.thDesc?data.thDesc:''
this.engDesc = data.engDesc?data.engDesc:''
this.chartType = data.chartType?data.chartType:''
this.widgetHeight = data.widgetHeight?data.widgetHeight:0
this.widgetWidth = data.widgetWidth?data.widgetWidth:0
this.status = data.status?data.status:0
this.seriesColumn = data.seriesColumn?data.seriesColumn:''
this.picture = data.picture?data.picture:''
this.remark = data.remark?data.remark:''
this.tags = data.tags?data.tags:[]
}
getImage(){
if(this.picture){
return environment.url+"files/image/"+this.picture
}else{
return 'assets/images/big/auth-bg.jpg'
}
}
}
\ No newline at end of file
src/app/service/tag.service.ts
......@@ -17,4 +17,7 @@ export class TagService {
getList(): Observable<TagModel[]> {
return this.http.get<TagModel[]>(this.url + "tag/lists")
}
getListWidgets(): Observable<TagModel[]> {
return this.http.get<TagModel[]>(this.url + "widget-tag/lists")
}
}
src/app/service/widgets.service.ts 0 → 100644
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { DocumentModel } from '../model/document.model';
import { DocumentContentModel } from '../model/document-content.model';
import { WidgetModel } from '../model/widgets.model';
@Injectable({
providedIn: 'root'
})
export class WidgetService {
url = environment.url
createStatus: boolean = true
constructor(private http: HttpClient) { }
getListWidgets(status?: string): Observable<WidgetModel[]> {
if (status) {
return this.http.get<WidgetModel[]>(this.url + "widget/lists?status=" + status)
} else {
return this.http.get<WidgetModel[]>(this.url + "widget/lists")
}
}
getListExcelContent(status?: string): Observable<DocumentContentModel[]> {
return this.http.get<DocumentContentModel[]>(this.url + "document-center/content/lists")
}
getWidgetById(widgetId: string): Observable<WidgetModel> {
return this.http.get<WidgetModel>(this.url + "widget/" + widgetId)
}
createWidget(model: WidgetModel): Observable<any> {
let body : any = model
return this.http.post(this.url + 'widget', body)
}
deleteWidget(model: WidgetModel): Observable<any> {
let body = {
widgetId: model.widgetId
}
let option = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
}
return this.http.delete<any>(this.url + 'widget', option)
}
deleteExcelContent(model: DocumentContentModel): Observable<any> {
let body = {
docId: model.docId
}
let option = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
}
return this.http.delete<any>(this.url + 'document-center/content', option)
}
getCount(status?: string): Observable<number> {
return this.http.get<number>(this.url + "widget/count")
}
getCountContent(status?: string): Observable<number> {
return this.http.get<number>(this.url + "document-center/content/count")
}
}
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