@payloadcms/next 3.0.0-canary.03427d3 → 3.0.0-canary.0374de4

package/dist/views/Edit/Default/index.js

@@ -1,9 +1,12 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DocumentControls, DocumentFields, Form, OperationProvider, Upload, useAuth, useComponentMap, useConfig, useDocumentEvents, useDocumentInfo, useEditDepth, useFormQueryParams } from '@payloadcms/ui/client';
-import { getFormState } from '@payloadcms/ui/shared';
+import { DocumentControls, DocumentFields, Form, OperationProvider, RenderComponent, Upload, useAuth, useConfig, useDocumentEvents, useDocumentInfo, useEditDepth, useUploadEdits } from '@payloadcms/ui';
+import { formatAdminURL, getFormState } from '@payloadcms/ui/shared';
 import { useRouter, useSearchParams } from 'next/navigation.js';
-import React, { Fragment, useCallback } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { DocumentLocked } from '../../../elements/DocumentLocked/index.js';
+import { DocumentTakeOver } from '../../../elements/DocumentTakeOver/index.js';
 import { LeaveWithoutSaving } from '../../../elements/LeaveWithoutSaving/index.js';
 import { Auth } from './Auth/index.js';
 import { SetDocumentStepNav } from './SetDocumentStepNav/index.js';
@@ -12,182 +15,363 @@ const baseClass = 'collection-edit';
 // This component receives props only on _pages_
 // When rendered within a drawer, props are empty
 // This is solely to support custom edit views which get server-rendered
