Merge pull request #799 from amitamrutiya/aimt/design-table

Create cloud catalog design table into sistent component

Author: amitamrutiya

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import _ from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import { PublishIcon } from '../../icons';
+import { CHARCOAL, useTheme } from '../../theme';
+import { Pattern } from '../CustomCatalog/CustomCard';
+import { useWindowDimensions } from '../Helpers/Dimension';
+import PromptComponent from '../Prompt';
+import { PromptRef } from '../Prompt/promt-component';
+import ResponsiveDataTable from '../ResponsiveDataTable';
+import UnpublishTooltipIcon from './UnpublishTooltipIcon';
+
+interface CatalogDesignsTableProps {
+  patterns: Pattern[];
+  filter: any;
+  columns: Array<any>;
+  totalCount: number;
+  sortOrder: string;
+  setSortOrder: (order: string) => void;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  page: number;
+  setPage: (page: number) => void;
+  columnVisibility: Record<string, boolean>;
+  colViews: Record<string, boolean> | undefined;
+  handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
+  handleBulkpatternsDataUnpublishModal: (
+    selected: any,
+    patterns: Pattern[],
+    modalRef: React.RefObject<PromptRef>
+  ) => void;
+}
+
+export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
+  patterns,
+  filter,
+  columns = [],
+  totalCount = 0,
+  sortOrder = '',
+  setSortOrder,
+  pageSize = 10,
+  setPageSize,
+  page = 0,
+  setPage,
+  columnVisibility = {},
+  colViews = {},
+  handleBulkDeleteModal,
+  handleBulkpatternsDataUnpublishModal
+}) => {
+  const [tableCols, updateCols] = useState<Array<any>>([]);
+  const { width } = useWindowDimensions();
+  const smallScreen = width <= 360;
+  const theme = useTheme();
+  const modalRef = useRef<PromptRef>(null);
+
+  useEffect(() => {
+    if (Array.isArray(columns) && columns.length > 0) {
+      updateCols(columns);
+    }
+  }, [columns]);
+
+  const options: any = {
+    selectableRows: _.isNil(filter) ? 'none' : 'multiple',
+    serverSide: true,
+    filterType: 'multiselect',
+    responsive: smallScreen ? 'vertical' : 'standard',
+    count: totalCount,
+    rowsPerPage: pageSize,
+    page,
+    elevation: 0,
+    onTableChange: (action: string, tableState: any) => {
+      const sortInfo = tableState.announceText ? tableState.announceText.split(' : ') : [];
+      let order = '';
+      if (tableState.activeColumn) {
+        order = `${columns[tableState.activeColumn].name} desc`;
+      }
+      switch (action) {
+        case 'changePage':
+          setPage(tableState.page);
+          break;
+        case 'changeRowsPerPage':
+          setPageSize(tableState.rowsPerPage);
+          break;
+        case 'sort':
+          if (
+            sortInfo.length === 2 &&
+            tableState.activeColumn !== undefined &&
+            Array.isArray(columns)
+          ) {
+            if (sortInfo[1] === 'ascending') {
+              order = `${columns[tableState.activeColumn].name} asc`;
+            } else {
+              order = `${columns[tableState.activeColumn].name} desc`;
+            }
+          }
+          if (order !== sortOrder) {
+            setSortOrder(order);
+          }
+          break;
+      }
+    }
+  };
+
+  if (_.isNil(filter)) {
+    options.customToolbarSelect = (selected: any) => (
+      <UnpublishTooltipIcon
+        title="Unpublish"
+        onClick={() => handleBulkpatternsDataUnpublishModal(selected, patterns, modalRef)}
+        iconType="publish"
+        id={'unpublish-button'}
+      >
+        <PublishIcon width={28.8} height={28.8} fill={CHARCOAL} />
+      </UnpublishTooltipIcon>
+    );
+  } else {
+    options.onRowsDelete = (rowsDeleted: any) => {
+      const selectedPatterns = rowsDeleted.data.map(({ dataIndex }: any) => patterns[dataIndex]);
+      handleBulkDeleteModal(selectedPatterns, modalRef);
+      return false;
+    };
+  }
+
+  if (!Array.isArray(tableCols) || tableCols.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <PromptComponent ref={modalRef} />
+      <ResponsiveDataTable
+        columns={columns}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        data={patterns || []}
+        options={options}
+        colViews={colViews}
+        tableCols={tableCols}
+        updateCols={updateCols}
+        columnVisibility={columnVisibility}
+        backgroundColor={
+          theme.palette.mode === 'light'
+            ? theme.palette.background.default
+            : theme.palette.background.secondary
+        }
+      />
+    </>
+  );
+};
+
+export default CatalogDesignsTable;

src/custom/CatalogDesignTable/TableVisibilityControl.tsx

