@centreon/ui 24.11.14 → 24.11.21

package/src/Listing/Cell/index.tsx

@@ -1,21 +1,24 @@
-import * as React from 'react';
-
-import { isNil, omit } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
+import { useAtom } from 'jotai';
+import { append, equals, includes, isNil, omit, reject } from 'ramda';
 import { CSSObject } from 'tss-react';
+import { makeStyles } from 'tss-react/mui';
 
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
-  alpha,
   TableCell,
   TableCellBaseProps,
   TableCellProps,
-  Theme
+  Theme,
+  alpha
 } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
+import { IconButton } from '../..';
+import { subItemsPivotsAtom } from '../tableAtoms';
 import { getTextStyleByViewMode } from '../useStyleTable';
 
+import { ElementType } from 'react';
 import { Props as DataCellProps } from './DataCell';
 
 interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
@@ -50,7 +53,7 @@ const getBackgroundColor = ({
 
 interface StylesProps extends Props {
   isRowHighlighted?: boolean;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 interface GetRowHighlightStyleProps {
@@ -77,9 +80,20 @@ const useStyles = makeStyles<StylesProps>()(
       rowColorConditions,
       disableRowCondition,
       isRowHighlighted,
-      viewMode
+      listingVariant
     }
   ) => ({
+    caret: {
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.short
+      })
+    },
+    caretLess: {
+      transform: 'rotate3d(0,0,1,0deg)'
+    },
+    caretMore: {
+      transform: 'rotate3d(0,0,1,180deg)'
+    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -97,9 +111,9 @@ const useStyles = makeStyles<StylesProps>()(
       },
       height: '100%',
       overflow: 'hidden',
-      ...getTextStyleByViewMode({ theme, viewMode }),
+      ...getTextStyleByViewMode({ listingVariant, theme }),
       p: getRowHighlightStyle({ isRowHighlighted, theme }),
-      padding: 0,
+      padding: theme.spacing(0, 1),
       whiteSpace: 'nowrap'
     }
   })
@@ -111,21 +125,63 @@ interface Props
       'isRowHovered' | 'row' | 'rowColorConditions' | 'disableRowCondition'
     >,
     TableCellProps {
+  displaySubItemsCaret?: boolean;
   isRowHighlighted?: boolean;
-  viewMode?: ListingVariant;
+  labelCollapse?: string;
+  labelExpand?: string;
+  listingVariant?: ListingVariant;
+  subItemsRowProperty?: string;
 }
 
-const Cell = (props: Props): JSX.Element => {
+const isPivotExistInTheList = (
+  id
+): ((list: Array<number | string>) => boolean) => includes(id);
+
+const handleSubItems = ({
+  currentSubItemsPivots,
+  id
+}): Array<number | string> => {
+  if (isPivotExistInTheList(id)(currentSubItemsPivots)) {
+    return reject(equals(id), currentSubItemsPivots);
+  }
+
+  return append(id, currentSubItemsPivots);
+};
+
+const Cell = ({
+  displaySubItemsCaret,
+  subItemsRowProperty,
+  labelCollapse,
+  labelExpand,
+  ...props
+}: Props): JSX.Element => {
   const { classes, cx } = useStyles(props);
 
+  const [subItemsPivots, setSubItemsPivots] = useAtom(subItemsPivotsAtom);
+
   const { children } = props;
 
+  const rowId = props.row?.id;
+
+  const click = (e): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setSubItemsPivots((currentSubItemsPivots) =>
+      handleSubItems({ currentSubItemsPivots, id: rowId })
+    );
+  };
+
+  const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
+
+  const hasSubItems = subItemsRowProperty && props.row[subItemsRowProperty];
+
   return (
     <TableCell
       classes={{
         root: cx(classes.root)
       }}
-      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
+      component={'div' as unknown as ElementType<TableCellBaseProps>}
       {...omit(
         [
           'isRowHovered',
@@ -133,11 +189,28 @@ const Cell = (props: Props): JSX.Element => {
           'rowColorConditions',
           'disableRowCondition',
           'isRowHighlighted',
-          'viewMode'
+          'listingVariant'
         ],
         props
       )}
     >
+      {displaySubItemsCaret && hasSubItems && (
+        <IconButton
+          ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
+            props.row.id
+          }`}
+          size="small"
+          onClick={click}
+        >
+          <ExpandMoreIcon
+            className={cx(
+              classes.caret,
+              isSubItemsExpanded ? classes.caretMore : classes.caretLess
+            )}
+            fontSize="small"
+          />
+        </IconButton>
+      )}
       {children}
     </TableCell>
   );

package/src/Listing/Checkbox.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { Checkbox as MuiCheckbox, CheckboxProps } from '@mui/material';
+import { CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
 
 const useStyles = makeStyles()({
   container: {

package/src/Listing/EmptyResult/EmptyResult.tsx

@@ -0,0 +1,11 @@
+import { EmptyRow } from '../Row/EmptyRow';
+
+interface EmptyResultProps {
+  label: string | JSX.Element;
+}
+
+const EmptyResult = ({ label }: EmptyResultProps): JSX.Element => (
+  <EmptyRow>{label}</EmptyRow>
+);
+
+export { EmptyResult };

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -0,0 +1,71 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { getTextStyleByViewMode } from '../../useStyleTable';
+
+interface StylesProps {
+  isDragging?: boolean;
+  isInDragOverlay?: boolean;
+  listingVariant?: ListingVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()(
+  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
+    active: {
+      '&, &:hover, &:focus': {
+        color: theme.palette.common.white
+      },
+      '&.Mui-active': {
+        '& .MuiTableSortLabel-icon': {
+          color: theme.palette.common.white
+        },
+        color: theme.palette.common.white
+      }
+    },
+    content: {
+      alignItems: 'center',
+      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
+      color: theme.palette.common.white,
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'space-between'
+    },
+    dragHandle: {
+      '&, &.Mui-focus, &:focus': {
+        color: theme.palette.common.white
+      },
+      color: theme.palette.common.white,
+
+      cursor: isDragging ? 'grabbing' : 'grab',
+      opacity: 0,
+      padding: 0
+    },
+    simpleHeaderCellContent: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      marginRight: theme.spacing(2),
+      userSelect: 'none'
+    },
+    tableCell: {
+      backgroundColor: isInDragOverlay
+        ? 'transparent'
+        : theme.palette.background.listingHeader,
+      borderBottom: 'none',
+      height: 'inherit',
+      padding: theme.spacing(0, 1),
+      ...getTextStyleByViewMode({ listingVariant, theme }),
+      '&:hover, &:focus-within, &[data-isdragging=true]': {
+        '& .dragHandle': {
+          opacity: 1
+        }
+      },
+      '&[data-isindragoverlay=true]': {
+        display: 'block',
+        opacity: 0.7
+      }
+    }
+  })
+);
+
+export { useStyles, type StylesProps };

package/src/Listing/Header/{SortableCell/Content.tsx → Cell/ListingHeaderCell.tsx}

@@ -1,7 +1,4 @@
-import * as React from 'react';
-
 import { always, and, equals, ifElse, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import {
   TableCell,
@@ -10,61 +7,12 @@ import {
   Tooltip
 } from '@mui/material';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { Props as ListingProps } from '../..';
 import { Column } from '../../models';
-import HeaderLabel from '../Label';
-import { getTextStyleByViewMode } from '../../useStyleTable';
-
-import DraggableIcon from './DraggableIcon';
+import { DraggableIconButton } from '../_internals/DraggableIconButton';
+import HeaderLabel from '../_internals/Label';
 
-type StylesProps = Pick<Props, 'isDragging' | 'isInDragOverlay' | 'viewMode'>;
-
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
-    active: {
-      '&.Mui-active': {
-        '& .MuiTableSortLabel-icon': {
-          color: theme.palette.common.white
-        },
-        color: theme.palette.common.white
-      },
-      '&:hover': {
-        '& .MuiTableSortLabel-icon': {
-          opacity: 1
-        },
-        color: theme.palette.common.white
-      }
-    },
-    content: {
-      alignItems: 'center',
-      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
-      color: theme.palette.common.white,
-      display: 'flex',
-      minHeight: theme.spacing(3)
-    },
-    dragHandle: {
-      alignSelf: 'center',
-      cursor: isDragging ? 'grabbing' : 'grab',
-      display: 'flex',
-      outline: 'none'
-    },
-    simpleHeaderCellContent: {
-      alignItems: 'center',
-      display: 'inline-flex',
-      marginRight: theme.spacing(2)
-    },
-    tableCell: {
-      backgroundColor: isInDragOverlay
-        ? 'transparent'
-        : theme.palette.background.listingHeader,
-      borderBottom: 'none',
-      padding: 0,
-      ...getTextStyleByViewMode({ theme, viewMode })
-    }
-  })
-);
+import { StylesProps, useStyles } from './ListingHeaderCell.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -73,14 +21,11 @@ type Props = Pick<
   areColumnsEditable: boolean;
   className: string;
   column: Column;
-  isDragging?: boolean;
-  isInDragOverlay?: boolean;
   itemRef: React.RefObject<HTMLDivElement>;
   style;
-  viewMode?: ListingVariant;
-};
+} & StylesProps;
 
-const SortableHeaderCellContent = ({
+const ListingHeaderCell = ({
   column,
   columnConfiguration,
   sortField,
@@ -91,16 +36,14 @@ const SortableHeaderCellContent = ({
   style,
   isInDragOverlay,
   areColumnsEditable,
-  viewMode,
+  listingVariant,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     isDragging,
     isInDragOverlay,
-    viewMode
+    listingVariant
   });
-  const [cellHovered, setCellHovered] = React.useState(false);
-
   const columnLabel = column.shortLabel || column.label;
 
   const columnSortField = column.sortField || column.id;
@@ -119,14 +62,6 @@ const SortableHeaderCellContent = ({
     });
   };
 
-  const mouseOver = (): void => {
-    setCellHovered(true);
-  };
-
-  const mouseOut = (): void => {
-    setCellHovered(false);
-  };
-
   const headerContent = (
     <Tooltip placement="top" title={getTooltipLabel(column.shortLabel)}>
       <HeaderLabel>{columnLabel}</HeaderLabel>
@@ -137,22 +72,12 @@ const SortableHeaderCellContent = ({
     <TableCell
       className={classes.tableCell}
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
+      data-isdragging={isDragging}
+      data-isindragoverlay={isInDragOverlay}
       ref={itemRef}
       style={style}
-      onMouseOut={mouseOut}
-      onMouseOver={mouseOver}
     >
       <div className={classes.content}>
-        {columnConfiguration?.sortable && areColumnsEditable && (
-          <DraggableIcon
-            visible={cellHovered}
-            {...props}
-            isInteractive
-            className={cx({ [classes.dragHandle]: cellHovered })}
-            columnLabel={columnLabel}
-          />
-        )}
-
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
@@ -166,9 +91,17 @@ const SortableHeaderCellContent = ({
         ) : (
           <div className={classes.simpleHeaderCellContent}>{headerContent}</div>
         )}
+
+        {columnConfiguration?.sortable && areColumnsEditable && (
+          <DraggableIconButton
+            {...props}
+            className={cx(classes.dragHandle, 'dragHandle')}
+            columnLabel={columnLabel}
+          />
+        )}
       </div>
     </TableCell>
   );
 };
 
-export default SortableHeaderCellContent;
+export default ListingHeaderCell;

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  checkbox: {
+    '&.Mui-checked': {
+      color: theme.palette.common.white
+    },
+    '&.MuiCheckbox-indeterminate': {
+      color: theme.palette.common.white
+    },
+    color: theme.palette.common.white
+  },
+  checkboxHeaderCell: {
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.listingHeader,
+    borderBottom: 'none',
+    display: 'flex',
+    justifyContent: 'start',
+    lineHeight: 'inherit'
+  },
+  predefinedRowsMenu: {
+    color: theme.palette.common.white
+  }
+}));
+
+export { useStyles };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -0,0 +1,68 @@
+import { equals, isEmpty, not } from 'ramda';
+
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { TableCell, TableCellBaseProps } from '@mui/material';
+
+import PopoverMenu from '../../../PopoverMenu';
+import Checkbox from '../../Checkbox';
+import { PredefinedRowSelection } from '../../models';
+import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
+import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
+
+import { useStyles } from './SelectActionListingHeaderCell.styles';
+
+export interface SelectActionListingHeaderCellProps {
+  onSelectAllClick: (event) => void;
+  onSelectRowsWithCondition: (condition) => void;
+  predefinedRowsSelection: Array<PredefinedRowSelection>;
+  rowCount: number;
+  selectedRowCount: number;
+}
+
+const SelectActionListingHeaderCell = ({
+  rowCount,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
+}: SelectActionListingHeaderCellProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  const hasRows = not(equals(rowCount, 0));
+
+  return (
+    <TableCell
+      className={classes.checkboxHeaderCell}
+      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
+    >
+      <Checkbox
+        checked={hasRows && selectedRowCount === rowCount}
+        className={classes.checkbox}
+        indeterminate={
+          hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
+        }
+        inputProps={{ 'aria-label': 'Select all' }}
+        onChange={onSelectAllClick}
+      />
+      {not(isEmpty(predefinedRowsSelection)) ? (
+        <PopoverMenu
+          className={classes.predefinedRowsMenu}
+          icon={<ArrowDropDownIcon />}
+          title={labelPredefinedRowsSelectionMenu}
+        >
+          {({ close }): JSX.Element => (
+            <PredefinedSelectionList
+              close={close}
+              predefinedRowsSelection={predefinedRowsSelection}
+              onSelectRowsWithCondition={onSelectRowsWithCondition}
+            />
+          )}
+        </PopoverMenu>
+      ) : (
+        <div className={classes.predefinedRowsMenu} />
+      )}
+    </TableCell>
+  );
+};
+
+export { SelectActionListingHeaderCell };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  headerLabelDragging: {
+    cursor: 'grabbing'
+  },
+  root: {
+    height: '100%',
+    padding: theme.spacing(0, 1)
+  },
+  row: {
+    display: 'contents'
+  }
+}));
+
+export { useStyles };

package/src/Listing/Header/ListingHeader.tsx

@@ -0,0 +1,165 @@
+import { DraggableSyntheticListeners, closestCenter } from '@dnd-kit/core';
+import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { equals, find, map, pick, propEq } from 'ramda';
+
+import { TableHead, TableRow } from '@mui/material';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { Props as ListingProps, getVisibleColumns } from '..';
+import SortableItems from '../../SortableItems';
+import { Column } from '../models';
+
+import { memo, useCallback } from 'react';
+import ListingHeaderCell from './Cell/ListingHeaderCell';
+import {
+  SelectActionListingHeaderCell,
+  SelectActionListingHeaderCellProps
+} from './Cell/SelectActionListingHeaderCell';
+import { useStyles } from './ListingHeader.styles';
+
+type Props = Pick<
+  ListingProps<unknown>,
+  | 'sortField'
+  | 'sortOrder'
+  | 'onSort'
+  | 'columns'
+  | 'checkable'
+  | 'onSelectColumns'
+  | 'columnConfiguration'
+  | 'totalRows'
+> & {
+  areColumnsEditable: boolean;
+  listingVariant?: ListingVariant;
+  memoProps: Array<unknown>;
+  rowCount: number;
+} & SelectActionListingHeaderCellProps;
+
+interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
+  attributes;
+  id: string;
+  isDragging: boolean;
+  isInDragOverlay?: boolean;
+  itemRef: React.RefObject<HTMLDivElement>;
+  listeners: DraggableSyntheticListeners;
+  style;
+}
+
+const ListingHeader = ({
+  sortOrder,
+  sortField,
+  rowCount,
+  columns,
+  columnConfiguration,
+  onSort,
+  onSelectColumns,
+  checkable,
+  memoProps,
+  areColumnsEditable,
+  listingVariant,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles();
+
+  const visibleColumns = getVisibleColumns({
+    columnConfiguration,
+    columns
+  });
+
+  const getColumnById = (id: string): Column => {
+    return find(propEq(id, 'id'), columns) as Column;
+  };
+
+  const Content = useCallback(
+    ({
+      isInDragOverlay,
+      listeners,
+      attributes,
+      style,
+      isDragging,
+      itemRef,
+      id
+    }: ContentProps): JSX.Element => {
+      return (
+        <ListingHeaderCell
+          areColumnsEditable={areColumnsEditable}
+          column={getColumnById(id)}
+          columnConfiguration={columnConfiguration}
+          isDragging={isDragging}
+          isInDragOverlay={isInDragOverlay}
+          itemRef={itemRef}
+          listingVariant={listingVariant}
+          sortField={sortField}
+          sortOrder={sortOrder}
+          style={style}
+          onSort={onSort}
+          {...listeners}
+          {...attributes}
+        />
+      );
+    },
+    [columnConfiguration, columns, sortField, sortOrder]
+  );
+
+  return (
+    <TableHead className={cx(classes.row, 'listingHeader')} component="div">
+      <TableRow className={classes.row} component="div">
+        {checkable && (
+          <SelectActionListingHeaderCell
+            predefinedRowsSelection={predefinedRowsSelection}
+            rowCount={rowCount}
+            selectedRowCount={selectedRowCount}
+            onSelectAllClick={onSelectAllClick}
+            onSelectRowsWithCondition={onSelectRowsWithCondition}
+          />
+        )}
+        <SortableItems
+          updateSortableItemsOnItemsChange
+          Content={Content}
+          additionalProps={[sortField, sortOrder]}
+          collisionDetection={closestCenter}
+          itemProps={['id']}
+          items={visibleColumns}
+          memoProps={memoProps}
+          sortingStrategy={horizontalListSortingStrategy}
+          onDragEnd={({ items }): void => {
+            onSelectColumns?.(items);
+          }}
+        />
+      </TableRow>
+    </TableHead>
+  );
+};
+
+const columnMemoProps = [
+  'id',
+  'label',
+  'rowMemoProps',
+  'sortField',
+  'sortOrder',
+  'sortable',
+  'type'
+];
+
+const MemoizedListingHeader = memo<Props>(
+  ListingHeader,
+  (prevProps, nextProps) =>
+    equals(prevProps.sortOrder, nextProps.sortOrder) &&
+    equals(prevProps.sortField, nextProps.sortField) &&
+    equals(prevProps.selectedRowCount, nextProps.selectedRowCount) &&
+    equals(prevProps.rowCount, nextProps.rowCount) &&
+    equals(
+      map(pick(columnMemoProps), prevProps.columns),
+      map(pick(columnMemoProps), nextProps.columns)
+    ) &&
+    equals(prevProps.checkable, nextProps.checkable) &&
+    equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
+    equals(prevProps.memoProps, nextProps.memoProps) &&
+    equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
+    equals(prevProps.listingVariant, nextProps.listingVariant)
+);
+
+export { MemoizedListingHeader as ListingHeader };