feat: add logo image and RTL support styles
- Added logo image to assets. - Implemented RTL support styles in rtlSupport.scss for various components including breadcrumb, datatable, and tree node toggle button. chore: configure environment files for production, staging, and development - Created environment.prod.ts for production settings. - Created environment.staging.ts for staging settings. - Created environment.ts for local development settings. feat: define custom theme preset - Added presets.ts to define a custom theme preset using PrimeUIX with specific component styles and semantic colors. chore: set up proxy configuration for local development
This commit is contained in:
@@ -0,0 +1,139 @@
|
||||
<div class="h-full bg-surface-overlay">
|
||||
<div class="h-full flex flex-col gap-4">
|
||||
<p-table
|
||||
[columns]="columns"
|
||||
[scrollable]="true"
|
||||
[value]="items"
|
||||
[loading]="loading"
|
||||
columnResizeMode="fit"
|
||||
stripedRows
|
||||
[showFirstLastIcon]="false"
|
||||
class="grow !flex flex-col overflow-hidden"
|
||||
[tableStyleClass]="!items.length && !loading ? 'h-full' : ''"
|
||||
>
|
||||
@if (pageTitle || showAdd || filter || caption) {
|
||||
<ng-template pTemplate="caption">
|
||||
<ng-container [ngTemplateOutlet]="caption">
|
||||
<div class="flex justify-between items-center gap-4">
|
||||
<h5 class="font-bold">{{ pageTitle }}</h5>
|
||||
@if (showAdd || filter) {
|
||||
<div class="flex items-center gap-2">
|
||||
@if (filter) {
|
||||
<p-button
|
||||
label="فیلتر"
|
||||
icon="pi pi-filter"
|
||||
variant="outlined"
|
||||
badgeSeverity="info"
|
||||
[badge]="isFiltered ? '1' : undefined"
|
||||
(click)="openFilter()"
|
||||
></p-button>
|
||||
}
|
||||
@if (showAdd) {
|
||||
<p-button label="{{ addNewCtaLabel }}" icon="pi pi-plus" (click)="openAddForm()"></p-button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
}
|
||||
|
||||
<ng-template #header let-columns>
|
||||
<tr>
|
||||
@for (col of columns; track col.header) {
|
||||
<th [style]="{ width: col.width, minWidth: col.minWidth }">{{ col.header }}</th>
|
||||
}
|
||||
@if (actionsCount()) {
|
||||
<th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
|
||||
}
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #body let-item>
|
||||
<tr>
|
||||
@for (col of columns; track col.field) {
|
||||
<td>
|
||||
@if (getTemplate(col)) {
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getTemplate(col)"
|
||||
[ngTemplateOutletContext]="{ $implicit: item }"
|
||||
></ng-container>
|
||||
} @else if (col.canCopy) {
|
||||
<uikit-copy [text]="getCell(item, col)"></uikit-copy>
|
||||
} @else {
|
||||
<span>
|
||||
{{ getCell(item, col) }}
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
@if (actionsCount()) {
|
||||
<td
|
||||
table-action-row
|
||||
type="td"
|
||||
[showDetails]="showDetails"
|
||||
[showDelete]="showDelete"
|
||||
[showEdit]="showEdit"
|
||||
(edit)="edit(item)"
|
||||
(delete)="remove(item)"
|
||||
(details)="details(item)"
|
||||
></td>
|
||||
}
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #emptymessage>
|
||||
<tr class="h-full">
|
||||
<td [colSpan]="columns.length.toString()" class="w-full">
|
||||
<uikit-empty-state
|
||||
[title]="emptyPlaceholderTitle"
|
||||
[description]="emptyPlaceholderDescription"
|
||||
[ctaLabel]="emptyPlaceholderCtaLabel || addNewCtaLabel"
|
||||
[showCTA]="showAdd"
|
||||
(ctaClick)="openAddForm()"
|
||||
></uikit-empty-state>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #loadingbody let-columns>
|
||||
@for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; track i) {
|
||||
<tr style="height: 46px">
|
||||
@for (col of columns; track col) {
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
</td>
|
||||
}
|
||||
@if (actionsCount()) {
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</p-table>
|
||||
@if (showPaginator) {
|
||||
<app-paginator
|
||||
[currentPage]="currentPage || 1"
|
||||
[totalRecords]="totalRecords"
|
||||
[perPage]="perPage || 10"
|
||||
[loading]="loading"
|
||||
(onChange)="onPage($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
@if (filter) {
|
||||
<p-drawer
|
||||
[visible]="filterDrawerVisible()"
|
||||
(onHide)="closeFilter()"
|
||||
header="فیلتر"
|
||||
class="contnet"
|
||||
styleClass="!w-[80vw] md:!w-96 md:!max-w-96 !max-w-sm"
|
||||
>
|
||||
<div class="pt-2">
|
||||
<ng-container [ngTemplateOutlet]="filter" [ngTemplateOutletContext]="{ $implicit: columns }"> </ng-container>
|
||||
</div>
|
||||
</p-drawer>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,170 @@
|
||||
import { PaginatorComponent, UikitCopyComponent, UikitEmptyStateComponent } from '@/uikit';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
Component,
|
||||
computed,
|
||||
ContentChild,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
Output,
|
||||
Renderer2,
|
||||
signal,
|
||||
TemplateRef,
|
||||
} from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { DrawerModule } from 'primeng/drawer';
|
||||
import { PaginatorModule } from 'primeng/paginator';
|
||||
import { SkeletonModule } from 'primeng/skeleton';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { TableActionRowComponent } from '../table-action-row.component';
|
||||
|
||||
export interface IColumn {
|
||||
field: string;
|
||||
header: string;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
canCopy?: boolean;
|
||||
customDataModel?: TemplateRef<any> | ((item: any) => string | number | boolean);
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-data-list',
|
||||
templateUrl: './page-data-list.component.html',
|
||||
imports: [
|
||||
CommonModule,
|
||||
TableActionRowComponent,
|
||||
UikitEmptyStateComponent,
|
||||
TableModule,
|
||||
ButtonModule,
|
||||
SkeletonModule,
|
||||
PaginatorModule,
|
||||
DrawerModule,
|
||||
PaginatorComponent,
|
||||
UikitCopyComponent,
|
||||
],
|
||||
})
|
||||
export class PageDataListComponent<I> {
|
||||
constructor(
|
||||
private host: ElementRef,
|
||||
private renderer: Renderer2,
|
||||
) {}
|
||||
|
||||
@Input() pageTitle!: string;
|
||||
@Input() addNewCtaLabel?: string;
|
||||
@Input() columns!: IColumn[];
|
||||
@Input() items!: I[];
|
||||
@Input() loading!: boolean;
|
||||
@Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
|
||||
@Input() emptyPlaceholderDescription?: string = '';
|
||||
@Input() emptyPlaceholderCtaLabel?: string;
|
||||
@Input() totalRecords!: number;
|
||||
@Input() perPage?: number = 10;
|
||||
@Input() currentPage?: number = 1;
|
||||
@Input() showEdit: boolean = false;
|
||||
@Input() showDelete: boolean = false;
|
||||
@Input() showDetails: boolean = false;
|
||||
@Input() showAdd: boolean = false;
|
||||
@Input() isFiltered: boolean = false;
|
||||
@Input() fullHeight: boolean = false;
|
||||
|
||||
@ContentChild('filter', { static: true }) filter!: TemplateRef<any> | null;
|
||||
@ContentChild('caption', { static: true }) caption!: TemplateRef<any> | null;
|
||||
|
||||
@Output() onEdit = new EventEmitter<I>();
|
||||
@Output() onDelete = new EventEmitter<I>();
|
||||
@Output() onDetails = new EventEmitter<I>();
|
||||
@Output() onAdd = new EventEmitter<void>();
|
||||
@Output() pageChange = new EventEmitter<any>();
|
||||
|
||||
filterDrawerVisible = signal<boolean>(false);
|
||||
|
||||
ngOnInit() {
|
||||
if (this.fullHeight) {
|
||||
this.renderer.setStyle(this.host.nativeElement, 'height', '100cqmin');
|
||||
}
|
||||
}
|
||||
|
||||
edit = (item: I) => {
|
||||
this.onEdit.emit(item);
|
||||
};
|
||||
|
||||
remove = (item: I) => {
|
||||
this.onDelete.emit(item);
|
||||
};
|
||||
|
||||
details = (item: I) => {
|
||||
this.onDetails.emit(item);
|
||||
};
|
||||
|
||||
openAddForm = () => {
|
||||
this.onAdd.emit();
|
||||
};
|
||||
|
||||
openFilter = () => {
|
||||
this.filterDrawerVisible.set(true);
|
||||
};
|
||||
|
||||
closeFilter = () => {
|
||||
this.filterDrawerVisible.set(false);
|
||||
};
|
||||
|
||||
onPage = ($event: any) => {
|
||||
this.pageChange.emit($event);
|
||||
};
|
||||
|
||||
get showPaginator() {
|
||||
return !!(this.totalRecords && this.perPage && this.totalRecords > this.perPage);
|
||||
}
|
||||
|
||||
getCell(item: Record<string, any>, column: IColumn): any {
|
||||
if (!item || !column) return '';
|
||||
try {
|
||||
const { field } = column;
|
||||
if (column.customDataModel) {
|
||||
return this.renderCustom(column, item);
|
||||
}
|
||||
const data = item[field];
|
||||
if (data === undefined || data === null) {
|
||||
return '-';
|
||||
}
|
||||
if (typeof data === 'object') {
|
||||
return data.title || '-';
|
||||
}
|
||||
return data || '-';
|
||||
} catch (e) {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
|
||||
getTemplate(col: IColumn): TemplateRef<any> | null {
|
||||
const v = col.customDataModel;
|
||||
|
||||
return v instanceof TemplateRef ? (v as TemplateRef<any>) : null;
|
||||
}
|
||||
|
||||
renderCustom(column: IColumn, item: any): any {
|
||||
const v = column.customDataModel;
|
||||
|
||||
if (!v) {
|
||||
return null;
|
||||
}
|
||||
if (typeof v === 'function') {
|
||||
try {
|
||||
return (v as (item: any) => any)(item);
|
||||
} catch {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
if (typeof v === 'string') return v;
|
||||
return null;
|
||||
}
|
||||
|
||||
actionsCount = computed(() => {
|
||||
let totalCount = 0;
|
||||
if (this.showEdit) totalCount += 1;
|
||||
if (this.showDelete) totalCount += 1;
|
||||
if (this.showDetails) totalCount += 1;
|
||||
return totalCount;
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user