diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts index 698bee93508..2da1bbeea5b 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts @@ -22,6 +22,7 @@ import { DataTableModule } from '../../datatable.module'; import { RouterTestingModule } from '@angular/router/testing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { mockPathInfos } from '../mocks/datatable.mock'; export default { component: DataTableComponent, @@ -67,88 +68,63 @@ export default { iconCol: 'folder_open', dateCol: new Date(), fileSizeCol: '536870912', - locationCol: '/path/to/location-link', - jsonCol: { - id: 1, - textCol: 'Text 1', - imageCol: 'material-icons://folder_open', - iconCol: 'folder_open', - dateCol: new Date(), - fileSizeCol: '536870912', - locationCol: '/path/to/location-link' - } + locationCol: mockPathInfos[0], + booleanCol: true, + amountCol: 100.55, + numberCol: 10000.31, + jsonCol: mockPathInfos[0] }, { id: 2, textCol: 'Text 2', imageCol: 'material-icons://cloud_outline', iconCol: 'cloud_outline', - dateCol: new Date(), + dateCol: new Date().setDate(new Date().getDate() - 1), fileSizeCol: '524288', - locationCol: { name: '/path/to/location-link' }, - jsonCol: { - id: 2, - textCol: 'Text 2', - imageCol: 'material-icons://cloud_outline', - iconCol: 'cloud_outline', - dateCol: new Date(), - fileSizeCol: '524288', - locationCol: '/path/to/location-link' - } + locationCol: mockPathInfos[1], + booleanCol: false, + amountCol: 1020.123, + numberCol: 240.3, + jsonCol: mockPathInfos[1] }, { id: 3, textCol: 'Text 3', imageCol: 'material-icons://save', iconCol: 'save', - dateCol: new Date(), + dateCol: new Date().setDate(new Date().getDate() - 5), fileSizeCol: '10737418240B', - locationCol: '/path/to/location-link', - jsonCol: { - id: 3, - textCol: 'Text 3', - imageCol: 'material-icons://save', - iconCol: 'save', - dateCol: new Date(), - fileSizeCol: '10737418240B', - locationCol: '/path/to/location-link' - } + locationCol: mockPathInfos[1], + booleanCol: 'true', + amountCol: -2020, + numberCol: 120, + jsonCol: mockPathInfos[1] }, { id: 4, textCol: 'Text 4', imageCol: 'material-icons://delete', iconCol: 'delete', - dateCol: new Date(), + dateCol: new Date().setDate(new Date().getDate() - 6), fileSizeCol: '512B', - locationCol: '/path/to/location-link', - jsonCol: { - id: 4, - textCol: 'Text 4', - imageCol: 'material-icons://delete', - iconCol: 'delete', - dateCol: new Date(), - fileSizeCol: '512B', - locationCol: '/path/to/location-link' - } + locationCol: mockPathInfos[2], + booleanCol: 'false', + amountCol: 230.76, + numberCol: 3.032, + jsonCol: mockPathInfos[2] }, { id: 5, textCol: 'Text 5', imageCol: 'material-icons://person_outline', iconCol: 'person_outline', - dateCol: new Date(), + dateCol: new Date().setDate(new Date().getDate() - 7), fileSizeCol: '1073741824B', - locationCol: '/path/to/location-link', - jsonCol: { - id: 5, - textCol: 'Text 5', - imageCol: 'material-icons://person_outline', - iconCol: 'person_outline', - dateCol: new Date(), - fileSizeCol: '1073741824B', - locationCol: '/path/to/location-link' - } + locationCol: mockPathInfos[0], + booleanCol: 'false', + amountCol: 0.444, + numberCol: 2000, + jsonCol: mockPathInfos[0] } ], table: { @@ -177,8 +153,12 @@ export default { { type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' }, + { type: 'date', key: 'dateCol', title: 'Date Time Ago Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', dateConfig: { format: 'timeAgo' } }, { type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' }, - { type: 'location', format: '/somewhere', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, + { type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, + { type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, + { type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, + { type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' } ], table: { @@ -383,7 +363,7 @@ export default { table: { category: 'Actions' } } } -} as Meta; +} as Meta; const insertContentToTemplate = (content: string): string => ( ` - row ? row.getValue('id') + ' by formatCustomTooltip' : null; + row ? 'This is ' + row.getValue('firstname') : null; -const template: Story = ( - args: DataColumnComponent & { columns: any; rows: any; data: any } -) => ({ +const template: Story = (args: DataColumnComponent & { rows: DataRow[] }) => ({ props: args, template: ` - ${ - args.columns && args.rows - ? '' - : '' - } - - - - - ` + + + + + + + ` }); -export const textColumn = template.bind({}); +// Text Column +export const textColumn: Story = template.bind({}); textColumn.args = { - data: 'text', - key: 'id', + rows: mockData.textColumnRows, + key: 'firstname', type: 'text', title: 'Text Column' }; -export const iconColumn = template.bind({}); +// Text Column With Custom Tooltip +export const textColumnWithCustomTooltip: Story = template.bind({}); +textColumnWithCustomTooltip.argTypes = { + formatTooltip: { control: { disable: false } } +}; +textColumnWithCustomTooltip.args = { + rows: mockData.textColumnRows, + key: 'firstname', + type: 'text', + title: 'Custom Tooltip Column', + formatTooltip: formatCustomTooltip +}; + +// Icon Column +export const iconColumn: Story = template.bind({}); iconColumn.argTypes = { copyContent: { control: { disable: true } } }; iconColumn.args = { - data: 'icon', + rows: mockData.iconColumnRows, key: 'icon', type: 'icon', title: 'Icon Column' }; -export const dateColumn = template.bind({}); +// Image Column +export const imageColumn: Story = template.bind({}); +imageColumn.argTypes = { + copyContent: { control: { disable: true } } +}; +imageColumn.args = { + rows: mockData.imageColumnRows, + key: 'image', + type: 'image', + title: 'Image Column' +}; + +// Date Column +export const dateColumn: Story = template.bind({}); dateColumn.argTypes = { - format: { control: { disable: false } }, - title: { control: { disable: true } }, copyContent: { control: { disable: true } }, - sortable: { control: { disable: true } }, - draggable: { control: { disable: true } }, - isHidden: { control: { disable: true } } + dateConfig: { control: { disable: false } } }; dateColumn.args = { - data: undefined, - format: 'medium', - columns() { - return [{ ...data.dateColumns, format: this.format }]; - }, - rows: data.dateRows, - key: 'id', - type: 'date' + rows: mockData.dateColumnRows, + key: 'createdOn', + type: 'date', + title: 'Date Column' }; -export const fileColumn = template.bind({}); -fileColumn.argTypes = { +// Date Column Time Ago +export const dateColumnTimeAgo: Story = template.bind({}); +dateColumnTimeAgo.argTypes = { + copyContent: { control: { disable: true } }, + dateConfig: { control: { disable: false } } +}; +dateColumnTimeAgo.args = { + rows: mockData.dateColumnTimeAgoRows, + key: 'modifiedOn', + type: 'date', + title: 'Date Column Time Ago', + dateConfig: { format: 'timeAgo' } +}; + +// File Size Column +export const fileSizeColumn: Story = template.bind({}); +fileSizeColumn.argTypes = { copyContent: { control: { disable: true } } }; -fileColumn.args = { - data: 'file', +fileSizeColumn.args = { + rows: mockData.fileSizeColumnRows, key: 'size', type: 'fileSize', - title: 'File Column' + title: 'File Size Column' }; -export const locationColumn = template.bind({}); +// Location Column +export const locationColumn: Story = template.bind({}); locationColumn.argTypes = { - copyContent: { control: { disable: true } } + copyContent: { control: { disable: true } }, + format: { control: { disable: false }}, + sortable: { control: { disable: true }} }; locationColumn.args = { - columns: data.locationColumns, - rows: data.locationRows, - key: 'id', + rows: mockData.locationColumnRows, + format: '/files', + key: 'path', type: 'location', title: 'Location Column' }; -export const jsonColumn = template.bind({}); +// Boolean Column +export const booleanColumn: Story = template.bind({}); +booleanColumn.argTypes = { + copyContent: { control: { disable: true } } +}; +booleanColumn.args = { + rows: mockData.booleanColumnRows, + key: 'bool', + type: 'boolean', + title: 'Boolean Column' +}; + +// Json Column +export const jsonColumn: Story = template.bind({}); jsonColumn.argTypes = { editable: { control: { disable: false } }, copyContent: { control: { disable: true } } }; jsonColumn.args = { - data: 'text', - key: 'id', + rows: mockData.jsonColumnRows, + key: 'rowInfo', type: 'json', title: 'JSON Column' }; -export const customTooltipColumn = template.bind({}); -customTooltipColumn.args = { - data: 'text', - key: 'id', - type: 'text', - title: 'Custom Tooltip Column', - formatTooltip: formatCustomTooltip +// Amount Column +export const amountColumn: Story = template.bind({}); +amountColumn.argTypes = { + copyContent: { control: { disable: true } }, + currencyConfig: { control: { disable: false } } +}; +amountColumn.args = { + rows: mockData.amountColumnRows, + key: 'price', + type: 'amount', + title: 'Amount Column' }; + +// Number Column +export const numberColumn: Story = template.bind({}); +numberColumn.argTypes = { + decimalConfig: { control: { disable: false } }, + copyContent: { control: { disable: true } } +}; +numberColumn.args = { + rows: mockData.amountColumnRows, + key: 'price', + type: 'number', + title: 'Number Column' +}; + diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.ts b/lib/core/src/lib/datatable/data-column/data-column.component.ts index 94a9a1cad99..aa07d756dea 100644 --- a/lib/core/src/lib/datatable/data-column/data-column.component.ts +++ b/lib/core/src/lib/datatable/data-column/data-column.component.ts @@ -19,6 +19,7 @@ import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core'; import { DataColumnType } from '@alfresco/adf-extensions'; +import { CurrencyConfig, DateConfig, DecimalConfig } from '../data/data-column.model'; @Component({ selector: 'data-column', @@ -106,6 +107,18 @@ export class DataColumnComponent implements OnInit { @Input() order?: number; + /** Allows you to customize the formatting and display of currency values within the component. */ + @Input() + currencyConfig?: CurrencyConfig; + + /** The decimalConfig input allows you to customize the formatting and display of decimal values within the component. */ + @Input() + decimalConfig?: DecimalConfig; + + /** The decimalConfig input allows you to customize the formatting and display of decimal values within the component. */ + @Input() + dateConfig?: DateConfig; + /** Data column header template */ header?: TemplateRef; diff --git a/lib/core/src/lib/mock/data-column.mock.ts b/lib/core/src/lib/mock/data-column.mock.ts index 2c9399d6f28..de7636a58a0 100644 --- a/lib/core/src/lib/mock/data-column.mock.ts +++ b/lib/core/src/lib/mock/data-column.mock.ts @@ -15,8 +15,8 @@ * limitations under the License. */ -import { ObjectDataTableAdapter } from '../datatable/data/object-datatable-adapter'; import { DataColumn } from '../datatable/data/data-column.model'; +import { mockPathInfos } from '../datatable/components/mocks/datatable.mock'; export const getDataColumnMock = ( column: Partial> = {} @@ -41,49 +41,79 @@ export const getDataColumnMock = ( ...column }); -export const dataText = new ObjectDataTableAdapter([ - { id: '1 first' }, - { id: '2 second' }, - { id: '3 third' } -]); +export const textColumnRows = [ + { firstname: 'John' }, + { firstname: 'Henry' }, + { firstname: 'David' }, + { firstname: 'Thomas' } +]; -export const dateRows = [ +export const dateColumnRows = [ { createdOn: new Date(2016, 6, 1, 11, 8, 4) }, { createdOn: new Date(2018, 4, 3, 12, 8, 4) }, { createdOn: new Date(2021, 2, 3, 9, 8, 4) } ]; -export const dateColumns = { - type: 'date', - key: 'createdOn', - title: 'Created On' -}; +const aMinuteInMilliseconds = 60 * 1000; +const anHourInMilliseconds = 60 * aMinuteInMilliseconds; +const aDayInMilliseconds = 24 * anHourInMilliseconds; + +export const dateColumnTimeAgoRows = [ + { modifiedOn: new Date() }, + { modifiedOn: new Date(Date.now() - 44 * aMinuteInMilliseconds) }, + { modifiedOn: new Date(Date.now() - 45 * aMinuteInMilliseconds) }, + { modifiedOn: new Date(Date.now() - 23 * anHourInMilliseconds) }, + { modifiedOn: new Date(Date.now() - 7 * aDayInMilliseconds) }, + { modifiedOn: new Date(Date.now() - 8 * aDayInMilliseconds) } +]; -export const locationRows = [ +export const locationColumnRows = [ + { + path: mockPathInfos[0] + }, { - path: { - elements: [ - { id: '1', name: 'path' }, - { id: '2', name: 'to' }, - { id: '3', name: 'location' } - ], - name: '/path/to/location-link' - } + path: mockPathInfos[1] + }, + { + path: mockPathInfos[2] } ]; -export const locationColumns = [ - { format: '/somewhere', type: 'location', key: 'path', title: 'Location' } +export const booleanColumnRows = [ + { bool: 'true' }, + { bool: 'false' }, + { bool: true }, + { bool: false } ]; -export const dataIcon = new ObjectDataTableAdapter([ +export const iconColumnRows = [ { icon: 'alarm' }, { icon: 'folder_open' }, { icon: 'accessibility' } -]); +]; -export const dataSizeInBytes = new ObjectDataTableAdapter([ +export const imageColumnRows = [ + { image: 'material-icons://image' }, + { image: 'material-icons://image' }, + { image: 'material-icons://image' } +]; + +export const fileSizeColumnRows = [ { size: 12313 }, { size: 23 }, { size: 42421412421 } -]); +]; + +export const amountColumnRows = [ + { price: 1230 }, + { price: 422.55 }, + { price: 50000.7855332 }, + { price: 0.123 }, + { price: -2022.3321 } +]; + +export const jsonColumnRows = [ + { rowInfo: { id: 1, name: 'row1' } }, + { rowInfo: { id: 2, name: 'row2' } }, + { rowInfo: { id: 3, name: 'row3' } } +];