@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.264

package/components/routes/dossiers/DossierEditor.tsx

@@ -0,0 +1,247 @@
+import { iconExists } from '@iconify/react/dist/iconify.js';
+import { Language, Person, Save } from '@mui/icons-material';
+import {
+  Box,
+  CircularProgress,
+  Fab,
+  Paper,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  Typography,
+  useMediaQuery
+} from '@mui/material';
+import api from 'api';
+import PageCenter from 'commons/components/pages/PageCenter';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import useMyApi from 'components/hooks/useMyApi';
+import { isEqual, omit, uniqBy } from 'lodash-es';
+import type { Dossier } from 'models/entities/generated/Dossier';
+import { memo, useCallback, useEffect, useMemo, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import QueryResultText from '../../elements/display/QueryResultText';
+import HitQuery from '../hits/search/HitQuery';
+import LeadForm from './LeadForm';
+import PivotForm from './PivotForm';
+
+const DossierEditor: FC = () => {
+  const { t, i18n } = useTranslation();
+  const params = useParams();
+  const { dispatchApi } = useMyApi();
+  const navigate = useNavigate();
+
+  const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+
+  const isNarrow = useMediaQuery(`(max-width: ${i18n.language === 'en' ? 1275 : 1375}px)`);
+
+  const [originalDossier, setOriginalDossier] = useState<Dossier>();
+  const [dossier, setDossier] = useState<Partial<Dossier>>({
+    type: 'global',
+    leads: [],
+    pivots: []
+  });
+  const [tab, setTab] = useState<'leads' | 'pivots'>('leads');
+  const [searchTotal, setSearchTotal] = useState(-1);
+  const [searchDirty, setSearchDirty] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const dirty = useMemo(() => !isEqual(originalDossier, dossier), [dossier, originalDossier]);
+  const validationError = useMemo(() => {
+    if (!dossier) {
+      return t('route.dossiers.manager.validation.error');
+    }
+
+    if (!dossier.title) {
+      return t('route.dossiers.manager.validation.error.missing', { field: t('route.dossiers.manager.field.title') });
+    }
+
+    if (searchTotal < 0 || searchDirty) {
+      return t('route.dossiers.manager.validation.search');
+    }
+
+    if (!dossier.query) {
+      return t('route.dossiers.manager.validation.error.missing', { field: t('route.dossiers.manager.field.query') });
+    }
+
+    if (!dossier.type) {
+      return t('route.dossiers.manager.validation.error.missing', { field: t('route.dossiers.manager.field.type') });
+    }
+
+    if ((dossier.leads ?? []).length < 1 && (dossier.pivots ?? []).length < 1) {
+      return t('route.dossiers.manager.validation.error.items');
+    }
+
+    if (
+      !(dossier.leads ?? [])?.every(
+        lead =>
+          lead.icon &&
+          iconExists(lead.icon) &&
+          lead.label?.en &&
+          lead.label?.fr &&
+          lead.label &&
+          lead.format &&
+          lead.content
+      )
+    ) {
+      return t('route.dossiers.manager.validation.error.leads');
+    }
+
+    if (
+      !(dossier.pivots ?? []).every(
+        pivot => pivot.icon && iconExists(pivot.icon) && pivot.label && pivot.label.en && pivot.label.fr && pivot.format
+      )
+    ) {
+      return t('route.dossiers.manager.validation.error.pivots');
+    }
+
+    if (!dossier.pivots?.every(pivot => (pivot.mappings ?? []).length === uniqBy(pivot.mappings ?? [], 'key').length)) {
+      return t('route.dossiers.manager.validation.error.pivots.duplicate');
+    }
+
+    return null;
+  }, [dossier, searchDirty, searchTotal, t]);
+
+  const save = useCallback(async () => {
+    setLoading(true);
+
+    try {
+      if (!params.id) {
+        const result = await dispatchApi(api.dossier.post(dossier));
+
+        navigate(`/dossiers/${result.dossier_id}/edit`);
+      } else {
+        setDossier(await dispatchApi(api.dossier.put(dossier.dossier_id, omit(dossier, ['dossier_id', 'id']))));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatchApi, dossier, navigate, params.id]);
+
+  useEffect(() => {
+    if (!params.id) {
+      return;
+    }
+
+    setLoading(true);
+
+    dispatchApi(api.dossier.get(params.id) as Promise<Dossier>)
+      .then(_dossier => {
+        setOriginalDossier(_dossier);
+        setDossier(_dossier);
+      })
+      .finally(() => setLoading(false));
+  }, [dispatchApi, params.id]);
+
+  useEffect(() => {
+    if (!dossier.query) {
+      return;
+    }
+
+    setQuery(dossier.query);
+
+    (async () => {
+      setLoading(true);
+
+      try {
+        const result = await dispatchApi(api.search.hit.post({ query: dossier.query, rows: 0 }));
+
+        setSearchTotal(result.total);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [dispatchApi, dossier.query, setQuery]);
+
+  return (
+    <PageCenter maxWidth="1000px" width="100%" textAlign="left" height="97%">
+      <Box position="relative" height="100%">
+        <Tooltip title={validationError}>
+          <span>
+            <Fab
+              variant="extended"
+              size="large"
+              color="primary"
+              disabled={!dirty || !!validationError || loading}
+              sx={theme => ({
+                textTransform: 'none',
+                position: 'absolute',
+                right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(2)})`,
+                whiteSpace: 'nowrap',
+                pointerEvents: 'initial !important',
+                ...(isNarrow ? { bottom: theme.spacing(1) } : { top: 0 })
+              })}
+              onClick={save}
+            >
+              {loading ? <CircularProgress size={24} sx={{ mr: 1 }} /> : <Save sx={{ mr: 1 }} />}
+              <Typography>{t('save')}</Typography>
+            </Fab>
+          </span>
+        </Tooltip>
+        <Stack spacing={1} height="100%">
+          <Paper sx={{ p: 1 }}>
+            <Stack spacing={1}>
+              <Stack spacing={1} direction="row">
+                <TextField
+                  disabled={!dossier || loading}
+                  label="Title"
+                  size="small"
+                  value={dossier.title ?? ''}
+                  onChange={ev => setDossier(_dossier => ({ ..._dossier, title: ev.target.value }))}
+                  fullWidth
+                />
+                <ToggleButtonGroup
+                  disabled={!dossier || loading}
+                  exclusive
+                  value={dossier.type ?? 'global'}
+                  onChange={(_ev, type) => setDossier(_dossier => ({ ..._dossier, type }))}
+                >
+                  <Tooltip title={t('route.dossiers.manager.global')}>
+                    <ToggleButton value="global" size="small">
+                      <Language fontSize="small" />
+                    </ToggleButton>
+                  </Tooltip>
+                  <Tooltip title={t('route.dossiers.manager.personal')}>
+                    <ToggleButton value="personal" size="small">
+                      <Person fontSize="small" />
+                    </ToggleButton>
+                  </Tooltip>
+                </ToggleButtonGroup>
+              </Stack>
+              <Typography
+                sx={theme => ({
+                  color: theme.palette.text.secondary,
+                  fontSize: '0.9em',
+                  fontStyle: 'italic',
+                  mb: 0.5
+                })}
+                variant="body2"
+              >
+                {t('hit.search.prompt')}
+              </Typography>
+              <HitQuery
+                disabled={!dossier || loading}
+                onChange={(_val, isDirty) => setSearchDirty(isDirty)}
+                triggerSearch={query => setDossier(_dossier => ({ ..._dossier, query }))}
+              />
+              {searchTotal >= 0 && <QueryResultText count={searchTotal} query={dossier.query} />}
+            </Stack>
+          </Paper>
+          <Tabs value={tab} onChange={(_ev, value) => setTab(value)}>
+            <Tab label={t('route.dossiers.manager.tabs.leads')} value="leads" />
+            <Tab label={t('route.dossiers.manager.tabs.pivots')} value="pivots" />
+          </Tabs>
+          {tab === 'leads' && <LeadForm dossier={dossier} setDossier={setDossier} loading={loading} />}
+          {tab === 'pivots' && <PivotForm dossier={dossier} setDossier={setDossier} loading={loading} />}
+        </Stack>
+      </Box>
+    </PageCenter>
+  );
+};
+
+export default memo(DossierEditor);

package/components/routes/dossiers/Dossiers.tsx

@@ -0,0 +1,173 @@
+import { Topic } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import api from 'api';
+import type { HowlerSearchResponse } from 'api/search';
+import { TuiListProvider, type TuiListItem, type TuiListItemProps } from 'components/elements/addons/lists';
+import { TuiListMethodContext, type TuiListMethodsState } from 'components/elements/addons/lists/TuiListProvider';
+import ItemManager from 'components/elements/display/ItemManager';
+import useMyApi from 'components/hooks/useMyApi';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import useMySnackbar from 'components/hooks/useMySnackbar';
+import type { Dossier } from 'models/entities/generated/Dossier';
+import { useCallback, useContext, useEffect, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from 'utils/constants';
+import DossierCard from './DossierCard';
+
+const DossiersBase: FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { dispatchApi } = useMyApi();
+  const { showSuccessMessage } = useMySnackbar();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { load } = useContext<TuiListMethodsState<Dossier>>(TuiListMethodContext);
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+
+  const [phrase, setPhrase] = useState<string>('');
+  const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+  const [response, setResponse] = useState<HowlerSearchResponse<Dossier>>(null);
+  const [hasError, setHasError] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const onSearch = useCallback(async () => {
+    try {
+      setLoading(true);
+      setHasError(false);
+
+      if (phrase) {
+        searchParams.set('phrase', phrase);
+      } else {
+        searchParams.delete('phrase');
+      }
+      setSearchParams(searchParams, { replace: true });
+
+      // Check for the actual search query
+      const query = phrase ? `*:*${phrase}*` : '*:*';
+      // Ensure the overview should be visible and/or matches the type we are filtering for
+      setResponse(
+        await dispatchApi(
+          api.search.dossier.post({
+            query,
+            rows: pageCount,
+            offset
+          })
+        )
+      );
+    } catch (e) {
+      setHasError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+
+  // Load the items into list when response changes.
+  // This hook should only trigger when the 'response' changes.
+  useEffect(() => {
+    if (response) {
+      load(
+        response.items.map((item: Dossier) => ({
+          id: item.dossier_id,
+          item,
+          selected: false,
+          cursor: false
+        }))
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [response, load]);
+
+  const onPageChange = useCallback(
+    (_offset: number) => {
+      if (_offset !== offset) {
+        searchParams.set('offset', _offset.toString());
+        setSearchParams(searchParams, { replace: true });
+        setOffset(_offset);
+      }
+    },
+    [offset, searchParams, setSearchParams]
+  );
+
+  const onDelete = useCallback(
+    async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      try {
+        await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
+        await onSearch();
+        showSuccessMessage(t('route.dossiers.manager.delete.success'));
+      } catch (_err) {
+        // eslint-disable-next-line no-console
+        console.warn(_err);
+      }
+    },
+    [dispatchApi, onSearch, showSuccessMessage, t]
+  );
+
+  useEffect(() => {
+    onSearch();
+
+    if (!searchParams.has('offset')) {
+      searchParams.set('offset', '0');
+      setSearchParams(searchParams, { replace: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (response?.total <= offset) {
+      setOffset(0);
+      searchParams.set('offset', '0');
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [offset, response?.total, searchParams, setSearchParams]);
+
+  useEffect(() => {
+    if (!loading) {
+      onSearch();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [offset]);
+
+  const renderer = useCallback(
+    (item: Dossier, className?: string) => <DossierCard dossier={item} className={className} onDelete={onDelete} />,
+    [onDelete]
+  );
+
+  return (
+    <ItemManager
+      onSearch={onSearch}
+      onPageChange={onPageChange}
+      phrase={phrase}
+      setPhrase={setPhrase}
+      hasError={hasError}
+      searching={loading}
+      aboveSearch={
+        <Typography
+          sx={theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 })}
+          variant="body2"
+        >
+          {t('route.dossiers.search.prompt')}
+        </Typography>
+      }
+      renderer={({ item }: TuiListItemProps<Dossier>, classRenderer) => renderer(item.item, classRenderer())}
+      response={response}
+      onSelect={(item: TuiListItem<Dossier>) => navigate(`/dossiers/${item.id}/edit`)}
+      onCreate={() => navigate('/dossiers/create')}
+      createPrompt="route.dossiers.create"
+      searchPrompt="route.dossiers.manager.search"
+      createIcon={<Topic sx={{ mr: 1 }} />}
+    />
+  );
+};
+
+const Dossiers = () => {
+  return (
+    <TuiListProvider>
+      <DossiersBase />
+    </TuiListProvider>
+  );
+};
+
+export default Dossiers;

package/components/routes/dossiers/LeadEditor.tsx

@@ -0,0 +1,122 @@
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+import { useMonaco } from '@monaco-editor/react';
+import { Delete, OpenInNew } from '@mui/icons-material';
+import { Autocomplete, Button, IconButton, Stack, TextField, Typography, useTheme } from '@mui/material';
+import ThemedEditor from 'components/elements/ThemedEditor';
+import { merge } from 'lodash-es';
+import type { Lead } from 'models/entities/generated/Lead';
+import howlerPluginStore from 'plugins/store';
+import { useCallback, useEffect, useMemo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+
+export interface LeadFormProps {
+  lead?: Lead;
+  metadata?: any;
+  update: (lead: Partial<Lead>) => void;
+  updateMetadata: (data: any) => void;
+}
+
+const LeadEditor: FC<{ lead?: Lead; update: (lead: Partial<Lead>) => void }> = ({ lead, update }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const monaco = useMonaco();
+  const pluginStore = usePluginStore();
+
+  const icon = useMemo(() => lead?.icon ?? 'material-symbols:find-in-page', [lead?.icon]);
+  const metadata = useMemo(() => JSON.parse(lead?.metadata ?? '{}'), [lead?.metadata]);
+
+  const updateMetadata = useCallback(
+    _metadata => {
+      update({ metadata: JSON.stringify(merge({}, metadata, _metadata)) });
+    },
+    [metadata, update]
+  );
+
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+
+    monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+  }, [monaco]);
+
+  return (
+    <Stack spacing={2} pt={2} sx={{ flex: 1 }}>
+      <Stack direction="row" alignItems="center" position="relative">
+        <TextField
+          size="small"
+          label={t('route.dossiers.manager.icon')}
+          value={icon}
+          disabled={!lead}
+          fullWidth
+          error={!iconExists(icon)}
+          sx={{ '& input': { paddingLeft: '2.25rem' } }}
+          onChange={ev => update({ icon: ev.target.value })}
+        />
+        <Icon fontSize="1.75rem" icon={icon} style={{ position: 'absolute', left: '0.5rem' }} />
+        <Button
+          variant="outlined"
+          color="error"
+          disabled={!lead}
+          sx={{ minWidth: '0 !important', ml: 1 }}
+          onClick={() => update(null)}
+        >
+          <Delete />
+        </Button>
+      </Stack>
+      <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: `${theme.spacing(0.5)} !important` }}>
+        <Typography color="text.secondary">{t('route.dossiers.manager.icon.description')}</Typography>
+        <IconButton size="small" component="a" href="https://icon-sets.iconify.design/">
+          <OpenInNew fontSize="small" />
+        </IconButton>
+      </Stack>
+      <Stack direction="row" spacing={2}>
+        <TextField
+          size="small"
+          label={t('route.dossiers.manager.label.en')}
+          disabled={!lead}
+          value={lead?.label?.en ?? ''}
+          fullWidth
+          onChange={ev => update({ label: { en: ev.target.value } })}
+        />
+        <TextField
+          size="small"
+          label={t('route.dossiers.manager.label.fr')}
+          disabled={!lead}
+          value={lead?.label?.fr ?? ''}
+          fullWidth
+          onChange={ev => update({ label: { fr: ev.target.value } })}
+        />
+      </Stack>
+      <Autocomplete
+        disabled={!lead}
+        options={['markdown', ...howlerPluginStore.leadFormats]}
+        renderInput={params => <TextField {...params} size="small" label={t('route.dossiers.manager.format')} />}
+        value={lead?.format ?? ''}
+        onChange={(_ev, format) => update({ format, metadata: '{}', content: '' })}
+      />
+      {!!lead?.format &&
+        (lead.format === 'markdown' ? (
+          <ThemedEditor
+            height="100%"
+            width="100%"
+            language="markdown"
+            theme={theme.palette.mode === 'light' ? 'howler' : 'howler-dark'}
+            value={lead?.content ?? ''}
+            onChange={content => update({ content })}
+            options={{}}
+          />
+        ) : (
+          pluginStore.executeFunction(`lead.${lead.format}.form`, {
+            lead,
+            metadata,
+            update,
+            updateMetadata
+          } as LeadFormProps)
+        ))}
+    </Stack>
+  );
+};
+
+export default LeadEditor;

package/components/routes/dossiers/LeadForm.tsx

@@ -0,0 +1,106 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Add } from '@mui/icons-material';
+import { Alert, Button, Paper, Stack, Tab, Tabs } from '@mui/material';
+import isNull from 'lodash-es/isNull';
+import merge from 'lodash-es/merge';
+import type { Dossier } from 'models/entities/generated/Dossier';
+import { useState, type Dispatch, type FC, type SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import LeadEditor from './LeadEditor';
+
+const LeadForm: FC<{ dossier: Dossier; setDossier: Dispatch<SetStateAction<Partial<Dossier>>>; loading: boolean }> = ({
+  dossier,
+  setDossier,
+  loading
+}) => {
+  const { t, i18n } = useTranslation();
+
+  const [tab, setTab] = useState(0);
+
+  return (
+    <Paper sx={{ p: 1, display: 'flex', flexDirection: 'column', flex: 1 }}>
+      <Stack direction="row">
+        {!dossier?.leads || dossier.leads.length < 1 ? (
+          <Alert
+            variant="outlined"
+            severity="warning"
+            sx={{
+              mr: 1,
+              px: 1,
+              py: 0,
+              minHeight: '0 !important',
+              display: 'flex',
+              alignItems: 'center',
+              '& .MuiAlert-icon ': {
+                fontSize: '20px',
+                py: 0
+              },
+              '& .MuiAlert-message': {
+                py: 0.7
+              }
+            }}
+          >
+            {t('route.dossiers.manager.lead.create')}
+          </Alert>
+        ) : (
+          <Tabs value={tab} onChange={(_, _tab) => setTab(_tab)} sx={{ minHeight: '0 !important' }}>
+            {dossier.leads?.map((lead, index) => (
+              <Tab
+                disabled={!dossier || loading}
+                sx={{ py: 1, minHeight: '0 !important' }}
+                key={lead.content}
+                label={
+                  <Stack direction="row" spacing={0.5}>
+                    {lead.icon && <Icon icon={lead.icon} />}
+                    <span>{i18n.language === 'en' ? lead.label.en : lead.label.fr}</span>
+                  </Stack>
+                }
+                value={index}
+              />
+            ))}
+          </Tabs>
+        )}
+        <Button
+          sx={{ ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }}
+          size="small"
+          variant="contained"
+          onClick={() => {
+            setTab(dossier.leads?.length ?? 0);
+            setDossier(_dossier => ({
+              ..._dossier,
+              leads: [
+                ...(_dossier.leads ?? []),
+                { icon: 'material-symbols:add-ad', label: { en: 'New Lead', fr: 'Nouvelle Piste' } }
+              ]
+            }));
+          }}
+        >
+          <Add />
+        </Button>
+      </Stack>
+      <LeadEditor
+        lead={(dossier.leads ?? [])[tab]}
+        update={data =>
+          setDossier(_dossier => ({
+            ..._dossier,
+            leads: (_dossier.leads ?? [])
+              .map((lead, index) => {
+                if (index !== tab) {
+                  return lead;
+                }
+
+                if (isNull(data)) {
+                  return null;
+                }
+
+                return merge({}, lead, data);
+              })
+              .filter(_lead => !isNull(_lead))
+          }))
+        }
+      />
+    </Paper>
+  );
+};
+
+export default LeadForm;