fix: added date time picker

adolfokrah · Sep 3, 2024 · 4005ea4 · 4005ea4
1 parent ff3aca0
commit 4005ea4
Show file tree

Hide file tree

Showing 13 changed files with 823 additions and 125 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "lucide-react": "^0.417.0",
     "next-themes": "^0.3.0",
     "react-colorful": "^5.6.1",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.0.8",
     "react-hook-form": "^7.52.1",
     "react-image-crop": "^11.0.6",
     "react-jwt": "^1.2.2",

diff --git a/src/components/layout/left-side-bar/page-tab/index.tsx b/src/components/layout/left-side-bar/page-tab/index.tsx
@@ -66,6 +66,7 @@ export default function PagesTab() {
               schedulePublished: page.schedule_published,
               publishDate: page.publish_date ? new Date(page.publish_date) : null,
               folderId: page.folder_id,
+              blocks: page.blocks_dev,
             };
           }),
         );

diff --git a/src/components/layout/right-side-bar/page-settings-tab/page-status-and-visibility.tsx b/src/components/layout/right-side-bar/page-settings-tab/page-status-and-visibility.tsx
@@ -1,12 +1,12 @@
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsTrigger, TabsList } from '@/components/ui/tabs';
-import { SchedulePublished, Status, usePagesState } from '@/lib/states/usePagesState';
+import { Status, usePagesState } from '@/lib/states/usePagesState';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { DatePicker } from '@/components/ui/date-picker';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import usePageSettings from '@/lib/hooks/usePageSettings';
 
 export default function PageStatusAndVisibility() {
-  const { handleUpdatePageDate, updateSchedulePublished, updatePageStatus, page } = usePageSettings();
+  const { handleUpdatePageDate, updatePageStatus, page } = usePageSettings();
   const { pages } = usePagesState();
   const activePage = pages.find((page) => page.active);
   const activeLanguage = activePage?.activeLanguageLocale ?? '';
@@ -15,7 +15,7 @@ export default function PageStatusAndVisibility() {
     <>
       <Label className="!visio-cms-text-gray-300">Status</Label>
       <Tabs
-        value={page?.status?.[activeLanguage] || 'Draft'}
+        value={['Publish', 'Schedule'].includes(page?.status?.[activeLanguage] || 'Draft') ? 'Publish' : 'Draft'}
         className="visio-cms-w-full visio-cms-mt-3"
         onValueChange={(value) => updatePageStatus(value as Status)}
       >
@@ -24,35 +24,41 @@ export default function PageStatusAndVisibility() {
           <TabsTrigger value="Publish">Publish</TabsTrigger>
         </TabsList>
       </Tabs>
-      {page?.status?.[activeLanguage] == 'Publish' && (
-        <div className="visio-cms-mt-3 visio-cms-hidden">
+      {['Publish', 'Schedule'].includes(page?.status?.[activeLanguage] || 'Draft') && (
+        <div className="visio-cms-mt-3 ">
           <Label className="!visio-cms-text-gray-300">Schedule published</Label>
           <div className="visio-cms-my-3">
             <RadioGroup
-              value={page?.schedulePublished || ''}
+              value={page?.status?.[activeLanguage] || ''}
               onValueChange={(value) => {
-                updateSchedulePublished(value as SchedulePublished);
+                updatePageStatus(value as Status);
               }}
             >
               <div className="visio-cms-flex visio-cms-items-center visio-cms-space-x-2">
-                <RadioGroupItem value="Now" id="Now" />
-                <Label htmlFor="Now">Now</Label>
+                <RadioGroupItem value="Publish" id="publish" />
+                <Label htmlFor="publish">Now</Label>
               </div>
               <div className="visio-cms-flex visio-cms-items-center visio-cms-space-x-2">
-                <RadioGroupItem value="Later" id="Later" />
-                <Label htmlFor="Later">Later</Label>
+                <RadioGroupItem value="Schedule" id="schedule" />
+                <Label htmlFor="schedule">Later</Label>
               </div>
             </RadioGroup>
           </div>
-          {page?.schedulePublished === 'Later' && (
+          {page?.status?.[activeLanguage] === 'Schedule' && (
             <>
               <Label className="!visio-cms-text-gray-300">Date & Time</Label>
               <div className="visio-cms-my-3">
-                <DatePicker
-                  key={`${page?.publishDate}`}
-                  selectedDate={page?.publishDate || new Date()}
-                  onSelect={handleUpdatePageDate}
-                  disabled={{ before: new Date() }}
+                <DateTimePicker
+                  disabledDays={{ before: new Date() }}
+                  hourCycle={12}
+                  value={page?.publishDate || new Date()}
+                  onChange={(date) => {
+                    if (page?.publishDate != date) {
+                      if (date) {
+                        handleUpdatePageDate(date);
+                      }
+                    }
+                  }}
                 />
               </div>
             </>

diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { DayPicker } from 'react-day-picker';
 
 import { cn } from '@/lib/utils';
@@ -52,10 +51,6 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         day_hidden: 'visio-cms-invisible',
         ...classNames,
       }}
-      components={{
-        IconLeft: () => <ChevronLeftIcon className="visio-cms-h-4 visio-cms-w-4" />,
-        IconRight: () => <ChevronRightIcon className="visio-cms-h-4 visio-cms-w-4" />,
-      }}
       {...props}
     />
   );

diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx