Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
295 lines
9.4 KiB
Plaintext
295 lines
9.4 KiB
Plaintext
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useModal } from '@faceless-ui/modal';
|
|
import { getTranslation } from '@payloadcms/translations';
|
|
import { formatAdminURL, transformColumnsToPreferences, transformColumnsToSearchParams } from 'payload/shared';
|
|
import React, { Fragment, useCallback, useMemo } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { PlusIcon } from '../../../icons/Plus/index.js';
|
|
import { useConfig } from '../../../providers/Config/index.js';
|
|
import { useListQuery } from '../../../providers/ListQuery/context.js';
|
|
import { useTranslation } from '../../../providers/Translation/index.js';
|
|
import { ConfirmationModal } from '../../ConfirmationModal/index.js';
|
|
import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
|
|
import { useListDrawer } from '../../ListDrawer/index.js';
|
|
import { ListSelectionButton } from '../../ListSelection/index.js';
|
|
import { Pill } from '../../Pill/index.js';
|
|
import { Translation } from '../../Translation/index.js';
|
|
import { QueryPresetToggler } from '../QueryPresetToggler/index.js';
|
|
import './index.scss';
|
|
const confirmDeletePresetModalSlug = 'confirm-delete-preset';
|
|
const queryPresetsSlug = 'payload-query-presets';
|
|
const baseClass = 'query-preset-bar';
|
|
export const QueryPresetBar = ({
|
|
activePreset,
|
|
collectionSlug,
|
|
queryPresetPermissions
|
|
}) => {
|
|
const {
|
|
modified,
|
|
query,
|
|
refineListData,
|
|
setModified: setQueryModified
|
|
} = useListQuery();
|
|
const {
|
|
i18n,
|
|
t
|
|
} = useTranslation();
|
|
const {
|
|
openModal
|
|
} = useModal();
|
|
const {
|
|
config: {
|
|
routes: {
|
|
api: apiRoute
|
|
}
|
|
},
|
|
getEntityConfig
|
|
} = useConfig();
|
|
const presetConfig = getEntityConfig({
|
|
collectionSlug: queryPresetsSlug
|
|
});
|
|
const [PresetDocumentDrawer,, {
|
|
openDrawer: openDocumentDrawer
|
|
}] = useDocumentDrawer({
|
|
id: activePreset?.id,
|
|
collectionSlug: queryPresetsSlug
|
|
});
|
|
const [CreateNewPresetDrawer,, {
|
|
closeDrawer: closeCreateNewDrawer,
|
|
openDrawer: openCreateNewDrawer
|
|
}] = useDocumentDrawer({
|
|
collectionSlug: queryPresetsSlug
|
|
});
|
|
const filterOptions = useMemo(() => ({
|
|
'payload-query-presets': {
|
|
isTemp: {
|
|
not_equals: true
|
|
},
|
|
relatedCollection: {
|
|
equals: collectionSlug
|
|
}
|
|
}
|
|
}), [collectionSlug]);
|
|
const [ListDrawer,, {
|
|
closeDrawer: closeListDrawer,
|
|
openDrawer: openListDrawer
|
|
}] = useListDrawer({
|
|
collectionSlugs: [queryPresetsSlug],
|
|
filterOptions,
|
|
selectedCollection: queryPresetsSlug
|
|
});
|
|
const handlePresetChange = useCallback(async preset => {
|
|
await refineListData({
|
|
columns: preset.columns ? transformColumnsToSearchParams(preset.columns) : undefined,
|
|
groupBy: preset.groupBy || '',
|
|
preset: preset.id,
|
|
where: preset.where
|
|
}, false);
|
|
}, [refineListData]);
|
|
const resetQueryPreset = useCallback(async () => {
|
|
await refineListData({
|
|
columns: [],
|
|
groupBy: '',
|
|
preset: '',
|
|
where: {}
|
|
}, false);
|
|
}, [refineListData]);
|
|
const handleDeletePreset = useCallback(async () => {
|
|
try {
|
|
await fetch(formatAdminURL({
|
|
apiRoute,
|
|
path: `/${queryPresetsSlug}/${activePreset.id}`
|
|
}), {
|
|
method: 'DELETE'
|
|
}).then(async res => {
|
|
try {
|
|
const json = await res.json();
|
|
if (res.status < 400) {
|
|
toast.success(t('general:titleDeleted', {
|
|
label: getTranslation(presetConfig?.labels?.singular, i18n),
|
|
title: activePreset.title
|
|
}));
|
|
await resetQueryPreset();
|
|
} else {
|
|
if (json.errors) {
|
|
json.errors.forEach(error => toast.error(error.message));
|
|
} else {
|
|
toast.error(t('error:deletingTitle', {
|
|
title: activePreset.title
|
|
}));
|
|
}
|
|
}
|
|
} catch (_err) {
|
|
toast.error(t('error:deletingTitle', {
|
|
title: activePreset.title
|
|
}));
|
|
}
|
|
});
|
|
} catch (_err) {
|
|
toast.error(t('error:deletingTitle', {
|
|
title: activePreset.title
|
|
}));
|
|
}
|
|
}, [apiRoute, activePreset?.id, activePreset?.title, t, presetConfig, i18n, resetQueryPreset]);
|
|
const saveCurrentChanges = useCallback(async () => {
|
|
try {
|
|
await fetch(formatAdminURL({
|
|
apiRoute,
|
|
path: `/${queryPresetsSlug}/${activePreset.id}`
|
|
}), {
|
|
body: JSON.stringify({
|
|
columns: transformColumnsToPreferences(query.columns),
|
|
groupBy: query.groupBy,
|
|
where: query.where
|
|
}),
|
|
credentials: 'include',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
method: 'PATCH'
|
|
}).then(async res => {
|
|
try {
|
|
const json = await res.json();
|
|
if (res.status < 400) {
|
|
toast.success(t('general:updatedLabelSuccessfully', {
|
|
label: getTranslation(presetConfig?.labels?.singular, i18n)
|
|
}));
|
|
setQueryModified(false);
|
|
} else {
|
|
if (json.errors) {
|
|
json.errors.forEach(error => toast.error(error.message));
|
|
} else {
|
|
toast.error(t('error:unknown'));
|
|
}
|
|
}
|
|
} catch (_err) {
|
|
toast.error(t('error:unknown'));
|
|
}
|
|
});
|
|
} catch (_err) {
|
|
toast.error(t('error:unknown'));
|
|
}
|
|
}, [apiRoute, activePreset?.id, query.columns, query.groupBy, query.where, t, presetConfig?.labels?.singular, i18n, setQueryModified]);
|
|
const hasModifiedPreset = activePreset && modified;
|
|
return /*#__PURE__*/_jsxs(Fragment, {
|
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
className: baseClass,
|
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
className: `${baseClass}__menu`,
|
|
children: [/*#__PURE__*/_jsx(QueryPresetToggler, {
|
|
activePreset: activePreset,
|
|
openPresetListDrawer: openListDrawer,
|
|
resetPreset: resetQueryPreset
|
|
}), /*#__PURE__*/_jsx(Pill, {
|
|
"aria-label": t('general:newLabel', {
|
|
label: presetConfig?.labels?.singular
|
|
}),
|
|
className: `${baseClass}__create-new-preset`,
|
|
icon: /*#__PURE__*/_jsx(PlusIcon, {}),
|
|
id: "create-new-preset",
|
|
onClick: () => {
|
|
openCreateNewDrawer();
|
|
},
|
|
size: "small"
|
|
})]
|
|
}), /*#__PURE__*/_jsxs("div", {
|
|
className: `${baseClass}__menu-items`,
|
|
children: [hasModifiedPreset && /*#__PURE__*/_jsx(ListSelectionButton, {
|
|
id: "reset-preset",
|
|
onClick: async () => {
|
|
await refineListData({
|
|
columns: transformColumnsToSearchParams(activePreset.columns),
|
|
groupBy: activePreset.groupBy || '',
|
|
where: activePreset.where
|
|
}, false);
|
|
},
|
|
type: "button",
|
|
children: t('general:reset')
|
|
}, "reset"), hasModifiedPreset && queryPresetPermissions.update && /*#__PURE__*/_jsx(ListSelectionButton, {
|
|
id: "save-preset",
|
|
onClick: async () => {
|
|
await saveCurrentChanges();
|
|
},
|
|
type: "button",
|
|
children: activePreset?.isShared ? t('general:updateForEveryone') : t('fields:saveChanges')
|
|
}, "save"), activePreset && queryPresetPermissions?.delete && /*#__PURE__*/_jsxs(Fragment, {
|
|
children: [/*#__PURE__*/_jsx(ListSelectionButton, {
|
|
id: "delete-preset",
|
|
onClick: () => openModal(confirmDeletePresetModalSlug),
|
|
type: "button",
|
|
children: t('general:deleteLabel', {
|
|
label: presetConfig?.labels?.singular
|
|
})
|
|
}), /*#__PURE__*/_jsx(ListSelectionButton, {
|
|
id: "edit-preset",
|
|
onClick: () => {
|
|
openDocumentDrawer();
|
|
},
|
|
type: "button",
|
|
children: t('general:editLabel', {
|
|
label: presetConfig?.labels?.singular
|
|
})
|
|
})]
|
|
})]
|
|
})]
|
|
}), /*#__PURE__*/_jsx(CreateNewPresetDrawer, {
|
|
initialData: {
|
|
columns: transformColumnsToPreferences(query.columns),
|
|
groupBy: query.groupBy,
|
|
relatedCollection: collectionSlug,
|
|
where: query.where
|
|
},
|
|
onSave: async ({
|
|
doc
|
|
}) => {
|
|
closeCreateNewDrawer();
|
|
await handlePresetChange(doc);
|
|
},
|
|
redirectAfterCreate: false
|
|
}), /*#__PURE__*/_jsx(ConfirmationModal, {
|
|
body: /*#__PURE__*/_jsx(Translation, {
|
|
elements: {
|
|
'1': ({
|
|
children
|
|
}) => /*#__PURE__*/_jsx("strong", {
|
|
children: children
|
|
})
|
|
},
|
|
i18nKey: "general:aboutToDelete",
|
|
t: t,
|
|
variables: {
|
|
label: presetConfig?.labels?.singular,
|
|
title: activePreset?.title
|
|
}
|
|
}),
|
|
confirmingLabel: t('general:deleting'),
|
|
heading: t('general:confirmDeletion'),
|
|
modalSlug: confirmDeletePresetModalSlug,
|
|
onConfirm: handleDeletePreset
|
|
}), /*#__PURE__*/_jsx(PresetDocumentDrawer, {
|
|
onDelete: () => {
|
|
// setSelectedPreset(undefined)
|
|
},
|
|
onDuplicate: async ({
|
|
doc
|
|
}) => {
|
|
await handlePresetChange(doc);
|
|
},
|
|
onSave: async ({
|
|
doc
|
|
}) => {
|
|
await handlePresetChange(doc);
|
|
}
|
|
}), /*#__PURE__*/_jsx(ListDrawer, {
|
|
allowCreate: false,
|
|
disableQueryPresets: true,
|
|
onSelect: async ({
|
|
doc
|
|
}) => {
|
|
closeListDrawer();
|
|
await handlePresetChange(doc);
|
|
}
|
|
})]
|
|
});
|
|
};
|
|
//# sourceMappingURL=index.js.map |