config widjet

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^18.0.0",
+        "@angular/cdk": "^18.1.1",
         "@angular/common": "^18.0.0",
         "@angular/compiler": "^18.0.0",
         "@angular/core": "^18.0.0",
@@ -352,6 +353,22 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "18.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.1.1.tgz",
+      "integrity": "sha512-IaDjvRUgAoKnEeafrnBX+hjTR+1M3O3fV3AybBCjN4NuiPtuyOJiTMg0cTv6RbluJ/SenbT4MQq3tMpOsa9i4w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "18.0.7",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.0.7.tgz",
@@ -9659,7 +9676,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
       "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "entities": "^4.4.0"
       },

package.json

@@ -12,6 +12,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.1.1",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",

src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ServicesComponent } from './services/services.component';
 import { SettingWidgetComponent } from './setting-widget/setting-widget.component';
 import { LayoutWidjetComponent } from './layout-widjet/layout-widjet.component';
+import { LayoutWidjetSettingComponent } from './layout-widjet-setting/layout-widjet-setting.component';
 
 export const routes: Routes = [
   {
@@ -23,7 +24,11 @@ export const routes: Routes = [
     //   .then(x => x.ServicesComponent),
   },
   {
-    path: 'layout',
+    path: 'layout/:appName',
     component: LayoutWidjetComponent
+  },
+  {
+    path: 'layout-setting',
+    component: LayoutWidjetSettingComponent
   }
 ];

src/app/components.ts

@@ -4,24 +4,7 @@ import { NgxEchartsModule } from 'ngx-echarts';
 import * as echarts from 'echarts';
 import { HttpClient, HttpClientModule, HttpHeaders } from "@angular/common/http";
 
-export interface Service {
-  id: number;
-  title: string;
-  description: string;
-  dataModel: any;
-  dataSoure: any;
-  api: string;
-  width: number;
-  heigth: string;
-  tag: string;
-}
 
-export enum ServiceTypes {
-  consultancy, // 0
-  trainings, // 1
-  engineering, // 2
-  statistic, //3
-}
 
 @Component({
   selector: 'consultancy',

src/app/layout-widjet-setting/layout-widjet-setting.component.html

+<!-- <div class="row">
+  <app-services [id]="item.id" *ngFor="let item of widgetList" class="col-{{item.width}} p-1"></app-services>
+</div> -->
+<div class="row p-1">
+  <div class="col-12">
+    <div class="card justify-content-center align-items-center">
+      <div class="col-sm-8 col-md-6 col-xl-9">
+
+        <h4 class="mb-3 fs-7 fw-bolder" style="text-align: center;
+        ">จัดการ Layout Widget</h4>
+
+        <form class="needs-validation" novalidate>
+          <div class="mb-4 position-relative">
+            <label for="exampleInputPassword1" class="form-label">ชื่อแอปพลิเคชั่น</label>
+            <input [(ngModel)]="appName" name="datasource" type="text" class="form-control" aria-describedby="emailHelp"
+              [ngModelOptions]="{standalone: true}">
+            <div class="invalid-feedback">
+              Please enter a Username
+            </div>
+          </div>
+          <div class="mb-3 position-relative">
+            <label for="exampleInputEmail1" class="form-label">เลือก Widget</label>
+            <select [(ngModel)]="widgetModel" class="form-control" [ngModelOptions]="{standalone: true}"
+              (ngModelChange)="changeComponent()">
+              <option *ngFor="let item of widgetList" [ngValue]="item">{{item.title}}</option>
+            </select>
+          </div>
+          <button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2" (click)="addWidjet()">Add
+            Widget</button>
+          <button type="submit" class="btn btn-primary w-100 py-8 mb-4 rounded-2" (click)="saveLayout()">Save</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<div cdkDropList cdkDropListOrientation="mixed" class="row" (cdkDropListDropped)="drop($event)">
+  @for (item of widgetListConfig; track item) {
+  <app-services [id]="item.id" class="col-{{item.width}} p-1" cdkDrag></app-services>
+  }
+</div>

src/app/layout-widjet-setting/layout-widjet-setting.component.spec.ts

+/* 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 { LayoutWidjetSettingComponent } from './layout-widjet-setting.component';
+
+describe('LayoutWidjetSettingComponent', () => {
+  let component: LayoutWidjetSettingComponent;
+  let fixture: ComponentFixture<LayoutWidjetSettingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutWidjetSettingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutWidjetSettingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layout-widjet-setting/layout-widjet-setting.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ServicesComponent } from '../services/services.component';
+import { CommonModule } from '@angular/common';
+import { Service, WidjetService } from '../services/widjet.service';
+import { CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { FormsModule } from '@angular/forms';
+@Component({
+  selector: 'app-layout-widjet-setting',
+  templateUrl: './layout-widjet-setting.component.html',
+  standalone: true,
+  imports: [CommonModule, ServicesComponent, CdkDropList, CdkDrag, FormsModule],
+  styleUrls: ['./layout-widjet-setting.component.css']
+})
+export class LayoutWidjetSettingComponent implements OnInit {
+  widgetListConfig: Service[] = []
+  widgetList: Service[] = []
+  widgetModel?: Service
+  appName: string = ""
+  constructor(private widjetService: WidjetService) {
+    this.widgetList = this.widjetService.widjetList
+  }
+
+  ngOnInit() {
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.widgetListConfig, event.previousIndex, event.currentIndex);
+  }
+
+  addWidjet() {
+    this.widgetListConfig.push(this.widgetModel!)
+  }
+
+  saveLayout() {
+    let body = {
+      appId: 0,
+      appName: this.appName,
+      widjet: this.widgetListConfig
+    }
+    console.log(body)
+    this.widjetService.widjetConfig.push(body)
+  }
+
+  changeComponent() {
+    console.log("changeComponent", this.widgetModel)
+  }
+}

src/app/layout-widjet/layout-widjet.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ServicesComponent } from '../services/services.component';
-import { WidjetService } from '../services/widjet.service';
-import { Service } from '../components';
+import { Service, WidjetService } from '../services/widjet.service';
 import { CommonModule } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-layout-widjet',
@@ -12,10 +12,15 @@ import { CommonModule } from '@angular/common';
   styleUrls: ['./layout-widjet.component.css']
 })
 export class LayoutWidjetComponent implements OnInit {
+  appName = ""
   widjetId = 0
   widgetList: Service[] = []
-  constructor(private widjetService: WidjetService) {
-    this.widgetList = this.widjetService.widjetList
+  constructor(private widjetService: WidjetService, private readonly activatedRoute: ActivatedRoute) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.appName = result.get('appName')!
+      this.widgetList = this.widjetService.widjetConfig.filter(e => e.appName == this.appName)[0].widjet
+    })
+
   }
 
   ngOnInit() {

src/app/services-factory.ts

 import {
   ConsultancyComponent,
-  ServiceTypes,
   SoftwareEngineeringComponent,
   StatisticComponent,
   TrainingsComponent,
 } from './components';
 import { Type } from '@angular/core';
+import { ServiceTypes } from './services/widjet.service';
 
 export type ServiceComponentType = ConsultancyComponent
   | TrainingsComponent

src/app/services/services.component.ts

@@ -3,9 +3,8 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Observable, Subject, from, mergeMap, of, switchMap, takeUntil, tap } from 'rxjs';
 import { ComponentHostDirective } from '../directives/component-host.directive';
 import { ServiceComponentType, servicesComponentFactory } from '../services-factory';
-import { Service, ServiceTypes } from '../components';
 import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
-import { WidjetService } from './widjet.service';
+import { Service, ServiceTypes, WidjetService } from './widjet.service';
 
 @Component({
   selector: 'app-services',

src/app/services/widjet.service.ts

 import { Injectable } from '@angular/core';
-import { Service } from '../components';
 
+export interface AppWidjet {
+  appId: number;
+  appName: string;
+  widjet: Service[]
+}
+
+
+export interface Service {
+  id: number;
+  title: string;
+  description: string;
+  dataModel: any;
+  dataSoure: any;
+  api: string;
+  width: number;
+  heigth: string;
+  tag: string;
+}
+
+export enum ServiceTypes {
+  consultancy, // 0
+  trainings, // 1
+  engineering, // 2
+  statistic, //3
+}
 @Injectable({
   providedIn: 'root'
 })
 export class WidjetService {
+  widjetConfig: AppWidjet[] = [{
+    "appId": 0,
+    "appName": "Zeeme",
+    "widjet": [
+      {
+        id: 0,
+        title: "11111",
+        description: "111",
+        dataModel: "ss",
+        dataSoure: "sss",
+        api: "",
+        width: 6,
+        heigth: "",
+        tag: ""
+      },
+      {
+        id: 1,
+        title: "222",
+        description: "222",
+        dataModel: "ss",
+        dataSoure: "sss",
+        api: "",
+        width: 6,
+        heigth: "",
+        tag: ""
+      },
+      {
+        id: 2,
+        title: "3333",
+        description: "33333",
+        dataModel: "ss",
+        dataSoure: "sss",
+        api: "select data",
+        width: 3,
+        heigth: "",
+        tag: ""
+      },
+      {
+        id: 3,
+        title: "4444",
+        description: "4444",
+        dataModel: "4444",
+        dataSoure: "2312",
+        api: "https://hrplus.myhr.co.th/hr/taapi/leave/statistic?yearId=2024",
+        width: 3,
+        heigth: "",
+        tag: ""
+      },
+      {
+        id: 3,
+        title: "4444",
+        description: "4444",
+        dataModel: "4444",
+        dataSoure: "2312",
+        api: "https://hrplus.myhr.co.th/hr/taapi/leave/statistic?yearId=2024",
+        width: 3,
+        heigth: "",
+        tag: ""
+      },
+      {
+        id: 3,
+        title: "4444",
+        description: "4444",
+        dataModel: "4444",
+        dataSoure: "2312",
+        api: "https://hrplus.myhr.co.th/hr/taapi/leave/statistic?yearId=2024",
+        width: 3,
+        heigth: "",
+        tag: ""
+      }
+    ]
+  }, {
+    "appId": 1,
+    "appName": "myhrlite",
+    "widjet": [
+      {
+        "id": 0,
+        "title": "11111",
+        "description": "111",
+        "dataModel": {
+          "xAxis": {
+            "type": "category",
+            "data": [
+              "Mon",
+              "Tue",
+              "Wed",
+              "Thu",
+              "Fri",
+              "Sat",
+              "Sun"
+            ]
+          },
+          "yAxis": {
+            "type": "value"
+          },
+          "series": [
+            {
+              "data": [
+                820,
+                932,
+                901,
+                934,
+                1290,
+                1330,
+                1320
+              ],
+              "type": "line"
+            }
+          ]
+        },
+        "dataSoure": "sss",
+        "api": "",
+        "width": 6,
+        "heigth": "",
+        "tag": ""
+      },
+      {
+        "id": 2,
+        "title": "3333",
+        "description": "33333",
+        "dataModel": {
+          "legend": {},
+          "tooltip": {},
+          "dataset": {
+            "dimensions": [
+              "product",
+              "2015",
+              "2016",
+              "2017"
+            ],
+            "source": [
+              {
+                "2015": 43.3,
+                "2016": 85.8,
+                "2017": 93.7,
+                "product": "Matcha Latte"
+              },
+              {
+                "2015": 83.1,
+                "2016": 73.4,
+                "2017": 55.1,
+                "product": "Milk Tea"
+              },
+              {
+                "2015": 86.4,
+                "2016": 65.2,
+                "2017": 82.5,
+                "product": "Cheese Cocoa"
+              },
+              {
+                "2015": 72.4,
+                "2016": 53.9,
+                "2017": 39.1,
+                "product": "Walnut Brownie"
+              }
+            ]
+          },
+          "xAxis": {
+            "type": "category"
+          },
+          "yAxis": {},
+          "series": [
+            {
+              "type": "bar"
+            },
+            {
+              "type": "bar"
+            },
+            {
+              "type": "bar"
+            }
+          ]
+        },
+        "dataSoure": "sss",
+        "api": "select data",
+        "width": 3,
+        "heigth": "",
+        "tag": ""
+      },
+      {
+        "id": 1,
+        "title": "222",
+        "description": "222",
+        "dataModel": {
+          "legend": {},
+          "tooltip": {},
+          "dataset": {
+            "source": [
+              [
+                "product",
+                "2012",
+                "2013",
+                "2014",
+                "2015",
+                "2016",
+                "2017"
+              ],
+              [
+                "Milk Tea",
+                86.5,
+                92.1,
+                85.7,
+                83.1,
+                73.4,
+                55.1
+              ],
+              [
+                "Matcha Latte",
+                41.1,
+                30.4,
+                65.1,
+                53.3,
+                83.8,
+                98.7
+              ],
+              [
+                "Cheese Cocoa",
+                24.1,
+                67.2,
+                79.5,
+                86.4,
+                65.2,
+                82.5
+              ],
+              [
+                "Walnut Brownie",
+                55.2,
+                67.1,
+                69.2,
+                72.4,
+                53.9,
+                39.1
+              ]
+            ]
+          },
+          "series": [
+            {
+              "type": "pie",
+              "radius": "20%",
+              "center": [
+                "25%",
+                "30%"
+              ]
+            },
+            {
+              "type": "pie",
+              "radius": "20%",
+              "center": [
+                "75%",
+                "30%"
+              ],
+              "encode": {
+                "itemName": "product",
+                "value": "2013"
+              }
+            },
+            {
+              "type": "pie",
+              "radius": "20%",
+              "center": [
+                "25%",
+                "75%"
+              ],
+              "encode": {
+                "itemName": "product",
+                "value": "2014"
+              }
+            },
+            {
+              "type": "pie",
+              "radius": "20%",
+              "center": [
+                "75%",
+                "75%"
+              ],
+              "encode": {
+                "itemName": "product",
+                "value": "2015"
+              }
+            }
+          ]
+        },
+        "dataSoure": "sss",
+        "api": "",
+        "width": 6,
+        "heigth": "",
+        "tag": ""
+      }
+    ]
+  }];
+
   widjetList: Service[] = [{
     id: 0,
     title: "11111",

src/app/setting-widget/setting-widget.component.ts

@@ -2,8 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { ServicesComponent } from '../services/services.component';
 import { FormsModule } from '@angular/forms';
-import { Service } from '../components';
-import { WidjetService } from '../services/widjet.service';
+import { Service, WidjetService } from '../services/widjet.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 @Component({
   selector: 'app-setting-widget',