feat: add expandable rows and accordion details to grid and table views

src/app/shared/components/pageDataList/page-data-list-grid-view.component.html

@@ -1,4 +1,4 @@
-<div class="h-full overflow-auto border border-surface-border cardShadow">
+<div [ngClass]="{ 'h-full overflow-auto': true, 'border border-surface-border cardShadow': hasCaption }">
   <div
     [ngClass]="{
       'px-4': hasCaption,
@@ -14,7 +14,7 @@
     <div class="grid grid-cols-1 gap-3" [ngClass]="{ 'pt-4': hasCaption }">
       @for (item of items; track `gridView_${$index}`) {
         <div class="card border border-surface-border bg-surface-0! mb-0! rounded-2xl p-4!">
-          <div class="listKeyValue">
+          <div [ngClass]="{ listKeyValue: true, 'mb-2': expandable }">
             @for (col of columns; track `gridView_${col.field.toString()}_${$index}`) {
               @if (col.type !== "index") {
                 <app-key-value [label]="col.header" [variant]="col.variant">
@@ -23,6 +23,35 @@
               }
             }
           </div>
+          @if (expandable) {
+            <p-accordion [unstyled]="true" [value]="['0']">
+              <p-accordion-panel value="0" class="border! rounded-lg! overflow-hidden">
+                <p-accordion-header class="bg-surface-200! text-text-color! py-2!">
+                  <ng-template #toggleicon let-active="active">
+                    <div class="flex items-center gap-4 w-full">
+                      <i [ngClass]="{ 'pi pi-chevron-left text-xs! transition': true, '-rotate-90': active }"></i>
+                      جزییات بیشتر
+                    </div>
+                  </ng-template>
+                </p-accordion-header>
+                <p-accordion-content>
+                  <div class="listKeyValue pt-4">
+                    @for (col of expandColumns; track `gridView_expand_${col.field.toString()}_${$index}`) {
+                      @if (col.type !== "index") {
+                        <app-key-value [label]="col.header" [variant]="col.variant">
+                          <app-page-data-value
+                            [item]="item[expandableItemKey!]"
+                            [column]="col"
+                            (thumbnailClick)="openThumbnailModal($event)"
+                          />
+                        </app-key-value>
+                      }
+                    }
+                  </div>
+                </p-accordion-content>
+              </p-accordion-panel>
+            </p-accordion>
+          }
           @if (showEdit || showDelete || showDetails) {
             <hr class="my-2" />
             <div class="flex justify-center gap-2 mt-4">

src/app/shared/components/pageDataList/page-data-list-grid-view.component.ts

@@ -10,14 +10,15 @@ import {
   signal,
   TemplateRef,
 } from '@angular/core';
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
 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 { KeyValueComponent } from '../key-value.component/key-value.component';
-import { PageDataValueComponent } from './page-data-value.component';
 import { IColumn } from './page-data-list.component';
+import { PageDataValueComponent } from './page-data-value.component';
 
 @Component({
   selector: 'app-page-data-list-grid-view',
@@ -34,6 +35,10 @@ import { IColumn } from './page-data-list.component';
     DrawerModule,
     KeyValueComponent,
     PageDataValueComponent,
+    Accordion,
+    AccordionPanel,
+    AccordionHeader,
+    AccordionContent,
   ],
 })
 export class AppPageDataListGridView<I = any> {

src/app/shared/components/pageDataList/page-data-list-table-view.component.html

@@ -20,6 +20,9 @@
 
     <ng-template #header let-columns>
       <tr>
+        @if (expandable) {
+          <th style="width: 3rem"></th>
+        }
         @if (showIndex) {
           <th [style]="{ width: '3rem', minWidth: '3rem' }"></th>
         }
@@ -35,14 +38,24 @@
         @if (actionsCount()) {
           <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
         }
-        @if (expandable) {
-          <th style="width: 3rem"></th>
-        }
       </tr>
     </ng-template>
 
     <ng-template #body let-item let-i="rowIndex" let-expanded="expanded">
       <tr>
+        @if (expandable) {
+          <td>
+            <p-button
+              type="button"
+              pRipple
+              [pRowToggler]="item"
+              [text]="true"
+              [rounded]="true"
+              [plain]="true"
+              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-left'"
+            />
+          </td>
+        }
         @if (showIndex) {
           <td>
             {{ i * (currentPage || 1) + 1 }}
@@ -65,20 +78,6 @@
             (details)="details(item)"
           ></td>
         }
-
-        @if (expandable) {
-          <td>
-            <p-button
-              type="button"
-              pRipple
-              [pRowToggler]="item"
-              [text]="true"
-              [rounded]="true"
-              [plain]="true"
-              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-left'"
-            />
-          </td>
-        }
       </tr>
     </ng-template>
 

src/app/shared/components/pageDataList/page-data-list.component.html

@@ -115,6 +115,9 @@
       [showDelete]="showDelete"
       [showDetails]="showDetails"
       [hasCaption]="!!(pageTitle || showAdd || filter || showRefresh || moreActions)"
+      [expandable]="expandable"
+      [expandableItemKey]="expandableItemKey"
+      [expandColumns]="expandColumns"
       (onEdit)="edit($event)"
       (onDelete)="remove($event)"
       (onDetails)="details($event)"