@@ -0,0 +1,41 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl';
+import { CustomColumn } from '../CustomColumnVisibilityControl/CustomColumnVisibilityControl';
+import { ViewSwitch } from './ViewSwitch';
+
+type TypeView = 'grid' | 'table';
+
+interface TableVisibilityControlProps {
+  viewType: TypeView;
+  setViewType: (view: TypeView) => void;
+  filteredColumns: CustomColumn[];
+  columnVisibility: Record<string, boolean>;
+  setColumnVisibility: Dispatch<SetStateAction<Record<string, boolean>>>;
+  viewSwitchDisabled?: boolean;
+}
+
+export const TableVisibilityControl: React.FC<TableVisibilityControlProps> = ({
+  viewType,
+  setViewType,
+  filteredColumns,
+  columnVisibility,
+  setColumnVisibility,
+  viewSwitchDisabled = false
+}) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      {viewType !== 'grid' && (
+        <CustomColumnVisibilityControl
+          columns={filteredColumns}
+          customToolsProps={{
+            columnVisibility,
+            setColumnVisibility
+          }}
+          id={'catalog-table'}
+          style={{ zIndex: 9999 }}
+        />
+      )}
+      <ViewSwitch view={viewType} changeView={setViewType} disabled={viewSwitchDisabled} />
+    </div>
+  );
+};

src/custom/CatalogDesignTable/UnpublishTooltipIcon.tsx

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { IconButton } from '../../base';
+import { useTheme } from '../../theme';
+import { HOVER_DELETE } from '../../theme/colors/colors';
+import { CustomTooltip } from '../CustomTooltip';
+import { IconWrapper } from '../ResponsiveDataTable';
+
+interface UnpublishTooltipIconProps {
+  children: ReactNode;
+  onClick: () => void;
+  title: string;
+  iconType: 'delete' | 'publish';
+  id: string;
+  style?: object;
+  placement?: 'bottom' | 'top' | 'left' | 'right';
+  disabled?: boolean;
+}
+
+function UnpublishTooltipIcon({
+  children,
+  onClick,
+  title,
+  iconType,
+  id,
+  style,
+  placement,
+  disabled = false
+}: UnpublishTooltipIconProps) {
+  const theme = useTheme();
+  return (
+    <CustomTooltip key={id} title={title} placement={placement}>
+      <IconWrapper disabled={disabled}>
+        <IconButton
+          disabled={disabled}
+          onClick={onClick}
+          sx={{
+            '&:hover': {
+              '& svg': {
+                fill: iconType === 'delete' ? HOVER_DELETE : theme.palette.primary.brand?.default
+              }
+            },
+            ...style
+          }}
+          disableRipple
+        >
+          {children}
+        </IconButton>
+      </IconWrapper>
+    </CustomTooltip>
+  );
+}
+
+export default UnpublishTooltipIcon;

src/custom/CatalogDesignTable/ViewSwitch.tsx

@@ -0,0 +1,66 @@
+/**
+ * Renders a switch component for toggling between grid and table view.
+ *
+ * @typedef {("grid" | "table")} TypeView
+ * @typedef {object} Props
+ * @prop {TypeView} props.view - The current view type ("grid" or "table").
+ * @prop {Function} props.changeView - The function to change the view type.
+ */
+
+import { IconButton } from '@mui/material';
+import { GridViewIcon, TableViewIcon } from '../../icons';
+import { useTheme } from '../../theme';
+import { CustomTooltip } from '../CustomTooltip';
+
+type TypeView = 'grid' | 'table';
+
+interface ViewSwitchProps {
+  view: TypeView;
+  changeView: (view: TypeView) => void;
+  height?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+}
+
+export const ViewSwitch: React.FC<ViewSwitchProps> = ({
+  view,
+  changeView,
+  height = '3rem',
+  style = {},
+  disabled = false
+}) => {
+  const handleClick = () => {
+    changeView(view === 'grid' ? 'table' : 'grid');
+  };
+
+  const Icon = view === 'grid' ? TableViewIcon : GridViewIcon;
+  const label = view === 'grid' ? 'Table View' : 'Grid View';
+  const theme = useTheme();
+
+  return (
+    <CustomTooltip title={label} arrow>
+      <span>
+        <IconButton
+          disabled={disabled}
+          onClick={handleClick}
+          aria-label="Switch View"
+          sx={{
+            height: { height },
+            borderRadius: '50%',
+            padding: '0.625rem',
+            '&:hover': {
+              '& svg': {
+                fill: theme.palette.primary.brand?.default
+              },
+              borderRadius: '4px'
+            },
+            ...style
+          }}
+          disableRipple
+        >
+          <Icon fill={theme.palette.icon.default} opacity={disabled ? 0.5 : 1} />
+        </IconButton>
+      </span>
+    </CustomTooltip>
+  );
+};