@cccsaurora/howler-ui 2.16.0-dev.376 → 2.16.0-dev.380

package/components/routes/hits/search/ViewLink.js

@@ -1,26 +1,37 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch } from '@mui/icons-material';
-import { Alert, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll } from '@mui/icons-material';
+import { Autocomplete, Chip, CircularProgress, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
-import { has } from 'lodash-es';
-import { memo, useMemo } from 'react';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-const ViewLink = () => {
+const ViewLink = ({ id, viewId }) => {
     const { t } = useTranslation();
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const currentViews = useContextSelector(ParameterContext, ctx => ctx.views);
+    const removeView = useContextSelector(ParameterContext, ctx => ctx.removeView);
+    const setParamView = useContextSelector(ParameterContext, ctx => ctx.setView);
     const search = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const viewsReady = useContextSelector(ViewContext, ctx => has(ctx.views, viewId));
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+    const [loading, setLoading] = useState(true);
+    const [view, setView] = useState(null);
+    useEffect(() => {
+        setLoading(true);
+        getCurrentViews({ viewId, ignoreParams: true })
+            .then(result => setView(result[0]))
+            .finally(() => setLoading(false));
+    }, [getCurrentViews, viewId]);
     const viewUrl = useMemo(() => {
-        if (viewId) {
-            return `/views/${viewId}/edit`;
+        if (view?.view_id) {
+            return `/views/${view.view_id}/edit`;
         }
         const keys = [];
         if (query) {
@@ -33,15 +44,22 @@ const ViewLink = () => {
             keys.push(`span=${span}`);
         }
         return keys.length > 0 ? `/views/create?${keys.join('&')}` : '/views/create';
-    }, [query, sort, span, viewId]);
-    const viewButton = useMemo(() => (_jsx(Tooltip, { title: viewId ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": viewId ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!viewId && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: viewId ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) })), [query, span, t, viewId, viewUrl]);
-    if (!viewId) {
-        return null;
+    }, [query, sort, span, view]);
+    const options = useMemo(() => Object.values(views).filter(_view => !!_view && !currentViews?.includes(_view.view_id)), [currentViews, views]);
+    if (loading) {
+        return _jsx(Chip, { size: "small", icon: _jsx(CircularProgress, { size: 12 }) });
     }
-    return selectedView ? (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Tooltip, { title: t(`route.views.manager.${selectedView.type}`), children: {
-                    readonly: _jsx(Lock, { fontSize: "small", "aria-label": t(`route.views.manager.${selectedView.type}`) }),
-                    global: _jsx(Language, { fontSize: "small", "aria-label": t(`route.views.manager.${selectedView.type}`) }),
-                    personal: _jsx(Person, { fontSize: "small", "aria-label": t(`route.views.manager.${selectedView.type}`) })
-                }[selectedView.type] }), _jsx(Tooltip, { title: selectedView.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body1", component: Link, to: `/views/${selectedView.view_id}/edit`, "aria-label": `${t(selectedView.title)} - ${selectedView.query ?? t('unknown')}`, children: t(selectedView.title) }) }), viewButton, _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${selectedView.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] })) : (viewsReady && (_jsx(Alert, { role: "alert", variant: "outlined", severity: "error", "aria-live": "assertive", "aria-atomic": "true", action: _jsx(IconButton, { size: "small", component: Link, to: "/search", children: _jsx(Close, { fontSize: "small" }) }), children: t('view.notfound') })));
+    if (viewId === '') {
+        return (_jsx(ChipPopper, { icon: _jsx(SelectAll, {}), label: t('hit.search.view.select'), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small', color: 'warning' } }, children: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(Autocomplete, { fullWidth: true, size: "small", options: options, getOptionLabel: _view => t(_view.title), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
+                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { style: { wordBreak: 'break-all' }, children: o.query }) })] }))), renderInput: _params => (_jsx(TextField, { ..._params, label: t('hit.search.view.select'), sx: { minWidth: '210px' } })), onChange: (_event, _view) => setParamView(id, _view.view_id), sx: { minWidth: '300px' } }), _jsx(Tooltip, { title: t('hit.search.view.remove'), children: _jsx(IconButton, { "aria-label": t('hit.search.view.remove'), onClick: () => removeView(viewId), children: _jsx(Delete, {}) }) })] }) }));
+    }
+    if (!view) {
+        return (_jsx(Chip, { size: "small", role: "alert", color: "error", "aria-live": "assertive", "aria-atomic": "true", label: t('view.notfound'), onDelete: () => removeView(viewId) }));
+    }
+    return (_jsx(ChipPopper, { slotProps: { chip: { size: 'small' } }, icon: _jsx(Tooltip, { title: t(`route.views.manager.${view.type}`), children: {
+                readonly: _jsx(Lock, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
+                global: _jsx(Language, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
+                personal: _jsx(Person, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) })
+            }[view.type] }), label: _jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
 };
 export default memo(ViewLink);