Skip to content

M
mySkill-x
Commit a695ebf3 by Nattana Chaiyamat
Options

แก้ไข รายงาน Excel portal

parent ee133ebf
Showing with 609 additions and 53 deletions
package.json
...@@ -33,16 +33,18 @@ ...@@ -33,16 +33,18 @@
"@ng-select/ng-select": "^11.0.0", "@ng-select/ng-select": "^11.0.0",
"@ngrx/store": "^16.0.1", "@ngrx/store": "^16.0.1",
"@swimlane/ngx-charts": "^20.4.1", "@swimlane/ngx-charts": "^20.4.1",
"@syncfusion/ej2-angular-base": "26.2.10", "@syncfusion/ej2-angular-base": "^29.2.4",
"@syncfusion/ej2-angular-dropdowns": "26.2.13", "@syncfusion/ej2-angular-charts": "^29.2.4",
"@syncfusion/ej2-angular-grids": "26.2.14", "@syncfusion/ej2-angular-dropdowns": "^29.2.4",
"@syncfusion/ej2-angular-inputs": "26.2.14", "@syncfusion/ej2-angular-grids": "^29.2.4",
"@syncfusion/ej2-base": "26.2.10", "@syncfusion/ej2-angular-inputs": "^29.2.4",
"@syncfusion/ej2-buttons": "26.2.10", "@syncfusion/ej2-angular-pivotview": "^29.2.4",
"@syncfusion/ej2-data": "26.2.14", "@syncfusion/ej2-base": "^29.2.4",
"@syncfusion/ej2-dropdowns": "26.2.13", "@syncfusion/ej2-buttons": "^29.2.4",
"@syncfusion/ej2-grids": "26.2.14", "@syncfusion/ej2-data": "^29.2.4",
"@syncfusion/ej2-inputs": "26.2.14", "@syncfusion/ej2-dropdowns": "^29.2.4",
"@syncfusion/ej2-grids": "^29.2.4",
"@syncfusion/ej2-inputs": "^29.2.4",
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
"angular-calendar": "^0.31.0", "angular-calendar": "^0.31.0",
"angular2-multiselect-dropdown": "^5.0.4", "angular2-multiselect-dropdown": "^5.0.4",
......
src/app/components/dashboard/dashboard.module.ts
...@@ -188,6 +188,22 @@ import { ReportPms2Component } from '../report-component/report-pms/report-pms-2 ...@@ -188,6 +188,22 @@ import { ReportPms2Component } from '../report-component/report-pms/report-pms-2
import { ReportPms3Component } from '../report-component/report-pms/report-pms-3/report-pms-3.component'; import { ReportPms3Component } from '../report-component/report-pms/report-pms-3/report-pms-3.component';
import { EssProfileComponent } from '../ess-profile/ess-profile.component'; import { EssProfileComponent } from '../ess-profile/ess-profile.component';
import { ExcelReportComponent } from '../excel-report/excel-report.component'; import { ExcelReportComponent } from '../excel-report/excel-report.component';
import { PivotSyncfutionComponent } from '../pivot-syncfution/pivot-syncfution.component';
import { CalculatedFieldService, ConditionalFormattingService, DrillThroughService, FieldListService, GroupingBarService, NumberFormattingService, PivotFieldListModule, PivotViewModule, ToolbarService, VirtualScrollService } from '@syncfusion/ej2-angular-pivotview';
import {
ChartModule,
LineSeriesService,
ColumnSeriesService,
CategoryService,
LegendService,
TooltipService
} from '@syncfusion/ej2-angular-charts';
import {
ResizeService,
SortService,
PageService,
FilterService,
} from '@syncfusion/ej2-angular-grids';
export const MY_DATE_FORMATS = { export const MY_DATE_FORMATS = {
parse: { parse: {
...@@ -332,7 +348,8 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -332,7 +348,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
ReportPms2Component, ReportPms2Component,
ReportPms3Component, ReportPms3Component,
EssProfileComponent, EssProfileComponent,
ExcelReportComponent ExcelReportComponent,
PivotSyncfutionComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
...@@ -357,6 +374,7 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -357,6 +374,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
RatingModule, RatingModule,
MatDialogModule, MatDialogModule,
BarRatingModule, BarRatingModule,
PivotViewModule,
NgxEchartsModule.forRoot({ // ✅ โหลด ECharts เพียงครั้งเดียว NgxEchartsModule.forRoot({ // ✅ โหลด ECharts เพียงครั้งเดียว
echarts: () => import('echarts') echarts: () => import('echarts')
}) })
...@@ -408,7 +426,23 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -408,7 +426,23 @@ export class CustomDateAdapter extends NativeDateAdapter {
EmpStatusService, EmpStatusService,
ConfigPermissionService, ConfigPermissionService,
TokenService, TokenService,
FieldListService,
CalculatedFieldService,
ConditionalFormattingService,
NumberFormattingService,
ToolbarService,
GroupingBarService,
DrillThroughService,
VirtualScrollService,
LineSeriesService,
ColumnSeriesService,
CategoryService,
LegendService,
TooltipService,
ResizeService,
SortService,
PageService,
FilterService,
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor, useClass: HttpRequestInterceptor,
......
src/app/components/datagrid-syncfution/datagrid-syncfution.component.ts
...@@ -164,6 +164,10 @@ export class DatagridSyncfutionComponent implements OnInit { ...@@ -164,6 +164,10 @@ export class DatagridSyncfutionComponent implements OnInit {
@Input() showImg = false @Input() showImg = false
@Input() sendLayout = false
@Input() gridLayout = ''
@Output() layout = new EventEmitter<any>();
constructor(private cdr: ChangeDetectorRef, constructor(private cdr: ChangeDetectorRef,
private fileService: FileService private fileService: FileService
) { ) {
...@@ -186,6 +190,20 @@ export class DatagridSyncfutionComponent implements OnInit { ...@@ -186,6 +190,20 @@ export class DatagridSyncfutionComponent implements OnInit {
this.dataSourceSearch = JSON.parse(JSON.stringify(this.dataSource || [])) this.dataSourceSearch = JSON.parse(JSON.stringify(this.dataSource || []))
this.dataSourceFilter = JSON.parse(JSON.stringify(this.dataSource || [])) this.dataSourceFilter = JSON.parse(JSON.stringify(this.dataSource || []))
} }
if (changes['gridLayout']) {
if (changes['gridLayout'].currentValue) {
const layout = JSON.parse(changes['gridLayout'].currentValue)
this.grid?.setProperties(layout)
}
}
if (changes['sendLayout']) {
if (this.grid) {
const layout = this.grid?.getPersistData();
if (layout) {
this.layout.emit(layout)
}
}
}
} }
} }
onSelectData(args: any) { onSelectData(args: any) {
......
src/app/components/excel-report/excel-report.component.html
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
</label> </label>
<div class="col-span-8 md:col-span-4" [class.ti-pagination]="item.type=='radio'"> <div class="col-span-8 md:col-span-4" [class.ti-pagination]="item.type=='radio'">
<ng-container *ngIf="item.type=='text'"> <ng-container *ngIf="item.type=='text'">
<input type="text" class="ti-form-input h-16" [(ngModel)]="item.value"> <input type="text" class="ti-form-input h-16" [(ngModel)]="select[item.key]">
</ng-container> </ng-container>
<ng-container *ngIf="item.type=='list'"> <ng-container *ngIf="item.type=='list'">
<select class="ti-form-select h-16" [(ngModel)]="item.value"> <select class="ti-form-select h-16" [(ngModel)]="select[item.key]">
<option *ngFor="let list of item.option" [value]="list.value"> <option *ngFor="let list of item.option" [value]="list.value">
{{list.text}} {{list.text}}
</option> </option>
...@@ -37,14 +37,14 @@ ...@@ -37,14 +37,14 @@
<div class="grid col-span-3 grid-cols-6 gap-2"> <div class="grid col-span-3 grid-cols-6 gap-2">
<div class="col-span-1 ti-pagination "> <div class="col-span-1 ti-pagination ">
<input type="checkbox" class="ti-form-checkbox" [id]="'radioItem'+i" <input type="checkbox" class="ti-form-checkbox" [id]="'radioItem'+i"
[class.pointer-events-none]="item.value==radioItem.value" [class.pointer-events-none]="select[item.key]==radioItem.value"
[name]="'radioItem'+item.label" [name]="'radioItem'+item.label"
(change)="item.value=radioItem.value" (change)="select[item.key]=radioItem.value"
[checked]="item.value==radioItem.value"> [checked]="select[item.key]==radioItem.value">
</div> </div>
<div class="col-span-5 ti-pagination "> <div class="col-span-5 ti-pagination ">
<label [for]="'radioItem'+i" class="text-sm text-gray-500" <label [for]="'radioItem'+i" class="text-sm text-gray-500"
[class.pointer-events-none]="item.value==radioItem.value"> [class.pointer-events-none]="select[item.key]==radioItem.value">
{{radioItem.text}} {{radioItem.text}}
</label> </label>
</div> </div>
...@@ -55,11 +55,11 @@ ...@@ -55,11 +55,11 @@
<ng-container *ngIf="item.type=='help'"> <ng-container *ngIf="item.type=='help'">
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="text" class="ti-form-input h-16" readonly <input type="text" class="ti-form-input h-16" readonly
[(ngModel)]="item.value.tdesc"> [(ngModel)]="select[item.key].tdesc">
<div <div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2"> class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" <button type="button" class="flex items-center text-red-500"
(click)="item.value.tdesc=''" style="font-size: 17px;"> (click)="select[item.key]={id:'',tdesc:'',edesc:''}" style="font-size: 17px;">
<i class=" ti ti-circle-x cursor-pointer"></i> <i class=" ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" <button type="button"
...@@ -95,10 +95,20 @@ ...@@ -95,10 +95,20 @@
<ng-container *ngIf="variableSheet.length&&!loadingExcel"> <ng-container *ngIf="variableSheet.length&&!loadingExcel">
<div class="flex justify-center mb-1rem space-x-4"> <div class="flex justify-center mb-1rem space-x-4">
<button type="submit" class="ti-btn ti-btn-secondary" [class.ti-btn-disabled]="loadingExcel" <button type="submit" class="ti-btn ti-btn-secondary" [class.ti-btn-disabled]="loadingExcel"
(click)="getExcelData('grid')" [disabled]="loadingExcel">
Datagrid
</button>
<button type="submit" class="ti-btn ti-btn-secondary" [class.ti-btn-disabled]="loadingExcel"
(click)="getExcelData('pivot')" [disabled]="loadingExcel">
Pivot
</button>
</div>
<!-- <div class="flex justify-center mb-1rem space-x-4">
<button type="submit" class="ti-btn ti-btn-secondary" [class.ti-btn-disabled]="loadingExcel"
(click)="dowloadExcelReport()" [disabled]="loadingExcel"> (click)="dowloadExcelReport()" [disabled]="loadingExcel">
พิมพ์ พิมพ์
</button> </button>
</div> </div> -->
</ng-container> </ng-container>
<ng-container *ngIf="variableSheet.length&&loadingExcel"> <ng-container *ngIf="variableSheet.length&&loadingExcel">
<div class="flex justify-center"> <div class="flex justify-center">
...@@ -179,3 +189,60 @@ ...@@ -179,3 +189,60 @@
</button> </button>
</mat-dialog-actions> </mat-dialog-actions>
</ng-template> </ng-template>
<ng-template #girdModal let-modal>
<h3 mat-dialog-title>
GridData
</h3>
<mat-dialog-content>
<app-datagrid-syncfution [checkBoxSetting]='false' [actionSetting]="false" [searchSettings]="searchSettings"
[dataSource]="dataList" [columns]="columns" [gridLayout]="setPerspective"
[sendLayout]="gridLayout.stimulate" (layout)="gridLayout.data=$event">
</app-datagrid-syncfution>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button *ngIf="!loadingExcel" type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
(click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
{{"Save Perspective"}}
</button>
<button *ngIf="!loadingExcel" type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
<div *ngIf="loadingExcel" class="flex justify-center">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
</mat-dialog-actions>
</ng-template>
<ng-template #pivotModal let-modal>
<h3 mat-dialog-title>
Pivot
</h3>
<mat-dialog-content>
<app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns" [pivotLayout]="setPerspective"
[sendLayout]="pivotLayout.stimulate" (layout)="pivotLayout.data=$event">
</app-pivot-syncfution>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button *ngIf="!loadingExcel" type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
(click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
{{"Save Perspective"}}
</button>
<button *ngIf="!loadingExcel" type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
<div *ngIf="loadingExcel" class="flex justify-center">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
</mat-dialog-actions>
</ng-template>
\ No newline at end of file
src/app/components/pivot-syncfution/pivot-syncfution.component.html 0 → 100644
<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]="dataSourceSettings" [displayOption]='displayOption'
[toolbar]='toolbarOptions' [allowExcelExport]='true' [allowNumberFormatting]='true'
[allowConditionalFormatting]='true' [allowPdfExport]='true' [showToolbar]='true' [allowCalculatedField]='true'
[showFieldList]='true' width='100%' height='550'></ejs-pivotview>
\ No newline at end of file
src/app/components/pivot-syncfution/pivot-syncfution.component.scss 0 → 100644
// th{
// position: relative; // เทียบเท่า class "relative"
// padding: 10px; // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
// background-color: rgb(96 165 250 / 0.1); // ตัวอย่างแทน "bg-soft-secondary"
// color: #2b2b2b; // ตัวอย่างแทน "text-primary"
// text-align: center !important; // เทียบเท่า "!text-center"
// // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
// font-weight: 600;
// border-bottom: 1px solid #eee;
// }
.e-headercell,
.e-detailheadercell {
background-color: rgb(96 165 250 / 0.1) !important;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
background: rgb(96 165 250) !important;
color: #fff;
opacity: 1 !important;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
background-color: rgb(96 165 250) !important;
border-color: transparent;
color: #fff;
}
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
border: 1px solid !important;
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: "e-icons";
height: 18px;
line-height: 10px;
padding: 2px 0;
text-align: center;
vertical-align: middle;
width: 1rem !important;
border-color: #64748b !important;
}
.e-grid td.e-selectionbackground {
background-color: #aec2ec !important;
}
src/app/components/pivot-syncfution/pivot-syncfution.component.ts 0 → 100644
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from "@angular/core";
import {
IDataOptions,
PivotView,
ToolbarItems,
GroupingBarService,
ToolbarService,
PDFExportService,
ExcelExportService,
DisplayOption,
IDataSet,
DataSourceSettings,
PivotViewComponent,
FieldList
} from '@syncfusion/ej2-angular-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
selector: 'app-pivot-syncfution',
templateUrl: './pivot-syncfution.component.html',
styleUrls: ['./pivot-syncfution.component.scss'],
providers: [
GroupingBarService,
ToolbarService,
PDFExportService,
ExcelExportService
]
})
export class PivotSyncfutionComponent implements OnInit {
dataSourceSettings: DataSourceSettingsModel = {
dataSource: [],
expandAll: false,
enableSorting: true,
drilledMembers: [],
columns: [],
values: [],
rows: [],
formatSettings: [],
filters: []
};
@Input() dataSource: any
@Input() columns: any
toolbarOptions: ToolbarItems[] = ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'Formatting', 'FieldList']
displayOption: DisplayOption = { view: 'Both' } as DisplayOption;
@ViewChild('pivotview') public pivotview?: PivotViewComponent;
@Input() sendLayout = false
@Input() pivotLayout = ''
@Output() layout = new EventEmitter<any>();
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['dataSource']?.currentValue || changes['columns']?.currentValue) {
this.dataSourceSettings = {
dataSource: this.dataSource,
columns: this.columns,
values: [],
rows: [],
expandAll: true,
enableSorting: true,
drilledMembers: [],
filters: [],
formatSettings: []
};
}
if (changes['pivotLayout']) {
if (changes['pivotLayout'].currentValue) {
const layout = JSON.parse(changes['pivotLayout'].currentValue)
this.pivotview?.setProperties(layout)
}
}
if (changes['sendLayout']) {
if (this.pivotview) {
const layout = this.pivotview?.getPersistData();
if (layout) {
this.layout.emit(layout)
}
}
}
}
}
\ No newline at end of file
src/app/shared/services/custom-cube.service.ts 0 → 100644
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TemplateFileMiniModel } from '../model/template-file-mini.model';
import { AlertModel } from '../model/alert.model';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class CustomCubeService {
constructor(private http: HttpClient,
) { }
getExcelColumn(body: {
templateId: string,
fileName: string,
}) {
return this.http.post(environment.portal + "/customcube/get-excel-column?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
getExcelData(body: any) {
return this.http.post(environment.portal + "/customcube/get-excel-data?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
saveExcelPerspective(body: {
templateId: string,
fileName: string,
dataGridStr: string,
pivotStr: string,
}): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.portal + "/customcube/save-excel-perspective?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
getExcelPerspective(body: {
templateId: string,
fileName: string,
}) {
return this.http.post(environment.portal + "/customcube/get-excel-perspective?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
}
\ No newline at end of file
src/main.ts
...@@ -4,7 +4,8 @@ import { registerLicense } from '@syncfusion/ej2-base'; ...@@ -4,7 +4,8 @@ import { registerLicense } from '@syncfusion/ej2-base';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
// Registering Syncfusion license key // Registering Syncfusion license key
registerLicense('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5ad0VjXH9ac3NRQWhc');
registerLicense('ORg4AjUWIQA/Gnt2XFhhQlJHfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTH5WdUVjWXtXdHNdRWFbWkdx');
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
......
src/styles.scss
...@@ -46,11 +46,27 @@ ...@@ -46,11 +46,27 @@
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.css';
@media (min-width: 992px) { @media (min-width: 992px) {
[data-nav-layout="horizontal"][dir="rtl"] .main-menu-container { [data-nav-layout="horizontal"][dir="rtl"] .main-menu-container {
.slide-right { .slide-right {
@apply left-[3%]; @apply left-[3%];
} }
.slide-left { .slide-left {
@apply right-[3%]; @apply right-[3%];
} }
...@@ -87,15 +103,19 @@ ...@@ -87,15 +103,19 @@
.mdc-text-field--filled:not(.mdc-text-field--disabled) { .mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: white !important; background-color: white !important;
} }
mat-label { mat-label {
font-size: 0.875rem !important; font-size: 0.875rem !important;
} }
.mat-mdc-form-field-focus-overlay { .mat-mdc-form-field-focus-overlay {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
.mdc-text-field--filled .mdc-line-ripple::after { .mdc-text-field--filled .mdc-line-ripple::after {
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
} }
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
color: #293549 !important; color: #293549 !important;
} }
...@@ -108,6 +128,7 @@ ...@@ -108,6 +128,7 @@
.responsive-logo-light { .responsive-logo-light {
display: block #{!important}; display: block #{!important};
} }
.responsive-logo-dark { .responsive-logo-dark {
display: none #{!important}; display: none #{!important};
} }
...@@ -115,11 +136,13 @@ ...@@ -115,11 +136,13 @@
} }
} }
} }
[data-nav-layout="horizontal"] { [data-nav-layout="horizontal"] {
@media (max-width: 991px) { @media (max-width: 991px) {
.landing-body .responsive-logo .responsive-logo-dark { .landing-body .responsive-logo .responsive-logo-dark {
display: none !important; display: none !important;
} }
.landing-body .responsive-logo .responsive-logo-light { .landing-body .responsive-logo .responsive-logo-light {
display: block !important; display: block !important;
} }
...@@ -135,6 +158,7 @@ ...@@ -135,6 +158,7 @@
.ti-form-select { .ti-form-select {
@apply border-t-[0px] w-[100%] #{!important}; @apply border-t-[0px] w-[100%] #{!important};
} }
.ng-select.ng-select-single .ng-select-container { .ng-select.ng-select-single .ng-select-container {
@apply border-t-[0px] #{!important}; @apply border-t-[0px] #{!important};
} }
...@@ -143,6 +167,7 @@ ...@@ -143,6 +167,7 @@
[data-width="boxed"] { [data-width="boxed"] {
@media (min-width: 1400px) { @media (min-width: 1400px) {
.xxxl\:col-span-3, .xxxl\:col-span-3,
.xxxl\:col-span-4, .xxxl\:col-span-4,
.xxxl\:col-span-6, .xxxl\:col-span-6,
...@@ -150,13 +175,16 @@ ...@@ -150,13 +175,16 @@
@apply col-span-12; @apply col-span-12;
} }
} }
.mat-mdc-form-field-infix { .mat-mdc-form-field-infix {
width: 90px; width: 90px;
} }
.timepicker .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix { .timepicker .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
margin-inline-start: 10px; margin-inline-start: 10px;
} }
} }
@media (min-width: 1800px) { @media (min-width: 1800px) {
.xxxl\:col-span-9 { .xxxl\:col-span-9 {
@apply col-span-9; @apply col-span-9;
...@@ -167,39 +195,48 @@ ...@@ -167,39 +195,48 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
@apply w-[0px] bg-black/30 #{!important}; @apply w-[0px] bg-black/30 #{!important};
} }
.input-date-picker .dp-input-container input::placeholder { .input-date-picker .dp-input-container input::placeholder {
@apply text-white/50; @apply text-white/50;
} }
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected { .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
@apply bg-black/30; @apply bg-black/30;
} }
.ng-select .ng-select-container { .ng-select .ng-select-container {
@apply border-white/10 #{!important}; @apply border-white/10 #{!important};
} }
.mat-calendar-table-header th { .mat-calendar-table-header th {
color: rgb(255 255 255 / 0.6) !important; color: rgb(255 255 255 / 0.6) !important;
} }
} }
[dir="rtl"] { [dir="rtl"] {
.apexcharts-title-text, .apexcharts-title-text,
.apexcharts-subtitle-text { .apexcharts-subtitle-text {
text-anchor: end; text-anchor: end;
} }
.apexcharts-xaxis, .apexcharts-xaxis,
.apexcharts-yaxis { .apexcharts-yaxis {
text { text {
direction: ltr; direction: ltr;
} }
} }
.apexcharts-legend-text { .apexcharts-legend-text {
// padding-right: 18px; // padding-right: 18px;
// margin-right: -15px; // margin-right: -15px;
@apply pr-[18px] pl-[0px] mr-[-15px] ml-[0px]; @apply pr-[18px] pl-[0px] mr-[-15px] ml-[0px];
} }
.mat-datepicker-content { .mat-datepicker-content {
direction: ltr; direction: ltr;
} }
.mat-calendar-previous-button, .mat-calendar-previous-button,
.mat-calendar-next-button { .mat-calendar-next-button {
transform: rotate(0deg) !important; transform: rotate(0deg) !important;
...@@ -222,23 +259,29 @@ ...@@ -222,23 +259,29 @@
@apply shrink-0; @apply shrink-0;
} }
} }
.apexcharts-legend .apexcharts-legend-text { .apexcharts-legend .apexcharts-legend-text {
@apply dark:text-white #{!important}; @apply dark:text-white #{!important};
} }
.mat-calendar-controls { .mat-calendar-controls {
@apply m-0 #{!important}; @apply m-0 #{!important};
} }
.mat-datepicker-content { .mat-datepicker-content {
@apply transform-none #{!important}; @apply transform-none #{!important};
} }
#todo-compose { #todo-compose {
.ng-select-container { .ng-select-container {
width: 100% !important; width: 100% !important;
} }
} }
ngx-dropzone { ngx-dropzone {
@apply border-gray-200 dark:border-white/10 h-20 #{!important}; @apply border-gray-200 dark:border-white/10 h-20 #{!important};
} }
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover { .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
@apply bg-primary; @apply bg-primary;
} }
...@@ -248,24 +291,27 @@ ngx-dropzone { ...@@ -248,24 +291,27 @@ ngx-dropzone {
/* custom styles */ /* custom styles */
@media (min-width: 992px) { @media (min-width: 992px) {
[data-nav-style="icon-hover"], [data-nav-style="icon-hover"],
[data-nav-style="menu-hover"] { [data-nav-style="menu-hover"] {
.app-sidebar { .app-sidebar {
.slide.has-sub { .slide.has-sub {
.child1 > .sub-slide:hover > .child2 { .child1>.sub-slide:hover>.child2 {
@apply block -mt-[30px] #{!important}; @apply block -mt-[30px] #{!important};
} }
} }
} }
} }
} }
/* advanced forms */ /* advanced forms */
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after { .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
--mdc-filled-text-field-focus-active-indicator-color: transparent; --mdc-filled-text-field-focus-active-indicator-color: transparent;
} }
/* advanced forms */ /* advanced forms */
.ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container { .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
@apply shadow-none; @apply shadow-none;
} }
...@@ -278,59 +324,75 @@ ngx-dropzone { ...@@ -278,59 +324,75 @@ ngx-dropzone {
::-webkit-calendar-picker-indicator { ::-webkit-calendar-picker-indicator {
@apply invert; @apply invert;
} }
.ae-font .ae-picker-label { .ae-font .ae-picker-label {
@apply bg-bodybg border-white/10; @apply bg-bodybg border-white/10;
} }
.ae-font .ae-picker-options { .ae-font .ae-picker-options {
@apply bg-bodybg; @apply bg-bodybg;
} }
.ae-font.ae-picker { .ae-font.ae-picker {
@apply text-white; @apply text-white;
} }
.ae-font .ae-picker-label:before { .ae-font .ae-picker-label:before {
@apply bg-none; @apply bg-none;
} }
.ae-font .ae-picker-label:hover { .ae-font .ae-picker-label:hover {
@apply bg-bodybg; @apply bg-bodybg;
} }
.ae-font .ae-picker-label svg .ae-stroke { .ae-font .ae-picker-label svg .ae-stroke {
@apply stroke-[#fff]; @apply stroke-[#fff];
} }
.ae-font .ae-picker-label:hover:before { .ae-font .ae-picker-label:hover:before {
background: linear-gradient(to right, #293549 100%, #293549 100%); background: linear-gradient(to right, #293549 100%, #293549 100%);
} }
.ae-font.ae-expanded .ae-picker-options { .ae-font.ae-expanded .ae-picker-options {
@apply border-white/10; @apply border-white/10;
} }
.swal2-input { .swal2-input {
@apply bg-bgdark #{!important}; @apply bg-bgdark #{!important};
} }
.angular-editor-toolbar { .angular-editor-toolbar {
@apply bg-bodybg border border-white/10 #{!important}; @apply bg-bodybg border border-white/10 #{!important};
} }
.angular-editor-button { .angular-editor-button {
@apply bg-bgdark border border-white/10 #{!important}; @apply bg-bgdark border border-white/10 #{!important};
} }
.angular-editor-textarea { .angular-editor-textarea {
@apply border border-white/10 #{!important}; @apply border border-white/10 #{!important};
} }
.clock-face { .clock-face {
@apply bg-bodybg #{!important}; @apply bg-bodybg #{!important};
} }
.mat-mdc-dialog-container .mdc-dialog__content { .mat-mdc-dialog-container .mdc-dialog__content {
// color: var(--mdc-dialog-supporting-text-color, rgba(0, 0, 0, 0.6)); // color: var(--mdc-dialog-supporting-text-color, rgba(0, 0, 0, 0.6));
--mdc-dialog-supporting-text-color: #fff; --mdc-dialog-supporting-text-color: #fff;
} }
} }
/* dark */ /* dark */
/* tasks */ /* tasks */
@media (width <= 23.75rem) { @media (width <=23.75rem) {
.add-new-tasks { .add-new-tasks {
.ng-select.ng-select-single .ng-select-container { .ng-select.ng-select-single .ng-select-container {
@apply w-[13.125rem]; @apply w-[13.125rem];
} }
} }
} }
/* tasks */ /* tasks */
/* advanced forms */ /* advanced forms */
...@@ -338,6 +400,7 @@ ngx-dropzone { ...@@ -338,6 +400,7 @@ ngx-dropzone {
ngx-mat-timepicker-face .clock-face { ngx-mat-timepicker-face .clock-face {
@apply w-[14.375rem] h-[14.375rem] #{!important}; @apply w-[14.375rem] h-[14.375rem] #{!important};
} }
ngx-mat-timepicker-face .clock-face__number--outer { ngx-mat-timepicker-face .clock-face__number--outer {
@apply h-[7.375rem] #{!important}; @apply h-[7.375rem] #{!important};
} }
...@@ -346,16 +409,19 @@ ngx-dropzone { ...@@ -346,16 +409,19 @@ ngx-dropzone {
@apply top-[calc(50%-120px)] #{!important}; @apply top-[calc(50%-120px)] #{!important};
} }
} }
/* advanced forms */ /* advanced forms */
/* colorpicker */ /* colorpicker */
.color-picker { .color-picker {
.left { .left {
@apply py-[5px] #{!important}; @apply py-[5px] #{!important};
} }
.selected-color { .selected-color {
@apply top-[5px] #{!important}; @apply top-[5px] #{!important};
} }
} }
/* colorpicker */ /* colorpicker */
.block-main-content { .block-main-content {
...@@ -371,45 +437,52 @@ ngx-dropzone { ...@@ -371,45 +437,52 @@ ngx-dropzone {
margin-top: 3px; margin-top: 3px;
} }
.detail-td{ .detail-td {
font-size: 12px; font-size: 12px;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
.width-80{
.width-80 {
width: 80%; width: 80%;
} }
.\!width-80{
.\!width-80 {
width: 80% !important; width: 80% !important;
} }
.width-70{
.width-70 {
width: 70%; width: 70%;
} }
.\!width-70{
.\!width-70 {
width: 70% !important; width: 70% !important;
} }
.\!box-modal{ .\!box-modal {
box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important; box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.25) !important;
-webkit-box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important; -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.25) !important;
-moz-box-shadow: 0px 0px 0px 9999px rgba(0,0,0,0.25)!important; -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.25) !important;
} }
.mat-mdc-dialog-container .mdc-dialog__title { .mat-mdc-dialog-container .mdc-dialog__title {
font-family: inherit!important; font-family: inherit !important;
color: rgb(var(--color-primary))!important; color: rgb(var(--color-primary)) !important;
font-weight: 700!important; font-weight: 700 !important;
font-size: 1.25rem!important; font-size: 1.25rem !important;
line-height: 2.5rem!important; line-height: 2.5rem !important;
border-bottom-width: 1px!important; border-bottom-width: 1px !important;
border-bottom-color: rgb(226, 232, 240)!important; border-bottom-color: rgb(226, 232, 240) !important;
}
.mdc-dialog__actions{
border-top-width: 1px!important;
border-top-color: rgb(226, 232, 240)!important;
} }
.mdc-dialog__actions {
border-top-width: 1px !important;
border-top-color: rgb(226, 232, 240) !important;
}
.mat-mdc-dialog-content { .mat-mdc-dialog-content {
max-height: 80vh!important; max-height: 80vh !important;
} }
.mat-mdc-dialog-container .mdc-dialog__content { .mat-mdc-dialog-container .mdc-dialog__content {
padding-top: 10px!important; padding-top: 10px !important;
} }
\ No newline at end of file
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