Marc Mintel
5397309103
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
609 lines
18 KiB
Plaintext
609 lines
18 KiB
Plaintext
'use client';
|
|
|
|
import { c as _c } from "react/compiler-runtime";
|
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
import { useModal } from '@faceless-ui/modal';
|
|
import { getTranslation } from '@payloadcms/translations';
|
|
import { extractID } from 'payload/shared';
|
|
import React from 'react';
|
|
import { useAuth } from '../../../../providers/Auth/index.js';
|
|
import { FolderProvider, useFolder } from '../../../../providers/Folders/index.js';
|
|
import { useRouteCache } from '../../../../providers/RouteCache/index.js';
|
|
import { useServerFunctions } from '../../../../providers/ServerFunctions/index.js';
|
|
import { useTranslation } from '../../../../providers/Translation/index.js';
|
|
import { Button } from '../../../Button/index.js';
|
|
import { ConfirmationModal } from '../../../ConfirmationModal/index.js';
|
|
import { useDocumentDrawer } from '../../../DocumentDrawer/index.js';
|
|
import { Drawer } from '../../../Drawer/index.js';
|
|
import { DrawerActionHeader } from '../../../DrawerActionHeader/index.js';
|
|
import { DrawerContentContainer } from '../../../DrawerContentContainer/index.js';
|
|
import { ListCreateNewDocInFolderButton } from '../../../ListHeader/TitleActions/ListCreateNewDocInFolderButton.js';
|
|
import { LoadingOverlay } from '../../../Loading/index.js';
|
|
import { NoListResults } from '../../../NoListResults/index.js';
|
|
import { Translation } from '../../../Translation/index.js';
|
|
import { FolderBreadcrumbs } from '../../Breadcrumbs/index.js';
|
|
import { ColoredFolderIcon } from '../../ColoredFolderIcon/index.js';
|
|
import './index.scss';
|
|
const baseClass = 'move-folder-drawer';
|
|
const baseModalSlug = 'move-folder-drawer';
|
|
const confirmModalSlug = `${baseModalSlug}-confirm-move`;
|
|
export function MoveItemsToFolderDrawer(props) {
|
|
return /*#__PURE__*/_jsx(Drawer, {
|
|
gutter: false,
|
|
Header: null,
|
|
slug: props.drawerSlug,
|
|
children: /*#__PURE__*/_jsx(LoadFolderData, {
|
|
...props
|
|
})
|
|
});
|
|
}
|
|
function LoadFolderData(props) {
|
|
const {
|
|
permissions
|
|
} = useAuth();
|
|
const [subfolders, setSubfolders] = React.useState([]);
|
|
const [documents, setDocuments] = React.useState([]);
|
|
const [breadcrumbs, setBreadcrumbs] = React.useState([]);
|
|
const [FolderResultsComponent, setFolderResultsComponent] = React.useState(null);
|
|
const [hasLoaded, setHasLoaded] = React.useState(false);
|
|
const [folderID, setFolderID] = React.useState(props.fromFolderID || null);
|
|
const hasLoadedRef = React.useRef(false);
|
|
const {
|
|
getFolderResultsComponentAndData
|
|
} = useServerFunctions();
|
|
const populateMoveToFolderDrawer = React.useCallback(async folderIDToPopulate => {
|
|
try {
|
|
const result = await getFolderResultsComponentAndData({
|
|
browseByFolder: false,
|
|
collectionsToDisplay: [props.folderCollectionSlug],
|
|
displayAs: 'grid',
|
|
// todo: should be able to pass undefined, empty array or null and get all folders. Need to look at API for this in the server function
|
|
folderAssignedCollections: props.folderAssignedCollections,
|
|
folderID: folderIDToPopulate,
|
|
sort: 'name'
|
|
});
|
|
setBreadcrumbs(result.breadcrumbs || []);
|
|
setSubfolders(result?.subfolders || []);
|
|
setDocuments(result?.documents || []);
|
|
setFolderResultsComponent(result.FolderResultsComponent || null);
|
|
setFolderID(folderIDToPopulate);
|
|
setHasLoaded(true);
|
|
} catch (e) {
|
|
setBreadcrumbs([]);
|
|
setSubfolders([]);
|
|
setDocuments([]);
|
|
}
|
|
hasLoadedRef.current = true;
|
|
}, [getFolderResultsComponentAndData, props.folderAssignedCollections, props.folderCollectionSlug]);
|
|
React.useEffect(() => {
|
|
if (!hasLoadedRef.current) {
|
|
void populateMoveToFolderDrawer(props.fromFolderID);
|
|
}
|
|
}, [populateMoveToFolderDrawer, props.fromFolderID]);
|
|
if (!hasLoaded) {
|
|
return /*#__PURE__*/_jsx(LoadingOverlay, {});
|
|
}
|
|
return /*#__PURE__*/_jsx(FolderProvider, {
|
|
allCollectionFolderSlugs: [props.folderCollectionSlug],
|
|
allowCreateCollectionSlugs: permissions.collections[props.folderCollectionSlug]?.create ? [props.folderCollectionSlug] : [],
|
|
allowMultiSelection: false,
|
|
breadcrumbs: breadcrumbs,
|
|
documents: documents,
|
|
folderFieldName: props.folderFieldName,
|
|
folderID: folderID,
|
|
FolderResultsComponent: FolderResultsComponent,
|
|
onItemClick: async item => {
|
|
await populateMoveToFolderDrawer(item.value.id);
|
|
},
|
|
subfolders: subfolders,
|
|
children: /*#__PURE__*/_jsx(Content, {
|
|
...props,
|
|
populateMoveToFolderDrawer: populateMoveToFolderDrawer
|
|
})
|
|
}, folderID);
|
|
}
|
|
function Content(t0) {
|
|
const $ = _c(34);
|
|
const {
|
|
drawerSlug,
|
|
fromFolderID,
|
|
fromFolderName,
|
|
itemsToMove,
|
|
onConfirm,
|
|
populateMoveToFolderDrawer,
|
|
skipConfirmModal,
|
|
...props
|
|
} = t0;
|
|
const {
|
|
clearRouteCache
|
|
} = useRouteCache();
|
|
const {
|
|
closeModal,
|
|
isModalOpen,
|
|
openModal
|
|
} = useModal();
|
|
let t1;
|
|
if ($[0] !== itemsToMove) {
|
|
t1 = () => itemsToMove.length;
|
|
$[0] = itemsToMove;
|
|
$[1] = t1;
|
|
} else {
|
|
t1 = $[1];
|
|
}
|
|
const [count] = React.useState(t1);
|
|
const [folderAddedToUnderlyingFolder, setFolderAddedToUnderlyingFolder] = React.useState(false);
|
|
const {
|
|
i18n,
|
|
t
|
|
} = useTranslation();
|
|
const {
|
|
breadcrumbs,
|
|
folderCollectionConfig,
|
|
folderCollectionSlug,
|
|
folderFieldName,
|
|
folderID,
|
|
FolderResultsComponent,
|
|
folderType,
|
|
getSelectedItems,
|
|
subfolders
|
|
} = useFolder();
|
|
let t2;
|
|
if ($[2] !== folderCollectionSlug) {
|
|
t2 = {
|
|
collectionSlug: folderCollectionSlug
|
|
};
|
|
$[2] = folderCollectionSlug;
|
|
$[3] = t2;
|
|
} else {
|
|
t2 = $[3];
|
|
}
|
|
const [FolderDocumentDrawer,, t3] = useDocumentDrawer(t2);
|
|
const {
|
|
closeDrawer: closeFolderDrawer,
|
|
openDrawer: openFolderDrawer
|
|
} = t3;
|
|
let t4;
|
|
if ($[4] !== breadcrumbs || $[5] !== getSelectedItems) {
|
|
t4 = () => {
|
|
const selected = getSelectedItems();
|
|
if (selected.length === 0) {
|
|
const lastCrumb = breadcrumbs?.[breadcrumbs.length - 1];
|
|
return {
|
|
id: lastCrumb?.id || null,
|
|
name: lastCrumb?.name || null
|
|
};
|
|
} else {
|
|
return {
|
|
id: selected[0].value.id,
|
|
name: selected[0].value._folderOrDocumentTitle
|
|
};
|
|
}
|
|
};
|
|
$[4] = breadcrumbs;
|
|
$[5] = getSelectedItems;
|
|
$[6] = t4;
|
|
} else {
|
|
t4 = $[6];
|
|
}
|
|
const getSelectedFolder = t4;
|
|
let t5;
|
|
if ($[7] !== folderCollectionSlug || $[8] !== folderID || $[9] !== fromFolderID || $[10] !== populateMoveToFolderDrawer) {
|
|
t5 = async t6 => {
|
|
const {
|
|
collectionSlug,
|
|
doc
|
|
} = t6;
|
|
await populateMoveToFolderDrawer(folderID);
|
|
if (collectionSlug === folderCollectionSlug && (doc?.folder && fromFolderID === extractID(doc?.folder) || !fromFolderID && !doc?.folder)) {
|
|
setFolderAddedToUnderlyingFolder(true);
|
|
}
|
|
};
|
|
$[7] = folderCollectionSlug;
|
|
$[8] = folderID;
|
|
$[9] = fromFolderID;
|
|
$[10] = populateMoveToFolderDrawer;
|
|
$[11] = t5;
|
|
} else {
|
|
t5 = $[11];
|
|
}
|
|
const onCreateSuccess = t5;
|
|
let t6;
|
|
if ($[12] !== getSelectedFolder || $[13] !== onConfirm) {
|
|
t6 = () => {
|
|
if (typeof onConfirm === "function") {
|
|
onConfirm(getSelectedFolder());
|
|
}
|
|
};
|
|
$[12] = getSelectedFolder;
|
|
$[13] = onConfirm;
|
|
$[14] = t6;
|
|
} else {
|
|
t6 = $[14];
|
|
}
|
|
const onConfirmMove = t6;
|
|
let t7;
|
|
let t8;
|
|
if ($[15] !== clearRouteCache || $[16] !== drawerSlug || $[17] !== folderAddedToUnderlyingFolder || $[18] !== isModalOpen) {
|
|
t7 = () => {
|
|
if (!isModalOpen(drawerSlug) && folderAddedToUnderlyingFolder) {
|
|
setFolderAddedToUnderlyingFolder(false);
|
|
clearRouteCache();
|
|
}
|
|
};
|
|
t8 = [drawerSlug, isModalOpen, clearRouteCache, folderAddedToUnderlyingFolder];
|
|
$[15] = clearRouteCache;
|
|
$[16] = drawerSlug;
|
|
$[17] = folderAddedToUnderlyingFolder;
|
|
$[18] = isModalOpen;
|
|
$[19] = t7;
|
|
$[20] = t8;
|
|
} else {
|
|
t7 = $[19];
|
|
t8 = $[20];
|
|
}
|
|
React.useEffect(t7, t8);
|
|
let t9;
|
|
if ($[21] !== closeModal || $[22] !== drawerSlug) {
|
|
t9 = () => {
|
|
closeModal(drawerSlug);
|
|
};
|
|
$[21] = closeModal;
|
|
$[22] = drawerSlug;
|
|
$[23] = t9;
|
|
} else {
|
|
t9 = $[23];
|
|
}
|
|
let t10;
|
|
if ($[24] !== onConfirmMove || $[25] !== openModal || $[26] !== skipConfirmModal) {
|
|
t10 = () => {
|
|
if (skipConfirmModal) {
|
|
onConfirmMove();
|
|
} else {
|
|
openModal(confirmModalSlug);
|
|
}
|
|
};
|
|
$[24] = onConfirmMove;
|
|
$[25] = openModal;
|
|
$[26] = skipConfirmModal;
|
|
$[27] = t10;
|
|
} else {
|
|
t10 = $[27];
|
|
}
|
|
let t11;
|
|
if ($[28] !== breadcrumbs.length || $[29] !== populateMoveToFolderDrawer) {
|
|
t11 = breadcrumbs.length ? () => {
|
|
populateMoveToFolderDrawer(null);
|
|
} : undefined;
|
|
$[28] = breadcrumbs.length;
|
|
$[29] = populateMoveToFolderDrawer;
|
|
$[30] = t11;
|
|
} else {
|
|
t11 = $[30];
|
|
}
|
|
let t12;
|
|
if ($[31] !== breadcrumbs.length || $[32] !== populateMoveToFolderDrawer) {
|
|
t12 = (crumb, index) => ({
|
|
id: crumb.id,
|
|
name: crumb.name,
|
|
onClick: index !== breadcrumbs.length - 1 ? () => {
|
|
populateMoveToFolderDrawer(crumb.id);
|
|
} : undefined
|
|
});
|
|
$[31] = breadcrumbs.length;
|
|
$[32] = populateMoveToFolderDrawer;
|
|
$[33] = t12;
|
|
} else {
|
|
t12 = $[33];
|
|
}
|
|
return _jsxs("div", {
|
|
className: baseClass,
|
|
children: [_jsx(DrawerActionHeader, {
|
|
onCancel: t9,
|
|
onSave: t10,
|
|
saveLabel: t("general:select"),
|
|
title: _jsx(DrawerHeading, {
|
|
action: props.action,
|
|
count,
|
|
fromFolderName: fromFolderID ? fromFolderName : undefined,
|
|
title: props.action === "moveItemToFolder" ? props.title : undefined
|
|
})
|
|
}), _jsxs("div", {
|
|
className: `${baseClass}__breadcrumbs-section`,
|
|
children: [_jsx(FolderBreadcrumbs, {
|
|
breadcrumbs: [{
|
|
id: null,
|
|
name: _jsxs("span", {
|
|
className: `${baseClass}__folder-breadcrumbs-root`,
|
|
children: [_jsx(ColoredFolderIcon, {}), t("folder:folders")]
|
|
}),
|
|
onClick: t11
|
|
}, ...breadcrumbs.map(t12)]
|
|
}), subfolders.length > 0 && _jsxs(_Fragment, {
|
|
children: [_jsx(Button, {
|
|
buttonStyle: "pill",
|
|
className: `${baseClass}__add-folder-button`,
|
|
margin: false,
|
|
onClick: () => {
|
|
openFolderDrawer();
|
|
},
|
|
children: t("fields:addLabel", {
|
|
label: getTranslation(folderCollectionConfig.labels?.singular, i18n)
|
|
})
|
|
}), _jsx(FolderDocumentDrawer, {
|
|
initialData: {
|
|
[folderFieldName]: folderID,
|
|
folderType
|
|
},
|
|
onSave: result => {
|
|
onCreateSuccess({
|
|
collectionSlug: folderCollectionConfig.slug,
|
|
doc: result.doc
|
|
});
|
|
closeFolderDrawer();
|
|
},
|
|
redirectAfterCreate: false
|
|
})]
|
|
})]
|
|
}), _jsx(DrawerContentContainer, {
|
|
className: `${baseClass}__body-section`,
|
|
children: subfolders.length > 0 ? FolderResultsComponent : _jsx(NoListResults, {
|
|
Actions: [_jsx(ListCreateNewDocInFolderButton, {
|
|
buttonLabel: `${t("general:create")} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`,
|
|
buttonSize: "medium",
|
|
buttonStyle: "primary",
|
|
collectionSlugs: [folderCollectionSlug],
|
|
folderAssignedCollections: props.folderAssignedCollections,
|
|
onCreateSuccess,
|
|
slugPrefix: "create-new-folder-from-drawer--no-results"
|
|
}, "create-folder")],
|
|
Message: _jsxs(_Fragment, {
|
|
children: [_jsx("h3", {
|
|
children: i18n.t("general:noResultsFound")
|
|
}), _jsx("p", {
|
|
children: i18n.t("general:noResultsDescription")
|
|
})]
|
|
})
|
|
})
|
|
}), !skipConfirmModal && _jsx(ConfirmationModal, {
|
|
body: _jsx(ConfirmationMessage, {
|
|
action: props.action,
|
|
count,
|
|
fromFolderName,
|
|
title: props.action === "moveItemToFolder" ? props.title : undefined,
|
|
toFolderName: getSelectedFolder().name
|
|
}),
|
|
confirmingLabel: t("general:moving"),
|
|
confirmLabel: t("general:move"),
|
|
heading: t("general:confirmMove"),
|
|
modalSlug: confirmModalSlug,
|
|
onConfirm: onConfirmMove
|
|
})]
|
|
});
|
|
}
|
|
function DrawerHeading(props) {
|
|
const $ = _c(14);
|
|
const {
|
|
t
|
|
} = useTranslation();
|
|
switch (props.action) {
|
|
case "moveItemToFolder":
|
|
{
|
|
if (props.fromFolderName) {
|
|
let t0;
|
|
if ($[0] !== props.fromFolderName || $[1] !== props.title || $[2] !== t) {
|
|
t0 = t("folder:movingFromFolder", {
|
|
fromFolder: props.fromFolderName,
|
|
title: props.title
|
|
});
|
|
$[0] = props.fromFolderName;
|
|
$[1] = props.title;
|
|
$[2] = t;
|
|
$[3] = t0;
|
|
} else {
|
|
t0 = $[3];
|
|
}
|
|
return t0;
|
|
} else {
|
|
let t0;
|
|
if ($[4] !== props.title || $[5] !== t) {
|
|
t0 = t("folder:selectFolderForItem", {
|
|
title: props.title
|
|
});
|
|
$[4] = props.title;
|
|
$[5] = t;
|
|
$[6] = t0;
|
|
} else {
|
|
t0 = $[6];
|
|
}
|
|
return t0;
|
|
}
|
|
}
|
|
case "moveItemsToFolder":
|
|
{
|
|
if (props.fromFolderName) {
|
|
const t0 = `${props.count} ${props.count > 1 ? t("general:items") : t("general:item")}`;
|
|
let t1;
|
|
if ($[7] !== props.fromFolderName || $[8] !== t || $[9] !== t0) {
|
|
t1 = t("folder:movingFromFolder", {
|
|
fromFolder: props.fromFolderName,
|
|
title: t0
|
|
});
|
|
$[7] = props.fromFolderName;
|
|
$[8] = t;
|
|
$[9] = t0;
|
|
$[10] = t1;
|
|
} else {
|
|
t1 = $[10];
|
|
}
|
|
return t1;
|
|
} else {
|
|
const t0 = `${props.count} ${props.count > 1 ? t("general:items") : t("general:item")}`;
|
|
let t1;
|
|
if ($[11] !== t || $[12] !== t0) {
|
|
t1 = t("folder:selectFolderForItem", {
|
|
title: t0
|
|
});
|
|
$[11] = t;
|
|
$[12] = t0;
|
|
$[13] = t1;
|
|
} else {
|
|
t1 = $[13];
|
|
}
|
|
return t1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function ConfirmationMessage(props) {
|
|
const $ = _c(14);
|
|
const {
|
|
t
|
|
} = useTranslation();
|
|
switch (props.action) {
|
|
case "moveItemToFolder":
|
|
{
|
|
if (props.toFolderName) {
|
|
let t0;
|
|
if ($[0] !== props.title || $[1] !== props.toFolderName || $[2] !== t) {
|
|
t0 = _jsx(Translation, {
|
|
elements: {
|
|
1: _temp,
|
|
2: _temp2
|
|
},
|
|
i18nKey: "folder:moveItemToFolderConfirmation",
|
|
t,
|
|
variables: {
|
|
title: props.title,
|
|
toFolder: props.toFolderName
|
|
}
|
|
});
|
|
$[0] = props.title;
|
|
$[1] = props.toFolderName;
|
|
$[2] = t;
|
|
$[3] = t0;
|
|
} else {
|
|
t0 = $[3];
|
|
}
|
|
return t0;
|
|
} else {
|
|
let t0;
|
|
if ($[4] !== props.title || $[5] !== t) {
|
|
t0 = _jsx(Translation, {
|
|
elements: {
|
|
1: _temp3
|
|
},
|
|
i18nKey: "folder:moveItemToRootConfirmation",
|
|
t,
|
|
variables: {
|
|
title: props.title
|
|
}
|
|
});
|
|
$[4] = props.title;
|
|
$[5] = t;
|
|
$[6] = t0;
|
|
} else {
|
|
t0 = $[6];
|
|
}
|
|
return t0;
|
|
}
|
|
}
|
|
case "moveItemsToFolder":
|
|
{
|
|
if (props.toFolderName) {
|
|
let t0;
|
|
if ($[7] !== props.count || $[8] !== props.toFolderName || $[9] !== t) {
|
|
t0 = _jsx(Translation, {
|
|
elements: {
|
|
1: _temp4,
|
|
2: _temp5
|
|
},
|
|
i18nKey: "folder:moveItemsToFolderConfirmation",
|
|
t,
|
|
variables: {
|
|
count: props.count,
|
|
label: props.count > 1 ? t("general:items") : t("general:item"),
|
|
toFolder: props.toFolderName
|
|
}
|
|
});
|
|
$[7] = props.count;
|
|
$[8] = props.toFolderName;
|
|
$[9] = t;
|
|
$[10] = t0;
|
|
} else {
|
|
t0 = $[10];
|
|
}
|
|
return t0;
|
|
} else {
|
|
let t0;
|
|
if ($[11] !== props.count || $[12] !== t) {
|
|
t0 = _jsx(Translation, {
|
|
elements: {
|
|
1: _temp6
|
|
},
|
|
i18nKey: "folder:moveItemsToRootConfirmation",
|
|
t,
|
|
variables: {
|
|
count: props.count,
|
|
label: props.count > 1 ? t("general:items") : t("general:item")
|
|
}
|
|
});
|
|
$[11] = props.count;
|
|
$[12] = t;
|
|
$[13] = t0;
|
|
} else {
|
|
t0 = $[13];
|
|
}
|
|
return t0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function _temp6(t0) {
|
|
const {
|
|
children: children_1
|
|
} = t0;
|
|
return _jsx("strong", {
|
|
children: children_1
|
|
});
|
|
}
|
|
function _temp5(t0) {
|
|
const {
|
|
children: children_0
|
|
} = t0;
|
|
return _jsx("strong", {
|
|
children: children_0
|
|
});
|
|
}
|
|
function _temp4(t0) {
|
|
const {
|
|
children
|
|
} = t0;
|
|
return _jsx("strong", {
|
|
children
|
|
});
|
|
}
|
|
function _temp3(t0) {
|
|
const {
|
|
children: children_4
|
|
} = t0;
|
|
return _jsx("strong", {
|
|
children: children_4
|
|
});
|
|
}
|
|
function _temp2(t0) {
|
|
const {
|
|
children: children_3
|
|
} = t0;
|
|
return _jsx("strong", {
|
|
children: children_3
|
|
});
|
|
}
|
|
function _temp(t0) {
|
|
const {
|
|
children: children_2
|
|
} = t0;
|
|
return _jsx("strong", {
|
|
children: children_2
|
|
});
|
|
}
|
|
//# sourceMappingURL=index.js.map |