width and api

src/app/components.ts

@@ -11,6 +11,9 @@ export interface Service {
   dataModel: any;
   dataSoure: any;
   api: string;
+  width: number;
+  heigth: string;
+  tag: string;
 }
 
 export enum ServiceTypes {
@@ -25,8 +28,9 @@ export enum ServiceTypes {
   standalone: true,
   imports: [NgxEchartsModule],
   template: `
-  <div>{{model}}</div>
+    <div class="card">
     <div echarts [options]="model" class="demo-chart"></div>
+    </div>
   `,
 })
 export class ConsultancyComponent {
@@ -52,7 +56,9 @@ export class ConsultancyComponent {
   standalone: true,
   imports: [NgxEchartsModule],
   template: `
+   <div class="card">
     <div echarts [options]="model" class="demo-chart"></div>
+   </div>
   `,
 })
 export class SoftwareEngineeringComponent {
@@ -84,8 +90,9 @@ export class SoftwareEngineeringComponent {
   standalone: true,
   imports: [NgxEchartsModule],
   template: `
-    <div>{{model}}</div>
+   <div class="card">
     <div echarts [options]="model" class="demo-chart"></div>
+</div>
   `,
 })
 export class TrainingsComponent {
@@ -147,7 +154,9 @@ export class TrainingsComponent {
   standalone: true,
   imports: [NgxEchartsModule],
   template: `
+   <div class="card">
     <div echarts [options]="model" class="demo-chart"></div>
+</div>
   `,
 })
 export class StatisticComponent {

src/app/services/services.component.ts

@@ -5,6 +5,7 @@ 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';
 
 @Component({
   selector: 'app-services',
@@ -17,42 +18,11 @@ export class ServicesComponent implements OnInit {
   @Input() id?: number;
   @Output() valueChange: EventEmitter<Service> = new EventEmitter<Service>();
 
-  componentList: Service[] = [{
-    id: 0,
-    title: "11111",
-    description: "111",
-    dataModel: "ss",
-    dataSoure: "sss",
-    api: ""
-  },
-  {
-    id: 1,
-    title: "222",
-    description: "222",
-    dataModel: "ss",
-    dataSoure: "sss",
-    api: ""
-  },
-  {
-    id: 2,
-    title: "3333",
-    description: "33333",
-    dataModel: "ss",
-    dataSoure: "sss",
-    api: ""
-  },
-  {
-    id: 3,
-    title: "4444",
-    description: "4444",
-    dataModel: "4444",
-    dataSoure: "4444",
-    api: "https://hrplus.myhr.co.th/hr/taapi/leave/statistic?yearId=2024"
-  }]
+
 
   @ViewChild(ComponentHostDirective, { static: true }) componentHost!: ComponentHostDirective;
 
-  constructor(private readonly route: ActivatedRoute, private http: HttpClient) { }
+  constructor(private readonly route: ActivatedRoute, private widjetService: WidjetService) { }
 
   destroy: Subject<void> = new Subject<void>();
 
@@ -91,40 +61,13 @@ export class ServicesComponent implements OnInit {
   }
 
   loadComponent(service: Service): void {
-    console.log("service", service)
-    if (service) {
     const { viewContainerRef }: ComponentHostDirective = this.componentHost;
     viewContainerRef.clear();
 
     const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
       servicesComponentFactory[service.id as ServiceTypes]
     );
-      if (service.api != "") {
-        const options = {
-          headers: new HttpHeaders({
-            "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJIUlBsdXMiLCJyb2xlcyI6WyJVU0VSIl0sIndvcmthcmVhIjoiTk9ORSIsImlzcyI6IkNvbXB1dGVyIFNjaWVuY2UgQ29ycG9yYXRpb24gTGltaXRlZCIsInptbG9naW4iOiJmYWxzZSIsInJvbGVfbGV2ZWwiOiIiLCJlbXBsb3llZWlkIjoiMjAxODAyMTAiLCJicmFuY2giOiIxMDAiLCJlbXBfcG9zaXRpb24iOiJQLVJELTIyMDEiLCJ1c2VyX3JvbGUiOiIiLCJ1aWQiOiIyMDE4MDIxMCIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIyMDE4MDIxMCIsImxhbmciOiJ0aCIsImFkIjoiZmFsc2UiLCJmaXJzdGxvZ2luIjoiZmFsc2UiLCJ1cmxfbXlociI6Imh0dHA6Ly9ocnBsdXMubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiRW1wLVVzZXIiLCJmdWxsbmFtZSI6IuC4meC4suC4ouC4iuC4meC4sOC4iuC4seC4oiAg4LmC4Lit4LiU4Lie4Li04Lih4Lie4LmMIiwiY29taWQiOiIiLCJqb2IiOiJKLVJELTIyMDEiLCJ1c2VyIjoiQ2hhbmFjaGFpLm8iLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJjaGFuYWNoYWkubyIsIm1lbWJlcmlkIjoiIn0.5BgyoT-lLs9qFDj3iIizzYNeA0vWd9nTU8QHpzxMF7A",
-          }),
-        };
-        this.http.get(service.api, options).subscribe(result => {
-          service.dataSoure = result
-          service.dataModel = instance.model
-          this.valueChange.emit(service);
-        })
-      } else {
-        service.dataModel = instance.model
-        this.valueChange.emit(service);
-      }
-
-    }else{
-      const { viewContainerRef }: ComponentHostDirective = this.componentHost;
-      viewContainerRef.clear();
-      this.valueChange.emit(service);
-    }
-
-    // instance.model = service.dataModel;
-
-
-
+    service.dataModel = instance.model;
   }
 
   ngOnDestroy(): void {
@@ -133,7 +76,7 @@ export class ServicesComponent implements OnInit {
 
   getOne(num: number): Observable<Service> {
     console.log("num", num)
-    let componentFilter = this.componentList.filter(e =>
+    let componentFilter = this.widjetService.widjetList.filter(e =>
       e.id == num)[0];
     return of(componentFilter)
   }

src/app/services/widjet.service.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { WidjetService } from './widjet.service';
+
+describe('Service: Widjet', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [WidjetService]
+    });
+  });
+
+  it('should ...', inject([WidjetService], (service: WidjetService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/widjet.service.ts

+import { Injectable } from '@angular/core';
+import { Service } from '../components';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WidjetService {
+  widjetList: Service[] = [{
+    id: 0,
+    title: "11111",
+    description: "111",
+    dataModel: "ss",
+    dataSoure: "sss",
+    api: "",
+    width: 12,
+    heigth: "",
+    tag: ""
+  },
+  {
+    id: 1,
+    title: "222",
+    description: "222",
+    dataModel: "ss",
+    dataSoure: "sss",
+    api: "",
+    width: 5,
+    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: 5,
+    heigth: "",
+    tag: ""
+  }]
+  constructor() { }
+
+}

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

 <div id="loginform" style="background-color: gray;">
   <div class="position-relative overflow-hidden radial-gradient min-vh-100 w-100">
     <div class="position-relative z-index-5" style="z-index: 5 !important;">
-      <div class="row p-4">
-        <div class="col-xl-7 col-xxl-8">
-          <div class="card">
-            <app-services [id]="widjetId" (valueChange)="onValueChange($event)"></app-services>
+      <div class="row p-1">
+        <app-services [id]="widjetId" class="col-{{widgetModel.width}}"></app-services>
       </div>
-          <div class="card p-4 mt-5">
-            <div class="alert alert-danger" style="word-break: break-all;">{{model | json}}</div>
-          </div>
-        </div>
-        <div class="col-xl-5 col-xxl-4">
-          <div class="authentication-login min-vh-100 bg-body row justify-content-center align-items-center p-4">
+      <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">
 
-              <h2 class="mb-3 fs-7 fw-bolder" style="text-align: center;
-              ">จัดการ Widget</h2>
+              <h4 class="mb-3 fs-7 fw-bolder" style="text-align: center;
+              ">จัดการ Widget</h4>
 
               <form class="needs-validation" novalidate>
                 <div class="mb-3 position-relative">
                   <label for="exampleInputEmail1" class="form-label">เลือก Widget</label>
-                  <input [(ngModel)]="widjetId" name="username" type="text" class="form-control"
+                  <select [(ngModel)]="widgetModel" class="form-control" [ngModelOptions]="{standalone: true}"
+                    (ngModelChange)="changeComponent()">
+                    <option *ngFor="let item of widgetList" [ngValue]="item">{{item.title}}</option>
+                  </select>
+                  <!-- <input [(ngModel)]="widjetId" name="username" type="text" class="form-control"
                     aria-describedby="emailHelp" required>
                   <div class="invalid-feedback">
                     Please enter a Username
-                  </div>
+                  </div> -->
 
                 </div>
                 <div class="mb-4 position-relative">
+                  <label for="exampleInputPassword1" class="form-label">Api</label>
+                  <input [(ngModel)]="widgetModel.api" name="datasource" type="text" class="form-control"
+                    aria-describedby="emailHelp" [ngModelOptions]="{standalone: true}">
+                  <div class="invalid-feedback">
+                    Please enter a Username
+                  </div>
+                </div>
                 <label for="exampleInputPassword1" class="form-label">Datasource</label>
-                  <input [(ngModel)]="dataSoure" name="datasource" type="text" class="form-control"
+                <div class="alert alert-danger" style="word-break: break-all;">{{widgetModel.dataSoure | json}}</div>
+                <label for="exampleInputPassword1" class="form-label">Model to Widget</label>
+                <div class="alert alert-danger" style="word-break: break-all;">{{widgetModel.dataModel | json}}</div>
+                <div class="mb-3 position-relative">
+                  <label for="exampleInputEmail1" class="form-label">ขนาด Grid</label>
+                  <select [(ngModel)]="widgetModel.width" class="form-control" [ngModelOptions]="{standalone: true}"
+                    (ngModelChange)="changeComponent()">
+                    <option [ngValue]="1">1</option>
+                    <option [ngValue]="2">2</option>
+                    <option [ngValue]="3">3</option>
+                    <option [ngValue]="4">4</option>
+                    <option [ngValue]="5">5</option>
+                    <option [ngValue]="6">6</option>
+                    <option [ngValue]="7">7</option>
+                    <option [ngValue]="8">8</option>
+                    <option [ngValue]="9">9</option>
+                    <option [ngValue]="10">10</option>
+                    <option [ngValue]="11">11</option>
+                    <option [ngValue]="12">12</option>
+                  </select>
+                  <!-- <input [(ngModel)]="widjetId" name="username" type="text" class="form-control"
                     aria-describedby="emailHelp" required>
                   <div class="invalid-feedback">
                     Please enter a Username
+                  </div> -->
+
                 </div>
-                </div>
-                <div class="alert alert-danger" style="word-break: break-all;">{{resp | json}}</div>
+
+                <button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2"
+                  (click)="loadData()">Preview</button>
                 <button type="submit" class="btn btn-primary w-100 py-8 mb-4 rounded-2">Save</button>
-                <button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2">Preview</button>
               </form>
             </div>
           </div>

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

@@ -3,6 +3,8 @@ 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 { HttpClient, HttpHeaders } from '@angular/common/http';
 @Component({
   selector: 'app-setting-widget',
   standalone: true,
@@ -11,30 +13,52 @@ import { Service } from '../components';
   styleUrls: ['./setting-widget.component.css']
 })
 export class SettingWidgetComponent implements OnInit {
-  widgetModel?: Service
+  widgetModel: Service
   widjetId = 0
-  dataSoure: string = "";
+  api: string = "";
   model: string = "";
   resp: string = ""
-  constructor() { }
+  widgetList: Service[] = []
+  constructor(private widjectService: WidjetService, private http: HttpClient) {
+    this.widgetList = this.widjectService.widjetList
+    this.widgetModel = this.widgetList[0]
+  }
 
   ngOnInit() {
   }
 
-  onValueChange(value: Service) {
-    console.log("value", value)
-    if (value) {
-      this.widgetModel = value
-      this.dataSoure = value.api
-      this.resp = value.dataSoure
-      this.model = value.dataModel
-    }else{
-      this.widgetModel = undefined
-      this.dataSoure = ""
-      this.resp = ""
-      this.model = ""
+  // onValueChange(value: Service) {
+  //   console.log("value", value)
+  //   if (value) {
+  //     this.widgetModel = value
+  //     this.api = value.api
+  //     this.resp = value.api
+  //     this.model = value.dataModel
+  //   } else {
+  //     this.widgetModel = undefined
+  //     this.api = ""
+  //     this.resp = ""
+  //     this.model = ""
+  //   }
+
+  // }
+
+  changeComponent() {
+    console.log("changeComponent", this.widgetModel)
+    this.widjetId = this.widgetModel?.id!
+    this.api = this.widgetModel?.api!
+    this.loadData()
   }
 
+  loadData() {
+    const options = {
+      headers: new HttpHeaders({
+        "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJIUlBsdXMiLCJyb2xlcyI6WyJVU0VSIl0sIndvcmthcmVhIjoiTk9ORSIsImlzcyI6IkNvbXB1dGVyIFNjaWVuY2UgQ29ycG9yYXRpb24gTGltaXRlZCIsInptbG9naW4iOiJmYWxzZSIsInJvbGVfbGV2ZWwiOiIiLCJlbXBsb3llZWlkIjoiMjAxODAyMTAiLCJicmFuY2giOiIxMDAiLCJlbXBfcG9zaXRpb24iOiJQLVJELTIyMDEiLCJ1c2VyX3JvbGUiOiIiLCJ1aWQiOiIyMDE4MDIxMCIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIyMDE4MDIxMCIsImxhbmciOiJ0aCIsImFkIjoiZmFsc2UiLCJmaXJzdGxvZ2luIjoiZmFsc2UiLCJ1cmxfbXlociI6Imh0dHA6Ly9ocnBsdXMubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiRW1wLVVzZXIiLCJmdWxsbmFtZSI6IuC4meC4suC4ouC4iuC4meC4sOC4iuC4seC4oiAg4LmC4Lit4LiU4Lie4Li04Lih4Lie4LmMIiwiY29taWQiOiIiLCJqb2IiOiJKLVJELTIyMDEiLCJ1c2VyIjoiQ2hhbmFjaGFpLm8iLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJjaGFuYWNoYWkubyIsIm1lbWJlcmlkIjoiIn0.5BgyoT-lLs9qFDj3iIizzYNeA0vWd9nTU8QHpzxMF7A",
+      }),
+    };
+    this.http.get(this.widgetModel.api, options).subscribe(result => {
+      this.widgetModel.dataSoure = result
+    })
   }
 
 }