-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(admin-ui): Allow custom components in data table columns
- Loading branch information
1 parent
73a78db
commit d3474dd
Showing
9 changed files
with
214 additions
and
19 deletions.
There are no files selected for viewing
53 changes: 53 additions & 0 deletions
53
packages/admin-ui/src/lib/core/src/extension/register-data-table-component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { APP_INITIALIZER } from '@angular/core'; | ||
| import { | ||
| DataTableComponentConfig, | ||
| DataTableCustomComponentService, | ||
| } from '../shared/components/data-table-2/data-table-custom-component.service'; | ||
|
|
||
| /** | ||
| * @description | ||
| * Allows you to override the default component used to render the data of a particular column in a DataTable. | ||
| * The component should implement the {@link CustomDataTableColumnComponent} interface. | ||
| * | ||
| * @example | ||
| * ```ts title="components/custom-table.component.ts" | ||
| * import { Component, Input } from '\@angular/core'; | ||
| * import { CustomColumnComponent } from '\@vendure/admin-ui/core'; | ||
| * | ||
| * @Component({ | ||
| * selector: 'custom-slug-component', | ||
| * template: ` | ||
| * <a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a> | ||
| * `, | ||
| * standalone: true, | ||
| * }) | ||
| * export class CustomTableComponent implements CustomColumnComponent { | ||
| * @Input() rowItem: any; | ||
| * } | ||
| * ``` | ||
| * | ||
| * ```ts title="providers.ts" | ||
| * import { registerDataTableComponent } from '\@vendure/admin-ui/core'; | ||
| * import { CustomTableComponent } from './components/custom-table.component'; | ||
| * | ||
| * export default [ | ||
| * registerDataTableComponent({ | ||
| * component: CustomTableComponent, | ||
| * tableId: 'product-list', | ||
| * columnId: 'slug', | ||
| * }), | ||
| * ]; | ||
| * ``` | ||
| * | ||
| * @docsCategory custom-table-components | ||
| */ | ||
| export function registerDataTableComponent(config: DataTableComponentConfig) { | ||
| return { | ||
| provide: APP_INITIALIZER, | ||
| multi: true, | ||
| useFactory: (dataTableCustomComponentService: DataTableCustomComponentService) => () => { | ||
| dataTableCustomComponentService.registerCustomComponent(config); | ||
| }, | ||
| deps: [DataTableCustomComponentService], | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
...ui/src/lib/core/src/shared/components/data-table-2/data-table-custom-component.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { Injectable, Provider, Type } from '@angular/core'; | ||
| import { PageLocationId } from '../../../common/component-registry-types'; | ||
|
|
||
| export type DataTableLocationId = | ||
| | { | ||
| [location in PageLocationId]: location extends `${string}-list` ? location : never; | ||
| }[PageLocationId] | ||
| | 'collection-contents' | ||
| | 'edit-options-list' | ||
| | 'manage-product-variant-list' | ||
| | 'customer-order-list' | ||
| | string; | ||
|
|
||
| export type DataTableColumnId = | ||
| | 'id' | ||
| | 'created-at' | ||
| | 'updated-at' | ||
| | 'name' | ||
| | 'code' | ||
| | 'description' | ||
| | 'slug' | ||
| | 'enabled' | ||
| | 'sku' | ||
| | 'price' | ||
| | 'price-with-tax' | ||
| | 'status' | ||
| | 'state' | ||
| | 'image' | ||
| | 'quantity' | ||
| | 'total' | ||
| | 'stock-on-hand' | ||
| | string; | ||
|
|
||
| /** | ||
| * @description | ||
| * Components which are to be used to render custom cells in a data table should implement this interface. | ||
| * | ||
| * The `rowItem` property is the data object for the row, e.g. the `Product` object if used | ||
| * in the `product-list` table. | ||
| * | ||
| * @docsCategory custom-table-components | ||
| */ | ||
| export interface CustomColumnComponent { | ||
| rowItem: any; | ||
| } | ||
|
|
||
| /** | ||
| * @description | ||
| * Configures a {@link CustomDetailComponent} to be placed in the given location. | ||
| * | ||
| * @docsCategory custom-table-components | ||
| */ | ||
| export interface DataTableComponentConfig { | ||
| /** | ||
| * @description | ||
| * The location in the UI where the custom component should be placed. | ||
| */ | ||
| tableId: DataTableLocationId; | ||
| /** | ||
| * @description | ||
| * The column in the table where the custom component should be placed. | ||
| */ | ||
| columnId: DataTableColumnId; | ||
| /** | ||
| * @description | ||
| * The component to render in the table cell. This component should implement the | ||
| * {@link CustomColumnComponent} interface. | ||
| */ | ||
| component: Type<CustomColumnComponent>; | ||
| providers?: Provider[]; | ||
| } | ||
|
|
||
| type CompoundId = `${DataTableLocationId}.${DataTableColumnId}`; | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root', | ||
| }) | ||
| export class DataTableCustomComponentService { | ||
| private configMap = new Map<CompoundId, DataTableComponentConfig>(); | ||
|
|
||
| registerCustomComponent(config: DataTableComponentConfig) { | ||
| const id = this.compoundId(config.tableId, config.columnId); | ||
| this.configMap.set(id, config); | ||
| } | ||
|
|
||
| getCustomComponentsFor( | ||
| tableId: DataTableLocationId, | ||
| columnId: DataTableColumnId, | ||
| ): DataTableComponentConfig | undefined { | ||
| return this.configMap.get(this.compoundId(tableId, columnId)); | ||
| } | ||
|
|
||
| private compoundId(tableId: DataTableLocationId, columnId: DataTableColumnId): CompoundId { | ||
| return `${tableId}.${columnId}`; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
packages/dev-server/test-plugins/experimental-ui/components/custom-table.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { CustomColumnComponent } from '@vendure/admin-ui/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'custom-slug-component', | ||
| template: ` | ||
| <a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a> | ||
| `, | ||
| standalone: true, | ||
| }) | ||
| export class CustomTableComponent implements CustomColumnComponent { | ||
| @Input() rowItem: any; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters