mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[AAE-6991] Stories for datatable component (#7830)
This commit is contained in:
Robert Duda
GitHub
parent
f8498d7574
commit
22ac215cb5
@ -0,0 +1,500 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CoreStoryModule } from '../../../testing/core.story.module';
|
||||
import { DataTableComponent } from './datatable.component';
|
||||
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';
|
||||
|
||||
export default {
|
||||
component: DataTableComponent,
|
||||
title: 'Core/Datatable/Datatable',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [
|
||||
CoreStoryModule,
|
||||
DataTableModule,
|
||||
MatProgressSpinnerModule,
|
||||
BrowserAnimationsModule,
|
||||
RouterTestingModule
|
||||
]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
data: {
|
||||
control: 'object',
|
||||
description: 'Data source for the table',
|
||||
table: {
|
||||
category: 'Data',
|
||||
type: { summary: 'DataTableAdapter' }
|
||||
}
|
||||
},
|
||||
display: {
|
||||
control: 'inline-radio',
|
||||
options: ['list', 'gallery'],
|
||||
defaultValue: 'list',
|
||||
description: 'The display mode of the table.',
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'list' }
|
||||
}
|
||||
},
|
||||
rows: {
|
||||
control: 'object',
|
||||
description: 'The rows that the datatable will show.',
|
||||
defaultValue: [
|
||||
{
|
||||
id: 1,
|
||||
textCol: 'This is a very long text inside the text column to check if the hidden text will be displayed on hover.',
|
||||
imageCol: 'material-icons://folder_open',
|
||||
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'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
textCol: 'Text 2',
|
||||
imageCol: 'material-icons://cloud_outline',
|
||||
iconCol: 'cloud_outline',
|
||||
dateCol: new Date(),
|
||||
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'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
textCol: 'Text 3',
|
||||
imageCol: 'material-icons://save',
|
||||
iconCol: 'save',
|
||||
dateCol: new Date(),
|
||||
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'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
textCol: 'Text 4',
|
||||
imageCol: 'material-icons://delete',
|
||||
iconCol: 'delete',
|
||||
dateCol: new Date(),
|
||||
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'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
textCol: 'Text 5',
|
||||
imageCol: 'material-icons://person_outline',
|
||||
iconCol: 'person_outline',
|
||||
dateCol: new Date(),
|
||||
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'
|
||||
}
|
||||
}
|
||||
],
|
||||
table: {
|
||||
category: 'Data',
|
||||
type: { summary: 'any[]' },
|
||||
defaultValue: { summary: '[]' }
|
||||
}
|
||||
},
|
||||
sorting: {
|
||||
control: 'object',
|
||||
defaultValue: ['id', 'asc'],
|
||||
description: 'A string array.\n\n' +
|
||||
'First element describes the key to sort by.\n\n' +
|
||||
'Second element describes the sorting order.',
|
||||
table: {
|
||||
type: { summary: 'any[]' },
|
||||
defaultValue: { summary: '[]' }
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
control: 'object',
|
||||
description: 'The columns that the datatable will show.',
|
||||
defaultValue: [
|
||||
{ type: 'text', key: 'id', title: 'Id', sortable: true },
|
||||
{ type: 'text', key: 'textCol', title: 'Text Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', copyContent: true },
|
||||
{ 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: '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: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
|
||||
],
|
||||
table: {
|
||||
category: 'Data',
|
||||
type: { summary: 'any[]' },
|
||||
defaultValue: { summary: '[]' }
|
||||
}
|
||||
},
|
||||
selectionMode: {
|
||||
control: 'inline-radio',
|
||||
description: 'Row selection mode.',
|
||||
options: ['none', 'single', 'multiple'],
|
||||
defaultValue: 'single',
|
||||
table: {
|
||||
category: 'Selection',
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'single' }
|
||||
}
|
||||
},
|
||||
multiselect: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles multiple row selection, which renders checkboxes at the beginning of each row.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Selection',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
mainTableAction: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles main data table action column.',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
category: 'Data Actions Column',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'true' }
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles the data actions column.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Data Actions Column',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
showMainDatatableActions: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles the main datatable action.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Data Actions Column',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
actionsPosition: {
|
||||
control: 'inline-radio',
|
||||
description: 'Position of the actions dropdown menu.',
|
||||
options: ['right', 'left'],
|
||||
defaultValue: 'right',
|
||||
table: {
|
||||
category: 'Data Actions Column',
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'right' }
|
||||
}
|
||||
},
|
||||
actionsVisibleOnHover: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Data Actions Column',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
fallbackThumbnail: {
|
||||
control: 'text',
|
||||
description: 'Fallback image for rows where the thumbnail is missing.',
|
||||
table: {
|
||||
type: { summary: 'string' }
|
||||
}
|
||||
},
|
||||
contextMenu: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles custom context menu for the component.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
rowStyle: {
|
||||
control: 'object',
|
||||
description: 'The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples.',
|
||||
table: {
|
||||
category: 'Custom Row Styles',
|
||||
type: { summary: '{ [key: string]: any }' }
|
||||
}
|
||||
},
|
||||
rowStyleClass: {
|
||||
control: 'text',
|
||||
description: 'The CSS class to apply to every row.',
|
||||
defaultValue: '',
|
||||
table: {
|
||||
category: 'Custom Row Styles',
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: '' }
|
||||
}
|
||||
},
|
||||
showHeader: {
|
||||
control: 'inline-radio',
|
||||
description: 'Toggles the header visibility mode.',
|
||||
options: ['never', 'always', 'data'],
|
||||
defaultValue: 'data',
|
||||
table: {
|
||||
category: 'Header',
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: 'data' }
|
||||
}
|
||||
},
|
||||
stickyHeader: {
|
||||
control: 'boolean',
|
||||
description: 'Toggles the sticky header mode.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Header',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
control: 'boolean',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Table Template',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
noPermission: {
|
||||
control: 'boolean',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
category: 'Table Template',
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
rowMenuCacheEnabled: {
|
||||
control: 'boolean',
|
||||
description: 'Should the items for the row actions menu be cached for reuse after they are loaded the first time?',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
allowFiltering: {
|
||||
control: 'boolean',
|
||||
description: 'Flag that indicate if the datatable allow the use facet widget search for filtering.',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: 'false' }
|
||||
}
|
||||
},
|
||||
rowClick: {
|
||||
action: 'rowClick',
|
||||
description: 'Emitted when the user clicks a row.',
|
||||
table: { category: 'Actions' }
|
||||
},
|
||||
rowDblClick: {
|
||||
action: 'rowDblClick',
|
||||
description: 'Emitted when the user double-clicks a row.',
|
||||
table: { category: 'Actions' }
|
||||
},
|
||||
/* commented until [AAE-10239] fixed
|
||||
showRowContextMenu: {
|
||||
action: 'showRowContextMenu',
|
||||
description: 'Emitted before the context menu is displayed for a row.',
|
||||
table: { category: 'Actions' }
|
||||
},
|
||||
showRowActionsMenu: {
|
||||
action: 'showRowActionsMenu',
|
||||
description: 'Emitted before the actions menu is displayed for a row.',
|
||||
table: { category: 'Actions' }
|
||||
},
|
||||
*/
|
||||
executeRowAction: {
|
||||
action: 'executeRowAction',
|
||||
description: 'Emitted when the user executes a row action.',
|
||||
table: { category: 'Actions' }
|
||||
},
|
||||
columnOrderChanged: {
|
||||
action: 'columnOrderChanged',
|
||||
description: 'Emitted when the order of columns changed.',
|
||||
table: { category: 'Actions' }
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const insertContentToTemplate = (content: string): string => (
|
||||
`<adf-datatable
|
||||
[display]=display
|
||||
[rows]=rows
|
||||
[sorting]=sorting
|
||||
[columns]=columns
|
||||
[selectionMode]=selectionMode
|
||||
[multiselect]=multiselect
|
||||
[mainTableAction]=mainTableAction
|
||||
[actions]=actions
|
||||
[showMainDatatableActions]=showMainDatatableActions
|
||||
[actionsPosition]=actionsPosition
|
||||
[actionsVisibleOnHover]=actionsVisibleOnHover
|
||||
[contextMenu]=contextMenu
|
||||
[rowStyleClass]=rowStyleClass
|
||||
[showHeader]=showHeader
|
||||
[stickyHeader]=stickyHeader
|
||||
[loading]=loading
|
||||
[noPermission]=noPermission
|
||||
[rowMenuCacheEnabled]=rowMenuCacheEnabled
|
||||
[allowFiltering]=allowFiltering
|
||||
(rowClick)=rowClick($event)
|
||||
(rowDblClick)=rowDblClick($event)
|
||||
(executeRowAction)=executeRowAction($event)
|
||||
(columnOrderChanged)=columnOrderChanged($event)
|
||||
>
|
||||
${content}
|
||||
</adf-datatable>`
|
||||
);
|
||||
|
||||
export const defaultDatatable: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: args,
|
||||
template: insertContentToTemplate('')
|
||||
});
|
||||
|
||||
export const emptyWithList: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
rows: []
|
||||
},
|
||||
template: insertContentToTemplate(`
|
||||
<adf-empty-list>
|
||||
<div adf-empty-list-header>Empty List Header</div>
|
||||
<div adf-empty-list-body>Empty List Body</div>
|
||||
<div adf-empty-list-footer>Empty List Footer</div>
|
||||
</adf-empty-list>
|
||||
`)
|
||||
});
|
||||
|
||||
export const emptyWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
rows: []
|
||||
},
|
||||
template: insertContentToTemplate(`
|
||||
<adf-no-content-template>
|
||||
<ng-template>Sorry, no content</ng-template>
|
||||
</adf-no-content-template>
|
||||
`)
|
||||
});
|
||||
|
||||
export const loadingWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
loading: true
|
||||
},
|
||||
template: insertContentToTemplate(`
|
||||
<adf-loading-content-template>
|
||||
<ng-template>
|
||||
<mat-progress-spinner [mode]='indeterminate'>
|
||||
</mat-progress-spinner>
|
||||
</ng-template>
|
||||
</adf-loading-content-template>
|
||||
`)
|
||||
});
|
||||
|
||||
export const noPermissionWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
noPermission: true
|
||||
},
|
||||
template: insertContentToTemplate(`
|
||||
<adf-no-permission-template>
|
||||
<ng-template>
|
||||
<div style=color:red;>You don't have permission to this content.</div>
|
||||
</ng-template>
|
||||
</adf-no-permission-template>
|
||||
`)
|
||||
});
|
||||
|
||||
export const mainMenuWithTemplate: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
mainTableAction: true,
|
||||
showMainDatatableActions: true
|
||||
},
|
||||
template: insertContentToTemplate(`
|
||||
<adf-main-menu-datatable-template>
|
||||
<ng-template let-mainMenuTrigger>
|
||||
<adf-datatable-column-selector [columns]=columns [mainMenuTrigger]=mainMenuTrigger>
|
||||
</adf-datatable-column-selector>
|
||||
</ng-template>
|
||||
</adf-main-menu-datatable-template>
|
||||
`)
|
||||
});
|
||||
|
||||
export const stickyHeader: Story<DataTableComponent> = (args: DataTableComponent) => ({
|
||||
props: {
|
||||
...args,
|
||||
stickyHeader: true
|
||||
},
|
||||
template: '<div style="overflow:scroll;display:block;height:230px;">' + insertContentToTemplate(``) + '</div>'
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user