Save expanded keys

Author: Yadro

src/modules/tasks/TaskStore.ts

@@ -142,25 +142,51 @@ export default class TaskStore {
   }
 
   getCheckedKeys(projectId: string): string[] {
-    function condition(task: TaskModel): boolean {
-      return task.checked;
+    const condition = (task: TaskModel) => task.checked;
+
+    return this.getTaskKeysByCondition(projectId, condition);
+  }
+
+  getExpandedKeys(projectId: string): string[] {
+    const condition = (task: TaskModel) => task.expanded;
+
+    return this.getTaskKeysByCondition(projectId, condition);
+  }
+
+  checkTasks(projectId: string, taskIds: string[]) {
+    function checkTaskFn(task: TaskModel, taskIds: string[]) {
+      task.checked = taskIds.includes(task.key);
     }
 
     if (Array.isArray(this.tasks[projectId])) {
-      return TreeModelStoreHelper.getFlatItemsRecursive(
-        this.tasks[projectId],
-        condition
-      ).map((task) => task.key);
+      this.checkTasksRecursive(this.tasks[projectId], taskIds, checkTaskFn);
     }
-    return [];
+    this.tasksService.save(this.tasks);
+    GaService.event(EEventCategory.Tasks, ETasksEvents.Check);
   }
 
-  checkTasks(projectId: string, taskIds: string[]) {
+  tasksMarkExpanded(projectId: string, taskIds: string[]) {
+    function markExpanded(task: TaskModel, taskIds: string[]) {
+      task.expanded = taskIds.includes(task.key);
+    }
+
     if (Array.isArray(this.tasks[projectId])) {
-      this.checkTasksRecursive(this.tasks[projectId], taskIds);
+      this.checkTasksRecursive(this.tasks[projectId], taskIds, markExpanded);
     }
     this.tasksService.save(this.tasks);
-    GaService.event(EEventCategory.Tasks, ETasksEvents.Check);
+  }
+
+  private getTaskKeysByCondition(
+    projectId: string,
+    condition: (task: TaskModel) => boolean
+  ) {
+    if (Array.isArray(this.tasks[projectId])) {
+      return TreeModelStoreHelper.getFlatItemsRecursive(
+        this.tasks[projectId],
+        condition
+      ).map((task) => task.key);
+    }
+    return [];
   }
 
   private findAndSetActiveTask() {
@@ -181,11 +207,15 @@ export default class TaskStore {
     return TreeModelStoreHelper.getItemRecursive(tasks, condition);
   }
 
-  private checkTasksRecursive(tasks: TaskModel[], taskIds: string[]) {
+  private checkTasksRecursive(
+    tasks: TaskModel[],
+    taskIds: string[],
+    fn: (task: TaskModel, taskIds: string[]) => void
+  ) {
     tasks.forEach((task) => {
-      task.checked = taskIds.includes(task.key);
+      fn(task, taskIds);
       if (Array.isArray(task.children)) {
-        this.checkTasksRecursive(task.children, taskIds);
+        this.checkTasksRecursive(task.children, taskIds, fn);
       }
     });
   }

src/modules/tasks/models/TaskModel.ts

@@ -21,6 +21,7 @@ interface IJsonTaskModel extends ITreeItem<IJsonTaskModel> {
   projectId: string;
   checked: boolean;
   active: boolean;
+  expanded: boolean;
   time: string[][] | IJsonTimeRangeModel[];
   datesInProgress: string[];
   children: IJsonTaskModel[];
@@ -33,6 +34,7 @@ export default class TaskModel extends AbstractModel {
   children: TaskModel[] = [];
   projectId: string = '';
   checked: boolean = false;
+  expanded: boolean = true;
   active: boolean = false;
   time: ITimeRangeModel[] = [];
   datesInProgress: Date[] = [];
@@ -43,6 +45,7 @@ export default class TaskModel extends AbstractModel {
     this.load(props);
     this.children = props.children?.map((json) => new TaskModel(json)) || [];
     this.time =
+      // @ts-ignore
       props.time?.map<ITimeRangeModel>(
         (range: string[] | IJsonTimeRangeModel) => {
           if (Array.isArray(range)) {

src/screens/projects/ProjectsScreen.tsx

@@ -27,6 +27,15 @@ const TaskList = TreeList(
   },
   {
     checkable: true,
+    onExpand(keys: Key[]) {
+      tasksStore.tasksMarkExpanded(
+        projectStore.activeProject,
+        keys as string[]
+      );
+    },
+    getExpandedKeys() {
+      return tasksStore.getExpandedKeys(projectStore.activeProject);
+    },
     onCheck(keys: any) {
       tasksStore.checkTasks(projectStore.activeProject, keys as string[]);
     },

src/screens/projects/components/TreeList.tsx

@@ -14,6 +14,7 @@ interface TreeListProps {
 interface TreePropsExtended<T>
   extends Omit<TreeProps, 'onDrop' | 'onSelect' | 'titleRender'> {
   getCheckedKeys?: () => Key[];
+  getExpandedKeys?: () => Key[];
   titleRender?: (item: T) => React.ReactNode;
 }
 
@@ -22,7 +23,7 @@ export default function TreeList<T extends ITreeItem<any>>(
   updateData: (items: T[]) => void,
   options: TreePropsExtended<T>
 ) {
-  const { getCheckedKeys, ...rest } = options;
+  const { getCheckedKeys, getExpandedKeys, ...rest } = options;
 
   return observer(({ onSelect }: TreeListProps) => {
     const data = getData();
@@ -115,9 +116,11 @@ export default function TreeList<T extends ITreeItem<any>>(
       <Tree
         className="draggable-tree"
         checkedKeys={getCheckedKeys?.()}
+        expandedKeys={getExpandedKeys?.()}
         draggable
         blockNode
         treeData={data}
+        // @ts-ignore
         onDrop={onDrop}
         onSelect={onSelect}
         {...rest}