@centreon/ui 24.11.14 → 24.11.21

package/src/Listing/index.stories.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
-import { React, useState } from 'react';
+import { useState } from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { equals, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
@@ -12,11 +13,11 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType } from './models';
+import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
-export default {
+const meta: Meta<typeof Listing> = {
   argTypes: {
     checkable: { control: 'boolean' },
     currentPage: { control: 'number' },
@@ -26,16 +27,20 @@ export default {
   },
   component: Listing,
   title: 'Listing'
-} as ComponentMeta<typeof Listing>;
+};
+export default meta;
+
+type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.palette.background.default,
+    height: '100vh'
   }
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <>
+  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -45,7 +50,13 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </>
+  </div>
+);
+
+const ButtonColumn = ({ row }): JSX.Element => (
+  <Button size="small" onClick={() => alert(JSON.stringify(row))}>
+    Click to reveal details about {row.name}
+  </Button>
 );
 
 const defaultColumns = [
@@ -131,7 +142,7 @@ const predefinedRowsSelection = [
   }
 ];
 
-const Story = ({
+const StoryTemplate = ({
   columns = defaultColumns,
   checkable = true,
   viewerModeConfiguration,
@@ -153,7 +164,7 @@ const Story = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={listing}
+        rows={props.rows ?? listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -164,31 +175,35 @@ const Story = ({
   );
 };
 
-export const normal = (): JSX.Element => <Story />;
+export const normal = (): JSX.Element => <StoryTemplate />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
-  const [viewMode, setViewMode] = useState(ListingVariant.extended);
-  const newViewMode = equals(viewMode, ListingVariant.compact)
+  const [listingVariant, setListingVariant] = useState(ListingVariant.extended);
+  const newListingVariant = equals(listingVariant, ListingVariant.compact)
     ? ListingVariant.extended
     : ListingVariant.compact;
 
   return (
-    <Story
-      viewMode={viewMode}
+    <StoryTemplate
+      listingVariant={listingVariant}
       viewerModeConfiguration={{
-        onClick: () => setViewMode(newViewMode),
-        title: viewMode
+        onClick: () => setListingVariant(newListingVariant),
+        title: listingVariant
       }}
     />
   );
 };
 
 export const loadingWithNoData = (): JSX.Element => {
-  return <Story loading rows={[]} totalRows={0} />;
+  return <StoryTemplate loading rows={[]} totalRows={0} />;
 };
 
 export const loadingWithData = (): JSX.Element => {
-  return <Story loading />;
+  return <StoryTemplate loading />;
+};
+
+export const asEmptyState = (): JSX.Element => {
+  return <StoryTemplate rows={[]} />;
 };
 
 const actions = (
@@ -197,12 +212,16 @@ const actions = (
   </Button>
 );
 
-export const withActions = (): JSX.Element => <Story actions={actions} />;
+export const withActions = (): JSX.Element => (
+  <StoryTemplate actions={actions} />
+);
 
-export const withoutCheckboxes = (): JSX.Element => <Story checkable={false} />;
+export const withoutCheckboxes = (): JSX.Element => (
+  <StoryTemplate checkable={false} />
+);
 
 export const withShortLabelColumns = (): JSX.Element => (
-  <Story columns={columnsWithShortLabel} />
+  <StoryTemplate columns={columnsWithShortLabel} />
 );
 
 const editableColumns = [
@@ -210,12 +229,14 @@ const editableColumns = [
     getFormattedString: ({ name }): string => name,
     id: 'name',
     label: 'Name',
+    sortable: true,
     type: ColumnType.string
   },
   {
     getFormattedString: ({ description }): string => description,
     id: 'description',
     label: 'Description',
+    sortable: true,
     type: ColumnType.string
   },
   {
@@ -243,40 +264,157 @@ const ListingWithEditableColumns = (): JSX.Element => {
     setSelectedColumnIds(defaultColumnIds);
   };
 
+  const [sortedRows, setSortedRows] = useState(listing);
+  const [sortParams, setSortParams] = useState({
+    sortField: editableColumns[0].id,
+    sortOrder: 'desc'
+  });
+
+  const onSort = (params: {
+    sortField: string;
+    sortOrder: SortOrder;
+  }): void => {
+    const rows = [...sortedRows];
+    rows.sort((a, b) =>
+      params.sortOrder === 'desc'
+        ? a[params.sortField]?.localeCompare(b[params.sortField])
+        : b[params.sortField]?.localeCompare(a[params.sortField])
+    );
+    setSortedRows(rows);
+    setSortParams(params);
+  };
+
   return (
-    <Story
+    <StoryTemplate
       columnConfiguration={{
         selectedColumnIds,
         sortable: true
       }}
       columns={editableColumns}
+      rows={sortedRows}
+      sortField={sortParams.sortField}
+      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
+      onSort={onSort}
     />
   );
 };
 
-export const withEditableColumns = (): JSX.Element => (
+export const withEditableAndSortableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 
-const TemplateListing: ComponentStory<typeof Listing> = (args) => (
-  <Listing
-    {...args}
-    columns={editableColumns}
-    disableRowCheckCondition={(row): boolean => row.disableCheckbox}
-    disableRowCondition={(row): boolean => row.disableRow}
-    predefinedRowsSelection={predefinedRowsSelection}
-    rowColorConditions={rowColorConditions}
-    rows={listing}
-  />
-);
+export const PlaygroundListing: Story = {
+  args: {
+    checkable: true,
+    columns: editableColumns,
+    currentPage: 1,
+    disableRowCheckCondition: (row): boolean => row.disableCheckbox,
+    disableRowCondition: (row): boolean => row.disableRow,
+    limit: 10,
+    loading: false,
+    predefinedRowsSelection,
+    rowColorConditions,
+    rows: listing,
+    totalRows: 10
+  }
+};
+
+const listingWithSubItems = [...tenElements].map((_, index) => ({
+  active: false,
+  description: `Entity ${index}`,
+  disableCheckbox: false,
+  disableRow: false,
+  id: index,
+  name: `E${index}`,
+  selected: false,
+  subItems:
+    index % 2 === 0
+      ? [...tenElements].map((_, subIndex) => ({
+          active: false,
+          description: `Sub item ${subIndex + (index + 10) * 10} description`,
+          disableCheckbox: false,
+          disableRow: false,
+          id: subIndex + (index + 10) * 10,
+          name: `Sub Item ${subIndex + (index + 10) * 10}`,
+          selected: false
+        }))
+      : undefined
+}));
 
-export const PlaygroundListing = TemplateListing.bind({});
-PlaygroundListing.args = {
-  checkable: true,
-  currentPage: 1,
-  limit: 10,
-  loading: false,
-  totalRows: 10
+const columnsWithSubItems = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: ButtonColumn,
+    displaySubItemsCaret: true,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '350px'
+  }
+];
+
+const TemplateSubItems = (args): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.listing}>
+      <Listing {...args} />
+    </div>
+  );
+};
+
+export const ListingWithSubItems = {
+  args: {
+    checkable: true,
+    columns: columnsWithSubItems,
+    currentPage: 1,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    subItems: {
+      canCheckSubItems: false,
+      enable: true,
+      getRowProperty: () => 'subItems',
+      labelCollapse: 'Collapse',
+      labelExpand: 'Expand'
+    },
+    totalRows: 10
+  },
+  render: TemplateSubItems
+};
+
+export const ListingWithResponsive = {
+  args: {
+    checkable: true,
+    columns: [
+      ...defaultColumns,
+      {
+        Component: ComponentColumn,
+        id: '##',
+        label: 'Responsive',
+        type: ColumnType.component,
+        width: '140px'
+      }
+    ],
+    currentPage: 1,
+    isResponsive: true,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    totalRows: 10
+  },
+  render: TemplateSubItems
 };