- @if (captionBox) {
+ @if (hasCaption && captionBox) {
} -
} -
+
@for (item of items; track `gridView_${$index}`) {
@for (col of columns; track `gridView_${col.field.toString()}_${$index}`) {
@if (col.type !== "index") {
- @if (col.type === "thumbnail") {
-
}
}
diff --git a/src/app/shared/components/pageDataList/page-data-list-grid-view.component.ts b/src/app/shared/components/pageDataList/page-data-list-grid-view.component.ts
index 52516bf..2f15ec2 100644
--- a/src/app/shared/components/pageDataList/page-data-list-grid-view.component.ts
+++ b/src/app/shared/components/pageDataList/page-data-list-grid-view.component.ts
@@ -1,6 +1,4 @@
import { Maybe } from '@/core';
-import { UikitCopyComponent } from '@/uikit';
-import { formatJalali, formatWithCurrency, jalaliDiff } from '@/utils';
import { CommonModule } from '@angular/common';
import {
Component,
@@ -17,8 +15,8 @@ import { DrawerModule } from 'primeng/drawer';
import { PaginatorModule } from 'primeng/paginator';
import { SkeletonModule } from 'primeng/skeleton';
import { TableModule } from 'primeng/table';
-import { Tag } from 'primeng/tag';
import { KeyValueComponent } from '../key-value.component/key-value.component';
+import { PageDataValueComponent } from './page-data-value.component';
import { IColumn } from './page-data-list.component';
@Component({
@@ -34,9 +32,8 @@ import { IColumn } from './page-data-list.component';
SkeletonModule,
PaginatorModule,
DrawerModule,
- UikitCopyComponent,
KeyValueComponent,
- Tag,
+ PageDataValueComponent,
],
})
export class AppPageDataListGridView {
@@ -62,6 +59,7 @@ export class AppPageDataListGridView {
@Input() expandColumns?: Maybe = null;
@Input() dataKey?: string = 'items';
@Input() showPaginator?: boolean;
+ @Input() hasCaption: boolean = false;
@ContentChild('filter', { static: true }) filter!: TemplateRef | null;
@ContentChild('moreActions', { static: true }) moreActions!: TemplateRef | null;
@@ -113,99 +111,6 @@ export class AppPageDataListGridView {
// this.
};
- getPreviewClasses(item: Record, column: IColumn): any {
- if (!item || !column || column.customDataModel) return '';
- try {
- const { field } = column;
-
- const data = item[String(field)];
- switch (column.type) {
- case 'date':
- if (column.dateOption?.expiredMode) {
- if (jalaliDiff(new Date(), data) > 0) {
- return 'text-error';
- }
- }
- return '';
- default:
- return;
- }
- } catch (e) {
- return '';
- }
- }
-
- getCell(item: Record, column: IColumn): any {
- if (!item || !column) return '';
- try {
- let { field, type } = column;
-
- if (column.customDataModel) {
- return this.renderCustom(column, item);
- }
-
- let data = item[String(field)];
- if (column.type === 'nested') {
- const path = column.nestedOption?.path;
- if (!path) return '-';
- data = path
- .split('.')
- .reduce((obj, key) => (obj && obj[key] !== undefined ? obj[key] : null), item);
- type = column.nestedOption?.type || 'simple';
- }
-
- if (type) {
- switch (type) {
- case 'id':
- if (!data) return '-';
- return `${data.slice(0, 5)}...${data.slice(data.length - 5, data.length)}`;
- case 'date':
- if (!data) return '-';
- return formatJalali(data);
- case 'boolean':
- return data ? 'بله' : 'خیر';
- case 'price':
- return formatWithCurrency(data, false, 'ریال');
- case 'number':
- return data || 0;
- default:
- break;
- }
- }
- if (data === undefined || data === null) {
- return '-';
- }
- if (typeof data === 'object') {
- return data.title || '-';
- }
- return data || '-';
- } catch (e) {
- return '-';
- }
- }
-
- getTemplate(col: IColumn): TemplateRef | null {
- const v = col.customDataModel;
- return v instanceof TemplateRef ? (v as TemplateRef) : 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;
diff --git a/src/app/shared/components/pageDataList/page-data-list-table-view.component.html b/src/app/shared/components/pageDataList/page-data-list-table-view.component.html
index db480eb..5b1579f 100644
--- a/src/app/shared/components/pageDataList/page-data-list-table-view.component.html
+++ b/src/app/shared/components/pageDataList/page-data-list-table-view.component.html
@@ -50,29 +50,7 @@
}
@for (col of columns; track col.field) {
- @if (col.type === "thumbnail") {
-
}
@if (actionsCount()) {
@@ -97,7 +75,7 @@
[text]="true"
[rounded]="true"
[plain]="true"
- [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+ [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-left'"
/>
}
@@ -145,26 +123,12 @@
{{ item.name }}
@if (col.type === "index") {
{{ i * (currentPage || 1) + 1 }}
- } @else if (col.type === "thumbnail") {
- | null;
@ContentChild('paginator', { static: true }) paginator!: TemplateRef | null;
@ContentChild('moreActions', { static: true }) moreActions!: TemplateRef | null;
@ContentChild('expandableTemp', { static: false }) expandableTemp!: TemplateRef | null;
- @ContentChild('captionBox', { static: true }) captionBox!: TemplateRef | null;
+ @ContentChild('captionBox', { static: false }) captionBox!: TemplateRef | null;
@ContentChild('emptyMessageCard', { static: true }) emptyMessageCard!: TemplateRef | null;
@Output() onEdit = new EventEmitter();
@@ -117,99 +116,6 @@ export class AppPageDataListTableView {
// this.
};
- getPreviewClasses(item: Record, column: IColumn): any {
- if (!item || !column || column.customDataModel) return '';
- try {
- const { field } = column;
-
- const data = item[String(field)];
- switch (column.type) {
- case 'date':
- if (column.dateOption?.expiredMode) {
- if (jalaliDiff(new Date(), data) > 0) {
- return 'text-error';
- }
- }
- return '';
- default:
- return;
- }
- } catch (e) {
- return '';
- }
- }
-
- getCell(item: Record, column: IColumn): any {
- if (!item || !column) return '';
- try {
- let { field, type } = column;
-
- if (column.customDataModel) {
- return this.renderCustom(column, item);
- }
-
- let data = item[String(field)];
- if (column.type === 'nested') {
- const path = column.nestedOption?.path;
- if (!path) return '-';
- data = path
- .split('.')
- .reduce((obj, key) => (obj && obj[key] !== undefined ? obj[key] : null), item);
- type = column.nestedOption?.type || 'simple';
- }
-
- if (type) {
- switch (type) {
- case 'id':
- if (!data) return '-';
- return `${data.slice(0, 5)}...${data.slice(data.length - 5, data.length)}`;
- case 'date':
- if (!data) return '-';
- return formatJalali(data);
- case 'boolean':
- return data ? 'بله' : 'خیر';
- case 'price':
- return formatWithCurrency(data, false, 'ریال');
- case 'number':
- return data || 0;
- default:
- break;
- }
- }
- if (data === undefined || data === null) {
- return '-';
- }
- if (typeof data === 'object') {
- return data.title || '-';
- }
- return data || '-';
- } catch (e) {
- return '-';
- }
- }
-
- getTemplate(col: IColumn): TemplateRef | null {
- const v = col.customDataModel;
- return v instanceof TemplateRef ? (v as TemplateRef) : 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;
diff --git a/src/app/shared/components/pageDataList/page-data-list.component.html b/src/app/shared/components/pageDataList/page-data-list.component.html
index 873a9a3..6b45531 100644
--- a/src/app/shared/components/pageDataList/page-data-list.component.html
+++ b/src/app/shared/components/pageDataList/page-data-list.component.html
@@ -1,4 +1,70 @@
- @if (item && col?.field && item[col!.field!]) {
- ![]()
- }
-
- } @else if (col.variant === "tag") {
-
- @if (item[col.field]) {
- ![]()
- }
-
- } @else if (col.variant === "tag") {
-
- @if (item[col.field]) {
- ![]()
- }
-
- } @else if (getTemplate(col)) {
-
+
+ @if (pageTitle || showAdd || filter || showRefresh || moreActions) {
+
+
+ }
+
+
+
+
+
+
@if (!isMobile) {
-
- @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
-
-
- }
-
+ @if (pageTitle || showAdd || filter || showRefresh || moreActions) {
+
+
+ }
-
-
} @else {
@@ -90,61 +114,21 @@
[showEdit]="showEdit"
[showDelete]="showDelete"
[showDetails]="showDetails"
+ [hasCaption]="!!(pageTitle || showAdd || filter || showRefresh || moreActions)"
(onEdit)="edit($event)"
(onDelete)="remove($event)"
(onDetails)="details($event)"
>
- @if (pageTitle || showAdd || filter || caption || showRefresh || moreActions) {
-
-
-
+ @if (pageTitle || showAdd || filter || showRefresh || moreActions) {
+
-
-
}
diff --git a/src/app/shared/components/pageDataList/page-data-value.component.ts b/src/app/shared/components/pageDataList/page-data-value.component.ts
new file mode 100644
index 0000000..e36c862
--- /dev/null
+++ b/src/app/shared/components/pageDataList/page-data-value.component.ts
@@ -0,0 +1,100 @@
+import { formatJalali, formatWithCurrency, jalaliDiff } from '@/utils';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { Tag } from 'primeng/tag';
+import { UikitCopyComponent } from '@/uikit';
+import { IColumn } from './page-data-list.component';
+
+@Component({
+ selector: 'app-page-data-value',
+ standalone: true,
+ imports: [CommonModule, Tag, UikitCopyComponent],
+ template: `
+ @if (column.type === 'thumbnail') {
+ ;
+ @Input({ required: true }) column!: IColumn;
+ @Output() thumbnailClick = new EventEmitter();
+
+ readFieldValue(item: Record, field: IColumn['field']) {
+ return item?.[String(field)];
+ }
+
+ getPreviewClasses(item: Record, column: IColumn): string {
+ if (!item || !column || column.customDataModel) return '';
+ const data = item[String(column.field)];
+ if (column.type === 'date' && column.dateOption?.expiredMode && jalaliDiff(new Date(), data) > 0) {
+ return 'text-error';
+ }
+ return '';
+ }
+
+ getCell(item: Record, column: IColumn): any {
+ if (!item || !column) return '';
+ let { field, type } = column;
+
+ if (column.customDataModel) {
+ return this.renderCustom(column, item);
+ }
+
+ let data = item[String(field)];
+ if (column.type === 'nested') {
+ const path = column.nestedOption?.path;
+ if (!path) return '-';
+ data = path.split('.').reduce((obj: any, key: string) => (obj && obj[key] !== undefined ? obj[key] : null), item);
+ type = column.nestedOption?.type || 'simple';
+ }
+
+ switch (type) {
+ case 'id':
+ return data ? `${data.slice(0, 5)}...${data.slice(data.length - 5)}` : '-';
+ case 'date':
+ return data ? formatJalali(data) : '-';
+ case 'boolean':
+ return data ? 'بله' : 'خیر';
+ case 'price':
+ return formatWithCurrency(data, false, 'ریال');
+ case 'number':
+ return data || 0;
+ }
+
+ if (data === undefined || data === null) return '-';
+ if (typeof data === 'object') return data.title || '-';
+ return data || '-';
+ }
+
+ getTemplate(col: IColumn): TemplateRef | null {
+ const v = col.customDataModel;
+ return v instanceof TemplateRef ? (v as TemplateRef) : 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;
+ }
+}
diff --git a/src/presets.ts b/src/presets.ts
index 5a15cb7..487270d 100644
--- a/src/presets.ts
+++ b/src/presets.ts
@@ -31,6 +31,9 @@ const MyPreset = definePreset(Aura, {
},
},
semantic: {
+ ...updateSurfacePalette({
+ 0: '#fcfcfc',
+ }),
primary: {
0: '{surface.0}',
50: '{surface.50}',
@@ -45,9 +48,27 @@ const MyPreset = definePreset(Aura, {
900: '{surface.900}',
950: '{surface.950}',
},
-
colorScheme: {
+ colorScheme: {
+ light: {},
+ dark: {},
+ },
light: {
+ surface: {
+ 0: '#fcfcfc',
+ 50: '#f8fafc',
+ 100: '#f1f5f9',
+ 200: '#e2e8f0',
+ 300: '#cbd5e1',
+ 400: '#94a3b8',
+ 500: '#64748b',
+ 600: '#475569',
+ 700: '#334155',
+ 800: '#1e293b',
+ 900: '#0f172a',
+ 950: '#020617',
+ },
+
primary: {
color: '{primary.950}',
contrastColor: '#f0f0f0',
@@ -79,7 +100,7 @@ const MyPreset = definePreset(Aura, {
},
primitive: {
...updateSurfacePalette({
- 0: '#f0f0f0',
+ 0: '#fcfcfc',
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
+
+ {{ pageTitle }}
+ @if (showAdd || filter || showRefresh || moreActions) { +
+
+ }
+
-
- {{ pageTitle }}
- @if (showAdd || filter || showRefresh || moreActions) { -
-
- }
-
+ @if (readFieldValue(item, column.field)) {
+ ![]()
+ }
+
+ } @else if (column.variant === 'tag') {
+