TACT-346: Goal setting rework: Additional improvements - 1 Part

components/pages/Goals/MainPage/store.ts

@@ -5,6 +5,7 @@ import { BaseGoalsStore, GoalsModalsTypes } from "../stores/BaseGoalsStore";
 import { GoalDataExtended } from "../types";
 import { CreateGoalParams } from "../../../../stores/RootStore/Resources/GoalsStore";
 import { KeyboardEvent } from 'react';
+import { AnimationsStore } from '../../../../stores/AnimationsStore';
 
 export class GoalsStore extends BaseGoalsStore {
   keymap = {
@@ -73,6 +74,8 @@ export class GoalsStore extends BaseGoalsStore {
           await this.root.resources.goals.add({ goal, ...otherParams });
           await this.loadTaskList();
           this.modals.close();
+
+          AnimationsStore.displayFireworks();
         },
         onClose: this.modals.close,
       },

components/pages/Goals/components/GoalList/GoalItem/view.tsx

@@ -68,6 +68,7 @@ export const GoalItemView = observer(function GoalItemView() {
           statusIconBottom={-0.5}
           statusIconRight={0.5}
           tabIndex={-1}
+          preventOnFocus
           onToggleOpen={store.handleEmojiPickerToggle}
           onNavigate={store.handleIconNavigate}
           onFocus={store.updateEditedGoal}

components/pages/Goals/components/GoalList/SpaceItem/index.tsx

@@ -45,7 +45,7 @@ export const SpaceItem = observer(function SpaceItem({ spaceId, goals }: Props)
         <chakra.div ml='2' w='calc(100% - var(--chakra-space-10))'>
           <EditableTitle
             widthByTitle
-            sharedProps={{ color: 'gray.700', fontWeight: 400, tabIndex: 0 }}
+            sharedProps={{ color: 'gray.700', fontWeight: 400, tabIndex: 0, maxW: 200 }}
             value={space.name}
             onSave={handleSpaceNameChange}
           />

components/pages/Goals/components/GoalList/store.ts

@@ -36,12 +36,12 @@ export class GoalListStore {
   };
 
   hotkeyHandlers = {
-    ON_RESET_FOCUSED_GOAL: (event) => {
-      event.preventDefault();
+    ON_RESET_FOCUSED_GOAL: () => {
       this.setFocusedGoalId(null);
     },
     ON_NAVIGATE: (event: KeyboardEvent) => {
       event.preventDefault();
+
       if (!this.focusedGoalId) {
         this.setFirstGoalAsFocused();
       } else if (!this.isFocusedGoalEditing && !this.isMenuOpenedForFocusedGoal) {
@@ -89,65 +89,73 @@ export class GoalListStore {
         }
       }
     },
-    START_GOAL_EDITING: (event) => {
+    START_GOAL_EDITING: (event: KeyboardEvent) => {
       if (!this.focusedGoalId) {
         return;
       }
 
       event.preventDefault();
+
       this.isFocusedGoalEditing = true;
       this.getGoalTitleElement(this.focusedGoalId).click();
     },
     ON_OPEN: (event: KeyboardEvent) => {
-      event.preventDefault();
       if (this.isGoalFocusedAndNotEditing && (event.key !== 'Enter' || !this.isMenuOpenedForFocusedGoal)) {
+        event.preventDefault();
+
         this.isCommandWithAltPressed = true;
         this.callbacks?.onOpenGoal(this.focusedGoalId, this.listBySpaces);
       }
     },
-    ON_DONE: (event) => {
-      event.preventDefault();
+    ON_DONE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.doneGoal(this.focusedGoal);
       }
     },
-    ON_WONT_DO: (event) => {
-      event.preventDefault();
+    ON_WONT_DO: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.callbacks?.onWontDo(this.focusedGoal);
       }
     },
-    ON_CLONE: (event) => {
-      event.preventDefault();
+    ON_CLONE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.cloneGoal(this.focusedGoal);
       }
     },
-    ON_ARCHIVE: (event) => {
-      event.preventDefault();
+    ON_ARCHIVE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.archiveGoal(this.focusedGoal);
       }
     },
-    ON_DELETE: (event) => {
-      event.preventDefault();
+    ON_DELETE: (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         this.isCommandWithAltPressed = true;
         this.handleDeleteGoal(this.focusedGoalId);
       }
     },
-    QUICK_DELETE: async (event) => {
-      event.preventDefault();
+    QUICK_DELETE: async (event: KeyboardEvent) => {
       if (this.isGoalFocusedAndNotEditing) {
+        event.preventDefault();
+
         this.isMenuOpenedForFocusedGoal = false;
         await this.deleteGoal(this.focusedGoalId);
       }

components/pages/Goals/modals/GoalCreationModal/components/GoalCreationInformation.tsx

@@ -74,7 +74,15 @@ export const GoalCreationInformation = observer(
             </Table>
           </chakra.div>
         </Box>
-        <Box p={1} pt={4} w='100%' overflow='hidden' flex='1 0 0'>
+        <Box
+          p={1}
+          pt={4}
+          w='100%'
+          overflow='hidden'
+          flex='1 0 0'
+          onFocus={store.enableHotkeysForTasks}
+          onBlur={store.disableHotkeysForTasks}
+        >
           <Text fontWeight='semibold' mb={2} pl={5}>Task list</Text>
           <DraggableListContext
             onDragStart={store.listWithCreator.list.draggableList.startDragging}
@@ -94,6 +102,8 @@ export const GoalCreationInformation = observer(
               defaultGoalId={store.goal.id}
               disableReferenceChange
               displayCreatorHelpAsTooltip
+              unfocusWhenClickOutside
+              isHotkeysEnabled={store.isHotkeysForTasksAvailable}
               taskListWrapperProps={{
                 maxH: 'calc(100% - var(--chakra-space-20))',
                 overflowY: 'auto',

components/pages/Goals/modals/GoalCreationModal/store.ts

@@ -8,7 +8,6 @@ import { v4 as uuidv4 } from 'uuid';
 import { DescriptionData } from '../../../../../types/description';
 import { ResizableGroupConfig } from '../../../../shared/ResizableGroup/store';
 import { TasksListWithCreatorStore } from '../../../../shared/TasksListWithCreator/store';
-import { TaskData } from '../../../../shared/TasksList/types';
 import { NavigationDirections } from '../../../../../types/navigation';
 import { EmojiStore } from '../../../../../stores/EmojiStore';
 import { ModalsController } from '../../../../../helpers/ModalsController';
@@ -63,9 +62,7 @@ export class GoalCreationModalStore {
       }
     },
     CANCEL: () => {
-      if (!this.listWithCreator.list.openedTask) {
-        this.handleSimpleClose();
-      }
+      this.handleCloseModal();
     },
     CHANGE_STATUS: () => {
       if (this.isUpdating && !this.selectStatus.isMenuOpen) {
@@ -91,12 +88,24 @@ export class GoalCreationModalStore {
       this.handlePrevGoal();
     },
     CHANGE_STATUS_TO_TODO: () => {
+      if (this.isHotkeysForTasksAvailable) {
+        return;
+      }
+
       this.handleUpdateStatus(GoalStatus.TODO);
     },
     CHANGE_STATUS_TO_DONE: () => {
+      if (this.isHotkeysForTasksAvailable) {
+        return;
+      }
+
       this.handleUpdateStatus(GoalStatus.DONE);
     },
     CHANGE_STATUS_TO_WONT_DO: () => {
+      if (this.isHotkeysForTasksAvailable) {
+        return;
+      }
+
       this.handleUpdateStatus(GoalStatus.WONT_DO);
     },
   };
@@ -133,13 +142,13 @@ export class GoalCreationModalStore {
   isTaskExpanded = false;
   isDescriptionLoading: boolean = true;
   isGoalCreatingOrUpdating: boolean = false;
-  draggingTask: TaskData | null = null;
   goals: GoalData[] = [];
   currentGoalIndex: number = 0;
   error: string = '';
   isCommentPopoverOpened: boolean = false;
   isInfoPopoverOpened: boolean = false;
   isSpaceCreateModalOpened: boolean = false;
+  isHotkeysForTasksAvailable: boolean = false;
 
   goal: GoalData = {
     id: uuidv4(),
@@ -221,6 +230,17 @@ export class GoalCreationModalStore {
     return this.goal.status !== GoalStatus.TODO || this.goal.isArchived;
   }
 
+  handleCloseModal = () => {
+    if (this.listWithCreator.list.openedTask) {
+      this.listWithCreator.list.closeTask();
+    } else if (this.isHotkeysForTasksAvailable) {
+      this.isHotkeysForTasksAvailable = false;
+      this.listWithCreator.list.removeFocus();
+    } else {
+      this.handleSimpleClose();
+    }
+  };
+
   handleCloseTask = () => {
     this.resizableConfig[0].size = 3;
     this.resizableConfig[2].size = 0;
@@ -236,6 +256,14 @@ export class GoalCreationModalStore {
     onCloseTask: this.handleCloseTask,
   };
 
+  enableHotkeysForTasks = () => {
+    this.isHotkeysForTasksAvailable = true;
+  };
+
+  disableHotkeysForTasks = () => {
+    this.isHotkeysForTasksAvailable = false;
+  };
+
   handleExpandTask = () => {
     this.isTaskExpanded = true;
     this.resizableConfig[0].size = 0;
@@ -323,8 +351,12 @@ export class GoalCreationModalStore {
           onSubmit: () => {
             this.isOpen = false;
             submitCb?.();
+            this.resetActiveElementFocus();
+          },
+          onClose: () => {
+            this.modals.close();
+            this.resetActiveElementFocus();
           },
-          onClose: this.modals.close,
         },
       });
     } else {

components/pages/Goals/modals/GoalCreationModal/view.tsx

@@ -28,7 +28,7 @@ export const GoalCreationModalView = observer(function GoalCreationModal() {
       onClose={store.handleClose}
       onCloseComplete={store.handleCloseComplete}
       closeOnEsc={false}
-      onEsc={store.handleClose}
+      onEsc={store.handleCloseModal}
       blockScrollOnMount={false}
       size='full'
       isCentered

components/pages/Goals/modals/GoalWontDoSubmitModal/store.ts

@@ -18,7 +18,7 @@ export class GoalWontDoSubmitModalStore {
   otherReason: string = '';
   textareaRef: HTMLTextAreaElement = null;
 
-  navigation = new ListNavigation();
+  navigation = new ListNavigation(undefined, true);
   validator = new Validator({
     fieldsErrorsToCheck: () => ({
       reason: [ErrorTypes.REQUIRED],

components/pages/Goals/modals/GoalWontDoSubmitModal/view.tsx

@@ -41,7 +41,6 @@ export const GoalWontDoSubmitModalView = observer(function GoalWontDoSubmitModal
             <Textarea
               ref={store.setTextareaRef}
               onChange={store.handleOtherReasonChange}
-              onKeyDown={(e) => e.stopPropagation()}
               onNavigate={store.handleTextareaNavigate}
               value={store.otherReason}
               maxLength={OTHER_REASON_MAX_LENGTH}

components/shared/DatePicker/store.ts

@@ -18,6 +18,7 @@ export class DatePickerStore {
   datePickerRef: ReactDatePicker;
   inputRef: HTMLInputElement;
   isFocused = false;
+  isCalendarFocused = false;
   isClickedOutside = false;
 
   constructor(public root: RootStore) {
@@ -42,6 +43,7 @@ export class DatePickerStore {
   handleBlur = (toggleFocus: boolean = true) => {
     if (this.isFocused) {
       this.isFocused = false;
+      this.isCalendarFocused = false;
 
       if (toggleFocus) {
         this.callbacks?.onFocusToggle?.(false);
@@ -51,6 +53,7 @@ export class DatePickerStore {
 
   handleInputClick = () => {
     this.datePickerRef.setFocus();
+    this.isCalendarFocused = false;
   };
 
   handleChange = (date: Date) => {
@@ -59,6 +62,7 @@ export class DatePickerStore {
 
   handleSave = (value: string = this.value, toggleFocus: boolean = true) => {
     this.value = value;
+    this.isCalendarFocused = false;
     this.callbacks?.onChanged(value);
 
     if (toggleFocus) {
@@ -79,6 +83,7 @@ export class DatePickerStore {
     this.handleAreaEvent(e);
 
     if (e.key === 'Tab') {
+      this.isCalendarFocused = false;
       this.datePickerRef?.setOpen(false);
     }
 
@@ -108,13 +113,16 @@ export class DatePickerStore {
     ) {
       this.handleSave(this.initialValue, false);
       this.callbacks.onNavigate(direction, e);
+    } else if ([NavigationDirections.DOWN, NavigationDirections.UP].includes(direction)) {
+      this.isCalendarFocused = true;
     }
   };
 
   handleIconClick = () => {
     if (this.isFocused || this.isClickedOutside) {
       this.datePickerRef?.setBlur();
       this.isClickedOutside = false;
+      this.isCalendarFocused = false;
     } else {
       this.datePickerRef?.setFocus();
     }

components/shared/DatePicker/view.tsx

@@ -66,10 +66,17 @@ export const DatePickerView = observer(forwardRef<ReactDatePicker, DatePickerVie
         )}
         <ReactDatePicker
           customInput={<DatePickerInput />}
+          calendarContainer={(props) => (
+            <div className={props.className}>
+              <div className='container-overlay' />
+              {props.children}
+            </div>
+          )}
           wrapperClassName={cn({ 'only-icon': showIconOnlyIfEmpty, 'disabled': showIconOnlyIfEmpty && mustShowIcon })}
           renderCustomHeader={DatePickerHeader}
           formatWeekDay={store.getWeekDayFormatByDate}
           dateFormat={DATE_PICKER_DATE_FORMAT}
+          calendarClassName={store.isCalendarFocused && 'focused'}
           selected={store.currentValue}
           onChange={store.handleChange}
           portalId="date-picker-portal"

components/shared/EditableTitle/index.tsx

@@ -161,13 +161,13 @@ export function EditableTitle({
         onBlur={handleInputBlur}
         onClick={(e) => e.stopPropagation()}
         ref={ref}
-        {...inputProps}
-        {...sharedProps}
         ml={margin}
         pl={1}
         width={widthByTitle ? `${value.length * 10}px` : '100%'}
         maxWidth='100%'
         minWidth='80px'
+        {...inputProps}
+        {...sharedProps}
       />
     ) : (
       <Text