mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[AAE-17258] Update storybook for datatable and datacolumn (#9052)
* [AAE-17258] Datatable storybook - add boolean type * [AAE-17258] Datatable storybook - Repair location column * [AAE-17258] Update location column - storybook * [AAE-17258] Add boolean column and update data mapping - storybook * [AAE-17258] Add some comments * [AAE-17258] Storybook - add image column * [AAE-17258] Add missing props for DataColumn * [AAE-17258] Update storybook over the amount column type * [AAE-17258] Add number column to the Storybook * [AAE-17258] Storybook simplify json column * [AAE-17258] Stroybook DataColum refactor * [AAE-17258] Storybook DataColumn refactor * [AAE-17258] Update DataColumn with date type * [AAE-17258] Update Datatable over timeAgo column - Storybook * [AAE-17258] Small changes * [AAE-17258] Storybook - simplify DataColumn stories and allow for row updates
This commit is contained in:
Wiktor Danielewski
GitHub
parent
c0194029c7
commit
168bb0b6ca
@ -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<DataTableComponent>;
|
||||
|
||||
const insertContentToTemplate = (content: string): string => (
|
||||
`<adf-datatable
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { PathInfo } from '@alfresco/js-api';
|
||||
import { DataColumn } from '../../data/data-column.model';
|
||||
|
||||
export const mockCarsData: any = [
|
||||
@ -129,3 +130,29 @@ export const mockCarsSchemaDefinition: DataColumn[] = [
|
||||
draggable: true
|
||||
}
|
||||
];
|
||||
|
||||
export const mockPathInfos: PathInfo[] = [
|
||||
{
|
||||
elements: [
|
||||
{ id: '1', name: 'User files', nodeType: 'folder' },
|
||||
{ id: '2', name: 'Favorite', nodeType: 'folder' },
|
||||
{ id: '3', name: 'Movies', nodeType: 'folder' }
|
||||
],
|
||||
name: '/User files/Favorite/Movies'
|
||||
},
|
||||
{
|
||||
elements: [
|
||||
{ id: '1', name: 'User files', nodeType: 'folder' },
|
||||
{ id: '4', name: 'Photos', nodeType: 'folder' }
|
||||
],
|
||||
name: '/User files/Photos'
|
||||
},
|
||||
{
|
||||
elements: [
|
||||
{ id: '1', name: 'User files', nodeType: 'folder' },
|
||||
{ id: '2', name: 'Favorite', nodeType: 'folder' },
|
||||
{ id: '5', name: 'Series', nodeType: 'folder' }
|
||||
],
|
||||
name: '/User files/Favorite/Series'
|
||||
}
|
||||
];
|
||||
|
||||
@ -19,7 +19,7 @@ import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { DataColumnComponent } from './data-column.component';
|
||||
import { DataTableModule } from '../datatable.module';
|
||||
import { CoreStoryModule } from '../../testing/core.story.module';
|
||||
import * as data from '../../mock/data-column.mock';
|
||||
import * as mockData from '../../mock/data-column.mock';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { DataRow } from '../index';
|
||||
|
||||
@ -114,23 +114,8 @@ export default {
|
||||
},
|
||||
format: {
|
||||
description:
|
||||
'Value format (if supported by the parent component), for example format of the date.',
|
||||
control: { type: 'select', disable: true },
|
||||
options: [
|
||||
'medium',
|
||||
'short',
|
||||
'long',
|
||||
'full',
|
||||
'shortDate',
|
||||
'mediumDate',
|
||||
'longDate',
|
||||
'fullDate',
|
||||
'shortTime',
|
||||
'mediumTime',
|
||||
'longTime',
|
||||
'fullTime',
|
||||
'timeAgo'
|
||||
],
|
||||
'Used for location type. Setups root path for router navigation.',
|
||||
control: { type: 'text', disable: true },
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
@ -240,12 +225,24 @@ export default {
|
||||
},
|
||||
type: {
|
||||
description:
|
||||
'Value type for the column. Possible settings are `text`, `image`, `date`, `fileSize`, `location`, and `json`.',
|
||||
control: { disable: true },
|
||||
'Value type for the column. Possible settings are: `text`, `icon`, `image`, `date`, `fileSize`, `location`, `boolean`, `amount`, `number` and `json`.',
|
||||
control: { type: 'select', disable: false },
|
||||
options: [
|
||||
'text',
|
||||
'icon',
|
||||
'image',
|
||||
'date',
|
||||
'fileSize',
|
||||
'location',
|
||||
'boolean',
|
||||
'amount',
|
||||
'number',
|
||||
'json'
|
||||
],
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'string'
|
||||
summary: 'DataColumnType'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: 'text'
|
||||
@ -253,36 +250,68 @@ export default {
|
||||
},
|
||||
defaultValue: 'text'
|
||||
},
|
||||
data: {
|
||||
description: 'Provides data for DataTable component',
|
||||
control: { disable: true },
|
||||
mapping: {
|
||||
text: data.dataText,
|
||||
icon: data.dataIcon,
|
||||
file: data.dataSizeInBytes
|
||||
},
|
||||
currencyConfig: {
|
||||
description:
|
||||
`The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
|
||||
control: { type: 'object', disable: true },
|
||||
table: {
|
||||
category: 'Components data',
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'ObjectDataTableAdapter'
|
||||
summary: 'CurrencyConfig'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: `{ code: 'USD', display: 'symbol' }`
|
||||
}
|
||||
},
|
||||
defaultValue: {
|
||||
code: 'USD',
|
||||
display: 'symbol',
|
||||
digitsInfo: undefined,
|
||||
locale: undefined
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
description: 'Provides columns for DataTable component',
|
||||
control: { disable: true },
|
||||
decimalConfig: {
|
||||
description:
|
||||
`The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
|
||||
control: { type: 'object', disable: true },
|
||||
table: {
|
||||
category: 'Components data',
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'array'
|
||||
summary: 'DecimalConfig'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: `{}`
|
||||
}
|
||||
},
|
||||
defaultValue: {
|
||||
digitsInfo: '2.4-5',
|
||||
locale: undefined
|
||||
}
|
||||
},
|
||||
dateConfig: {
|
||||
description:
|
||||
`The dateConfig input allows you to configure date formatting and localization for a component.`,
|
||||
control: { type: 'object', disable: true },
|
||||
table: {
|
||||
category: 'Component Inputs',
|
||||
type: {
|
||||
summary: 'DateConfig'
|
||||
},
|
||||
defaultValue: {
|
||||
summary: `{ format: 'medium', tooltipFormat: 'medium' }`
|
||||
}
|
||||
},
|
||||
defaultValue: {
|
||||
format: 'medium',
|
||||
tooltipFormat: 'medium',
|
||||
locale: undefined
|
||||
}
|
||||
},
|
||||
rows: {
|
||||
description: 'Provides rows for DataTable component',
|
||||
control: { disable: true },
|
||||
control: { disable: false },
|
||||
table: {
|
||||
category: 'Components data',
|
||||
category: 'Component data',
|
||||
type: {
|
||||
summary: 'array'
|
||||
}
|
||||
@ -292,116 +321,183 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
const formatCustomTooltip = (row: DataRow): string =>
|
||||
row ? row.getValue('id') + ' by formatCustomTooltip' : null;
|
||||
row ? 'This is ' + row.getValue('firstname') : null;
|
||||
|
||||
const template: Story<DataColumnComponent> = (
|
||||
args: DataColumnComponent & { columns: any; rows: any; data: any }
|
||||
) => ({
|
||||
const template: Story<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
|
||||
props: args,
|
||||
template: `
|
||||
${
|
||||
args.columns && args.rows
|
||||
? '<adf-datatable [columns]="columns' +
|
||||
(args.type === 'date' ? '()' : '') +
|
||||
'" [rows]="rows">'
|
||||
: '<adf-datatable [data]="data">'
|
||||
}
|
||||
<data-columns>
|
||||
<data-column [key]="key" [type]="type"
|
||||
title="${args.title}"
|
||||
[editable]="${args.editable}"
|
||||
[sortable]="${args.sortable}"
|
||||
[draggable]="${args.draggable}"
|
||||
[copyContent]="${args.copyContent}"
|
||||
format="${args.format}"
|
||||
[isHidden]="${args.isHidden}"
|
||||
class="${args.cssClass}"
|
||||
sr-title="${args.srTitle}"
|
||||
[formatTooltip]="formatTooltip">
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>`
|
||||
<adf-datatable [rows]="rows">
|
||||
<data-columns>
|
||||
<data-column
|
||||
[key]="key"
|
||||
[type]="type"
|
||||
[title]="title"
|
||||
[editable]="editable"
|
||||
[sortable]="sortable"
|
||||
[draggable]="draggable"
|
||||
[copyContent]="copyContent"
|
||||
[format]="format"
|
||||
[isHidden]="isHidden"
|
||||
[class]="cssClass"
|
||||
[sr-title]="srTitle"
|
||||
[currencyConfig]="currencyConfig"
|
||||
[decimalConfig]="decimalConfig"
|
||||
[dateConfig]="dateConfig"
|
||||
[formatTooltip]="formatTooltip">
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>
|
||||
`
|
||||
});
|
||||
|
||||
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'
|
||||
};
|
||||
|
||||
|
||||
@ -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<any>;
|
||||
|
||||
|
||||
@ -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 = <T = unknown>(
|
||||
column: Partial<DataColumn<T>> = {}
|
||||
@ -41,49 +41,79 @@ export const getDataColumnMock = <T = unknown>(
|
||||
...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 locationRows = [
|
||||
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 locationColumnRows = [
|
||||
{
|
||||
path: {
|
||||
elements: [
|
||||
{ id: '1', name: 'path' },
|
||||
{ id: '2', name: 'to' },
|
||||
{ id: '3', name: 'location' }
|
||||
],
|
||||
name: '/path/to/location-link'
|
||||
}
|
||||
path: mockPathInfos[0]
|
||||
},
|
||||
{
|
||||
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' } }
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user