feat: filter supports drag and drop sorting

haydenull · Dec 6, 2023 · caafae2 · caafae2
1 parent 973fa67
commit caafae2
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 42 deletions.
diff --git a/src/Agenda3/components/modals/SettingsModal/FiltersForm.tsx b/src/Agenda3/components/modals/SettingsModal/FiltersForm.tsx
@@ -1,5 +1,6 @@
 import { Button } from 'antd'
 import { RiDeleteBin4Line, RiEdit2Line } from 'react-icons/ri'
+import { ReactSortable } from 'react-sortablejs'
 
 import useSettings from '@/Agenda3/hooks/useSettings'
 import type { Filter } from '@/Agenda3/models/settings'
@@ -23,45 +24,52 @@ const FiltersForm = () => {
           <EditFilterModal type="create" onOk={(filter) => onChange('filters', oldFilters.concat(filter))}>
             <Button>Create Filter</Button>
           </EditFilterModal>
-          <div className="mt-4 flex flex-col gap-2">
-            {settings.filters?.map((filter) => (
-              <div
-                key={filter.id}
-                className="flex items-center justify-between w-[300px] border rounded px-4 py-1.5 text-white"
-                style={{ backgroundColor: filter.color }}
-              >
-                <span>{filter.name}</span>
-                <div className="flex gap-3">
-                  <EditFilterModal
-                    type="edit"
-                    key={filter.id}
-                    initialValues={filter}
-                    onOk={(newFilter) =>
-                      onChange(
-                        'filters',
-                        oldFilters.map((f) => (f.id === filter.id ? newFilter : f)),
-                      )
-                    }
-                  >
-                    <RiEdit2Line className="cursor-pointer" />
-                  </EditFilterModal>
-                  <RiDeleteBin4Line
-                    className="cursor-pointer "
-                    onClick={() => {
-                      onChange(
-                        'filters',
-                        oldFilters.filter((f) => f.id !== filter.id),
-                      )
-                      onChange(
-                        'selectedFilters',
-                        oldSelectedFilters.filter((id) => id !== filter.id),
-                      )
-                    }}
-                  />
+          {settings.filters?.length ? (
+            <ReactSortable
+              animation={80}
+              className="mt-4"
+              list={settings.filters}
+              setList={(newFilters) => onChange('filters', newFilters)}
+            >
+              {settings.filters?.map((filter) => (
+                <div
+                  key={filter.id}
+                  className="flex items-center justify-between mb-2 w-[300px] border rounded px-4 py-1.5 text-white"
+                  style={{ backgroundColor: filter.color }}
+                >
+                  <span>{filter.name}</span>
+                  <div className="flex gap-3">
+                    <EditFilterModal
+                      type="edit"
+                      key={filter.id}
+                      initialValues={filter}
+                      onOk={(newFilter) =>
+                        onChange(
+                          'filters',
+                          oldFilters.map((f) => (f.id === filter.id ? newFilter : f)),
+                        )
+                      }
+                    >
+                      <RiEdit2Line className="cursor-pointer" />
+                    </EditFilterModal>
+                    <RiDeleteBin4Line
+                      className="cursor-pointer "
+                      onClick={() => {
+                        onChange(
+                          'filters',
+                          oldFilters.filter((f) => f.id !== filter.id),
+                        )
+                        onChange(
+                          'selectedFilters',
+                          oldSelectedFilters.filter((id) => id !== filter.id),
+                        )
+                      }}
+                    />
+                  </div>
                 </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </ReactSortable>
+          ) : null}
         </div>
       </div>
     </>

diff --git a/src/Agenda3/hooks/useSettings.ts b/src/Agenda3/hooks/useSettings.ts
@@ -1,7 +1,6 @@
 import { useLocalStorageValue } from '@react-hookz/web'
 import { useAtom } from 'jotai'
 import { clone, set } from 'lodash-es'
-import { useEffect } from 'react'
 
 import { type Settings, settingsAtom, type Filter } from '@/Agenda3/models/settings'
 
@@ -26,19 +25,20 @@ const useSettings = () => {
       return newSettings
     })
   }
-  // initial settings
-  useEffect(() => {
+  // initialize settings
+  const initializeSettings = () => {
     const base: Settings = { isInitialized: true }
     if (isPlugin) {
       const _settings = (logseq.settings as unknown as Settings) ?? {}
       setAtomSettings(_settings ? { ..._settings, isInitialized: true } : base)
     } else {
       setAtomSettings(valueLocalStorage ? { ...valueLocalStorage, isInitialized: true } : base)
     }
-  }, [])
+  }
   return {
     settings,
     setSettings,
+    initializeSettings,
   }
 }
 

diff --git a/src/Agenda3/index.tsx b/src/Agenda3/index.tsx
@@ -14,13 +14,16 @@ import { cn } from '@/util/util'
 import Backlog from './components/Backlog'
 import MultipleView from './components/MainArea'
 import TimeBox from './components/timebox/TimeBox'
+import useSettings from './hooks/useSettings'
 
 // import TimeBoxActual from './components/TimeBoxActual'
 
 export type TimeBoxType = 'estimated' | 'actual'
 const Dashboard = () => {
   const [timeBoxType, setTimeBoxType] = useState<TimeBoxType>('estimated')
   const [app, setApp] = useAtom(appAtom)
+  // 需要初始化 settings
+  const { initializeSettings } = useSettings()
   const setLogseq = useSetAtom(logseqAtom)
   const { refreshTasks } = useAgendaTasks()
   const { refreshPages } = usePages()
@@ -55,6 +58,10 @@ const Dashboard = () => {
       window.removeEventListener('focus', handleWindowFocus)
     }
   }, [loadData])
+  // initialize settings
+  useEffect(() => {
+    initializeSettings()
+  }, [])
   // set logseq app and user info
   useEffect(() => {
     logseq.App.getCurrentGraph().then((graph) => {