Skip to content

P
portal-apps-manage
Commit 1a7c08a5 by Ooh-Ao
Options

dashboard

parent 3ab688d0
Showing with 434 additions and 431 deletions
src/app/portal-manage/dashboard-management/dashboard-management.component.html
......@@ -55,7 +55,7 @@
(click)="addWidgetToDashboard(widget)"
class="widget-item p-3 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors duration-200"
>
<p class="font-semibold text-gray-700">{{ widget.name }}</p>
<p class="font-semibold text-gray-700">{{ widget.thName }}</p>
<p class="text-xs text-gray-500">
Size: {{ widget.cols }}x{{ widget.rows }}
</p>
......
src/app/portal-manage/dashboard-management/dashboard-management.component.ts
......@@ -114,397 +114,397 @@ export class DashboardManagementComponent implements OnInit {
public userDashboards: DashboardModel[] = [];
public selectedDashboardId: DashboardModel
private localWidgets: WidgetModel[] = [
new WidgetModel({
id: 'local-sync-pivot',
name: 'Syncfusion Pivot Table (Local)',
component: 'SyncfusionPivotWidgetComponent',
cols: 3,
rows: 3,
config: {
title: 'Employee Salary Pivot',
source: { type: 'url', url: 'assets/data/employee-data.json' },
rows: [{ name: 'department' }],
columns: [{ name: 'gender' }],
values: [{ name: 'salary', caption: 'Total Salary' }],
}
}),
new WidgetModel({
id: 'local-sync-grid',
name: 'Syncfusion Data Grid (Local)',
component: 'SyncfusionDatagridWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'All Employee Data',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'id', headerText: 'ID', width: 70 },
{ field: 'name', headerText: 'Name', width: 120 },
{ field: 'department', headerText: 'Department', width: 120 },
{ field: 'salary', headerText: 'Salary', width: 100 },
{ field: 'performanceScore', headerText: 'Performance', width: 120 },
]
}
}),
new WidgetModel({
id: 'local-sync-chart',
name: 'Syncfusion Chart (Local)',
component: 'SyncfusionChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Performance',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'performanceScore',
xAxisTitle: 'Employee',
yAxisTitle: 'Score',
}
}),
new WidgetModel({
id: 'local-area-chart',
name: 'Area Chart (Local)',
component: 'AreaChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Monthly Sales by Employee',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'salesAmount',
xAxisTitle: 'Employee',
yAxisTitle: 'Sales Amount',
}
}),
new WidgetModel({
id: 'local-bar-chart',
name: 'Bar Chart (Local)',
component: 'BarChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Performance Score',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'performanceScore',
xAxisTitle: 'Employee',
yAxisTitle: 'Performance Score',
type: 'Column'
}
}),
new WidgetModel({
id: 'local-pie-chart',
name: 'Pie Chart (Local)',
component: 'PieChartWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Gender Distribution',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'gender',
yField: 'id',
aggregation: 'count',
}
}),
new WidgetModel({
id: 'local-scatter-bubble-chart',
name: 'Scatter/Bubble Chart (Local)',
component: 'ScatterBubbleChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Performance vs. Salary (Scatter)',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'performanceScore',
yField: 'salary',
xAxisTitle: 'Performance Score',
yAxisTitle: 'Salary',
type: 'Scatter'
}
}),
new WidgetModel({
id: 'local-multi-row-card',
name: 'Multi-Row Card (Local)',
component: 'MultiRowCardWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Employee Overview',
source: { type: 'url', url: 'assets/data/employee-data.json' },
labelField: 'department',
valueField: 'salary',
unitField: 'currency' // Assuming 'currency' field exists in employee-data.json or can be added
}
}),
new WidgetModel({
id: 'local-combo-chart',
name: 'Combo Chart (Local)',
component: 'ComboChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Sales and Performance',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yFields: ['salesAmount', 'performanceScore'],
xAxisTitle: 'Employee',
yAxisTitle: 'Value',
series: [
{ type: 'Column', xName: 'name', yName: 'salesAmount', name: 'Sales' },
{ type: 'Line', xName: 'name', yName: 'performanceScore', name: 'Performance' }
]
}
}),
new WidgetModel({
id: 'local-doughnut-chart',
name: 'Doughnut Chart (Local)',
component: 'DoughnutChartWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Department Distribution',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'department',
yField: 'id',
aggregation: 'count',
}
}),
new WidgetModel({
id: 'local-funnel-chart',
name: 'Funnel Chart (Local)',
component: 'FunnelChartWidgetComponent',
cols: 2,
rows: 3,
config: {
title: 'Sales Funnel',
xField: 'stage',
yField: 'value',
}
}),
new WidgetModel({
id: 'local-gauge-chart',
name: 'Gauge Chart (Local)',
component: 'GaugeChartWidgetComponent',
cols: 2,
rows: 2,
config: {
title: 'Average Performance Score',
valueField: 'performanceScore', // Assuming 'performanceScore' is a numeric field in employee-data.json
ranges: [
{ start: 0, end: 60, color: '#E0B9B9' },
{ start: 60, end: 80, color: '#B9D7EA' },
{ start: 80, end: 100, color: '#B9EAB9' }
]
}
}),
new WidgetModel({
id: 'local-simple-kpi',
name: 'Simple KPI (Local)',
component: 'SimpleKpiWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Total Employees',
source: { type: 'url', url: 'assets/data/employee-data.json' },
valueField: 'id',
aggregation: 'count',
unit: 'persons',
trend: 'up',
trendValue: '+10%'
}
}),
new WidgetModel({
id: 'local-filled-map',
name: 'Filled Map (Local)',
component: 'FilledMapWidgetComponent',
cols: 4,
rows: 3,
config: {
title: 'Employee Distribution by Country',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has country and value
countryField: 'country', // Assuming a 'country' field in employee-data.json
valueField: 'employeeCount', // Assuming an 'employeeCount' field in employee-data.json
colorMapping: [
{ value: 0, color: '#C3E6CB' },
{ value: 50, color: '#FFECB5' },
{ value: 100, color: '#F5C6CB' }
]
}
}),
new WidgetModel({
id: 'local-matrix',
name: 'Matrix (Local)',
component: 'MatrixWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Skills Matrix',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'name', headerText: 'Employee Name' },
{ field: 'department', headerText: 'Department' },
{ field: 'skill1', headerText: 'Skill 1' }, // Assuming these fields exist or can be added to employee-data.json
{ field: 'skill2', headerText: 'Skill 2' },
{ field: 'skill3', headerText: 'Skill 3' },
]
}
}),
new WidgetModel({
id: 'local-slicer',
name: 'Slicer (Local)',
component: 'SlicerWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Filter by Department',
source: { type: 'url', url: 'assets/data/employee-data.json' },
optionsField: 'department', // Assuming 'department' field exists in employee-data.json
}
}),
new WidgetModel({
id: 'local-simple-table',
name: 'Simple Table (Local)',
component: 'SimpleTableWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Details',
source: { type: 'url', url: 'assets/data/employee-data.json' },
columns: [
{ field: 'id', headerText: 'ID' },
{ field: 'name', headerText: 'Name' },
{ field: 'department', headerText: 'Department' },
{ field: 'salary', headerText: 'Salary' },
]
}
}),
new WidgetModel({
id: 'local-waterfall-chart',
name: 'Waterfall Chart (Local)',
component: 'WaterfallChartWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Salary Changes',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'salaryChange', // Assuming 'salaryChange' field exists in employee-data.json
xAxisTitle: 'Employee',
yAxisTitle: 'Salary Change',
}
}),
new WidgetModel({
id: 'local-treemap',
name: 'Treemap (Local)',
component: 'TreemapWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Salary Progression',
source: { type: 'url', url: 'assets/data/employee-data.json' },
xField: 'name',
yField: 'salary',
xAxisTitle: 'Employee',
yAxisTitle: 'Salary',
}
}),
new WidgetModel({
id: 'local-attendance-overview',
name: 'Attendance Overview (Local)',
component: 'AttendanceOverviewWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Daily Attendance Summary',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has attendance data
presentField: 'present',
onLeaveField: 'onLeave',
absentField: 'absent',
}
}),
new WidgetModel({
id: 'local-company-info',
name: 'Company Info (Local)',
component: 'CompanyInfoWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Our Company Details',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has company info
companyNameField: 'companyName',
addressField: 'address',
contactField: 'contact',
}
}),
new WidgetModel({
id: 'local-employee-directory',
name: 'Employee Directory (Local)',
component: 'EmployeeDirectoryWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'All Employees',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has employee info
nameField: 'name',
positionField: 'position',
departmentField: 'department',
}
}),
new WidgetModel({
id: 'local-headcount',
name: 'Employee Headcount (Local)',
component: 'HeadcountWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Current Headcount',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has employee data
categoryField: 'department', // Field to categorize headcount by
}
}),
new WidgetModel({
id: 'local-payroll-summary',
name: 'Payroll Summary (Local)',
component: 'PayrollSummaryWidgetComponent',
cols: 2,
rows: 1,
config: {
title: 'Latest Payroll Overview',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has payroll data
totalPayrollField: 'totalPayroll',
employeesPaidField: 'employeesPaid',
}
}),
new WidgetModel({
id: 'local-payroll-details',
name: 'Payroll Details (Local)',
component: 'PayrollWidgetComponent',
cols: 3,
rows: 2,
config: {
title: 'Employee Payroll Details',
source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has payroll details
employeeNameField: 'name',
payPeriodField: 'payPeriod',
netPayField: 'netPay',
}
}),
new WidgetModel({
id: 'local-company-info-subfolder',
name: 'Company Info (Subfolder Local)',
component: 'CompanyInfoSubfolderWidgetComponent', // Use the new component name
cols: 2,
rows: 1,
config: {
title: 'Our Company Details (Subfolder)',
source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has company info
companyNameField: 'companyName',
addressField: 'address',
contactField: 'contact',
}
}),
];
// private localWidgets: WidgetModel[] = [
// new WidgetModel({
// id: 'local-sync-pivot',
// name: 'Syncfusion Pivot Table (Local)',
// component: 'SyncfusionPivotWidgetComponent',
// cols: 3,
// rows: 3,
// config: {
// title: 'Employee Salary Pivot',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// rows: [{ name: 'department' }],
// columns: [{ name: 'gender' }],
// values: [{ name: 'salary', caption: 'Total Salary' }],
// }
// }),
// new WidgetModel({
// id: 'local-sync-grid',
// name: 'Syncfusion Data Grid (Local)',
// component: 'SyncfusionDatagridWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'All Employee Data',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// columns: [
// { field: 'id', headerText: 'ID', width: 70 },
// { field: 'name', headerText: 'Name', width: 120 },
// { field: 'department', headerText: 'Department', width: 120 },
// { field: 'salary', headerText: 'Salary', width: 100 },
// { field: 'performanceScore', headerText: 'Performance', width: 120 },
// ]
// }
// }),
// new WidgetModel({
// id: 'local-sync-chart',
// name: 'Syncfusion Chart (Local)',
// component: 'SyncfusionChartWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Performance',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'name',
// yField: 'performanceScore',
// xAxisTitle: 'Employee',
// yAxisTitle: 'Score',
// }
// }),
// new WidgetModel({
// id: 'local-area-chart',
// name: 'Area Chart (Local)',
// component: 'AreaChartWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Monthly Sales by Employee',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'name',
// yField: 'salesAmount',
// xAxisTitle: 'Employee',
// yAxisTitle: 'Sales Amount',
// }
// }),
// new WidgetModel({
// id: 'local-bar-chart',
// name: 'Bar Chart (Local)',
// component: 'BarChartWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Performance Score',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'name',
// yField: 'performanceScore',
// xAxisTitle: 'Employee',
// yAxisTitle: 'Performance Score',
// type: 'Column'
// }
// }),
// new WidgetModel({
// id: 'local-pie-chart',
// name: 'Pie Chart (Local)',
// component: 'PieChartWidgetComponent',
// cols: 2,
// rows: 2,
// config: {
// title: 'Gender Distribution',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'gender',
// yField: 'id',
// aggregation: 'count',
// }
// }),
// new WidgetModel({
// id: 'local-scatter-bubble-chart',
// name: 'Scatter/Bubble Chart (Local)',
// component: 'ScatterBubbleChartWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Performance vs. Salary (Scatter)',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'performanceScore',
// yField: 'salary',
// xAxisTitle: 'Performance Score',
// yAxisTitle: 'Salary',
// type: 'Scatter'
// }
// }),
// new WidgetModel({
// id: 'local-multi-row-card',
// name: 'Multi-Row Card (Local)',
// component: 'MultiRowCardWidgetComponent',
// cols: 2,
// rows: 2,
// config: {
// title: 'Employee Overview',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// labelField: 'department',
// valueField: 'salary',
// unitField: 'currency' // Assuming 'currency' field exists in employee-data.json or can be added
// }
// }),
// new WidgetModel({
// id: 'local-combo-chart',
// name: 'Combo Chart (Local)',
// component: 'ComboChartWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Sales and Performance',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'name',
// yFields: ['salesAmount', 'performanceScore'],
// xAxisTitle: 'Employee',
// yAxisTitle: 'Value',
// series: [
// { type: 'Column', xName: 'name', yName: 'salesAmount', name: 'Sales' },
// { type: 'Line', xName: 'name', yName: 'performanceScore', name: 'Performance' }
// ]
// }
// }),
// new WidgetModel({
// id: 'local-doughnut-chart',
// name: 'Doughnut Chart (Local)',
// component: 'DoughnutChartWidgetComponent',
// cols: 2,
// rows: 2,
// config: {
// title: 'Department Distribution',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'department',
// yField: 'id',
// aggregation: 'count',
// }
// }),
// new WidgetModel({
// id: 'local-funnel-chart',
// name: 'Funnel Chart (Local)',
// component: 'FunnelChartWidgetComponent',
// cols: 2,
// rows: 3,
// config: {
// title: 'Sales Funnel',
// xField: 'stage',
// yField: 'value',
// }
// }),
// new WidgetModel({
// id: 'local-gauge-chart',
// name: 'Gauge Chart (Local)',
// component: 'GaugeChartWidgetComponent',
// cols: 2,
// rows: 2,
// config: {
// title: 'Average Performance Score',
// valueField: 'performanceScore', // Assuming 'performanceScore' is a numeric field in employee-data.json
// ranges: [
// { start: 0, end: 60, color: '#E0B9B9' },
// { start: 60, end: 80, color: '#B9D7EA' },
// { start: 80, end: 100, color: '#B9EAB9' }
// ]
// }
// }),
// new WidgetModel({
// id: 'local-simple-kpi',
// name: 'Simple KPI (Local)',
// component: 'SimpleKpiWidgetComponent',
// cols: 2,
// rows: 1,
// config: {
// title: 'Total Employees',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// valueField: 'id',
// aggregation: 'count',
// unit: 'persons',
// trend: 'up',
// trendValue: '+10%'
// }
// }),
// new WidgetModel({
// id: 'local-filled-map',
// name: 'Filled Map (Local)',
// component: 'FilledMapWidgetComponent',
// cols: 4,
// rows: 3,
// config: {
// title: 'Employee Distribution by Country',
// source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has country and value
// countryField: 'country', // Assuming a 'country' field in employee-data.json
// valueField: 'employeeCount', // Assuming an 'employeeCount' field in employee-data.json
// colorMapping: [
// { value: 0, color: '#C3E6CB' },
// { value: 50, color: '#FFECB5' },
// { value: 100, color: '#F5C6CB' }
// ]
// }
// }),
// new WidgetModel({
// id: 'local-matrix',
// name: 'Matrix (Local)',
// component: 'MatrixWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Skills Matrix',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// columns: [
// { field: 'name', headerText: 'Employee Name' },
// { field: 'department', headerText: 'Department' },
// { field: 'skill1', headerText: 'Skill 1' }, // Assuming these fields exist or can be added to employee-data.json
// { field: 'skill2', headerText: 'Skill 2' },
// { field: 'skill3', headerText: 'Skill 3' },
// ]
// }
// }),
// new WidgetModel({
// id: 'local-slicer',
// name: 'Slicer (Local)',
// component: 'SlicerWidgetComponent',
// cols: 2,
// rows: 1,
// config: {
// title: 'Filter by Department',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// optionsField: 'department', // Assuming 'department' field exists in employee-data.json
// }
// }),
// new WidgetModel({
// id: 'local-simple-table',
// name: 'Simple Table (Local)',
// component: 'SimpleTableWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Details',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// columns: [
// { field: 'id', headerText: 'ID' },
// { field: 'name', headerText: 'Name' },
// { field: 'department', headerText: 'Department' },
// { field: 'salary', headerText: 'Salary' },
// ]
// }
// }),
// new WidgetModel({
// id: 'local-waterfall-chart',
// name: 'Waterfall Chart (Local)',
// component: 'WaterfallChartWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Salary Changes',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'name',
// yField: 'salaryChange', // Assuming 'salaryChange' field exists in employee-data.json
// xAxisTitle: 'Employee',
// yAxisTitle: 'Salary Change',
// }
// }),
// new WidgetModel({
// id: 'local-treemap',
// name: 'Treemap (Local)',
// component: 'TreemapWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Salary Progression',
// source: { type: 'url', url: 'assets/data/employee-data.json' },
// xField: 'name',
// yField: 'salary',
// xAxisTitle: 'Employee',
// yAxisTitle: 'Salary',
// }
// }),
// new WidgetModel({
// id: 'local-attendance-overview',
// name: 'Attendance Overview (Local)',
// component: 'AttendanceOverviewWidgetComponent',
// cols: 2,
// rows: 1,
// config: {
// title: 'Daily Attendance Summary',
// source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has attendance data
// presentField: 'present',
// onLeaveField: 'onLeave',
// absentField: 'absent',
// }
// }),
// new WidgetModel({
// id: 'local-company-info',
// name: 'Company Info (Local)',
// component: 'CompanyInfoWidgetComponent',
// cols: 2,
// rows: 1,
// config: {
// title: 'Our Company Details',
// source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has company info
// companyNameField: 'companyName',
// addressField: 'address',
// contactField: 'contact',
// }
// }),
// new WidgetModel({
// id: 'local-employee-directory',
// name: 'Employee Directory (Local)',
// component: 'EmployeeDirectoryWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'All Employees',
// source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has employee info
// nameField: 'name',
// positionField: 'position',
// departmentField: 'department',
// }
// }),
// new WidgetModel({
// id: 'local-headcount',
// name: 'Employee Headcount (Local)',
// component: 'HeadcountWidgetComponent',
// cols: 2,
// rows: 1,
// config: {
// title: 'Current Headcount',
// source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has employee data
// categoryField: 'department', // Field to categorize headcount by
// }
// }),
// new WidgetModel({
// id: 'local-payroll-summary',
// name: 'Payroll Summary (Local)',
// component: 'PayrollSummaryWidgetComponent',
// cols: 2,
// rows: 1,
// config: {
// title: 'Latest Payroll Overview',
// source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has payroll data
// totalPayrollField: 'totalPayroll',
// employeesPaidField: 'employeesPaid',
// }
// }),
// new WidgetModel({
// id: 'local-payroll-details',
// name: 'Payroll Details (Local)',
// component: 'PayrollWidgetComponent',
// cols: 3,
// rows: 2,
// config: {
// title: 'Employee Payroll Details',
// source: { type: 'url', url: 'assets/data/employee-data.json' }, // Assuming employee-data.json has payroll details
// employeeNameField: 'name',
// payPeriodField: 'payPeriod',
// netPayField: 'netPay',
// }
// }),
// new WidgetModel({
// id: 'local-company-info-subfolder',
// name: 'Company Info (Subfolder Local)',
// component: 'CompanyInfoSubfolderWidgetComponent', // Use the new component name
// cols: 2,
// rows: 1,
// config: {
// title: 'Our Company Details (Subfolder)',
// source: { type: 'url', url: 'assets/data/sample1.json' }, // Assuming sample1.json has company info
// companyNameField: 'companyName',
// addressField: 'address',
// contactField: 'contact',
// }
// }),
// ];
private widgetComponentMap: { [key: string]: Type<any> } = {
'CompanyInfoWidgetComponent': CompanyInfoWidgetComponent,
......@@ -559,7 +559,7 @@ export class DashboardManagementComponent implements OnInit {
// Populate availableWidgets from WidgetService
this.widgetService.getListWidgets().subscribe(widgets => {
this.availableWidgets = [...widgets, ...this.localWidgets].map(widget => ({
this.availableWidgets = [...widgets].map(widget => ({
...widget,
config: widget.config || {} // Ensure config property exists
}));
......@@ -572,7 +572,7 @@ export class DashboardManagementComponent implements OnInit {
this.filteredAvailableWidgets = [...this.availableWidgets];
} else {
this.filteredAvailableWidgets = this.availableWidgets.filter(widget =>
widget.name.toLowerCase().includes(this.widgetSearchTerm.toLowerCase())
widget.thName.toLowerCase().includes(this.widgetSearchTerm.toLowerCase())
);
}
console.log(this.filteredAvailableWidgets)
......@@ -629,8 +629,8 @@ export class DashboardManagementComponent implements OnInit {
return {
id: widget.id,
header: widget.name,
id: widget.widgetId,
header: widget.thName,
sizeX: widget.cols,
sizeY: widget.rows,
row: widget.y,
......@@ -670,7 +670,7 @@ export class DashboardManagementComponent implements OnInit {
// Kept for compatibility with the sidebar, which is not the focus of this refactor
addWidgetToDashboard(widget: WidgetModel): void {
if (!this.dashboardData) return;
if (this.dashboardData.widgets.find(w => w.id === widget.id)) {
if (this.dashboardData.widgets.find(w => w.widgetId === widget.widgetId)) {
alert('Widget already exists in the dashboard.');
return;
}
......@@ -684,8 +684,8 @@ export class DashboardManagementComponent implements OnInit {
if (!this.dashboardData) return;
const newWidget = new WidgetModel({
id: `widget-${Date.now()}`,
name: 'Employee Data (New Arch)',
widgetId: `widget-${Date.now()}`,
thName: 'Employee Data (New Arch)',
component: 'NewDataTableWidget',
cols: 4,
rows: 3,
......@@ -723,7 +723,7 @@ export class DashboardManagementComponent implements OnInit {
removeWidgetFromDashboard(panelId: string): void {
if (!this.dashboardData) return;
if (confirm('Are you sure you want to remove this widget?')) {
const updatedDashboard = { ...this.dashboardData, widgets: this.dashboardData.widgets.filter(w => w.id !== panelId) };
const updatedDashboard = { ...this.dashboardData, widgets: this.dashboardData.widgets.filter(w => w.widgetId !== panelId) };
this.dashboardData = updatedDashboard;
this.panels = this.mapWidgetsToPanels(updatedDashboard.widgets);
......@@ -762,7 +762,7 @@ export class DashboardManagementComponent implements OnInit {
// Update the widget's config with the new values
const updatedWidget = { ...widget, config: result };
if (this.dashboardData) {
const widgetIndex = this.dashboardData.widgets.findIndex(w => w.id === updatedWidget.id);
const widgetIndex = this.dashboardData.widgets.findIndex(w => w.widgetId === updatedWidget.widgetId);
if (widgetIndex > -1) {
this.dashboardData.widgets[widgetIndex] = updatedWidget;
// Re-map panels to reflect changes
......@@ -779,7 +779,7 @@ export class DashboardManagementComponent implements OnInit {
onPanelChange(args: any): void {
if (this.dashboardData && args.changedPanels) {
args.changedPanels.forEach((changedPanel: PanelModel) => {
const widgetIndex = this.dashboardData!.widgets.findIndex(w => w.id === changedPanel.id);
const widgetIndex = this.dashboardData!.widgets.findIndex(w => w.widgetId === changedPanel.id);
if (widgetIndex > -1) {
const updatedWidget = { ...this.dashboardData!.widgets[widgetIndex] };
updatedWidget.cols = changedPanel.sizeX!;
......
src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.ts
......@@ -157,12 +157,12 @@ export class DashboardViewerComponent implements OnInit {
const widgetConfig = widget.config || {};
return {
id: widget.id,
id: widget.widgetId,
row: widget.y,
col: widget.x,
sizeX: widget.cols,
sizeY: widget.rows,
header: widget.name,
header: widget.thName,
componentName: widget.component, // Add componentName
componentType: this.widgetComponentMap[widget.component], // Attach the component Type
componentInputs: { config: widgetConfig } // Pass the config object as 'config' input
......
src/app/portal-manage/models/widgets.model.ts
......@@ -21,38 +21,45 @@ export class DatasetModel implements IDataset {
}
export interface IWidget {
id: string;
name: string;
widgetId: string;
thName: string;
engName: string;
component: string;
cols: number;
rows: number;
x: number;
y: number;
data: any; // Legacy, to be phased out
config: any; // New: For data-driven configuration
data: any;
config: any;
perspective: any;
}
export class WidgetModel implements IWidget {
id: string;
name: string;
widgetId: string;
thName: string;
engName: string;
component: string;
cols: number;
rows: number;
x: number;
y: number;
data: any; // Legacy, to be phased out
config: any; // New: For data-driven configuration
data: any;
config: any;
perspective: any;
constructor(data: Partial<IWidget>) {
this.id = data.id ?? '';
this.name = data.name ?? '';
this.widgetId = data.widgetId ?? '';
this.thName = data.thName ?? '';
this.engName = data.engName ?? '';
this.component = data.component ?? '';
this.cols = data.cols ?? 1;
this.rows = data.rows ?? 1;
this.x = data.x ?? 0;
this.y = data.y ?? 0;
this.data = data.data ?? {}; // Keep for now for compatibility
this.config = data.config ?? {}; // Initialize new config object
this.data = data.data ?? {};
this.config = data.config ?? {};
this.perspective = data.perspective ?? {};
}
}
......
src/app/portal-manage/services/widgets.service.ts
......@@ -15,28 +15,24 @@ export class WidgetService {
createStatus: boolean = true
constructor(private http: HttpClient) { }
getListWidgets(status?: string): Observable<WidgetModel[]> {
if (status) {
return this.http.get<WidgetModel[]>(this.url + "widget/lists?status=" + status)
} else {
return this.http.get<WidgetModel[]>(this.url + "widget/lists")
}
return this.http.get<WidgetModel[]>(this.url + "widget-registry/lists/search")
}
getListExcelContent(status?: string): Observable<DocumentContentModel[]> {
return this.http.get<DocumentContentModel[]>(this.url + "document-center/content/lists")
}
getWidgetById(widgetId: string): Observable<WidgetModel> {
return this.http.get<WidgetModel>(this.url + "widget/" + widgetId)
return this.http.get<WidgetModel>(this.url + "widget-registry/" + widgetId)
}
downloadFile(logId:string):Observable<any>{
return this.http.get(this.url + "widget/files/download/"+logId, { responseType: 'blob' })
downloadFile(logId: string): Observable<any> {
return this.http.get(this.url + "widget-registry/files/download/" + logId, { responseType: 'blob' })
}
createWidget(model: WidgetModel): Observable<any> {
let body : any = model
return this.http.post(this.url + 'widget', body)
let body: any = model
return this.http.post(this.url + 'widget-registry', body)
}
deleteWidget(model: WidgetModel): Observable<any> {
let body = {
widgetId: model.id
widgetId: model.widgetId
}
let option = {
headers: new HttpHeaders({
......@@ -44,7 +40,7 @@ export class WidgetService {
}),
body: body
}
return this.http.delete<any>(this.url + 'widget', option)
return this.http.delete<any>(this.url + 'widget-registry', option)
}
deleteExcelContent(model: DocumentContentModel): Observable<any> {
let body = {
......@@ -61,7 +57,7 @@ export class WidgetService {
getCount(status?: string): Observable<number> {
return this.http.get<number>(this.url + "widget/count")
return this.http.get<number>(this.url + "widget-registry/count")
}
getCountContent(status?: string): Observable<number> {
return this.http.get<number>(this.url + "document-center/content/count")
......
src/app/portal-manage/widget-management/widget-list.component.html
......@@ -20,7 +20,7 @@
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr *ngFor="let widget of widgets$ | async">
<td class="px-6 py-4 whitespace-nowrap">{{ widget.name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ widget.thName }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ widget.component }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ widget.cols }} x {{ widget.rows }}</td>
<td class="px-6 py-4">
......@@ -29,7 +29,7 @@
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button (click)="editWidget(widget.id)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
<button (click)="editWidget(widget.widgetId)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
</td>
</tr>
<!-- Show a message if there are no widgets -->
......
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