@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.271

package/components/routes/dossiers/DossierEditor.tsx

@@ -1,247 +0,0 @@
-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 '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { isEqual, omit, uniqBy } from 'lodash-es';
-import type { Dossier } from '@cccsaurora/howler-ui/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

@@ -1,173 +0,0 @@
-import { Topic } from '@mui/icons-material';
-import { Typography } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { TuiListProvider, type TuiListItem, type TuiListItemProps } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import { TuiListMethodContext, type TuiListMethodsState } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
-import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import type { Dossier } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/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

@@ -1,122 +0,0 @@
-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 '@cccsaurora/howler-ui/components/elements/ThemedEditor';
-import { merge } from 'lodash-es';
-import type { Lead } from '@cccsaurora/howler-ui/models/entities/generated/Lead';
-import howlerPluginStore from '@cccsaurora/howler-ui/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

@@ -1,106 +0,0 @@
-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 '@cccsaurora/howler-ui/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;