Skip to content

Commit

Permalink
[AAE-17258] Update storybook for datatable and datacolumn (#9052)
Browse files Browse the repository at this point in the history 
* [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
  • Loading branch information
@wiktord2000
wiktord2000 authored Nov 9, 2023
1 parent c019402 commit 168bb0b
Show file tree
Hide file tree
Showing 5 changed files with 331 additions and 185 deletions.
92 changes: 36 additions & 56 deletions lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -383,7 +363,7 @@ export default {
table: { category: 'Actions' }
}
}
} as Meta;
} as Meta<DataTableComponent>;

const insertContentToTemplate = (content: string): string => (
`<adf-datatable
Expand Down
27 changes: 27 additions & 0 deletions lib/core/src/lib/datatable/components/mocks/datatable.mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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'
}
];
Loading

0 comments on commit 168bb0b

Please sign in to comment.