[WEB-759] style: added calendar layout responsiveness (#3969)

* style: added calendar layout responsiveness * fix: quick-add-form * fix: popover menu close on item select * fix: class conditiion * code review
makeplane · Mar 18, 2024 · e9774e1 · e9774e1
1 parent 4a93fdb
commit e9774e1
Show file tree

Hide file tree

Showing 11 changed files with 343 additions and 165 deletions.
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -1,9 +1,11 @@
+import { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
+import useSize from "hooks/use-window-size";
 // components
 // ui
 import { Spinner } from "@plane/ui";
-import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
+import { CalendarHeader, CalendarIssueBlocks, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
 // types
 import {
   IIssueDisplayFilterOptions,
@@ -15,6 +17,9 @@ import {
   TIssueMap,
 } from "@plane/types";
 import { ICalendarWeek } from "./types";
+// helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // constants
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
@@ -24,6 +29,7 @@ import { ICycleIssuesFilter } from "store/issue/cycle";
 import { IModuleIssuesFilter } from "store/issue/module";
 import { IProjectIssuesFilter } from "store/issue/project";
 import { IProjectViewIssuesFilter } from "store/issue/project-views";
+import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
@@ -62,6 +68,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     updateFilters,
     readOnly = false,
   } = props;
+  // states
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   // store hooks
   const {
     issues: { viewFlags },
@@ -70,6 +78,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const [windowWidth] = useSize();
 
   const { enableIssueCreation } = viewFlags || {};
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -78,25 +87,39 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
 
   const allWeeksOfActiveMonth = issueCalendarView.allWeeksOfActiveMonth;
 
-  if (!calendarPayload)
+  const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
+
+  if (!calendarPayload || !formattedDatePayload)
     return (
       <div className="grid h-full w-full place-items-center">
         <Spinner />
       </div>
     );
 
+  const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
+
   return (
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
-        <CalendarHeader issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
-        <div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
+        <CalendarHeader
+          setSelectedDate={setSelectedDate}
+          issuesFilterStore={issuesFilterStore}
+          updateFilters={updateFilters}
+        />
+        <div
+          className={cn("flex md:h-full w-full flex-col overflow-y-auto", {
+            "vertical-scrollbar scrollbar-lg": windowWidth > 768,
+          })}
+        >
           <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
           <div className="h-full w-full">
             {layout === "month" && (
               <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
                 {allWeeksOfActiveMonth &&
                   Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                     <CalendarWeekDays
+                      selectedDate={selectedDate}
+                      setSelectedDate={setSelectedDate}
                       issuesFilterStore={issuesFilterStore}
                       key={weekIndex}
                       week={week}
@@ -115,6 +138,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
             )}
             {layout === "week" && (
               <CalendarWeekDays
+                selectedDate={selectedDate}
+                setSelectedDate={setSelectedDate}
                 issuesFilterStore={issuesFilterStore}
                 week={issueCalendarView.allDaysOfActiveWeek}
                 issues={issues}
@@ -129,6 +154,28 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               />
             )}
           </div>
+
+          {/* mobile view */}
+          <div className="md:hidden">
+            <p className="p-4 text-xl font-semibold">
+              {`${selectedDate.getDate()} ${
+                MONTHS_LIST[selectedDate.getMonth() + 1].title
+              }, ${selectedDate.getFullYear()}`}
+            </p>
+            <CalendarIssueBlocks
+              date={selectedDate}
+              issues={issues}
+              issueIdList={issueIdList}
+              quickActions={quickActions}
+              enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+              quickAddCallback={quickAddCallback}
+              addIssuesToView={addIssuesToView}
+              viewId={viewId}
+              readOnly={readOnly}
+              isDragDisabled
+            />
+          </div>
         </div>
       </div>
     </>

diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -1,10 +1,10 @@
-import { useState } from "react";
 import { Droppable } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // components
-import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues";
+import { CalendarIssueBlocks, ICalendarDate } from "components/issues";
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // constants
 import { MONTHS_LIST } from "constants/calendar";
 // types
@@ -31,6 +31,8 @@ type Props = {
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
@@ -46,8 +48,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     addIssuesToView,
     viewId,
     readOnly = false,
+    selectedDate,
+    setSelectedDate,
   } = props;
-  const [showAllIssues, setShowAllIssues] = useState(false);
+
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
 
   const formattedDatePayload = renderFormattedPayloadDate(date.date);
@@ -57,13 +61,14 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const totalIssues = issueIdList?.length ?? 0;
 
   const isToday = date.date.toDateString() === new Date().toDateString();
+  const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
 
   return (
     <>
       <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
         {/* header */}
         <div
-          className={`flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
+          className={`hidden md:flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
             calendarLayout === "month" // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
@@ -86,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
         </div>
 
         {/* content */}
-        <div className="h-full w-full">
+        <div className="h-full w-full hidden md:block">
           <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
             {(provided, snapshot) => (
               <div
@@ -99,46 +104,45 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                 ref={provided.innerRef}
               >
                 <CalendarIssueBlocks
+                  date={date.date}
                   issues={issues}
                   issueIdList={issueIdList}
                   quickActions={quickActions}
-                  showAllIssues={showAllIssues}
                   isDragDisabled={readOnly}
+                  addIssuesToView={addIssuesToView}
+                  disableIssueCreation={disableIssueCreation}
+                  enableQuickIssueCreate={enableQuickIssueCreate}
+                  quickAddCallback={quickAddCallback}
+                  viewId={viewId}
+                  readOnly={readOnly}
                 />
-
-                {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
-                  <div className="px-2 py-1">
-                    <CalendarQuickAddIssueForm
-                      formKey="target_date"
-                      groupId={formattedDatePayload}
-                      prePopulatedData={{
-                        target_date: renderFormattedPayloadDate(date.date) ?? undefined,
-                      }}
-                      quickAddCallback={quickAddCallback}
-                      addIssuesToView={addIssuesToView}
-                      viewId={viewId}
-                      onOpen={() => setShowAllIssues(true)}
-                    />
-                  </div>
-                )}
-
-                {totalIssues > 4 && (
-                  <div className="flex items-center px-2.5 py-1">
-                    <button
-                      type="button"
-                      className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium  hover:bg-custom-background-80 hover:text-custom-text-300"
-                      onClick={() => setShowAllIssues((prevData) => !prevData)}
-                    >
-                      {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-                    </button>
-                  </div>
-                )}
-
                 {provided.placeholder}
               </div>
             )}
           </Droppable>
         </div>
+
+        {/* Mobile view content */}
+        <div
+          onClick={() => setSelectedDate(date.date)}
+          className={cn(
+            "text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer",
+            {
+              "bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
+            }
+          )}
+        >
+          <div
+            className={cn("h-6 w-6  rounded-full flex items-center justify-center ", {
+              "bg-custom-primary-100 text-white": isSelectedDate,
+              "bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
+            })}
+          >
+            {date.date.getDate()}
+          </div>
+
+          {totalIssues > 0 && <div className="flex flex-shrink-0 h-1.5 w-1.5 bg-custom-primary-100 rounded mt-1" />}
+        </div>
       </div>
     </>
   );

diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -4,9 +4,10 @@ import { useRouter } from "next/router";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // hooks
+import useSize from "hooks/use-window-size";
 // ui
 // icons
-import { Check, ChevronUp } from "lucide-react";
+import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
 import { ToggleSwitch } from "@plane/ui";
 // types
 import {
@@ -41,6 +42,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
   const { projectId } = router.query;
 
   const issueCalendarView = useCalendarView();
+  const [windowWidth] = useSize();
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -60,7 +62,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
   const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
   const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
-  const handleLayoutChange = (layout: TCalendarLayouts) => {
+  const handleLayoutChange = (layout: TCalendarLayouts, closePopover: any) => {
     if (!projectId || !updateFilters) return;
 
     updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
@@ -75,6 +77,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
         ? issueCalendarView.calendarFilters.activeMonthDate
         : issueCalendarView.calendarFilters.activeWeekDate
     );
+    if (windowWidth <= 768) closePopover(); // close the popover on mobile
   };
 
   const handleToggleWeekends = () => {
@@ -92,21 +95,24 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
 
   return (
     <Popover className="relative">
-      {({ open }) => (
+      {({ open, close: closePopover }) => (
         <>
           <Popover.Button as={React.Fragment}>
-            <button
-              type="button"
-              ref={setReferenceElement}
-              className={`flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
-                open ? "text-custom-text-100" : "text-custom-text-200"
-              }`}
-            >
-              <div className="font-medium">Options</div>
+            <button type="button" ref={setReferenceElement}>
               <div
-                className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                className={`hidden md:flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
               >
-                <ChevronUp width={12} strokeWidth={2} />
+                <div className="font-medium">Options</div>
+                <div
+                  className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                >
+                  <ChevronUp width={12} strokeWidth={2} />
+                </div>
+              </div>
+              <div className="md:hidden">
+                <MoreVerticalIcon className="h-4 text-custom-text-200" strokeWidth={2} />
               </div>
             </button>
           </Popover.Button>
@@ -132,7 +138,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                       key={layout}
                       type="button"
                       className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
-                      onClick={() => handleLayoutChange(layoutDetails.key)}
+                      onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
                     >
                       {layoutDetails.title}
                       {calendarLayout === layout && <Check size={12} strokeWidth={2} />}
@@ -144,7 +150,12 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                     onClick={handleToggleWeekends}
                   >
                     Show weekends
-                    <ToggleSwitch value={showWeekends} onChange={() => {}} />
+                    <ToggleSwitch
+                      value={showWeekends}
+                      onChange={() => {
+                        if (windowWidth <= 768) closePopover(); // close the popover on mobile
+                      }}
+                    />
                   </button>
                 </div>
               </div>

diff --git a/web/components/issues/issue-layouts/calendar/header.tsx b/web/components/issues/issue-layouts/calendar/header.tsx
@@ -24,10 +24,11 @@ interface ICalendarHeader {
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
   ) => Promise<void>;
+  setSelectedDate: (date: Date) => void;
 }
 
 export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
-  const { issuesFilterStore, updateFilters } = props;
+  const { issuesFilterStore, updateFilters, setSelectedDate } = props;
 
   const issueCalendarView = useCalendarView();
 
@@ -91,6 +92,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
       activeMonthDate: firstDayOfCurrentMonth,
       activeWeekDate: today,
     });
+    setSelectedDate(today);
   };
 
   return (

diff --git a/web/components/issues/issue-layouts/calendar/index.ts b/web/components/issues/issue-layouts/calendar/index.ts
@@ -5,6 +5,8 @@ export * from "./types.d";
 export * from "./day-tile";
 export * from "./header";
 export * from "./issue-blocks";
+export * from "./issue-block-root";
+export * from "./issue-block";
 export * from "./week-days";
 export * from "./week-header";
 export * from "./quick-add-issue-form";