@judo/components 0.1.1-alpha.3

package/src/dialog/RangeDialog.tsx

@@ -0,0 +1,324 @@
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
+import {
+  GridSortModel,
+  GridRowModel,
+  DataGrid,
+  GridRowParams,
+  GridColumns,
+  GridSortItem,
+  GridSelectionModel,
+  GridToolbarContainer,
+  GridRowId,
+} from '@mui/x-data-grid';
+import { useSnackbar } from 'notistack';
+import { useEffect, useRef, useState } from 'react';
+import type { JudoStored, QueryCustomizer } from '@judo/data-api-common';
+import type { Filter, FilterOption } from '@judo/components-api';
+import { errorHandling } from '@judo/utilities';
+import { CustomTablePagination } from '../CustomTablePagination';
+import { useFilterDialog } from './DialogContext';
+
+interface RangeDialogProps<T extends JudoStored<T>, U extends QueryCustomizer<T>> {
+  resolve: (value: any) => void;
+  open: boolean;
+  handleClose: () => void;
+  single?: boolean;
+  columns: GridColumns<T>;
+  defaultSortField: GridSortItem;
+  rangeCall: (queryCustomizer: U) => Promise<Array<T>>;
+  alreadySelectedItems: GridSelectionModel | GridRowId;
+  initalQueryCustomizer: U;
+  filterOptions: FilterOption[];
+}
+
+export const RangeDialog = <T extends JudoStored<T>, U extends QueryCustomizer<T>>({
+  resolve,
+  open,
+  handleClose,
+  single = false,
+  columns,
+  defaultSortField,
+  rangeCall,
+  alreadySelectedItems,
+  initalQueryCustomizer,
+  filterOptions,
+}: RangeDialogProps<T, U>) => {
+  const { openFilterDialog } = useFilterDialog();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const descriptionElementRef = useRef<HTMLElement>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [rowCount, setRowCount] = useState<number>(0);
+  const [sortModel, setSortModel] = useState<GridSortModel>([defaultSortField]);
+  const [lastItem, setLastItem] = useState<T>();
+  const [firstItem, setFirstItem] = useState<T>();
+  const [isNextButtonEnabled, setIsNextButtonEnabled] = useState<boolean>(true);
+  const [page, setPage] = useState<number>(0);
+  const [data, setData] = useState<GridRowModel<T>[]>([]);
+  const [selectionModel, setSelectionModel] = useState<GridSelectionModel | GridRowId | undefined>(
+    alreadySelectedItems ?? (single ? undefined : []),
+  );
+  const [selectedItems, setSelectedItems] = useState<T[] | T | undefined>([]);
+  const [filters, setFilters] = useState<Filter[]>([]);
+  const [queryCustomizer, setQueryCustomizer] = useState<U>({
+    ...initalQueryCustomizer,
+    _seek: {
+      limit: 6,
+    },
+  });
+
+  const handlePageChange = async (isNext: boolean) => {
+    setQueryCustomizer((prevQueryCustomizer) => {
+      return {
+        ...prevQueryCustomizer,
+        _seek: {
+          limit: isNext ? 6 : 5,
+          reverse: !isNext,
+          lastItem: isNext ? lastItem : firstItem,
+        },
+      };
+    });
+
+    setIsNextButtonEnabled(!isNext);
+  };
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      const res = await rangeCall(queryCustomizer);
+
+      if (res.length > 5) {
+        setIsNextButtonEnabled(true);
+        res.pop();
+      } else if (queryCustomizer._seek?.limit === 6) {
+        setIsNextButtonEnabled(false);
+      }
+
+      setData(res);
+      setFirstItem(res[0]);
+      setLastItem(res[res.length - 1]);
+      setRowCount(res.length || 0);
+    } catch (error) {
+      errorHandling(error, enqueueSnackbar);
+    }
+    setIsLoading(false);
+  };
+
+  const handleFiltersChange = (newFilters: Filter[]) => {
+    setPage(0);
+    setFilters(newFilters);
+
+    // @ts-ignore
+    setQueryCustomizer((prevQueryCustomizer) => {
+      const tempQueryCustomizer = { ...prevQueryCustomizer };
+
+      filterOptions.forEach(
+        (filter) =>
+          // @ts-ignore
+          (tempQueryCustomizer[filter.attributeName] = mapFiltersToQueryCustomizerProperty(
+            newFilters,
+            filter.attributeName,
+          )),
+      );
+
+      return {
+        ...prevQueryCustomizer,
+        _seek: {
+          lastItem: undefined,
+          limit: 6,
+          reverse: undefined,
+        },
+        ...tempQueryCustomizer,
+      };
+    });
+  };
+
+  const handleSortModelChange = (newModel: GridSortModel) => {
+    setPage(0);
+    setSortModel(newModel);
+
+    const { field, sort } = newModel[0];
+
+    setQueryCustomizer((prevQueryCustomizer) => {
+      return {
+        ...prevQueryCustomizer,
+        _orderBy: [{ attribute: field, descending: sort === 'desc' }],
+      };
+    });
+  };
+
+  // useEffect(() => {
+  //   setPage(0);
+  //   const { field, sort } = sortModel[0];
+
+  //   setQueryCustomizer((prevQueryCustomizer) => {
+  //     const tempQueryCustomizer = { ...prevQueryCustomizer };
+
+  //     filterOptions.forEach(
+  //       (filter) =>
+  //         // @ts-ignore
+  //         (tempQueryCustomizer[filter.attributeName] = mapFiltersToQueryCustomizerProperty(
+  //           filters,
+  //           filter.attributeName,
+  //         )),
+  //     );
+
+  //     return {
+  //       ...prevQueryCustomizer,
+  //       _seek: {
+  //         lastItem: undefined,
+  //         limit: 6,
+  //         reverse: undefined,
+  //       },
+  //       _orderBy: [{ attribute: field, descending: sort === 'desc' }],
+  //       ...tempQueryCustomizer,
+  //     };
+  //   });
+  // }, [sortModel, filters]);
+
+  useEffect(() => {
+    fetchData();
+  }, [queryCustomizer]);
+
+  useEffect(() => {
+    if (open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [open]);
+
+  const cancel = () => {
+    handleClose();
+    resolve(undefined);
+  };
+
+  const ok = () => {
+    handleClose();
+    resolve(selectedItems);
+  };
+
+  const handleOnSelection = (newSelectionModel: GridSelectionModel) => {
+    if (!Array.isArray(selectionModel)) return;
+
+    // added new items
+    if (newSelectionModel.length > selectionModel.length) {
+      const diff = newSelectionModel.length - selectionModel.length;
+      const newItemsId = [...newSelectionModel].slice(diff * -1);
+      const newItems = data.filter((value) => newItemsId.indexOf(value.__identifier as GridRowId) !== -1);
+      setSelectedItems((prevSelectedItems) => {
+        if (!Array.isArray(prevSelectedItems)) return;
+
+        return [...prevSelectedItems, ...newItems];
+      });
+    }
+
+    // removed items
+    if (newSelectionModel.length < selectionModel.length) {
+      const removedItemsId = selectionModel.filter((value) => newSelectionModel.indexOf(value) === -1);
+      setSelectedItems((prevSelectedItems) => {
+        if (!Array.isArray(prevSelectedItems)) return;
+
+        return [...prevSelectedItems.filter((value) => removedItemsId.indexOf(value.__identifier as GridRowId) === -1)];
+      });
+    }
+
+    setSelectionModel(newSelectionModel);
+  };
+
+  const handleSingleOnSelection = (newSelectionModel: GridSelectionModel) => {
+    if (Array.isArray(selectionModel)) return;
+
+    if (newSelectionModel.length === 0) {
+      setSelectionModel('');
+      setSelectedItems(undefined);
+      return;
+    }
+
+    const lastId = newSelectionModel[newSelectionModel.length - 1];
+
+    setSelectionModel(lastId);
+    setSelectedItems(data.find((value) => value.__identifier === lastId));
+  };
+
+  const handleIsRowSelectable = (params: GridRowParams<T>) => {
+    if (alreadySelectedItems) {
+      if (!Array.isArray(alreadySelectedItems)) throw Error('Range dialog gets wrong alreadySelectedItems.');
+
+      return !alreadySelectedItems.includes(params.id);
+    }
+
+    return true;
+  };
+
+  return (
+    <Dialog open={open} onClose={cancel} scroll="paper" fullWidth={true} maxWidth={'sm'}>
+      <DialogTitle id="scroll-dialog-title">Select</DialogTitle>
+      <DialogContent dividers={true}>
+        <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
+          <DataGrid
+            sx={
+              single
+                ? {
+                    '.MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer': {
+                      display: 'none',
+                    },
+                  }
+                : undefined
+            }
+            autoHeight
+            getRowId={(row: T) => row.__identifier as GridRowId}
+            loading={isLoading}
+            paginationMode="server"
+            rows={data}
+            rowCount={rowCount}
+            sortingOrder={['desc', 'asc']}
+            sortingMode="server"
+            sortModel={sortModel}
+            onSortModelChange={handleSortModelChange}
+            checkboxSelection
+            onSelectionModelChange={!single ? handleOnSelection : handleSingleOnSelection}
+            isRowSelectable={!single ? handleIsRowSelectable : undefined}
+            selectionModel={selectionModel}
+            hideFooterSelectedRowCount={single}
+            columns={columns}
+            keepNonExistentRowsSelected
+            components={{
+              Toolbar: () => (
+                <GridToolbarContainer>
+                  <Button
+                    variant="outlined"
+                    onClick={async () => {
+                      const newFilters = await openFilterDialog(filterOptions, filters);
+
+                      if (newFilters) {
+                        handleFiltersChange(newFilters);
+                      }
+                    }}
+                    disabled={isLoading}
+                  >
+                    Set filters {filters.length !== 0 ? '(' + filters.length + ')' : ''}
+                  </Button>
+                </GridToolbarContainer>
+              ),
+              Pagination: () => (
+                <CustomTablePagination
+                  pageChange={handlePageChange}
+                  isNextButtonEnabled={isNextButtonEnabled}
+                  page={page}
+                  setPage={setPage}
+                  rowPerPage={5}
+                />
+              ),
+            }}
+          />
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel}>Cancel</Button>
+        <Button onClick={ok}>Ok</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

package/src/dialog/index.tsx

@@ -0,0 +1,5 @@
+export * from './ConfirmationDialog';
+export * from './DialogContext';
+export * from './FilterDialog';
+export * from './PageDialog';
+export * from './RangeDialog';

package/src/index.tsx

@@ -0,0 +1,9 @@
+export * from './dialog';
+export * from './table';
+export * from './AggregationInput';
+export * from './CustomBreadcrumb';
+export * from './CustomLink';
+export * from './CustomTablePagination';
+export * from './DropdownButton';
+export * from './PageHeader';
+export * from './TrinaryLogicCombobox';

package/src/table/index.tsx

@@ -0,0 +1 @@
+export * from './table-row-actions';

package/src/table/table-row-actions.tsx

@@ -0,0 +1,86 @@
+import type { ColumnActionsProvider, ColumnsActionsOptions, TableRowAction } from '@judo/utilities';
+import { exists } from '@judo/utilities';
+import { MoreHoriz } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
+import { DropdownButton } from '../DropdownButton';
+
+export const columnsActionCalculator: ColumnActionsProvider<any> = (
+  actions: TableRowAction<any>[],
+  options?: ColumnsActionsOptions,
+): GridColDef[] => {
+  if (!exists(actions) || actions.length === 0) {
+    return [];
+  }
+
+  let shownActionsNumber = 1;
+  if (options?.shownActions) {
+    shownActionsNumber = actions.length < options.shownActions ? actions.length : options.shownActions;
+  }
+
+  if (shownActionsNumber < 0) {
+    return standaloneActions(actions, options);
+  } else if (shownActionsNumber === 0) {
+    return [];
+  } else if (shownActionsNumber === 1) {
+    return dropdownActions(actions, options);
+  } else {
+    const sliceNumber = actions.length === shownActionsNumber ? shownActionsNumber : shownActionsNumber - 1;
+    const standaloneRowActions = actions.slice(0, sliceNumber);
+    const dropdownRowActions = actions.slice(sliceNumber);
+
+    return [...standaloneActions(standaloneRowActions, options), ...dropdownActions(dropdownRowActions, options)];
+  }
+};
+
+const standaloneActions: ColumnActionsProvider<unknown> = (
+  actions: TableRowAction<unknown>[],
+  options?: ColumnsActionsOptions,
+): GridColDef[] => {
+  return actions.map((action, index) => {
+    return {
+      field: action.label + index,
+      headerName: '',
+      align: 'center',
+      type: 'actions',
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <Button variant="text" onClick={() => action.action(params.row)}>
+            {action.icon}
+            {(options?.showLabel ?? true) && action.label}
+          </Button>
+        );
+      },
+    };
+  });
+};
+
+const dropdownActions: ColumnActionsProvider<unknown> = (actions: TableRowAction<unknown>[]): GridColDef[] => {
+  if (actions.length === 0) return [];
+
+  return [
+    {
+      field: 'actions',
+      headerName: '',
+      align: 'center',
+      type: 'actions',
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <DropdownButton
+            variant="text"
+            showDropdownIcon={false}
+            menuItems={actions.map((action) => {
+              return {
+                label: action.label,
+                startIcon: action.icon,
+                onClick: () => action.action(params.row),
+              };
+            })}
+          >
+            <MoreHoriz />
+          </DropdownButton>
+        );
+      },
+    },
+  ];
+};