-export const DefaultEditView = ()=>{
-    const { id, AfterDocument, AfterFields, BeforeDocument, BeforeFields, action, apiURL, collectionSlug, disableActions, disableLeaveWithoutSaving, docPermissions, getDocPreferences, getVersions, globalSlug, hasPublishPermission, hasSavePermission, initialData: data, initialState, isEditing, isInitializing, onSave: onSaveFromContext } = useDocumentInfo();
-    const { refreshCookieAsync, user } = useAuth();
-    const config = useConfig();
-    const router = useRouter();
-    const { dispatchFormQueryParams } = useFormQueryParams();
-    const { getFieldMap } = useComponentMap();
-    const params = useSearchParams();
-    const depth = useEditDepth();
-    const { reportUpdate } = useDocumentEvents();
-    const { admin: { user: userSlug }, collections, globals, routes: { admin: adminRoute, api: apiRoute }, serverURL } = config;
-    const locale = params.get('locale');
-    const collectionConfig = collectionSlug && collections.find((collection)=>collection.slug === collectionSlug);
-    const globalConfig = globalSlug && globals.find((global)=>global.slug === globalSlug);
-    const entitySlug = collectionConfig?.slug || globalConfig?.slug;
-    const fieldMap = getFieldMap({
-        collectionSlug: collectionConfig?.slug,
-        globalSlug: globalConfig?.slug
+export const DefaultEditView = () => {
+  const {
+    id,
+    action,
+    AfterDocument,
+    AfterFields,
+    apiURL,
+    BeforeDocument,
+    BeforeFields,
+    collectionSlug,
+    currentEditor,
+    disableActions,
+    disableCreate,
+    disableLeaveWithoutSaving,
+    docPermissions,
+    documentIsLocked,
+    getDocPreferences,
+    getVersions,
+    globalSlug,
+    hasPublishPermission,
+    hasSavePermission,
+    initialData: data,
+    initialState,
+    isEditing,
+    isInitializing,
+    onDelete,
+    onDrawerCreate,
+    onDuplicate,
+    onSave: onSaveFromContext,
+    redirectAfterDelete,
+    redirectAfterDuplicate,
+    setCurrentEditor,
+    setDocumentIsLocked,
+    unlockDocument,
+    updateDocumentEditor
+  } = useDocumentInfo();
+  const {
+    refreshCookieAsync,
+    user
+  } = useAuth();
+  const {
+    config,
+    config: {
+      admin: {
+        user: userSlug
+      },
+      routes: {
+        admin: adminRoute,
+        api: apiRoute
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  const router = useRouter();
+  const depth = useEditDepth();
+  const params = useSearchParams();
+  const {
+    reportUpdate
+  } = useDocumentEvents();
+  const {
+    resetUploadEdits
+  } = useUploadEdits();
+  const locale = params.get('locale');
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const globalConfig = getEntityConfig({
+    globalSlug
+  });
+  const entitySlug = collectionConfig?.slug || globalConfig?.slug;
+  const operation = collectionSlug && !id ? 'create' : 'update';
+  const auth = collectionConfig ? collectionConfig.auth : undefined;
+  const upload = collectionConfig ? collectionConfig.upload : undefined;
+  const docConfig = collectionConfig || globalConfig;
+  const lockWhenEditingProp = docConfig?.lockWhenEditing !== undefined ? docConfig?.lockWhenEditing : true;
+  const isLockingEnabled = lockWhenEditingProp === true || typeof lockWhenEditingProp === 'object';
+  const preventLeaveWithoutSaving = (!(collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.autosave) || !(globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave)) && !disableLeaveWithoutSaving;
+  const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false);
+  const [showTakeOverModal, setShowTakeOverModal] = useState(false);
+  const documentLockStateRef = useRef({
+    hasShownLockedModal: false,
+    isLocked: false,
+    user: null
+  });
+  const [lastUpdateTime, setLastUpdateTime] = useState(Date.now());
+  const classes = [baseClass, (id || globalSlug) && `${baseClass}--is-editing`];
+  if (globalSlug) {
+    classes.push(`global-edit--${globalSlug}`);
+  }
+  if (collectionSlug) {
+    classes.push(`collection-edit--${collectionSlug}`);
+  }
+  const [schemaPath, setSchemaPath] = useState(() => {
+    if (operation === 'create' && auth && !auth.disableLocalStrategy) {
+      return `_${entitySlug}.auth`;
+    }
+    return entitySlug;
+  });
+  const [validateBeforeSubmit, setValidateBeforeSubmit] = useState(() => {
+    if (operation === 'create' && auth && !auth.disableLocalStrategy) {
+      return true;
+    }
+    return false;
+  });
+  const handleTakeOver = useCallback(() => {
+    if (!isLockingEnabled) {
+      return;
+    }
+    try {
+      // Call updateDocumentEditor to update the document's owner to the current user
+      void updateDocumentEditor(id, collectionSlug ?? globalSlug, user);
+      documentLockStateRef.current.hasShownLockedModal = true;
+      // Update the locked state to reflect the current user as the owner
+      documentLockStateRef.current = {
+        hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal,
+        isLocked: true,
+        user
+      };
+      setCurrentEditor(user);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error during document takeover:', error);
+    }
+  }, [updateDocumentEditor, id, collectionSlug, globalSlug, user, setCurrentEditor, isLockingEnabled]);
+  const handleTakeOverWithinDoc = useCallback(() => {
+    if (!isLockingEnabled) {
+      return;
+    }
+    try {
+      // Call updateDocumentEditor to update the document's owner to the current user
+      void updateDocumentEditor(id, collectionSlug ?? globalSlug, user);
+      // Update the locked state to reflect the current user as the owner
+      documentLockStateRef.current = {
+        hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal,
+        isLocked: true,
+        user
+      };
+      setCurrentEditor(user);
+      // Ensure the document is editable for the incoming user
+      setIsReadOnlyForIncomingUser(false);
+    } catch (error_0) {
+      // eslint-disable-next-line no-console
+      console.error('Error during document takeover:', error_0);
+    }
+  }, [updateDocumentEditor, id, collectionSlug, globalSlug, user, setCurrentEditor, isLockingEnabled]);
+  const handleGoBack = useCallback(() => {
+    const redirectRoute = formatAdminURL({
+      adminRoute,
+      path: collectionSlug ? `/collections/${collectionSlug}` : '/'
     });
-    const operation = collectionSlug && !id ? 'create' : 'update';
-    const auth = collectionConfig ? collectionConfig.auth : undefined;
-    const upload = collectionConfig ? collectionConfig.upload : undefined;
-    const preventLeaveWithoutSaving = (!(collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.autosave) || !(globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave)) && !disableLeaveWithoutSaving;
-    const classes = [
-        baseClass,
-        id && `${baseClass}--is-editing`
-    ].filter(Boolean).join(' ');
-    const onSave = useCallback((json)=>{
-        reportUpdate({
-            id,
-            entitySlug,
-            updatedAt: json?.result?.updatedAt || new Date().toISOString()
-        });
-        // If we're editing the doc of the logged-in user,
-        // Refresh the cookie to get new permissions
-        if (user && collectionSlug === userSlug && id === user.id) {
-            void refreshCookieAsync();
-        }
-        void getVersions();
-        if (typeof onSaveFromContext === 'function') {
-            void onSaveFromContext({
-                ...json,
-                operation: id ? 'update' : 'create'
-            });
-        }
-        if (!isEditing && depth < 2) {
-            // Redirect to the same locale if it's been set
-            const redirectRoute = `${adminRoute}/collections/${collectionSlug}/${json?.doc?.id}${locale ? `?locale=${locale}` : ''}`;
-            router.push(redirectRoute);
-        } else {
-            dispatchFormQueryParams({
-                type: 'SET',
-                params: {
-                    uploadEdits: null
-                }
-            });
-        }
-    }, [
-        onSaveFromContext,
-        userSlug,
-        reportUpdate,
-        id,
-        entitySlug,
-        user,
-        depth,
-        collectionSlug,
-        getVersions,
-        isEditing,
-        refreshCookieAsync,
+    router.push(redirectRoute);
+  }, [adminRoute, collectionSlug, router]);
+  const handleBackToDashboard = useCallback(() => {
+    setShowTakeOverModal(false);
+    const redirectRoute_0 = formatAdminURL({
+      adminRoute,
+      path: '/'
+    });
+    router.push(redirectRoute_0);
+  }, [adminRoute, router]);
+  const onSave = useCallback(json => {
+    reportUpdate({
+      id,
+      entitySlug,
+      updatedAt: json?.result?.updatedAt || new Date().toISOString()
+    });
+    // If we're editing the doc of the logged-in user,
+    // Refresh the cookie to get new permissions
+    if (user && collectionSlug === userSlug && id === user.id) {
+      void refreshCookieAsync();
+    }
+    void getVersions();
+    if (typeof onSaveFromContext === 'function') {
+      void onSaveFromContext({
+        ...json,
+        operation: id ? 'update' : 'create'
+      });
+    }
+    // Unlock the document after save
+    if ((id || globalSlug) && isLockingEnabled) {
+      setDocumentIsLocked(false);
+    }
+    if (!isEditing && depth < 2) {
+      // Redirect to the same locale if it's been set
+      const redirectRoute_1 = formatAdminURL({
         adminRoute,
-        locale,
-        router,
-        dispatchFormQueryParams
-    ]);
-    const onChange = useCallback(async ({ formState: prevFormState })=>{
-        const docPreferences = await getDocPreferences();
-        return getFormState({
-            apiRoute,
-            body: {
-                id,
-                collectionSlug,
-                docPreferences,
-                formState: prevFormState,
-                globalSlug,
-                operation,
-                schemaPath: entitySlug
-            },
-            serverURL
-        });
-    }, [
-        serverURL,
-        apiRoute,
+        path: `/collections/${collectionSlug}/${json?.doc?.id}${locale ? `?locale=${locale}` : ''}`
+      });
+      router.push(redirectRoute_1);
+    } else {
+      resetUploadEdits();
+    }
+  }, [onSaveFromContext, userSlug, reportUpdate, id, entitySlug, user, depth, collectionSlug, getVersions, isEditing, refreshCookieAsync, adminRoute, router, locale, resetUploadEdits, globalSlug, isLockingEnabled, setDocumentIsLocked]);
+  const onChange = useCallback(async ({
+    formState: prevFormState
+  }) => {
+    const currentTime = Date.now();
+    const timeSinceLastUpdate = currentTime - lastUpdateTime;
+    const updateLastEdited = isLockingEnabled && timeSinceLastUpdate >= 10000 // 10 seconds
+    ;
+    if (updateLastEdited) {
+      setLastUpdateTime(currentTime);
+    }
+    const docPreferences = await getDocPreferences();
+    const {
+      lockedState,
+      state
+    } = await getFormState({
+      apiRoute,
+      body: {
         id,
-        operation,
-        entitySlug,
         collectionSlug,
+        docPreferences,
+        formState: prevFormState,
         globalSlug,
-        getDocPreferences
-    ]);
-    return /*#__PURE__*/ _jsx("main", {
-        className: classes,
-        children: /*#__PURE__*/ _jsx(OperationProvider, {
-            operation: operation,
-            children: /*#__PURE__*/ _jsxs(Form, {
-                action: action,
-                className: `${baseClass}__form`,
-                disableValidationOnSubmit: true,
-                disabled: isInitializing || !hasSavePermission,
-                initialState: !isInitializing && initialState,
-                isInitializing: isInitializing,
-                method: id ? 'PATCH' : 'POST',
-                onChange: [
-                    onChange
-                ],
-                onSuccess: onSave,
-                children: [
-                    BeforeDocument,
-                    preventLeaveWithoutSaving && /*#__PURE__*/ _jsx(LeaveWithoutSaving, {}),
-                    /*#__PURE__*/ _jsx(SetDocumentStepNav, {
-                        collectionSlug: collectionConfig?.slug,
-                        globalSlug: globalConfig?.slug,
-                        id: id,
-                        pluralLabel: collectionConfig?.labels?.plural,
-                        useAsTitle: collectionConfig?.admin?.useAsTitle
-                    }),
-                    /*#__PURE__*/ _jsx(SetDocumentTitle, {
-                        collectionConfig: collectionConfig,
-                        config: config,
-                        fallback: depth <= 1 ? id?.toString() : undefined,
-                        globalConfig: globalConfig
-                    }),
-                    /*#__PURE__*/ _jsx(DocumentControls, {
-                        apiURL: apiURL,
-                        data: data,
-                        disableActions: disableActions,
-                        hasPublishPermission: hasPublishPermission,
-                        hasSavePermission: hasSavePermission,
-                        id: id,
-                        isEditing: isEditing,
-                        permissions: docPermissions,
-                        slug: collectionConfig?.slug || globalConfig?.slug
-                    }),
-                    /*#__PURE__*/ _jsx(DocumentFields, {
-                        AfterFields: AfterFields,
-                        BeforeFields: BeforeFields || /*#__PURE__*/ _jsxs(Fragment, {
-                            children: [
-                                auth && /*#__PURE__*/ _jsx(Auth, {
-                                    className: `${baseClass}__auth`,
-                                    collectionSlug: collectionConfig.slug,
-                                    disableLocalStrategy: collectionConfig.auth?.disableLocalStrategy,
-                                    email: data?.email,
-                                    operation: operation,
-                                    readOnly: !hasSavePermission,
-                                    requirePassword: !id,
-                                    useAPIKey: auth.useAPIKey,
-                                    verify: auth.verify
-                                }),
-                                upload && /*#__PURE__*/ _jsx(React.Fragment, {
-                                    children: /*#__PURE__*/ _jsx(Upload, {
-                                        collectionSlug: collectionConfig.slug,
-                                        initialState: initialState,
-                                        uploadConfig: upload
-                                    })
-                                })
-                            ]
-                        }),
-                        docPermissions: docPermissions,
-                        fieldMap: fieldMap,
-                        readOnly: !hasSavePermission,
-                        schemaPath: entitySlug
-                    }),
-                    AfterDocument
-                ]
-            })
-        })
+        operation,
+        returnLockStatus: isLockingEnabled ? true : false,
+        schemaPath,
+        updateLastEdited
+      },
+      serverURL
     });
+    setDocumentIsLocked(true);
+    if (isLockingEnabled) {
+      const previousOwnerId = documentLockStateRef.current?.user?.id;
+      if (lockedState) {
+        if (!documentLockStateRef.current || lockedState.user.id !== previousOwnerId) {
+          if (previousOwnerId === user.id && lockedState.user.id !== user.id) {
+            setShowTakeOverModal(true);
+            documentLockStateRef.current.hasShownLockedModal = true;
+          }
+          documentLockStateRef.current = documentLockStateRef.current = {
+            hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal || false,
+            isLocked: true,
+            user: lockedState.user
+          };
+          setCurrentEditor(lockedState.user);
+        }
+      }
+    }
+    return state;
+  }, [apiRoute, collectionSlug, schemaPath, getDocPreferences, globalSlug, id, operation, serverURL, user, documentLockStateRef, setCurrentEditor, isLockingEnabled, setDocumentIsLocked, lastUpdateTime]);
+  // Clean up when the component unmounts or when the document is unlocked
+  useEffect(() => {
+    return () => {
+      if (!isLockingEnabled) {
+        return;
+      }
+      if ((id || globalSlug) && documentIsLocked) {
+        // Check if this user is still the current editor
+        if (documentLockStateRef.current?.user?.id === user.id) {
+          void unlockDocument(id, collectionSlug ?? globalSlug);
+          setDocumentIsLocked(false);
+          setCurrentEditor(null);
+        }
+      }
+      setShowTakeOverModal(false);
+    };
+  }, [collectionSlug, globalSlug, id, unlockDocument, user.id, setCurrentEditor, isLockingEnabled, documentIsLocked, setDocumentIsLocked]);
+  const shouldShowDocumentLockedModal = documentIsLocked && currentEditor && currentEditor.id !== user.id && !isReadOnlyForIncomingUser && !showTakeOverModal && !documentLockStateRef.current?.hasShownLockedModal;
+  return /*#__PURE__*/_jsx("main", {
+    className: classes.filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsx(OperationProvider, {
+      operation: operation,
+      children: /*#__PURE__*/_jsxs(Form, {
+        action: action,
+        className: `${baseClass}__form`,
+        disabled: isReadOnlyForIncomingUser || isInitializing || !hasSavePermission,
+        disableValidationOnSubmit: !validateBeforeSubmit,
+        initialState: !isInitializing && initialState,
+        isInitializing: isInitializing,
+        method: id ? 'PATCH' : 'POST',
+        onChange: [onChange],
+        onSuccess: onSave,
+        children: [BeforeDocument, isLockingEnabled && shouldShowDocumentLockedModal && !isReadOnlyForIncomingUser && /*#__PURE__*/_jsx(DocumentLocked, {
+          editedAt: lastUpdateTime,
+          handleGoBack: handleGoBack,
+          isActive: shouldShowDocumentLockedModal,
+          onReadOnly: () => {
+            setIsReadOnlyForIncomingUser(true);
+            setShowTakeOverModal(false);
+          },
+          onTakeOver: handleTakeOver,
+          user: currentEditor
+        }), isLockingEnabled && showTakeOverModal && /*#__PURE__*/_jsx(DocumentTakeOver, {
+          handleBackToDashboard: handleBackToDashboard,
+          isActive: showTakeOverModal,
+          onReadOnly: () => {
+            setIsReadOnlyForIncomingUser(true);
+            setShowTakeOverModal(false);
+          }
+        }), !isReadOnlyForIncomingUser && preventLeaveWithoutSaving && /*#__PURE__*/_jsx(LeaveWithoutSaving, {}), /*#__PURE__*/_jsx(SetDocumentStepNav, {
+          collectionSlug: collectionConfig?.slug,
+          globalSlug: globalConfig?.slug,
+          id: id,
+          pluralLabel: collectionConfig?.labels?.plural,
+          useAsTitle: collectionConfig?.admin?.useAsTitle
+        }), /*#__PURE__*/_jsx(SetDocumentTitle, {
+          collectionConfig: collectionConfig,
+          config: config,
+          fallback: depth <= 1 ? id?.toString() : undefined,
+          globalConfig: globalConfig
+        }), /*#__PURE__*/_jsx(DocumentControls, {
+          apiURL: apiURL,
+          data: data,
+          disableActions: disableActions,
+          disableCreate: disableCreate,
+          hasPublishPermission: hasPublishPermission,
+          hasSavePermission: hasSavePermission,
+          id: id,
+          isEditing: isEditing,
+          onDelete: onDelete,
+          onDrawerCreate: onDrawerCreate,
+          onDuplicate: onDuplicate,
+          onSave: onSave,
+          onTakeOver: handleTakeOverWithinDoc,
+          permissions: docPermissions,
+          readOnlyForIncomingUser: isReadOnlyForIncomingUser,
+          redirectAfterDelete: redirectAfterDelete,
+          redirectAfterDuplicate: redirectAfterDuplicate,
+          slug: collectionConfig?.slug || globalConfig?.slug,
+          user: currentEditor
+        }), /*#__PURE__*/_jsx(DocumentFields, {
+          AfterFields: AfterFields,
+          BeforeFields: BeforeFields || /*#__PURE__*/_jsxs(Fragment, {
+            children: [auth && /*#__PURE__*/_jsx(Auth, {
+              className: `${baseClass}__auth`,
+              collectionSlug: collectionConfig.slug,
+              disableLocalStrategy: collectionConfig.auth?.disableLocalStrategy,
+              email: data?.email,
+              loginWithUsername: auth?.loginWithUsername,
+              operation: operation,
+              readOnly: !hasSavePermission,
+              requirePassword: !id,
+              setSchemaPath: setSchemaPath,
+              setValidateBeforeSubmit: setValidateBeforeSubmit,
+              useAPIKey: auth.useAPIKey,
+              username: data?.username,
+              verify: auth.verify
+            }), upload && /*#__PURE__*/_jsx(React.Fragment, {
+              children: collectionConfig?.admin?.components?.edit?.Upload ? /*#__PURE__*/_jsx(RenderComponent, {
+                mappedComponent: collectionConfig.admin.components.edit.Upload
+              }) : /*#__PURE__*/_jsx(Upload, {
+                collectionSlug: collectionConfig.slug,
+                initialState: initialState,
+                uploadConfig: upload
+              })
+            })]
+          }),
+          docPermissions: docPermissions,
+          fields: (collectionConfig || globalConfig)?.fields,
+          readOnly: isReadOnlyForIncomingUser || !hasSavePermission,
+          schemaPath: schemaPath
+        }), AfterDocument]
+      })
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map