@judo/components 0.1.1-alpha.0

package/src/dialog/DialogContext.tsx

@@ -0,0 +1,206 @@
+import { createContext, useContext, useState } from 'react';
+import type { ReactNode } from 'react';
+import { ConfirmationDialog } from './ConfirmationDialog';
+import { FilterDialog } from './FilterDialog';
+import { PageDialog } from './PageDialog';
+import { RangeDialog } from './RangeDialog';
+import type {
+  ConfirmDialogProviderContext,
+  DialogProviderProps,
+  FilterDialogProviderContext,
+  OpenRangeDialogProps,
+  PageDialogProviderContext,
+  RangeDialogProviderContext,
+} from '@judo/components-api';
+import type { Filter, FilterOption } from '@judo/components-api';
+import type { JudoStored, QueryCustomizer } from '@judo/data-api-common';
+
+// @ts-ignore
+const PageDialogContextState = createContext<PageDialogProviderContext>();
+
+// @ts-ignore
+const ConfirmDialogContextState = createContext<ConfirmDialogProviderContext>();
+
+// @ts-ignore
+const RangeDialogContextState = createContext<RangeDialogProviderContext>();
+
+// @ts-ignore
+const FilterDialogContextState = createContext<FilterDialogProviderContext>();
+
+const usePageDialog = () => {
+  const context = useContext(PageDialogContextState);
+
+  if (context === undefined) {
+    throw new Error('useConfirmDialog was used outside of its Provider');
+  }
+
+  return context;
+};
+
+const useConfirmDialog = () => {
+  const context = useContext(ConfirmDialogContextState);
+
+  if (context === undefined) {
+    throw new Error('useConfirmDialog was used outside of its Provider');
+  }
+
+  return context;
+};
+
+const useRangeDialog = () => {
+  const context = useContext(RangeDialogContextState);
+
+  if (context === undefined) {
+    throw new Error('useRangeDialog was used outside of its Provider');
+  }
+
+  return context;
+};
+
+const useFilterDialog = () => {
+  const context = useContext(FilterDialogContextState);
+
+  if (context === undefined) {
+    throw new Error('useFilterDialog was used outside of its Provider');
+  }
+
+  return context;
+};
+
+const DialogProvider = ({ children }: DialogProviderProps) => {
+  // Page Dialog
+  const [isOpenPageDialog, setIsOpenPageDialog] = useState(false);
+  const [pageDialog, setPageDialog] = useState<ReactNode>();
+
+  const handleClosePageDialog = () => {
+    setIsOpenPageDialog(false);
+  };
+
+  const handleOpenPageDialog = async (page: ReactNode) => {
+    setIsOpenPageDialog(true);
+    return new Promise<void>((resolve) => {
+      setPageDialog(<PageDialog page={page} handleClose={handleClosePageDialog} open={true} resolve={resolve} />);
+    });
+  };
+
+  const pageDialogContext: PageDialogProviderContext = {
+    openPageDialog: handleOpenPageDialog,
+  };
+
+  // Range Dialog
+  const [isOpenRangeDialog, setIsOpenRangeDialog] = useState(false);
+  const [rangeDialog, setRangeDialog] = useState<ReactNode>();
+
+  const handleCloseRangeDialog = () => {
+    setIsOpenRangeDialog(false);
+  };
+
+  const handleOpenRangeDialog = async <T extends JudoStored<T>, U extends QueryCustomizer<T>>({
+    columns,
+    defaultSortField,
+    rangeCall,
+    single = false,
+    alreadySelectedItems,
+    filterOptions,
+    initialQueryCustomizer,
+  }: OpenRangeDialogProps<T, U>) => {
+    setIsOpenRangeDialog(true);
+
+    return new Promise<T[] | T>((resolve) => {
+      setRangeDialog(
+        <RangeDialog<T, U>
+          handleClose={handleCloseRangeDialog}
+          open={true}
+          resolve={resolve}
+          columns={columns}
+          defaultSortField={defaultSortField}
+          rangeCall={rangeCall}
+          single={single}
+          alreadySelectedItems={alreadySelectedItems}
+          filterOptions={filterOptions}
+          initalQueryCustomizer={initialQueryCustomizer}
+        />,
+      );
+    });
+  };
+
+  const customDialogContext: RangeDialogProviderContext = {
+    openRangeDialog: handleOpenRangeDialog,
+  };
+
+  // Confirmation Dialog
+  const [isOpenConfirmDialog, setIsOpenConfirmDialog] = useState(false);
+  const [confirmDialog, setConfirmDialog] = useState<ReactNode>();
+
+  const handleCloseConfirmDialog = () => {
+    setIsOpenConfirmDialog(false);
+    return false;
+  };
+
+  const handleOpenConfirmDialog = async (confirmationMessage: string | ReactNode, title?: string | ReactNode) => {
+    setIsOpenConfirmDialog(true);
+
+    return new Promise<boolean>((resolve) => {
+      setConfirmDialog(
+        <ConfirmationDialog
+          confirmationMessage={confirmationMessage}
+          title={title}
+          handleClose={handleCloseConfirmDialog}
+          open={true}
+          resolve={resolve}
+        />,
+      );
+    });
+  };
+
+  const confirmDialogContext: ConfirmDialogProviderContext = {
+    openConfirmDialog: handleOpenConfirmDialog,
+  };
+
+  // Filter dialog
+  const [isOpenFilterDialog, setIsOpenFilterDialog] = useState(false);
+  const [filterDialog, setFilterDialog] = useState<ReactNode>();
+
+  const handleCloseFilterDialog = () => {
+    setIsOpenFilterDialog(false);
+    return false;
+  };
+
+  const handleOpenFilterDialog = async (filterOptions: FilterOption[], filters?: Filter[]) => {
+    setIsOpenFilterDialog(true);
+
+    return new Promise<Filter[]>((resolve) => {
+      setFilterDialog(
+        <FilterDialog
+          filters={filters}
+          filterOptions={filterOptions}
+          handleClose={handleCloseFilterDialog}
+          open={true}
+          resolve={resolve}
+        />,
+      );
+    });
+  };
+
+  const filterDialogContext: FilterDialogProviderContext = {
+    openFilterDialog: handleOpenFilterDialog,
+  };
+
+  return (
+    <PageDialogContextState.Provider value={pageDialogContext}>
+      <ConfirmDialogContextState.Provider value={confirmDialogContext}>
+        <RangeDialogContextState.Provider value={customDialogContext}>
+          <FilterDialogContextState.Provider value={filterDialogContext}>
+            {children}
+            {isOpenPageDialog && pageDialog}
+            {isOpenConfirmDialog && confirmDialog}
+            {isOpenRangeDialog && rangeDialog}
+            {isOpenFilterDialog && filterDialog}
+          </FilterDialogContextState.Provider>
+        </RangeDialogContextState.Provider>
+      </ConfirmDialogContextState.Provider>
+    </PageDialogContextState.Provider>
+  );
+};
+
+export { DialogProvider, useConfirmDialog, useRangeDialog, useFilterDialog, usePageDialog };

