Skip to content

Commit 168bb0b

Browse files
wiktord2000wiktord2000
authored
[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
1 parent c019402 commit 168bb0b

File tree

5 files changed

+331
-185
lines changed

5 files changed

+331
-185
lines changed

‎lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts

Lines changed: 36 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { DataTableModule } from '../../datatable.module';
2222
import { RouterTestingModule } from '@angular/router/testing';
2323
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2424
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
25+
import { mockPathInfos } from '../mocks/datatable.mock';
2526

2627
export default {
2728
component: DataTableComponent,
@@ -67,88 +68,63 @@ export default {
6768
iconCol: 'folder_open',
6869
dateCol: new Date(),
6970
fileSizeCol: '536870912',
70-
locationCol: '/path/to/location-link',
71-
jsonCol: {
72-
id: 1,
73-
textCol: 'Text 1',
74-
imageCol: 'material-icons://folder_open',
75-
iconCol: 'folder_open',
76-
dateCol: new Date(),
77-
fileSizeCol: '536870912',
78-
locationCol: '/path/to/location-link'
79-
}
71+
locationCol: mockPathInfos[0],
72+
booleanCol: true,
73+
amountCol: 100.55,
74+
numberCol: 10000.31,
75+
jsonCol: mockPathInfos[0]
8076
},
8177
{
8278
id: 2,
8379
textCol: 'Text 2',
8480
imageCol: 'material-icons://cloud_outline',
8581
iconCol: 'cloud_outline',
86-
dateCol: new Date(),
82+
dateCol: new Date().setDate(new Date().getDate() - 1),
8783
fileSizeCol: '524288',
88-
locationCol: { name: '/path/to/location-link' },
89-
jsonCol: {
90-
id: 2,
91-
textCol: 'Text 2',
92-
imageCol: 'material-icons://cloud_outline',
93-
iconCol: 'cloud_outline',
94-
dateCol: new Date(),
95-
fileSizeCol: '524288',
96-
locationCol: '/path/to/location-link'
97-
}
84+
locationCol: mockPathInfos[1],
85+
booleanCol: false,
86+
amountCol: 1020.123,
87+
numberCol: 240.3,
88+
jsonCol: mockPathInfos[1]
9889
},
9990
{
10091
id: 3,
10192
textCol: 'Text 3',
10293
imageCol: 'material-icons://save',
10394
iconCol: 'save',
104-
dateCol: new Date(),
95+
dateCol: new Date().setDate(new Date().getDate() - 5),
10596
fileSizeCol: '10737418240B',
106-
locationCol: '/path/to/location-link',
107-
jsonCol: {
108-
id: 3,
109-
textCol: 'Text 3',
110-
imageCol: 'material-icons://save',
111-
iconCol: 'save',
112-
dateCol: new Date(),
113-
fileSizeCol: '10737418240B',
114-
locationCol: '/path/to/location-link'
115-
}
97+
locationCol: mockPathInfos[1],
98+
booleanCol: 'true',
99+
amountCol: -2020,
100+
numberCol: 120,
101+
jsonCol: mockPathInfos[1]
116102
},
117103
{
118104
id: 4,
119105
textCol: 'Text 4',
120106
imageCol: 'material-icons://delete',
121107
iconCol: 'delete',
122-
dateCol: new Date(),
108+
dateCol: new Date().setDate(new Date().getDate() - 6),
123109
fileSizeCol: '512B',
124-
locationCol: '/path/to/location-link',
125-
jsonCol: {
126-
id: 4,
127-
textCol: 'Text 4',
128-
imageCol: 'material-icons://delete',
129-
iconCol: 'delete',
130-
dateCol: new Date(),
131-
fileSizeCol: '512B',
132-
locationCol: '/path/to/location-link'
133-
}
110+
locationCol: mockPathInfos[2],
111+
booleanCol: 'false',
112+
amountCol: 230.76,
113+
numberCol: 3.032,
114+
jsonCol: mockPathInfos[2]
134115
},
135116
{
136117
id: 5,
137118
textCol: 'Text 5',
138119
imageCol: 'material-icons://person_outline',
139120
iconCol: 'person_outline',
140-
dateCol: new Date(),
121+
dateCol: new Date().setDate(new Date().getDate() - 7),
141122
fileSizeCol: '1073741824B',
142-
locationCol: '/path/to/location-link',
143-
jsonCol: {
144-
id: 5,
145-
textCol: 'Text 5',
146-
imageCol: 'material-icons://person_outline',
147-
iconCol: 'person_outline',
148-
dateCol: new Date(),
149-
fileSizeCol: '1073741824B',
150-
locationCol: '/path/to/location-link'
151-
}
123+
locationCol: mockPathInfos[0],
124+
booleanCol: 'false',
125+
amountCol: 0.444,
126+
numberCol: 2000,
127+
jsonCol: mockPathInfos[0]
152128
}
153129
],
154130
table: {
@@ -177,8 +153,12 @@ export default {
177153
{ type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
178154
{ type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
179155
{ type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
156+
{ type: 'date', key: 'dateCol', title: 'Date Time Ago Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', dateConfig: { format: 'timeAgo' } },
180157
{ type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
181-
{ type: 'location', format: '/somewhere', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
158+
{ type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
159+
{ type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
160+
{ type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
161+
{ type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
182162
{ type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
183163
],
184164
table: {
@@ -383,7 +363,7 @@ export default {
383363
table: { category: 'Actions' }
384364
}
385365
}
386-
} as Meta;
366+
} as Meta<DataTableComponent>;
387367

388368
const insertContentToTemplate = (content: string): string => (
389369
`<adf-datatable

‎lib/core/src/lib/datatable/components/mocks/datatable.mock.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* limitations under the License.
1616
*/
1717

18+
import { PathInfo } from '@alfresco/js-api';
1819
import { DataColumn } from '../../data/data-column.model';
1920

2021
export const mockCarsData: any = [
@@ -129,3 +130,29 @@ export const mockCarsSchemaDefinition: DataColumn[] = [
129130
draggable: true
130131
}
131132
];
133+
134+
export const mockPathInfos: PathInfo[] = [
135+
{
136+
elements: [
137+
{ id: '1', name: 'User files', nodeType: 'folder' },
138+
{ id: '2', name: 'Favorite', nodeType: 'folder' },
139+
{ id: '3', name: 'Movies', nodeType: 'folder' }
140+
],
141+
name: '/User files/Favorite/Movies'
142+
},
143+
{
144+
elements: [
145+
{ id: '1', name: 'User files', nodeType: 'folder' },
146+
{ id: '4', name: 'Photos', nodeType: 'folder' }
147+
],
148+
name: '/User files/Photos'
149+
},
150+
{
151+
elements: [
152+
{ id: '1', name: 'User files', nodeType: 'folder' },
153+
{ id: '2', name: 'Favorite', nodeType: 'folder' },
154+
{ id: '5', name: 'Series', nodeType: 'folder' }
155+
],
156+
name: '/User files/Favorite/Series'
157+
}
158+
];

0 commit comments

Comments
 (0)