feat(admin-ui): Implement custom components in order detail data table

vendure-ecommerce · Sep 29, 2023 · 1b726a2 · 1b726a2
1 parent 1541f6f
commit 1b726a2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/...es/admin-ui/src/lib/order/src/components/order-data-table/order-data-table.component.html b/...es/admin-ui/src/lib/order/src/components/order-data-table/order-data-table.component.html
@@ -21,7 +21,16 @@
                     [class.expand]="column.expand"
                 >
                     <div class="cell-content" [ngClass]="column.align">
-                        <span>{{ column.heading }}</span>
+                        <vdr-ui-extension-point
+                            [locationId]="id"
+                            [metadata]="column.id"
+                            api="dataTable"
+                            [topPx]="-6"
+                            [leftPx]="-24"
+                            display="block"
+                        >
+                            <span>{{ column.heading }}</span>
+                        </vdr-ui-extension-point>
                         <div *ngIf="column.sort as sort" class="sort-toggle">
                             <button (click)="sort.toggleSortOrder()" [class.active]="sort.sortOrder">
                                 <clr-icon *ngIf="!sort.sortOrder" shape="two-way-arrows left"></clr-icon>
@@ -105,8 +114,21 @@
                 <td *ngFor="let column of visibleSortedColumns" [class.active]="activeIndex === i">
                     <div class="cell-content" [ngClass]="column.align">
                         <ng-container
-                            *ngTemplateOutlet="column.template; context: { item: item, index: i }"
-                        ></ng-container>
+                            *ngIf="customComponents.get(column.id) as componentConfig; else defaultComponent"
+                        >
+                            <ng-container
+                                *ngComponentOutlet="
+                                    componentConfig.config.component;
+                                    inputs: { rowItem: item };
+                                    injector: componentConfig.injector
+                                "
+                            ></ng-container>
+                        </ng-container>
+                        <ng-template #defaultComponent>
+                            <ng-container
+                                *ngTemplateOutlet="column.template; context: { item: item, index: i }"
+                            ></ng-container>
+                        </ng-template>
                     </div>
                 </td>
                 <td [class.active]="activeIndex === i"><!-- column select --></td>

diff --git a/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html b/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html
@@ -1,4 +1,4 @@
-<vdr-order-data-table id="order-detail-" [items]="order.lines" [order]="order">
+<vdr-order-data-table id="order-detail-list" [items]="order.lines" [order]="order">
     <vdr-dt2-column [heading]="'common.image' | translate" id="image">
         <ng-template let-line="item">
             <div class="image-placeholder">