Skip to content

M
myhr-portal
Commit fddf6930 by Nakarin Luankla
Options

UPDATE widgets

parent dde94786
Showing with 299 additions and 11 deletions
src/app/apps/apps.module.ts
......@@ -97,6 +97,7 @@ 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';
import { ViewListWidgetsComponent } from './view-list-widgets/view-list-widgets.component';
@NgModule({
......@@ -171,7 +172,8 @@ import { ListWidgetsComponent } from './list-widgets/list-widgets.component';
ViewListCourseComponent,
ApprovedListComponent,
OpenImageComponent,
ListWidgetsComponent
ListWidgetsComponent,
ViewListWidgetsComponent
],
providers: [
ContactService,
......
src/app/apps/apps.routing.ts
......@@ -48,6 +48,7 @@ import { ViewListExcelComponent } from "./view-list-excel/view-list-excel.compon
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";
import { ViewListWidgetsComponent } from "./view-list-widgets/view-list-widgets.component";
export const AppsRoutes: Routes = [
{
path: "",
......@@ -330,6 +331,17 @@ export const AppsRoutes: Routes = [
},
},
{
path: "view-list-widgets",
component: ViewListWidgetsComponent,
data: {
title: "รายการวิทเจ็ท",
urls: [
{ title: "รายการเอกสาร" ,url: "apps/portal-category-list"},
{title:"รายการวิทเจ็ท"}
],
},
},
{
path: "portal-template-list",
component: PortalTemplateListComponent,
data: {
......
src/app/apps/list-widgets/list-widgets.component.html
......@@ -15,6 +15,8 @@
<!-- <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" class="text-center">สถานะ</th>
<th scope="col"></th>
</tr>
......@@ -26,7 +28,8 @@
<!-- <td >{{data.id}}</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"> <i class="fas fa-download pointer" (click)="downloadFile(data.widgetId)"></i></td>
<td class="text-center">
<span class="fa-stack rt_anim" *ngIf="data.status == '0'" ngbTooltip="Private" container="body" tooltipClass="myhrcolor-1">
......@@ -121,6 +124,29 @@
<!-- <input type="text" class="form-control" id="nameeng" [(ngModel)]="modelDoc.langSupport"> -->
</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)]="modelWidget.dbSupport">
<option value="SQLServer">SQLServer</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="Oracle">Oracle</option>
</select>
<!-- <input type="text" class="form-control" id="nameeng" [(ngModel)]="modelWidget.dbSupport"> -->
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">ไฟล์อัพโหลด</label>
<div class="{{!modelWidget.widgetObj||!checkEdit ? 'col-sm-8' : 'col-sm-6'}}">
<input type="file" class="form-control" (change)="onSelectFile($event)">
<div class="msg-detail">ไฟล์ที่อนุญาต:*.xlsx *.xlsm</div>
</div>
<div class="col-auto" *ngIf="modelWidget.widgetObj&&checkEdit">
<button class="btn btn-primary" (click)="downloadFile(modelWidget.widgetId)"><i class="fas fa-download" ></i></button>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-4 col-form-label">รูปภาพตัวอย่าง</label>
......@@ -131,6 +157,13 @@
</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)]="modelWidget.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)]='modelWidget.tags' placeholder="+แท็ก" [onlyFromAutocomplete]="true"
......@@ -140,6 +173,50 @@
</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)]="modelWidget.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">แสดงรูปแบบ Pivot</label>
<div class="col-sm-8 d-flex">
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="pivot0" name="radio-pivot" [value]="0" [(ngModel)]="modelWidget.isPivot">
<label class="custom-control-label" for="pivot0">ใช่</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="pivot1" name="radio-pivot" [value]="1" [(ngModel)]="modelWidget.isPivot">
<label class="custom-control-label" for="pivot1">ไม่ใช่</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">แสดงรูปแบบ DataGrid</label>
<div class="col-sm-8 d-flex">
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="datagrid" name="datagridCheck" [value]="0" [(ngModel)]="modelWidget.isDataGrid">
<label class="custom-control-label" for="datagrid">ใช่</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="datagrid1" name="datagridCheck" [value]="1" [(ngModel)]="modelWidget.isDataGrid">
<label class="custom-control-label" for="datagrid1">ไม่ใช่</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">หมายเหตุ</label>
......
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 { 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';
......@@ -26,11 +25,55 @@ export class ListWidgetsComponent implements OnInit {
checkEdit: boolean = false
search: string = ''
listTag: TagModel[] = []
listGroup:GroupModel[]=[]
constructor(private modalService: NgbModal, private widgetService: WidgetService,
private uploadService: UploadService,
private tagService: TagService,
private groupService: GroupService) {
}
onSelectFile(event:any) {
if (event.target.files && event.target.files[0]) {
const reader = new FileReader();
const file: File = event.target.files[0];
console.log("🚀 ~ ListExcelComponent ~ onSelectFile ~ file:", file)
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.spreadsheetml.sheet','application/vnd.ms-excel.sheet.macroEnabled.12'];
if (!allowedTypes.includes(file.type)) {
this.openAlertModal('อัพโหลดได้เฉพาะไฟล์ *.xlsx *.xlsm เท่านั้น')
} else {
let base64 = event.target!.result as string
this.modelWidget.widgetObj = base64.split(',')[1];
this.modelWidget.fileType = file.name.split('.')[file.name.split('.').length-1]
}
}
}
}
}
async downloadFile(logId:string){
try {
const data = await this.widgetService.downloadFile(logId).toPromise();
if(data){
FileSaver.saveAs(new Blob([data]), "file_download.xlsx");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
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.modelWidget.group.groupId)
this.modelWidget.group = findData?new GroupModel(findData):new GroupModel({})
}
async onUploadImage(event: any) {
try {
if (event.target.files.length > 0) {
......@@ -189,6 +232,7 @@ export class ListWidgetsComponent implements OnInit {
ngOnInit() {
this.getListWidgets();
this.getListTag();
this.getListGroup();
}
async getListTag() {
......
src/app/apps/portal-category-list/portal-category-list.component.ts
......@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
import { CourseService } from 'src/app/service/course.service';
import { DocumentService } from 'src/app/service/document.service';
import { ExcelService } from 'src/app/service/excel.service';
import { WidgetService } from 'src/app/service/widgets.service';
@Component({
selector: 'app-portal-category-list',
......@@ -13,7 +14,7 @@ export class PortalCategoryListComponent implements OnInit {
constructor(
private routes: Router,
private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService
private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService, private widgetService:WidgetService
) {}
page = 1;
pageSize = 10;
......@@ -51,18 +52,19 @@ export class PortalCategoryListComponent implements OnInit {
},
{
id:'4',
img: "assets/images/icon/course.png",
name: "BI",
img: "assets/images/icon/widget.png",
name: "Widgets",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'5',
img: "assets/images/icon/course.png",
name: "Widgets",
img: "assets/images/users/1.jpg",
name: "BI",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
];
this.getListCount();
}
......@@ -71,6 +73,7 @@ export class PortalCategoryListComponent implements OnInit {
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()
......@@ -78,6 +81,8 @@ export class PortalCategoryListComponent implements OnInit {
x.document = countDoc.toString()
}else if(i == 2){
x.document = countCourse.toString()
}else if(i == 3){
x.document = countWidgets.toString()
}
})
} catch (error) {
......@@ -91,6 +96,8 @@ export class PortalCategoryListComponent implements OnInit {
this.routes.navigate(['apps/view-list-doc']);
}else if(id =='3'){
this.routes.navigate(['apps/view-list-course']);
}else if(id =='4'){
this.routes.navigate(['apps/view-list-widgets']);
}
}
......
src/app/apps/portal-create-category/portal-create-category.component.ts
......@@ -57,14 +57,14 @@ export class PortalCreateCategoryComponent implements OnInit {
},
{
id:'4',
img: "assets/images/icon/course.png",
img: "assets/images/icon/widget.png",
name: "Widgets",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
},
{
id:'5',
img: "assets/images/icon/course.png",
img: "assets/images/users/1.jpg",
name: "BI",
details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
document: "0"
......
src/app/apps/view-list-widgets/view-list-widgets.component.html 0 → 100644
<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 filterListWidget()">
<div class="card border-5 border border-widget 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.widgetTname }}</h4>
<p class="card-text ">{{ data.thDesc }}</p>
<p class="text-info pointer mb-0" (click)="downloadFile(data.widgetId)"><i class="fas fa-download mr-1"></i> ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></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>
\ No newline at end of file
src/app/apps/view-list-widgets/view-list-widgets.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { OpenImageComponent } from '../open-image/open-image.component';
import { WidgetService } from 'src/app/service/widgets.service';
import { WidgetModel } from 'src/app/model/widgets.model';
declare var require: any
const FileSaver = require('file-saver');
@Component({
selector: 'app-view-list-widgets',
templateUrl: './view-list-widgets.component.html',
styleUrls: ['./view-list-widgets.component.scss']
})
export class ViewListWidgetsComponent implements OnInit {
page = 1;
pageSize = 10;
listWidget:WidgetModel[]=[]
search:string = ''
constructor(private modalService: NgbModal,private widgetService:WidgetService) {
}
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()
})
}
async downloadFile(logId:string){
try {
const data = await this.widgetService.downloadFile(logId).toPromise();
if(data){
FileSaver.saveAs(new Blob([data]), "file_download.xlsx");
}
} catch (error) {
console.error('Error loading data:', error);
}
}
getStatus(status: string) {
if (status == '0') {
return 'Private'
} else if (status == '1') {
return 'Public'
}
}
filterListWidget(){
return this.listWidget.filter(x => x.widgetTname.toLowerCase().includes(this.search.toLowerCase())||x.widgetEname.toLowerCase().includes(this.search.toLowerCase()))
}
async getListExcel(){
try {
const data = await this.widgetService.getListWidgets().toPromise();
this.listWidget = data.map(x => new WidgetModel(x))
} catch (error) {
console.error('Error loading data:', error);
}
}
ngOnInit() {
this.getListExcel();
}
openLink(url:string){
window.open(url, "_blank");
}
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()
})
}
coverDate(date:string){
return date.split('-').reverse().join('/')
}
}
src/app/model/widgets.model.ts
......@@ -15,6 +15,16 @@ export interface WidgetModel {
picture: string
remark: string
status: number
link1: string
dbSupport: string
widgetObj: string
fileType: string
isPivot: number
isDataGrid: number
uploadBy: string
uploadDate: string
uploadTime: string
group: GroupModel
tags: TagModel[]
}
......@@ -31,6 +41,16 @@ export class WidgetModel implements WidgetModel {
picture: string
remark: string
status: number
link1: string
dbSupport: string
widgetObj: string
fileType: string
isPivot: number
isDataGrid: number
uploadBy: string
uploadDate: string
uploadTime: string
group: GroupModel
tags: TagModel[]
constructor(data: Partial<any>) {
this.widgetId = data.widgetId?data.widgetId:''
......@@ -45,7 +65,17 @@ export class WidgetModel implements WidgetModel {
this.seriesColumn = data.seriesColumn?data.seriesColumn:''
this.picture = data.picture?data.picture:''
this.remark = data.remark?data.remark:''
this.link1 = data.link1?data.link1:''
this.widgetObj = data.widgetObj?data.widgetObj:''
this.dbSupport = data.dbSupport?data.dbSupport:''
this.tags = data.tags?data.tags:[]
this.fileType = data.fileType?data.fileType:''
this.isPivot = data.isPivot?data.isPivot:0
this.isDataGrid = data.isDataGrid?data.isDataGrid:0
this.uploadBy = data.uploadBy?data.uploadBy:''
this.uploadDate = data.uploadDate?data.uploadDate:''
this.uploadTime = data.uploadTime?data.uploadTime:''
this.group = data.group?new GroupModel(data.group):new GroupModel({})
}
getImage(){
......
src/app/service/widgets.service.ts
......@@ -27,7 +27,9 @@ export class WidgetService {
getWidgetById(widgetId: string): Observable<WidgetModel> {
return this.http.get<WidgetModel>(this.url + "widget/" + widgetId)
}
downloadFile(logId:string):Observable<any>{
return this.http.get(this.url + "widget/files/download/"+logId, { responseType: 'blob' })
}
createWidget(model: WidgetModel): Observable<any> {
let body : any = model
return this.http.post(this.url + 'widget', body)
......
src/styles.scss
......@@ -102,6 +102,10 @@ body {
border:1px solid #7460ee !important;
border-color: #7460ee !important;
}
.border-widget {
border:1px solid #ccc !important;
border-color: #ccc !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