refactor: select left list status

apps/frontend/src/components/task/TaskItem.vue

@@ -3,7 +3,7 @@ import { NPopover } from 'naive-ui'
 import { ref } from 'vue'
 import { useTaskOperationMessage, useTaskRightContextMenu } from '@/composables'
 import { TaskStatus, useTasksStore, useThemeStore } from '@/store'
-import type { ListProject, Task } from '@/store'
+import type { Task } from '@/store'
 
 interface Props {
   task: Task

apps/frontend/src/components/task/TaskLeftListProject.vue

@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import type { MenuItem } from '@imengyu/vue3-context-menu'
-import ContextMenu from '@imengyu/vue3-context-menu'
 import type { TreeOption } from 'naive-ui'
 import { NTree } from 'naive-ui'
-import { h, onMounted, ref, watchEffect } from 'vue'
+import { computed, h, ref, watchEffect } from 'vue'
 import 'vue3-emoji-picker/css'
-// import { tagCreateViewDialog } from './TagView'
-// import { tagRemoveAlert } from './TagView/TagRemoveAlert'
 import { projectCreatedViewModal } from './TagView/ProjectCreateView'
-import { useListProjectsStore, useProjectSelectedStatusStore } from '@/store'
-// import type { Tag } from '@/services/task/listTag'
+import { useTaskLeftListStore } from './taskLeftList'
 
-const projectSelectedStatusStore = useProjectSelectedStatusStore()
-const listProjectsStore = useListProjectsStore()
+const taskLeftListStore = useTaskLeftListStore()
+const treeListProjectChildren = ref<TreeOption[]>([])
 
-enum TreeRootKeys {
-  PROJECT = 100,
-  TAG = 200,
-}
+const selectedKey = computed({
+  get() {
+    return [taskLeftListStore.selectedKey]
+  },
+  set(val) {
+    taskLeftListStore.selectedKey = val[0]
+  },
+})
+
+const defaultExpandedKeys = [taskLeftListStore.listProjectRootNode.name]
 
 const createRootNodeSuffix = (onclick: (e: Event) => void) => {
   return () => h(Icon, {
@@ -29,177 +30,41 @@ const createRootNodeSuffix = (onclick: (e: Event) => void) => {
   })
 }
 
-const createTagLeafPrefix = () => {
-  return () => h(Icon, {
-    icon: 'carbon:tag',
-    width: '14',
-  })
-}
-
-const createOperateNodeBtn = (items: MenuItem[]) => {
-  return h(Icon, {
-    class: 'invisible',
-    icon: 'mdi:dots-horizontal',
-    width: '20',
-    onclick(e: MouseEvent) {
-      e.preventDefault()
-      ContextMenu.showContextMenu({
-        x: e.x,
-        y: e.y,
-        items,
-      })
-    },
-  })
-}
-
-// const createTagLeafSuffix = (tag: Tag) => {
-//   return () => h('div', { class: 'flex flex-row items-center' },
-//     [
-//       h(Icon, {
-//         icon: 'carbon:circle-solid',
-//         width: '8',
-//         color: tag.color,
-//         class: 'mx-2',
-//       }),
-//       createOperateNodeBtn([
-//         {
-//           label: 'edit',
-//           onClick: () => tagCreateViewDialog({ tag }),
-//         },
-//         {
-//           label: 'remove',
-//           onClick: () => {
-//             tagRemoveAlert({
-//               tagName: tag.name,
-//             }).then((action) => {
-
-//               // if (action === 'confirm')
-//               //   taskStore.deleteTag(tag.id)
-//             })
-//           },
-//         },
-//       ]),
-//     ],
-//   )
-// }
-
-// const generateTagChildrenNode = (tags: Tag[]) => {
-//   if (!tags.length) {
-//     return [
-//       {
-//         label: '以标签的维度展示不同清单的任务。在添加任务时输入“#”可快速选择标签',
-//         placeholder: true,
-//       },
-//     ]
-//   }
-//   return tags.map((tag, index) => ({
-//     key: TreeRootKeys.TAG + index + 1,
-//     label: tag.name,
-//     color: tag.color,
-//     prefix: createTagLeafPrefix(),
-//     suffix: createTagLeafSuffix(tag),
-//     isleaf: true,
-//   }))
-// }
-
-const defaultExpandedKeys = ref<TreeRootKeys[]>([])
-const treeProjectChildren = ref<TreeOption[]>([])
-// const treeTagChildren = ref<TreeOption[]>([])
-
 watchEffect(() => {
-  treeProjectChildren.value = listProjectsStore.projects.map((project, index) => {
+  treeListProjectChildren.value = taskLeftListStore.listProjectChildrenNodes.map((project) => {
     return {
-      key: TreeRootKeys.PROJECT + index + 1,
+      key: project.name,
       label: project.name,
       isleaf: true,
     }
   })
-  // treeTagChildren.value = generateTagChildrenNode(taskStore.listTags)
-})
-
-onMounted(() => {
-  defaultExpandedKeys.value = [
-    ...new Set([
-      ...projectSelectedStatusStore.listDefaultSelectedKey,
-      ...(listProjectsStore.projects.length ? [] : [TreeRootKeys.PROJECT]),
-      // ...(taskStore.listTags.length ? [] : [TreeRootKeys.TAG]),
-    ]),
-  ]
 })
 
 const data = ref<any[]>([
   {
-    key: TreeRootKeys.PROJECT,
-    label: '清单',
+    key: taskLeftListStore.listProjectRootNode.name,
+    label: taskLeftListStore.listProjectRootNode.name,
     checkboxDisabled: false,
     isLeaf: false,
-    children: treeProjectChildren,
+    children: treeListProjectChildren,
     suffix: createRootNodeSuffix((e: Event) => {
       e.stopPropagation()
       projectCreatedViewModal()
     }),
   },
-  // {
-  //   key: TreeRootKeys.TAG,
-  //   label: '标签',
-  //   checkboxDisabled: false,
-  //   isLeaf: false,
-  //   children: treeTagChildren,
-  //   suffix: createRootNodeSuffix((e: Event) => {
-  //     e.stopPropagation()
-  //     tagCreateViewDialog().then(() => {
-  //       // eslint-disable-next-line no-console
-  //       console.log('done')
-  //     })
-  //   }),
-  // },
 ])
+
 const nodeProps = ({ option }: { option: TreeOption }) => {
   return {
-    onClick() {
-      if (
-        option.key === TreeRootKeys.PROJECT
-        || option.key === TreeRootKeys.TAG
-      )
-        return
-
-      // if (option.key! < 200) {
-      const projectName = `${option.label}`
-      listProjectsStore.selectProject(projectName)
-      // }
-
-      // const tag = findListTagByName(option.label)
-      // if (tag)
-      //   taskStore.selectCategory(tag)
-    },
     class: option.placeholder ? 'placeholder' : '',
   }
 }
-
-const changeSelectedKey = (key: number[]) => {
-  if (key[0] === TreeRootKeys.PROJECT) {
-    projectSelectedStatusStore.changePreSelectKey(
-      projectSelectedStatusStore.selectedKey,
-    )
-  }
-
-  projectSelectedStatusStore.changeSelectedKey(key)
-}
-
-const onExpandedKey = (key: number[]) => {
-  if (key.includes(TreeRootKeys.PROJECT)) {
-    projectSelectedStatusStore.changeSelectedKey(
-      projectSelectedStatusStore.preSelectKey,
-    )
-  }
-}
 </script>
 
 <template>
   <NTree
-    v-model:selected-keys="projectSelectedStatusStore.selectedKey" :default-expanded-keys="defaultExpandedKeys"
-    block-line expand-on-click :data="data" :node-props="nodeProps" @update:expanded-keys="onExpandedKey"
-    @update:selected-keys="changeSelectedKey"
+    v-model:selected-keys="selectedKey" :default-expanded-keys="defaultExpandedKeys"
+    block-line expand-on-click :data="data" :node-props="nodeProps"
   />
 </template>
 

apps/frontend/src/components/task/TaskLeftListSmartProject.vue

@@ -2,9 +2,9 @@
 import { Icon } from '@iconify/vue'
 import { NPopover } from 'naive-ui'
 import { ref } from 'vue'
+import { useTaskLeftListStore } from './taskLeftList'
 import type { SmartProjectName } from '@/store'
 import {
-  useProjectSelectedStatusStore,
   useSettingsStore,
   useSmartProjects,
 } from '@/store'
@@ -31,20 +31,17 @@ function useProjectMoreActions() {
   }
 }
 
+const taskLeftListStore = useTaskLeftListStore()
 const settingsStore = useSettingsStore()
 const selected = 'bg-[#E7F5EE] dark:bg-[#233633]'
 
 const smartProjects = useSmartProjects()
-const projectSelectedStatusStore = useProjectSelectedStatusStore()
-const {
-  showMoreIconIndex,
-  showWitchPopover,
-  openPopover,
-} = useProjectMoreActions()
+const { showMoreIconIndex, showWitchPopover, openPopover }
+  = useProjectMoreActions()
 
-const handleTaskItemClick = (projectName: string, key: number) => {
+const handleTaskItemClick = (projectName: string) => {
   smartProjects.selectProject(projectName as SmartProjectName)
-  projectSelectedStatusStore.changeSelectedKey([key])
+  taskLeftListStore.selectedKey = projectName
 }
 </script>
 
@@ -57,19 +54,19 @@ const handleTaskItemClick = (projectName: string, key: number) => {
       pl-4
       pr-2
       hover="bg-[#F3F3F5] dark:bg-[#2D2D30]"
-      :class="
-        projectSelectedStatusStore.selectedKey[0] === key ? selected : ''
-      "
-      @click="handleTaskItemClick(item.title, key)"
+      :class="taskLeftListStore.selectedKey === item.title ? selected : ''"
+      @click="handleTaskItemClick(item.title)"
       @mouseenter="showMoreIconIndex = key"
       @mouseleave="showMoreIconIndex = -1"
     >
       <div flex>
         <Icon
           :icon="item.icon"
-          width="20" class="color-[#9D9FA3]"
+          width="20"
+          class="color-[#9D9FA3]"
           dark="color-white-b"
-        /> <span class="ml-2">{{ item.title }}</span>
+        />
+        <span class="ml-2">{{ item.title }}</span>
       </div>
 
       <NPopover
@@ -82,10 +79,7 @@ const handleTaskItemClick = (projectName: string, key: number) => {
       >
         <template #trigger>
           <Icon
-            v-show="
-              projectSelectedStatusStore.selectedKey[0] === key
-                || showMoreIconIndex === key
-            "
+            v-show="showMoreIconIndex === key"
             icon="material-symbols:more-horiz"
             width="20"
             class="color-[#9D9FA3]"

apps/frontend/src/components/task/taskLeftList.ts

@@ -0,0 +1,62 @@
+import { ref, watch, watchEffect } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { useListProjectsStore } from '@/store/listProjects'
+
+interface Node {
+  name: string
+}
+
+export const useTaskLeftListStore = defineStore('taskLeftList', () => {
+  const listProjectsStore = useListProjectsStore()
+  const listProjectRootNode: Node = {
+    name: '清单',
+  }
+
+  const selectedKey = ref<string>('')
+  const listProjectChildrenNodes = ref<Node[]>([])
+
+  watchEffect(() => {
+    listProjectChildrenNodes.value = listProjectsStore.projects.map((p) => {
+      return {
+        name: p.name,
+      }
+    })
+  })
+
+  // 初始化默认的选择
+  watchOnce(
+    () => listProjectChildrenNodes.value,
+    (value) => {
+      selectedKey.value = value[0].name
+    },
+  )
+
+  // 当更新列表清单的时候 同步下 selectedKeys
+  watch(
+    () => listProjectChildrenNodes.value,
+    (newValue, oldValue) => {
+      if (!oldValue.length)
+        return
+
+      if (newValue.length > oldValue.length)
+        selectedKey.value = newValue[newValue.length - 1].name
+      else if (oldValue.length > newValue.length)
+        selectedKey.value = newValue[0].name
+    },
+  )
+
+  watch(selectedKey, (newValue, oldValue) => {
+    // 当点击 rootNode 的时候不应该改变选择的 project
+    if (newValue === listProjectRootNode.name)
+      selectedKey.value = oldValue
+    else
+      listProjectsStore.selectProject(newValue)
+  })
+
+  return {
+    selectedKey,
+    listProjectRootNode,
+    listProjectChildrenNodes,
+  }
+})

apps/frontend/src/store/index.ts

@@ -1,5 +1,4 @@
 export { useThemeStore, getGlobalThemeStore } from './useTheme'
-export { useProjectSelectedStatusStore } from './useProjectSelectedStatusStore'
 export { useTaskLeftMenuStatusStore } from './useTaskLeftMenuStatus'
 export { useSettingsStore } from './useSettingsStore'
 export * from './tasks'