feat: [v2] prevent scheduled publishing with past date/time

Author: stevenle

packages/root-cms/ui/components/DocActionsMenu/DocActionsMenu.tsx

@@ -238,7 +238,7 @@ export function DocActionsMenu(props: DocActionsMenuProps) {
         icon={<IconCopy size={20} />}
         onClick={() => copyDocModal.open()}
       >
-        Copy
+        Copy to...
       </Menu.Item>
       {sys.modifiedAt &&
         sys.publishedAt &&

packages/root-cms/ui/components/PublishDocModal/PublishDocModal.tsx

@@ -1,7 +1,7 @@
 import {Accordion, Button, Loader} from '@mantine/core';
 import {ContextModalProps, useModals} from '@mantine/modals';
 import {showNotification} from '@mantine/notifications';
-import {useState, useRef} from 'preact/hooks';
+import {useState, useRef, useEffect} from 'preact/hooks';
 import {DocDiffViewer} from '@/components/DocDiffViewer/DocDiffViewer.js';
 import {Text} from '@/components/Text/Text.js';
 import {dbPublishDoc, dbScheduleDoc} from '@/db/docs.js';
@@ -44,6 +44,19 @@ export function PublishDocModal(
   const modals = useModals();
   const modalTheme = useModalTheme();
 
+  const [currentDateTime, setCurrentDateTime] = useState('');
+
+  // This will update the current date and time every time the component renders.
+  useEffect(() => {
+    const now = new Date();
+    const localISOTime = new Date(
+      now.getTime() - now.getTimezoneOffset() * 60000
+    )
+      .toISOString()
+      .slice(0, 16); // Format to "YYYY-MM-DDTHH:mm"
+    setCurrentDateTime(localISOTime);
+  }, []);
+
   const buttonLabel = publishType === 'scheduled' ? 'Schedule' : 'Publish';
 
   async function publish() {
@@ -70,8 +83,18 @@ export function PublishDocModal(
 
   async function schedule() {
     try {
-      setLoading(true);
       const millis = Math.floor(new Date(scheduledDate).getTime());
+      const now = Math.floor(new Date().getTime());
+      if (millis <= now) {
+        showNotification({
+          title: 'Schedule failed',
+          message: `Failed to schedule ${props.docId}. Please choose a date/time in the future when using the scheduled publishing.`,
+          color: 'red',
+          autoClose: false,
+        });
+        return;
+      }
+      setLoading(true);
       await dbScheduleDoc(props.docId, millis);
       setLoading(false);
       showNotification({
@@ -182,6 +205,7 @@ export function PublishDocModal(
                     ref={dateTimeRef}
                     type="datetime-local"
                     disabled={publishType !== 'scheduled'}
+                    min={currentDateTime}
                     value={scheduledDate}
                     onChange={(e: Event) => {
                       const target = e.target as HTMLInputElement;