UPDATE widgets

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>
@@ -129,7 +155,14 @@
             <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)]="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">
@@ -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

+  <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

+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
 }