package/src/dialog/FilterDialog.tsx

@@ -0,0 +1,424 @@
+import { mdiCalendarClock, mdiCalendarMonth, mdiFormatTextVariant, mdiNumeric } from '@mdi/js';
+import Icon from '@mdi/react';
+import { Close } from '@mui/icons-material';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+  Slide,
+  Box,
+  Container,
+  Grid,
+  TextField,
+  MenuItem,
+  Checkbox,
+  FormControlLabel,
+  InputAdornment,
+  IconButton,
+  Typography,
+} from '@mui/material';
+import type { TransitionProps } from '@mui/material/transitions';
+import { DatePicker, DateTimePicker } from '@mui/x-date-pickers';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import type { ChangeEvent, ReactElement, Ref } from 'react';
+import type {
+  Filter,
+  FilterDialogProps,
+  FilterInputProps,
+  FilterOperatorProps,
+  FilterProps,
+  Operation,
+} from '@judo/components-api';
+import { FilterType } from '@judo/components-api';
+import { dateToJudoDateString, exists } from '@judo/utilities';
+import { mainContainerPadding } from '@judo/theme';
+import { _BooleanOperation, _EnumerationOperation, _NumericOperation, _StringOperation } from '@judo/data-api-common';
+import { DropdownButton } from '../DropdownButton';
+import TrinaryLogicCombobox from '../TrinaryLogicCombobox';
+
+const getDefaultOperator = (filterType: FilterType) => {
+  switch (filterType) {
+    case FilterType.boolean:
+      return _BooleanOperation['equals'];
+    case FilterType.date:
+      return _NumericOperation['equal'];
+    case FilterType.dateTime:
+      return _NumericOperation['equal'];
+    // case FilterType.time:
+    //   return _NumericOperation['equal'];
+    case FilterType.enumeration:
+      return _EnumerationOperation['equals'];
+    case FilterType.numeric:
+      return _NumericOperation['equal'];
+    case FilterType.string:
+      return _StringOperation['equal'];
+    case FilterType.trinaryLogic:
+      return _BooleanOperation['equals'];
+  }
+};
+
+const getOperationEnumValue = (filter: Filter, operator: string) => {
+  switch (filter.filterOption.filterType) {
+    case FilterType.boolean:
+      return _BooleanOperation[operator as keyof typeof _BooleanOperation];
+    case FilterType.date:
+      return _NumericOperation[operator as keyof typeof _NumericOperation];
+    case FilterType.dateTime:
+      return _NumericOperation[operator as keyof typeof _NumericOperation];
+    // case FilterType.time:
+    //   return _NumericOperation[operator as keyof typeof _NumericOperation];
+    case FilterType.enumeration:
+      return _EnumerationOperation[operator as keyof typeof _BooleanOperation];
+    case FilterType.numeric:
+      return _NumericOperation[operator as keyof typeof _NumericOperation];
+    case FilterType.string:
+      return _StringOperation[operator as keyof typeof _StringOperation];
+    case FilterType.trinaryLogic:
+      return _BooleanOperation[operator as keyof typeof _BooleanOperation];
+  }
+};
+
+const getOperatorsByFilter = (filter: Filter): string[] => {
+  switch (filter.filterOption.filterType) {
+    case FilterType.boolean:
+      return Object.values(_BooleanOperation);
+    case FilterType.date:
+      return Object.values(_NumericOperation);
+    case FilterType.dateTime:
+      return Object.values(_NumericOperation);
+    // case FilterType.time:
+    //   return Object.values(_NumericOperation);
+    case FilterType.enumeration:
+      return Object.values(_EnumerationOperation);
+    case FilterType.numeric:
+      return Object.values(_NumericOperation);
+    case FilterType.string:
+      return Object.values(_StringOperation);
+    case FilterType.trinaryLogic:
+      return Object.values(_BooleanOperation);
+  }
+};
+
+const FilterOperator = ({ filter, setFilterOperator }: FilterOperatorProps) => {
+  const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    setFilterOperator(filter, getOperationEnumValue(filter, event.target.value));
+  };
+
+  return (
+    <TextField
+      name={'operation'}
+      id={'operation'}
+      label={'Operation'}
+      select
+      value={filter.filterBy.operator}
+      onChange={onChangeHandler}
+    >
+      {getOperatorsByFilter(filter).map((item) => (
+        <MenuItem key={item} value={item}>
+          {/* TODO: do not forget localization here*/}
+          {item}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+const FilterInput = ({ filter, setFilterValue }: FilterInputProps) => {
+  if (filter.filterOption.filterType === FilterType.enumeration && !exists(filter.filterOption.enumValues)) {
+    throw new Error(`Missing enumValues from FilterOptions of ${filter.filterOption.attributeName}`);
+  }
+
+  return (
+    <>
+      {(() => {
+        switch (filter.filterOption.filterType) {
+          case FilterType.boolean:
+            return (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={!!filter.filterBy.value}
+                    onChange={(event) => setFilterValue(filter, !!event.target.value)}
+                  />
+                }
+                label={filter.filterOption.attributeName}
+              />
+            );
+          case FilterType.date:
+            return (
+              <DatePicker
+                renderInput={(props) => <TextField {...props} />}
+                label={filter.filterOption.attributeName}
+                value={filter.filterBy.value ?? null}
+                onChange={(newValue) => setFilterValue(filter, dateToJudoDateString(newValue))}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Icon path={mdiCalendarMonth} size={1} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            );
+          case FilterType.dateTime:
+            return (
+              <DateTimePicker
+                renderInput={(props) => <TextField {...props} />}
+                label={filter.filterOption.attributeName}
+                value={filter.filterBy.value ?? null}
+                onChange={(newValue) => setFilterValue(filter, newValue)}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Icon path={mdiCalendarClock} size={1} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            );
+          // case FilterType.time:
+          //   return (
+          //     <TextField
+          //       label={filter.filterOption.attributeName}
+          //       value={filter.filterBy.value}
+          //       onChange={(event) => setFilterValue(filter, event.target.value)}
+          //       InputProps={{
+          //         startAdornment: (
+          //           <InputAdornment position="start">
+          //             <Icon path={mdiClockOutline} size={1} />
+          //           </InputAdornment>
+          //         ),
+          //       }}
+          //     />
+          //   );
+          case FilterType.enumeration:
+            return (
+              <TextField
+                label={filter.filterOption.attributeName}
+                value={filter.filterBy.value}
+                select
+                onChange={(event) => setFilterValue(filter, event.target.value)}
+              >
+                {filter.filterOption.enumValues?.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {item}
+                  </MenuItem>
+                ))}
+              </TextField>
+            );
+          case FilterType.numeric:
+            return (
+              <TextField
+                label={filter.filterOption.attributeName}
+                type="number"
+                value={filter.filterBy.value}
+                onChange={(event) => setFilterValue(filter, Number(event.target.value))}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Icon path={mdiNumeric} size={1} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            );
+          case FilterType.string:
+            return (
+              <TextField
+                label={filter.filterOption.attributeName}
+                value={filter.filterBy.value}
+                onChange={(event) => setFilterValue(filter, event.target.value)}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Icon path={mdiFormatTextVariant} size={1} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            );
+          case FilterType.trinaryLogic:
+            return (
+              <TrinaryLogicCombobox
+                label={filter.filterOption.attributeName}
+                value={filter.filterBy.value}
+                onChange={(value) => setFilterValue(filter, value)}
+              />
+            );
+        }
+      })()}
+    </>
+  );
+};
+
+const FilterRow = ({ filter, closeHandler, setFilterOperator, setFilterValue }: FilterProps) => {
+  return (
+    <Grid item container spacing={2} alignItems={'center'}>
+      <Grid item xs={4}>
+        {filter && <FilterOperator filter={filter} setFilterOperator={setFilterOperator} />}
+      </Grid>
+      <Grid item xs={7}>
+        {filter && <FilterInput filter={filter} setFilterValue={setFilterValue} />}
+      </Grid>
+      <Grid item xs={1}>
+        <IconButton onClick={() => closeHandler(filter)}>
+          <Close />
+        </IconButton>
+      </Grid>
+    </Grid>
+  );
+};
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: ReactElement<any, any>;
+  },
+  ref: Ref<unknown>,
+) {
+  return <Slide direction="left" ref={ref} {...props} />;
+});
+
+export const FilterDialog = ({ filters, filterOptions, resolve, open, handleClose }: FilterDialogProps) => {
+  const descriptionElementRef = useRef<HTMLElement>(null);
+  const [tempFilters, setTempFilters] = useState<Filter[]>(filters ?? []);
+
+  useEffect(() => {
+    if (open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [open]);
+
+  const updateFilterValue = (filter: Filter, value: any) => {
+    setTempFilters((prevTempFilters) => {
+      return prevTempFilters.map((tempFilter) => {
+        if (filter.id === tempFilter.id) {
+          return {
+            ...tempFilter,
+            filterBy: { value: value, operator: tempFilter.filterBy.operator },
+          };
+        }
+
+        return tempFilter;
+      });
+    });
+  };
+
+  const updateFilterOperator = (filter: Filter, operator: Operation) => {
+    setTempFilters((prevTempFilters) => {
+      return prevTempFilters.map((tempFilter) => {
+        if (filter.id === tempFilter.id) {
+          return {
+            ...tempFilter,
+            filterBy: { value: tempFilter.filterBy.value, operator: operator },
+          };
+        }
+
+        return tempFilter;
+      });
+    });
+  };
+
+  const filterCloseHandler = (filter: Filter) => {
+    setTempFilters((prevTempFilters) => [...prevTempFilters.filter((tempFilter) => tempFilter.id !== filter.id)]);
+  };
+
+  const cancel = () => {
+    handleClose();
+    resolve(undefined);
+  };
+
+  const ok = () => {
+    handleClose();
+    resolve(tempFilters);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={cancel}
+      scroll="paper"
+      TransitionComponent={Transition}
+      disableEnforceFocus
+      fullWidth
+      maxWidth="sm"
+      sx={{
+        '& .MuiDialog-container': {
+          justifyContent: 'flex-end',
+        },
+      }}
+      PaperProps={{
+        sx: {
+          m: 0,
+          height: '100%',
+        },
+      }}
+    >
+      <DialogTitle id="scroll-dialog-title">
+        <Typography component="span" color="text.primary" variant="h5">
+          Filters
+        </Typography>
+      </DialogTitle>
+      <DialogContent dividers={true}>
+        <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
+          <Container component="main" maxWidth="xs">
+            <Box sx={mainContainerPadding}>
+              <Grid container spacing={2}>
+                {tempFilters.map((filter) => (
+                  <FilterRow
+                    key={filter.id}
+                    filter={filter}
+                    closeHandler={filterCloseHandler}
+                    setFilterOperator={updateFilterOperator}
+                    setFilterValue={updateFilterValue}
+                  />
+                ))}
+                <Grid item container>
+                  <DropdownButton
+                    fullWidth={true}
+                    showDropdownIcon={false}
+                    menuItems={filterOptions.map((filterOption) => {
+                      return {
+                        label: filterOption.label ?? filterOption.attributeName,
+                        onClick: () =>
+                          setTempFilters((prevTempFilters) => [
+                            ...prevTempFilters,
+                            {
+                              id: prevTempFilters.length,
+                              filterOption: {
+                                attributeName: filterOption.attributeName,
+                                label: filterOption.label,
+                                filterType: filterOption.filterType,
+                              },
+                              filterBy: {
+                                operator: getDefaultOperator(filterOption.filterType),
+                              },
+                            },
+                          ]),
+                      };
+                    })}
+                  >
+                    Add new filter
+                  </DropdownButton>
+                </Grid>
+              </Grid>
+            </Box>
+          </Container>
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button fullWidth variant="outlined" onClick={cancel}>
+          Cancel
+        </Button>
+        <Button fullWidth onClick={ok}>
+          Apply {'(' + tempFilters.length + ')'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

package/src/dialog/PageDialog.tsx

@@ -0,0 +1,40 @@
+import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
+import { useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface PageDialogProps {
+  page: ReactNode;
+  open: boolean;
+  handleClose: () => void;
+  resolve: () => void;
+}
+
+export const PageDialog = ({ page, open, handleClose, resolve }: PageDialogProps) => {
+  const descriptionElementRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    if (open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [open]);
+
+  const ok = () => {
+    resolve();
+    handleClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={ok} scroll="paper">
+      <DialogContent dividers={true}>
+        <DialogContentText ref={descriptionElementRef} tabIndex={-1}>
+          {page}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={ok}>Ok</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};