chore: select start date option for issue (#1813)

makeplane · Aug 9, 2023 · 4fcd081 · 4fcd081
1 parent 5f1209f
commit 4fcd081
Show file tree

Hide file tree

Showing 16 changed files with 242 additions and 29 deletions.
diff --git a/apps/app/components/core/activity.tsx b/apps/app/components/core/activity.tsx
@@ -428,6 +428,40 @@ const activityDetails: {
     ),
     icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
   },
+  start_date: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the start date
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the start date to{" "}
+            <span className="font-medium text-custom-text-100">
+              {renderShortDateWithYearFormat(activity.new_value)}
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
+  },
   state: {
     message: (activity, showIssue) => (
       <>

diff --git a/apps/app/components/core/views/board-view/single-issue.tsx b/apps/app/components/core/views/board-view/single-issue.tsx
@@ -24,6 +24,7 @@ import {
   ViewEstimateSelect,
   ViewIssueLabel,
   ViewPrioritySelect,
+  ViewStartDateSelect,
   ViewStateSelect,
 } from "components/issues";
 // ui
@@ -322,6 +323,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
+            {properties.start_date && issue.start_date && (
+              <ViewStartDateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                user={user}
+                isNotAllowed={isNotAllowed}
+              />
+            )}
             {properties.due_date && issue.target_date && (
               <ViewDueDateSelect
                 issue={issue}

diff --git a/apps/app/components/core/views/calendar-view/single-issue.tsx b/apps/app/components/core/views/calendar-view/single-issue.tsx
@@ -21,6 +21,7 @@ import {
   ViewEstimateSelect,
   ViewLabelSelect,
   ViewPrioritySelect,
+  ViewStartDateSelect,
   ViewStateSelect,
 } from "components/issues";
 // icons
@@ -230,7 +231,14 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 user={user}
               />
             )}
-
+            {properties.start_date && issue.start_date && (
+              <ViewStartDateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                user={user}
+                isNotAllowed={isNotAllowed}
+              />
+            )}
             {properties.due_date && issue.target_date && (
               <ViewDueDateSelect
                 issue={issue}

diff --git a/apps/app/components/core/views/list-view/single-issue.tsx b/apps/app/components/core/views/list-view/single-issue.tsx
@@ -16,6 +16,7 @@ import {
   ViewEstimateSelect,
   ViewIssueLabel,
   ViewPrioritySelect,
+  ViewStartDateSelect,
   ViewStateSelect,
 } from "components/issues";
 // ui
@@ -244,6 +245,14 @@ export const SingleListIssue: React.FC<Props> = ({
               isNotAllowed={isNotAllowed}
             />
           )}
+          {properties.start_date && issue.start_date && (
+            <ViewStartDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
           {properties.due_date && issue.target_date && (
             <ViewDueDateSelect
               issue={issue}

diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
@@ -75,6 +75,7 @@ const defaultValues: Partial<IIssue> = {
   assignees_list: [],
   labels: [],
   labels_list: [],
+  start_date: null,
   target_date: null,
 };
 
@@ -96,6 +97,7 @@ export interface IssueFormProps {
     | "priority"
     | "assignee"
     | "label"
+    | "startDate"
     | "dueDate"
     | "estimate"
     | "parent"
@@ -239,6 +241,15 @@ export const IssueForm: FC<IssueFormProps> = ({
     });
   }, [getValues, projectId, reset]);
 
+  const startDate = watch("start_date");
+  const targetDate = watch("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
   return (
     <>
       {projectId && (
@@ -447,13 +458,34 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                   />
                 )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="start_date"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueDateSelect
+                          label="Start date"
+                          maxDate={maxDate ?? undefined}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
                   <div>
                     <Controller
                       control={control}
                       name="target_date"
                       render={({ field: { value, onChange } }) => (
-                        <IssueDateSelect value={value} onChange={onChange} />
+                        <IssueDateSelect
+                          label="Due date"
+                          minDate={minDate ?? undefined}
+                          onChange={onChange}
+                          value={value}
+                        />
                       )}
                     />
                   </div>

diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
@@ -53,6 +53,7 @@ export interface IssuesModalProps {
     | "priority"
     | "assignee"
     | "label"
+    | "startDate"
     | "dueDate"
     | "estimate"
     | "parent"

diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
@@ -8,11 +8,14 @@ import DatePicker from "react-datepicker";
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
-  value: string | null;
+  label: string;
+  maxDate?: Date;
+  minDate?: Date;
   onChange: (val: string | null) => void;
+  value: string | null;
 };
 
-export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
+export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
@@ -28,7 +31,7 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
             ) : (
               <>
                 <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
-                <span>Due Date</span>
+                <span>{label}</span>
               </>
             )}
           </span>
@@ -51,6 +54,8 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
                 else onChange(renderDateFormat(val));
               }}
               dateFormat="dd-MM-yyyy"
+              minDate={minDate}
+              maxDate={maxDate}
               inline
             />
           </Popover.Panel>

diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
@@ -54,6 +54,7 @@ type Props = {
     | "parent"
     | "blocker"
     | "blocked"
+    | "startDate"
     | "dueDate"
     | "cycle"
     | "module"
@@ -210,6 +211,15 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     fieldsToShow.includes("cycle") ||
     fieldsToShow.includes("module");
 
+  const startDate = watchIssue("start_date");
+  const targetDate = watchIssue("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
   const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
 
   return (
@@ -367,6 +377,34 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     disabled={uneditable}
                   />
                 )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Start date</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="start_date"
+                        render={({ field: { value } }) => (
+                          <CustomDatePicker
+                            placeholder="Start date"
+                            value={value}
+                            onChange={(val) =>
+                              submitChanges({
+                                start_date: val,
+                              })
+                            }
+                            className="bg-custom-background-90"
+                            maxDate={maxDate ?? undefined}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
@@ -387,6 +425,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                               })
                             }
                             className="bg-custom-background-90"
+                            minDate={minDate ?? undefined}
                             disabled={isNotAllowed || uneditable}
                           />
                         )}

diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
@@ -32,9 +32,12 @@ export const ViewDueDateSelect: React.FC<Props> = ({
 
   const { issueView } = useIssuesView();
 
+  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+
   return (
     <Tooltip
-      tooltipHeading="Due Date"
+      tooltipHeading="Due date"
       tooltipContent={
         issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"
       }
@@ -56,8 +59,6 @@ export const ViewDueDateSelect: React.FC<Props> = ({
             partialUpdateIssue(
               {
                 target_date: val,
-                priority: issue.priority,
-                state: issue.state,
               },
               issue
             );
@@ -77,6 +78,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
             issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
           }`}
+          minDate={minDate ?? undefined}
           noBorder={noBorder}
           disabled={isNotAllowed}
         />

diff --git a/apps/app/components/issues/view-select/index.ts b/apps/app/components/issues/view-select/index.ts
@@ -1,6 +1,7 @@
 export * from "./assignee";
 export * from "./due-date";
 export * from "./estimate";
+export * from "./label";
 export * from "./priority";
+export * from "./start-date";
 export * from "./state";
-export * from "./label";