Skip to content

P
portal-apps-manage
Commit e8cf2026 by Ooh-Ao
Options

วิดเจ็ท

parent 3c22191d
Showing with 228 additions and 118 deletions
src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.scss
::ng-deep {
#dashboard_viewer.e-dashboardlayout .e-panel {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
#dashboard_viewer.e-dashboardlayout .e-panel .e-panel-header {
display: none !important;
}
}
.dashboard-viewer-container {
width: 100%;
height: 100%;
}
src/app/portal-manage/widgets/bar-chart-widget/bar-chart-widget.component.html
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow p-2 sm:p-4">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series [dataSource]="chartData" [type]="type" xName="x" yName="y" name="Data"></e-series>
</e-series-collection>
</ejs-chart>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series [dataSource]="chartData" [type]="type" xName="x" yName="y" name="Data"></e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
src/app/portal-manage/widgets/doughnut-chart-widget/doughnut-chart-widget.component.html
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow p-2 sm:p-4">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Chart -->
<ejs-accumulationchart *ngIf="!isLoading && !hasError" [title]="title" [legendSettings]="legendSettings" [enableSmartLabels]="true">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="chartData" type="Doughnut" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }" innerRadius="40%"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Chart -->
<ejs-accumulationchart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [legendSettings]="legendSettings" [enableSmartLabels]="true">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="chartData" type="Doughnut" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }" innerRadius="40%"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</div>
src/app/portal-manage/widgets/funnel-chart-widget/funnel-chart-widget.component.html
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow p-2 sm:p-4">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Chart -->
<ejs-accumulationchart *ngIf="!isLoading && !hasError" [title]="title" [legendSettings]="legendSettings" [enableSmartLabels]="true">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="chartData" type="Funnel" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Chart -->
<ejs-accumulationchart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [legendSettings]="legendSettings" [enableSmartLabels]="true">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="chartData" type="Funnel" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</div>
src/app/portal-manage/widgets/matrix-widget/matrix-widget.component.html
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">{{ title }}</h5>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<div class="card-body">
<!-- Body -->
<div class="flex-grow p-4 sm:p-6 overflow-auto">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Data Table -->
<div *ngIf="!isLoading && !hasError">
<div *ngIf="!isLoading && !hasError" class="w-full">
<table class="w-full text-sm text-left text-gray-500">
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
......@@ -26,13 +30,13 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data" class="bg-white border-b">
<tr *ngFor="let row of data" class="bg-white border-b hover:bg-gray-50">
<td *ngFor="let cell of row" class="px-6 py-4">
{{ cell }}
</td>
</tr>
<tr *ngIf="data.length === 0">
<td [attr.colspan]="headers.length" class="px-6 py-4 text-center text-gray-500">
<td [attr.colspan]="headers.length" class="px-6 py-4 text-center text-gray-400">
No data available.
</td>
</tr>
......
src/app/portal-manage/widgets/pie-chart-widget/pie-chart-widget.component.html
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow p-2 sm:p-4">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Chart -->
<ejs-accumulationchart *ngIf="!isLoading && !hasError" [title]="title" [legendSettings]="legendSettings" [enableSmartLabels]="true">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="chartData" type="Pie" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Chart -->
<ejs-accumulationchart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [legendSettings]="legendSettings" [enableSmartLabels]="true">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]="chartData" type="Pie" xName="x" yName="y" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</div>
src/app/portal-manage/widgets/quick-links-widget/quick-links-widget.component.html
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">{{ title }}</h5>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<div class="card-body">
<!-- Body -->
<div class="flex-grow p-4 sm:p-6 overflow-auto">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Content -->
<ul *ngIf="!isLoading && !hasError">
<ul *ngIf="!isLoading && !hasError" class="space-y-3">
<li *ngFor="let link of quickLinks">
<a [href]="link.url" target="_blank" class="text-blue-500 hover:underline">{{ link.name }}</a>
<a [href]="link.url" target="_blank" class="flex items-center p-3 -m-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<i class="bi bi-link-45deg text-blue-500 text-xl"></i>
<span class="ml-3 font-medium text-gray-700 hover:text-blue-600">{{ link.name }}</span>
</a>
</li>
<li *ngIf="quickLinks.length === 0">
<span class="text-gray-500">No links available.</span>
<span class="text-gray-400">No links available.</span>
</li>
</ul>
......
src/app/portal-manage/widgets/simple-table-widget/simple-table-widget.component.html
<div class="card h-100">
<div class="card-header">
<h5 class="card-title">{{ title }}</h5>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<div class="card-body">
<!-- Body -->
<div class="flex-grow p-4 sm:p-6 overflow-auto">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Data Table -->
<div *ngIf="!isLoading && !hasError">
<div *ngIf="!isLoading && !hasError" class="w-full">
<table class="w-full text-sm text-left text-gray-500">
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
......@@ -26,13 +30,13 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data" class="bg-white border-b">
<tr *ngFor="let row of data" class="bg-white border-b hover:bg-gray-50">
<td *ngFor="let cell of row" class="px-6 py-4">
{{ cell }}
</td>
</tr>
<tr *ngIf="data.length === 0">
<td [attr.colspan]="headers.length" class="px-6 py-4 text-center text-gray-500">
<td [attr.colspan]="headers.length" class="px-6 py-4 text-center text-gray-400">
No data available.
</td>
</tr>
......
src/app/portal-manage/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.html
<div class="bg-white p-4 rounded-lg shadow-md h-full flex flex-col">
<h3 class="text-lg font-semibold text-gray-500 mb-4">{{ title }}</h3>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
</div>
<!-- Body -->
<div class="flex-grow p-2 sm:p-4">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series [dataSource]="chartData.executeLocal(query)" type="Column" xName="x" yName="y" name="Data"></e-series>
</e-series-collection>
</ejs-chart>
<!-- Chart -->
<ejs-chart *ngIf="!isLoading && !hasError" style="height: 100%; width: 100%" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
<e-series-collection>
<e-series [dataSource]="chartData.executeLocal(query)" type="Column" xName="x" yName="y" name="Data"></e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
src/app/portal-manage/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.html
<div class="h-full flex flex-col">
<h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow p-0 sm:p-0 overflow-auto">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Grid -->
<ejs-grid *ngIf="!isLoading && !hasError" [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true" class="flex-grow">
<ejs-grid *ngIf="!isLoading && !hasError" [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true" height="100%">
<e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
src/app/portal-manage/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.html
<div class="h-full flex flex-col">
<h5 class="text-lg font-semibold text-gray-600 mb-2">{{ title }}</h5>
<div class="bg-white rounded-xl shadow-lg flex flex-col h-full">
<!-- Header -->
<div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200">
<h4 class="text-md sm:text-lg font-semibold text-gray-600 truncate">{{ title }}</h4>
</div>
<!-- Body -->
<div class="flex-grow p-0 sm:p-0 overflow-auto">
<!-- Loading State -->
<div *ngIf="isLoading" class="flex justify-center items-center h-full">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error State -->
<div *ngIf="hasError" class="flex flex-col justify-center items-center h-full text-red-500">
<i class="bi bi-exclamation-triangle-fill text-4xl"></i>
<p class="mt-2">{{ errorMessage }}</p>
<i class="bi bi-exclamation-circle-fill text-4xl"></i>
<p class="mt-2 font-semibold">{{ errorMessage }}</p>
</div>
<!-- Pivot View -->
<ejs-pivotview *ngIf="!isLoading && !hasError" [dataSourceSettings]="dataSourceSettings" [allowCalculatedField]="true" [showFieldList]="true" [showToolbar]="true" class="flex-grow">
<ejs-pivotview *ngIf="!isLoading && !hasError" [dataSourceSettings]="dataSourceSettings" [allowCalculatedField]="true" [showFieldList]="true" [showToolbar]="true" height="100%">
</ejs-pivotview>
</div>
</div>
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