feat: redesign task due date manager

frontend/src/App/BaseStyles.ts

@@ -126,4 +126,8 @@ export default createGlobalStyle`
   }
 
   ${mixin.placeholderColor(color.textLight)}
+
+  .picker-hidden {
+    display: none;
+  }
 `;

frontend/src/Projects/Project/Board/index.tsx

@@ -793,12 +793,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                   <DueDateManager
                     task={task}
                     onRemoveDueDate={t => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
-                      hidePopup();
+                      // hidePopup();
                     }}
-                    onDueDateChange={(t, newDueDate) => {
+                    onDueDateChange={(t, newDueDate, hasTime) => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
-                      hidePopup();
+                      // hidePopup();
                     }}
                     onCancel={NOOP}
                   />

frontend/src/Projects/Project/Details/index.tsx

@@ -632,12 +632,12 @@ const Details: React.FC<DetailsProps> = ({
                     <DueDateManager
                       task={task}
                       onRemoveDueDate={t => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
-                        hidePopup();
+                        // hidePopup();
                       }}
-                      onDueDateChange={(t, newDueDate) => {
+                      onDueDateChange={(t, newDueDate, hasTime) => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
-                        hidePopup();
+                        // hidePopup();
                       }}
                       onCancel={NOOP}
                     />

frontend/src/shared/components/DueDateManager/Styles.ts

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
 import Input from 'shared/components/Input';
+import ControlledInput from 'shared/components/ControlledInput';
+import { Clock } from 'shared/icons';
 
 export const Wrapper = styled.div`
 display: flex
@@ -17,6 +19,11 @@ display: flex
     z-index: 10000;
     margin-top: 0;
   }
+  & .react-datepicker__close-icon::after {
+    background: none;
+    font-size: 16px;
+    color: ${props => props.theme.colors.text.primary};
+  }
 
   & .react-datepicker-time__header {
     color: ${props => props.theme.colors.text.primary};
@@ -91,6 +98,24 @@ display: flex
     border-bottom: 1px solid ${props => props.theme.colors.border};
   }
 
+  & .react-datepicker__input-container input {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.colors.alternate};
+  background: #262c49;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
+padding: 0.7rem;
+  color: #c2c6dc;
+  position: relative;
+  border-radius: 5px;
+  transition: all 0.3s ease;
+      font-size: 13px;
+    line-height: 20px;
+    padding: 0 12px;
+  &:focus {
+    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(115, 103, 240);
+    background: ${props => props.theme.colors.bg.primary};
+  }
 `;
 
 export const DueDatePickerWrapper = styled.div`
@@ -110,6 +135,44 @@ export const RemoveDueDate = styled(Button)`
   margin: 0 0 0 4px;
 `;
 
+export const AddDateRange = styled.div`
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  color: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
+  &:hover {
+    color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
+    text-decoration: underline;
+  }
+`;
+
+export const DateRangeInputs = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: -4px;
+  & > div:first-child,
+  & > div:last-child {
+    flex: 1 1 92px;
+    margin-bottom: 4px;
+    margin-left: 4px;
+    min-width: 92px;
+    width: initial;
+  }
+  & > ${AddDateRange} {
+    margin-left: 4px;
+    padding-left: 4px;
+  }
+  & > .react-datepicker-wrapper input {
+    padding-bottom: 4px;
+    padding-top: 4px;
+    width: 100%;
+  }
+`;
+
 export const CancelDueDate = styled.div`
   display: flex;
   align-items: center;
@@ -119,15 +182,86 @@ export const CancelDueDate = styled.div`
   cursor: pointer;
 `;
 
-export const DueDateInput = styled(Input)`
+export const DueDateInput = styled(ControlledInput)`
   margin-top: 15px;
   margin-bottom: 5px;
   padding-right: 10px;
 `;
 
-export const ActionWrapper = styled.div`
+export const ActionsSeparator = styled.div`
-  padding-top: 8px;
+  margin-top: 8px;
+  height: 1px;
   width: 100%;
+  background: #414561;
   display: flex;
-  justify-content: space-between;
+`;
+export const ActionsWrapper = styled.div`
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  & .react-datepicker-wrapper {
+    margin-left: auto;
+    width: 82px;
+  }
+  & .react-datepicker__input-container input {
+    padding-bottom: 4px;
+    padding-top: 4px;
+    width: 100%;
+  }
+`;
+
+export const ActionClock = styled(Clock)`
+  align-self: center;
+  fill: ${props => props.theme.colors.primary};
+  margin: 0 8px;
+  flex: 0 0 auto;
+`;
+
+export const ActionLabel = styled.div`
+  font-size: 12px;
+  line-height: 14px;
+`;
+
+export const ActionIcon = styled.div`
+  height: 36px;
+  min-height: 36px;
+  min-width: 36px;
+  width: 36px;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  margin-right: 8px;
+  svg {
+    fill: ${props => props.theme.colors.text.primary};
+    transition-duration: 0.2s;
+    transition-property: background, border, box-shadow, fill;
+  }
+  &:hover svg {
+    fill: ${props => props.theme.colors.text.secondary};
+  }
+
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+`;
+
+export const ClearButton = styled.div`
+  font-weight: 500;
+  font-size: 13px;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  margin-left: auto;
+  cursor: pointer;
+  align-items: center;
+  border-radius: 6px;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  transition-duration: 0.2s;
+  transition-property: background, border, box-shadow, color, fill;
+  color: ${props => props.theme.colors.text.primary};
+  &:hover {
+    color: ${props => props.theme.colors.text.secondary};
+  }
 `;

frontend/src/shared/components/DueDateManager/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
 import dayjs from 'dayjs';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
@@ -8,11 +8,27 @@ import { getYear, getMonth } from 'date-fns';
 import { useForm, Controller } from 'react-hook-form';
 import NOOP from 'shared/utils/noop';
 
-import { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
+import {
+  Wrapper,
+  RemoveDueDate,
+  DueDateInput,
+  DueDatePickerWrapper,
+  ConfirmAddDueDate,
+  DateRangeInputs,
+  AddDateRange,
+  ActionIcon,
+  ActionsWrapper,
+  ClearButton,
+  ActionsSeparator,
+  ActionClock,
+  ActionLabel,
+} from './Styles';
+import { Clock, Cross } from 'shared/icons';
+import Select from 'react-select/src/Select';
 
 type DueDateManagerProps = {
   task: Task;
-  onDueDateChange: (task: Task, newDueDate: Date) => void;
+  onDueDateChange: (task: Task, newDueDate: Date, hasTime: boolean) => void;
   onRemoveDueDate: (task: Task) => void;
   onCancel: () => void;
 };
@@ -52,14 +68,20 @@ const HeaderSelect = styled.select`
   text-decoration: underline;
   font-size: 14px;
   text-align: center;
-  padding: 4px 6px;
   background: none;
   outline: none;
   border: none;
   border-radius: 3px;
   appearance: none;
+  width: 100%;
+  display: inline-block;
 
-  &:hover {
+  & option {
+    color: #c2c6dc;
+    background: ${props => props.theme.colors.bg.primary};
+  }
+
+  & option:hover {
     background: ${props => props.theme.colors.bg.secondary};
     border: 1px solid ${props => props.theme.colors.primary};
     outline: none !important;
@@ -110,15 +132,34 @@ const HeaderActions = styled.div`
 `;
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = dayjs();
+  const currentDueDate = task.dueDate ? dayjs(task.dueDate).toDate() : null;
   const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
-  const [startDate, setStartDate] = useState(new Date());
+
+  const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
+  const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
+  const [hasTime, enableTime] = useState(task.hasTime ?? false);
+  const firstRun = useRef<boolean>(true);
+
+  const debouncedFunctionRef = useRef((newDate: Date | null, nowHasTime: boolean) => {
+    if (!firstRun.current) {
+      if (newDate) {
+        onDueDateChange(task, newDate, nowHasTime);
+      } else {
+        onRemoveDueDate(task);
+        enableTime(false);
+      }
+    } else {
+      firstRun.current = false;
+    }
+  });
+  const debouncedChange = useCallback(
+    _.debounce((newDate, nowHasTime) => debouncedFunctionRef.current(newDate, nowHasTime), 500),
+    [],
+  );
 
   useEffect(() => {
-    const newDate = dayjs(startDate).format('YYYY-MM-DD');
+    debouncedChange(startDate, hasTime);
-    setValue('endDate', newDate);
+  }, [startDate, hasTime]);
-  }, [startDate]);
-
   const years = _.range(2010, getYear(new Date()) + 10, 1);
   const months = [
     'January',
@@ -134,19 +175,21 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'November',
     'December',
   ];
-  const saveDueDate = (data: any) => {
+
-    const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
+  const onChange = (dates: any) => {
-    if (newDate.isValid()) {
+    const [start, end] = dates;
-      onDueDateChange(task, newDate.toDate());
+    setStartDate(start);
-    }
+    setEndDate(end);
   };
-  const CustomTimeInput = forwardRef(({ value, onClick }: any, $ref: any) => {
+  const [isRange, setIsRange] = useState(false);
+
+  const CustomTimeInput = forwardRef(({ value, onClick, onChange, onBlur, onFocus }: any, $ref: any) => {
     return (
       <DueDateInput
         id="endTime"
         value={value}
         name="endTime"
-        ref={$ref}
+        onChange={onChange}
         width="100%"
         variant="alternate"
         label="Time"
@@ -154,114 +197,119 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
       />
     );
   });
+
   return (
     <Wrapper>
-      <Form onSubmit={handleSubmit(saveDueDate)}>
+      <DateRangeInputs>
-        <FormField>
+        <DatePicker
-          <DueDateInput
+          selected={startDate}
-            id="endDate"
+          onChange={date => setStartDate(date)}
-            name="endDate"
+          popperClassName="picker-hidden"
-            width="100%"
+          dateFormat="yyyy-MM-dd"
-            variant="alternate"
+          disabledKeyboardNavigation
-            label="Date"
+          isClearable
-            defaultValue={now.format('YYYY-MM-DD')}
+          placeholderText="Select due date"
-            ref={register({
+        />
-              required: 'End date is required.',
+        {isRange ? (
-            })}
-          />
-        </FormField>
-        <FormField>
-          <Controller
-            control={control}
-            defaultValue={now.toDate()}
-            name="endTime"
-            render={({ onChange, onBlur, value }) => (
-              <DatePicker
-                onChange={onChange}
-                selected={value}
-                onBlur={onBlur}
-                showTimeSelect
-                showTimeSelectOnly
-                timeIntervals={15}
-                timeCaption="Time"
-                dateFormat="h:mm aa"
-                customInput={<CustomTimeInput />}
-              />
-            )}
-          />
-        </FormField>
-        <DueDatePickerWrapper>
           <DatePicker
-            useWeekdaysShort
-            renderCustomHeader={({
-              date,
-              changeYear,
-              changeMonth,
-              decreaseMonth,
-              increaseMonth,
-              prevMonthButtonDisabled,
-              nextMonthButtonDisabled,
-            }) => (
-              <HeaderActions>
-                <HeaderButton onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
-                  Prev
-                </HeaderButton>
-                <HeaderSelectLabel>
-                  {months[date.getMonth()]}
-                  <HeaderSelect
-                    value={getYear(date)}
-                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
-                  >
-                    {years.map(option => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </HeaderSelect>
-                </HeaderSelectLabel>
-                <HeaderSelectLabel>
-                  {date.getFullYear()}
-                  <HeaderSelect
-                    value={months[getMonth(date)]}
-                    onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
-                  >
-                    {months.map(option => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </HeaderSelect>
-                </HeaderSelectLabel>
-
-                <HeaderButton onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
-                  Next
-                </HeaderButton>
-              </HeaderActions>
-            )}
             selected={startDate}
-            inline
+            isClearable
-            onChange={date => {
+            onChange={date => setStartDate(date)}
-              if (date) {
+            popperClassName="picker-hidden"
-                setStartDate(date);
+            dateFormat="yyyy-MM-dd"
-              }
+            placeholderText="Select from date"
-            }}
           />
-        </DueDatePickerWrapper>
+        ) : (
-        <ActionWrapper>
+          <AddDateRange>Add date range</AddDateRange>
-          <ConfirmAddDueDate type="submit" onClick={NOOP}>
+        )}
-            Save
+      </DateRangeInputs>
-          </ConfirmAddDueDate>
+      <DatePicker
-          <RemoveDueDate
+        selected={startDate}
-            variant="outline"
+        onChange={date => setStartDate(date)}
-            color="danger"
+        startDate={startDate}
+        useWeekdaysShort
+        renderCustomHeader={({
+          date,
+          changeYear,
+          changeMonth,
+          decreaseMonth,
+          increaseMonth,
+          prevMonthButtonDisabled,
+          nextMonthButtonDisabled,
+        }) => (
+          <HeaderActions>
+            <HeaderButton onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+              Prev
+            </HeaderButton>
+            <HeaderSelectLabel>
+              {months[date.getMonth()]}
+              <HeaderSelect
+                value={months[getMonth(date)]}
+                onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
+              >
+                {months.map(option => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </HeaderSelect>
+            </HeaderSelectLabel>
+            <HeaderSelectLabel>
+              {date.getFullYear()}
+              <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}>
+                {years.map(option => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </HeaderSelect>
+            </HeaderSelectLabel>
+
+            <HeaderButton onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+              Next
+            </HeaderButton>
+          </HeaderActions>
+        )}
+        inline
+      />
+      <ActionsSeparator />
+      {hasTime && (
+        <ActionsWrapper>
+          <ActionClock width={16} height={16} />
+          <ActionLabel>Due Time</ActionLabel>
+          <DatePicker
+            selected={startDate}
+            onChange={date => {
+              setStartDate(date);
+            }}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={15}
+            timeCaption="Time"
+            dateFormat="h:mm aa"
+          />
+          <ActionIcon onClick={() => enableTime(false)}>
+            <Cross width={16} height={16} />
+          </ActionIcon>
+        </ActionsWrapper>
+      )}
+      <ActionsWrapper>
+        {!hasTime && (
+          <ActionIcon
             onClick={() => {
-              onRemoveDueDate(task);
+              if (startDate === null) {
+                const today = new Date();
+                today.setHours(12, 30, 0);
+                setStartDate(today);
+              }
+              enableTime(true);
             }}
           >
-            Remove
+            <Clock width={16} height={16} />
-          </RemoveDueDate>
+          </ActionIcon>
-        </ActionWrapper>
+        )}
-      </Form>
+        <ClearButton onClick={() => setStartDate(null)}>{hasTime ? 'Clear all' : 'Clear'}</ClearButton>
+      </ActionsWrapper>
     </Wrapper>
   );
 };

frontend/src/shared/components/TaskDetails/index.tsx

@@ -341,7 +341,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
               }}
             >
               {task.dueDate ? (
-                <SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
+                <SidebarButtonText>
+                  {dayjs(task.dueDate).format(task.hasTime ? 'MMM D [at] h:mm A' : 'MMMM D')}
+                </SidebarButtonText>
               ) : (
                 <SidebarButtonText>No due date</SidebarButtonText>
               )}

frontend/src/shared/generated/graphql.tsx

@@ -215,6 +215,7 @@ export type Task = {
   position: Scalars['Float'];
   description?: Maybe<Scalars['String']>;
   dueDate?: Maybe<Scalars['Time']>;
+  hasTime: Scalars['Boolean'];
   complete: Scalars['Boolean'];
   completedAt?: Maybe<Scalars['Time']>;
   assigned: Array<Member>;
@@ -883,6 +884,7 @@ export type UpdateTaskLocationPayload = {
 
 export type UpdateTaskDueDate = {
   taskID: Scalars['UUID'];
+  hasTime: Scalars['Boolean'];
   dueDate?: Maybe<Scalars['Time']>;
 };
 
@@ -1451,7 +1453,7 @@ export type FindTaskQuery = (
   { __typename?: 'Query' }
   & { findTask: (
     { __typename?: 'Task' }
-    & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'position' | 'complete'>
+    & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'position' | 'complete' | 'hasTime'>
     & { taskGroup: (
       { __typename?: 'TaskGroup' }
       & Pick<TaskGroup, 'id' | 'name'>
@@ -2314,6 +2316,7 @@ export type UpdateTaskDescriptionMutation = (
 export type UpdateTaskDueDateMutationVariables = Exact<{
   taskID: Scalars['UUID'];
   dueDate?: Maybe<Scalars['Time']>;
+  hasTime: Scalars['Boolean'];
 }>;
 
 
@@ -2321,7 +2324,7 @@ export type UpdateTaskDueDateMutation = (
   { __typename?: 'Mutation' }
   & { updateTaskDueDate: (
     { __typename?: 'Task' }
-    & Pick<Task, 'id' | 'dueDate'>
+    & Pick<Task, 'id' | 'dueDate' | 'hasTime'>
   ) }
 );
 
@@ -3017,6 +3020,7 @@ export const FindTaskDocument = gql`
     dueDate
     position
     complete
+    hasTime
     taskGroup {
       id
       name
@@ -4692,10 +4696,13 @@ export type UpdateTaskDescriptionMutationHookResult = ReturnType<typeof useUpdat
 export type UpdateTaskDescriptionMutationResult = ApolloReactCommon.MutationResult<UpdateTaskDescriptionMutation>;
 export type UpdateTaskDescriptionMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateTaskDescriptionMutation, UpdateTaskDescriptionMutationVariables>;
 export const UpdateTaskDueDateDocument = gql`
-    mutation updateTaskDueDate($taskID: UUID!, $dueDate: Time) {
+    mutation updateTaskDueDate($taskID: UUID!, $dueDate: Time, $hasTime: Boolean!) {
-  updateTaskDueDate(input: {taskID: $taskID, dueDate: $dueDate}) {
+  updateTaskDueDate(
+    input: {taskID: $taskID, dueDate: $dueDate, hasTime: $hasTime}
+  ) {
     id
     dueDate
+    hasTime
   }
 }
     `;
@@ -4716,6 +4723,7 @@ export type UpdateTaskDueDateMutationFn = ApolloReactCommon.MutationFunction<Upd
  *   variables: {
  *      taskID: // value for 'taskID'
  *      dueDate: // value for 'dueDate'
+ *      hasTime: // value for 'hasTime'
  *   },
  * });
  */

frontend/src/shared/graphql/findTask.graphqls

@@ -6,6 +6,7 @@ query findTask($taskID: UUID!) {
     dueDate
     position
     complete
+    hasTime
     taskGroup {
       id
       name

frontend/src/shared/graphql/updateTaskDueDate.graphqls

@@ -1,11 +1,13 @@
-mutation updateTaskDueDate($taskID: UUID!, $dueDate: Time) {
+mutation updateTaskDueDate($taskID: UUID!, $dueDate: Time, $hasTime: Boolean!) {
   updateTaskDueDate (
     input: {
       taskID: $taskID
       dueDate: $dueDate
+      hasTime: $hasTime
     }
   ) {
     id
     dueDate
+    hasTime
   }
 }

frontend/src/types.d.ts

@@ -102,6 +102,7 @@ type Task = {
   name: string;
   badges?: TaskBadges;
   position: number;
+  hasTime?: boolean;
   dueDate?: string;
   complete?: boolean;
   completedAt?: string | null;

internal/db/models.go

@@ -102,6 +102,7 @@ type Task struct {
 	DueDate     sql.NullTime   `json:"due_date"`
 	Complete    bool           `json:"complete"`
 	CompletedAt sql.NullTime   `json:"completed_at"`
+	HasTime     bool           `json:"has_time"`
 }
 
 type TaskActivity struct {

internal/db/query/task.sql

@@ -34,7 +34,7 @@ UPDATE task SET name = $2 WHERE task_id = $1 RETURNING *;
 DELETE FROM task where task_group_id = $1;
 
 -- name: UpdateTaskDueDate :one
-UPDATE task SET due_date = $2 WHERE task_id = $1 RETURNING *;
+UPDATE task SET due_date = $2, has_time = $3 WHERE task_id = $1 RETURNING *;
 
 -- name: SetTaskComplete :one
 UPDATE task SET complete = $2, completed_at = $3 WHERE task_id = $1 RETURNING *;

internal/db/task.sql.go

@@ -13,7 +13,7 @@ import (
 
 const createTask = `-- name: CreateTask :one
 INSERT INTO task (task_group_id, created_at, name, position)
-  VALUES($1, $2, $3, $4) RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+  VALUES($1, $2, $3, $4) RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type CreateTaskParams struct {
@@ -41,13 +41,14 @@ func (q *Queries) CreateTask(ctx context.Context, arg CreateTaskParams) (Task, e
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const createTaskAll = `-- name: CreateTaskAll :one
 INSERT INTO task (task_group_id, created_at, name, position, description, complete, due_date)
-  VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+  VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type CreateTaskAllParams struct {
@@ -81,6 +82,7 @@ func (q *Queries) CreateTaskAll(ctx context.Context, arg CreateTaskAllParams) (T
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
@@ -158,7 +160,7 @@ func (q *Queries) DeleteTasksByTaskGroupID(ctx context.Context, taskGroupID uuid
 }
 
 const getAllTasks = `-- name: GetAllTasks :many
-SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at FROM task
+SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time FROM task
 `
 
 func (q *Queries) GetAllTasks(ctx context.Context) ([]Task, error) {
@@ -180,6 +182,7 @@ func (q *Queries) GetAllTasks(ctx context.Context) ([]Task, error) {
 			&i.DueDate,
 			&i.Complete,
 			&i.CompletedAt,
+			&i.HasTime,
 		); err != nil {
 			return nil, err
 		}
@@ -243,7 +246,7 @@ func (q *Queries) GetProjectIDForTask(ctx context.Context, taskID uuid.UUID) (uu
 }
 
 const getTaskByID = `-- name: GetTaskByID :one
-SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at FROM task WHERE task_id = $1
+SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time FROM task WHERE task_id = $1
 `
 
 func (q *Queries) GetTaskByID(ctx context.Context, taskID uuid.UUID) (Task, error) {
@@ -259,12 +262,13 @@ func (q *Queries) GetTaskByID(ctx context.Context, taskID uuid.UUID) (Task, erro
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const getTasksForTaskGroupID = `-- name: GetTasksForTaskGroupID :many
-SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at FROM task WHERE task_group_id = $1
+SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time FROM task WHERE task_group_id = $1
 `
 
 func (q *Queries) GetTasksForTaskGroupID(ctx context.Context, taskGroupID uuid.UUID) ([]Task, error) {
@@ -286,6 +290,7 @@ func (q *Queries) GetTasksForTaskGroupID(ctx context.Context, taskGroupID uuid.U
 			&i.DueDate,
 			&i.Complete,
 			&i.CompletedAt,
+			&i.HasTime,
 		); err != nil {
 			return nil, err
 		}
@@ -301,7 +306,7 @@ func (q *Queries) GetTasksForTaskGroupID(ctx context.Context, taskGroupID uuid.U
 }
 
 const setTaskComplete = `-- name: SetTaskComplete :one
-UPDATE task SET complete = $2, completed_at = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+UPDATE task SET complete = $2, completed_at = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type SetTaskCompleteParams struct {
@@ -323,12 +328,13 @@ func (q *Queries) SetTaskComplete(ctx context.Context, arg SetTaskCompleteParams
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const updateTaskComment = `-- name: UpdateTaskComment :one
-UPDATE task_comment SET message = $2, updated_at = $3 WHERE task_comment_id = $1 RETURNING task_comment_id, task_id, created_at, updated_at, created_by, pinned, message
+UPDATE task_comment SET message = $2, updated_at = COALESCE($3, updated_at) WHERE task_comment_id = $1 RETURNING task_comment_id, task_id, created_at, updated_at, created_by, pinned, message
 `
 
 type UpdateTaskCommentParams struct {
@@ -353,7 +359,7 @@ func (q *Queries) UpdateTaskComment(ctx context.Context, arg UpdateTaskCommentPa
 }
 
 const updateTaskDescription = `-- name: UpdateTaskDescription :one
-UPDATE task SET description = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+UPDATE task SET description = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type UpdateTaskDescriptionParams struct {
@@ -374,21 +380,23 @@ func (q *Queries) UpdateTaskDescription(ctx context.Context, arg UpdateTaskDescr
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const updateTaskDueDate = `-- name: UpdateTaskDueDate :one
-UPDATE task SET due_date = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+UPDATE task SET due_date = $2, has_time = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type UpdateTaskDueDateParams struct {
 	TaskID  uuid.UUID    `json:"task_id"`
 	DueDate sql.NullTime `json:"due_date"`
+	HasTime bool         `json:"has_time"`
 }
 
 func (q *Queries) UpdateTaskDueDate(ctx context.Context, arg UpdateTaskDueDateParams) (Task, error) {
-	row := q.db.QueryRowContext(ctx, updateTaskDueDate, arg.TaskID, arg.DueDate)
+	row := q.db.QueryRowContext(ctx, updateTaskDueDate, arg.TaskID, arg.DueDate, arg.HasTime)
 	var i Task
 	err := row.Scan(
 		&i.TaskID,
@@ -400,12 +408,13 @@ func (q *Queries) UpdateTaskDueDate(ctx context.Context, arg UpdateTaskDueDatePa
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const updateTaskLocation = `-- name: UpdateTaskLocation :one
-UPDATE task SET task_group_id = $2, position = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+UPDATE task SET task_group_id = $2, position = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type UpdateTaskLocationParams struct {
@@ -427,12 +436,13 @@ func (q *Queries) UpdateTaskLocation(ctx context.Context, arg UpdateTaskLocation
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const updateTaskName = `-- name: UpdateTaskName :one
-UPDATE task SET name = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+UPDATE task SET name = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type UpdateTaskNameParams struct {
@@ -453,12 +463,13 @@ func (q *Queries) UpdateTaskName(ctx context.Context, arg UpdateTaskNameParams)
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }
 
 const updateTaskPosition = `-- name: UpdateTaskPosition :one
-UPDATE task SET position = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
+UPDATE task SET position = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time
 `
 
 type UpdateTaskPositionParams struct {
@@ -479,6 +490,7 @@ func (q *Queries) UpdateTaskPosition(ctx context.Context, arg UpdateTaskPosition
 		&i.DueDate,
 		&i.Complete,
 		&i.CompletedAt,
+		&i.HasTime,
 	)
 	return i, err
 }

internal/graph/generated.go

@@ -383,6 +383,7 @@ type ComplexityRoot struct {
 		CreatedAt   func(childComplexity int) int
 		Description func(childComplexity int) int
 		DueDate     func(childComplexity int) int
+		HasTime     func(childComplexity int) int
 		ID          func(childComplexity int) int
 		Labels      func(childComplexity int) int
 		Name        func(childComplexity int) int
@@ -2376,6 +2377,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Task.DueDate(childComplexity), true
 
+	case "Task.hasTime":
+		if e.complexity.Task.HasTime == nil {
+			break
+		}
+
+		return e.complexity.Task.HasTime(childComplexity), true
+
 	case "Task.id":
 		if e.complexity.Task.ID == nil {
 			break
@@ -3135,6 +3143,7 @@ type Task {
   position: Float!
   description: String
   dueDate: Time
+  hasTime: Boolean!
   complete: Boolean!
   completedAt: Time
   assigned: [Member!]!
@@ -3477,6 +3486,7 @@ type UpdateTaskLocationPayload {
 
 input UpdateTaskDueDate  {
   taskID: UUID!
+  hasTime: Boolean!
   dueDate: Time
 }
 
@@ -13558,6 +13568,40 @@ func (ec *executionContext) _Task_dueDate(ctx context.Context, field graphql.Col
 	return ec.marshalOTime2ᚖtimeᚐTime(ctx, field.Selections, res)
 }
 
+func (ec *executionContext) _Task_hasTime(ctx context.Context, field graphql.CollectedField, obj *db.Task) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "Task",
+		Field:    field,
+		Args:     nil,
+		IsMethod: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.HasTime, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _Task_complete(ctx context.Context, field graphql.CollectedField, obj *db.Task) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@@ -18596,6 +18640,12 @@ func (ec *executionContext) unmarshalInputUpdateTaskDueDate(ctx context.Context,
 			if err != nil {
 				return it, err
 			}
+		case "hasTime":
+			var err error
+			it.HasTime, err = ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		case "dueDate":
 			var err error
 			it.DueDate, err = ec.unmarshalOTime2ᚖtimeᚐTime(ctx, v)
@@ -20968,6 +21018,11 @@ func (ec *executionContext) _Task(ctx context.Context, sel ast.SelectionSet, obj
 				res = ec._Task_dueDate(ctx, field, obj)
 				return res
 			})
+		case "hasTime":
+			out.Values[i] = ec._Task_hasTime(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&invalids, 1)
+			}
 		case "complete":
 			out.Values[i] = ec._Task_complete(ctx, field, obj)
 			if out.Values[i] == graphql.Null {

internal/graph/models_gen.go

@@ -519,6 +519,7 @@ type UpdateTaskDescriptionInput struct {
 
 type UpdateTaskDueDate struct {
 	TaskID  uuid.UUID  `json:"taskID"`
+	HasTime bool       `json:"hasTime"`
 	DueDate *time.Time `json:"dueDate"`
 }
 

internal/graph/schema.graphqls

@@ -175,6 +175,7 @@ type Task {
   position: Float!
   description: String
   dueDate: Time
+  hasTime: Boolean!
   complete: Boolean!
   completedAt: Time
   assigned: [Member!]!
@@ -517,6 +518,7 @@ type UpdateTaskLocationPayload {
 
 input UpdateTaskDueDate  {
   taskID: UUID!
+  hasTime: Boolean!
   dueDate: Time
 }
 
@@ -943,3 +945,4 @@ type DeleteUserAccountPayload {
   ok: Boolean!
   userAccount: UserAccount!
 }
+

internal/graph/schema.resolvers.go

@@ -423,28 +423,35 @@ func (r *mutationResolver) UpdateTaskDueDate(ctx context.Context, input UpdateTa
 		activityType = TASK_DUE_DATE_CHANGED
 		data["PrevDueDate"] = prevTask.DueDate.Time.String()
 		data["CurDueDate"] = input.DueDate.String()
-	} else {
+	} else if input.DueDate != nil {
 		data["DueDate"] = input.DueDate.String()
 	}
 	var dueDate sql.NullTime
+	log.WithField("dueDate", input.DueDate).Info("before ptr!")
 	if input.DueDate == nil {
 		dueDate = sql.NullTime{Valid: false, Time: time.Now()}
 	} else {
 		dueDate = sql.NullTime{Valid: true, Time: *input.DueDate}
 	}
-	task, err := r.Repository.UpdateTaskDueDate(ctx, db.UpdateTaskDueDateParams{
+	var task db.Task
-		TaskID:  input.TaskID,
+	if !(input.DueDate == nil && !prevTask.DueDate.Valid) {
-		DueDate: dueDate,
+		task, err = r.Repository.UpdateTaskDueDate(ctx, db.UpdateTaskDueDateParams{
-	})
+			TaskID:  input.TaskID,
-	createdAt := time.Now().UTC()
+			DueDate: dueDate,
-	d, err := json.Marshal(data)
+			HasTime: input.HasTime,
-	_, err = r.Repository.CreateTaskActivity(ctx, db.CreateTaskActivityParams{
+		})
-		TaskID:         task.TaskID,
+		createdAt := time.Now().UTC()
-		Data:           d,
+		d, _ := json.Marshal(data)
-		CausedBy:       userID,
+		_, err = r.Repository.CreateTaskActivity(ctx, db.CreateTaskActivityParams{
-		CreatedAt:      createdAt,
+			TaskID:         task.TaskID,
-		ActivityTypeID: activityType,
+			Data:           d,
-	})
+			CausedBy:       userID,
+			CreatedAt:      createdAt,
+			ActivityTypeID: activityType,
+		})
+	} else {
+		task, err = r.Repository.GetTaskByID(ctx, input.TaskID)
+	}
 
 	return &task, err
 }

internal/graph/schema/_models.gql

@@ -175,6 +175,7 @@ type Task {
   position: Float!
   description: String
   dueDate: Time
+  hasTime: Boolean!
   complete: Boolean!
   completedAt: Time
   assigned: [Member!]!

internal/graph/schema/task.gql

@@ -49,6 +49,7 @@ type UpdateTaskLocationPayload {
 
 input UpdateTaskDueDate  {
   taskID: UUID!
+  hasTime: Boolean!
   dueDate: Time
 }
 

migrations/0063_add-use_time-to-task-due_date.up.sql

@@ -0,0 +1,2 @@
+ALTER TABLE task ADD COLUMN has_time boolean NOT NULL DEFAULT false;
+UPDATE task SET has_time = true;