Widget iframe

src/app/components/dashboard/dashboard-routing.module.ts

@@ -60,6 +60,7 @@ import { CompetencyEvaluationFactorsComponent } from '../competency-assessment/c
 import { ReportCompetencySummaryComponent } from '../report-component/report-com/report-competency-summary/report-competency-summary.component';
 import { JobDescriptionEmpComponent } from '../job-description-emp/job-description-emp.component';
 import { CompetencyMappingComponent } from '../competency-mapping/competency-mapping.component';
+import { Widget1Component } from '../widget1/widget1.component';
 
 
 
@@ -129,6 +130,7 @@ const routes: Routes = [
       { path: "admin/report-pms-2", title: 'report-pms-2', component: ReportPms2Component },
       { path: "admin/report-pms-3", title: 'report-pms-3', component: ReportPms3Component },
       { path: "admin/excel-export/:id", title: 'รายงาน Excel', component: ExcelReportComponent },
+      { path: "admin/widget1", title: 'Widget1', component: Widget1Component },
 
       { path: "ess/self-setting-individual-kpi", title: 'แก้ไข Individual KPI ตนเอง', component: SettingIndividualKpiComponent },
       { path: "ess/supervisor-setting-individual-kpi", title: 'แก้ไข Individual KPI โดยหัวหน้า', component: SettingIndividualKpiSupervisorComponent },

src/app/components/widget1/widget1.component.html

+<!-- <iframe [src]="iframeUrl" style="width: 100%; height: 75vh; border: none;"></iframe> -->
+
+<div style="width: 100%; height: 80vh;">
+  <iframe
+    *ngIf="dashboardUrl"
+    [src]="dashboardUrl"
+    frameborder="0"
+    width="100%"
+    height="100%"
+    allowfullscreen
+  ></iframe>
+</div>

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

src/app/components/widget1/widget1.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-widget1',
+  templateUrl: './widget1.component.html',
+  styleUrls: ['./widget1.component.css'],
+  imports: [ CommonModule ],
+  standalone: true
+})
+export class Widget1Component implements OnInit {
+
+  // iframeUrl!: SafeResourceUrl;
+  dashboardUrl: SafeResourceUrl | null = null;
+  private dashboardId = 'dash-1758608130166';
+  private portalAppBaseUrl = 'https://portal.myhr.co.th';
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  ngOnInit() {
+    const url = `${this.portalAppBaseUrl}/#/embed/dashboard/${this.dashboardId}`;
+    this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+}

src/app/shared/services/navservice.ts

@@ -266,6 +266,19 @@ export class NavService implements OnDestroy {
           { id: 'm65', path: 'admin/report-pms-2', title: 'รายงาน PMS 2', type: 'link', show: true },
           { id: 'm66', path: 'admin/report-pms-3', title: 'รายงาน PMS 3', type: 'link', show: true },
         ],
+      },
+      {
+        title: 'Widget',
+        type: 'sub',
+        selected: false,
+        active: false,
+        path: '',
+        id: 'm7',
+        show: true,
+        icon: 'assets/img/icons-menu/Report.png',
+        children:[
+          { id: 'm71', path: 'admin/widget1', title: 'Widget', type: 'link', show: true },
+        ]
       }
     ]
   }