feat(agenda3): ✨ compitablee style for empty backlog

haydenull · Nov 6, 2023 · 496f967 · 496f967
1 parent b13434a
commit 496f967
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 35 deletions.
diff --git a/src/newModel/app.ts b/src/newModel/app.ts
@@ -4,5 +4,5 @@ export type App = {
   view: 'tasks' | 'calendar'
 }
 export const appAtom = atom<App>({
-  view: 'calendar',
+  view: 'tasks',
 })
diff --git a/src/pages/NewDashboard/components/Backlog.tsx b/src/pages/NewDashboard/components/Backlog.tsx
@@ -1,6 +1,6 @@
 import { CaretRightOutlined } from '@ant-design/icons'
 import { Draggable } from '@fullcalendar/interaction'
-import { Collapse } from 'antd'
+import { Collapse, Empty } from 'antd'
 import clsx from 'clsx'
 import { useAtom } from 'jotai'
 import { useEffect, useRef } from 'react'
@@ -27,39 +27,51 @@ const Backlog = () => {
       <div className="h-[44px] flex items-center gap-1.5 relative after:shadow after:absolute after:bottom-0 after:w-full after:h-1">
         <BsArchive /> Backlog
       </div>
-      <div className="flex flex-col gap-2 flex-1 overflow-auto pt-2" ref={taskContainerRef}>
-        <Collapse
-          accordion
-          bordered={false}
-          expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
-          style={{ background: '#f9fafb' }}
-          items={categorizedTasks.map((project) => ({
-            key: project.project.originalName,
-            label: project.project.originalName,
-            children: (
-              <div className="flex flex-col gap-2">
-                {project.tasks.map((task) => (
-                  <div
-                    key={task.id}
-                    className="border rounded px-2 py-2 text-sm text-gray-600 break-all droppable-task-element bg-[#f9fafb]"
-                    data-event={JSON.stringify({
-                      id: task.id,
-                      title: task.title,
-                    })}
-                  >
-                    {task.title}
-                  </div>
-                ))}
-              </div>
-            ),
-            style: {
-              marginBottom: 10,
-              borderRadius: 4,
-              border: 'none',
-              background: '#f0f0f0',
-            },
-          }))}
-        />
+      <div
+        className={clsx('flex flex-col gap-2 flex-1 overflow-auto pt-2', {
+          'justify-center': categorizedTasks?.length <= 0,
+        })}
+        ref={taskContainerRef}
+      >
+        {categorizedTasks?.length > 0 ? (
+          <Collapse
+            accordion
+            bordered={false}
+            expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
+            style={{ background: '#f9fafb' }}
+            items={categorizedTasks.map((project) => ({
+              key: project.project.originalName,
+              label: project.project.originalName,
+              children: (
+                <div className="flex flex-col gap-2">
+                  {project.tasks.map((task) => (
+                    <div
+                      key={task.id}
+                      className="border rounded px-2 py-2 text-sm text-gray-600 break-all droppable-task-element bg-[#f9fafb]"
+                      data-event={JSON.stringify({
+                        id: task.id,
+                        title: task.title,
+                      })}
+                    >
+                      {task.title}
+                    </div>
+                  ))}
+                </div>
+              ),
+              style: {
+                marginBottom: 10,
+                borderRadius: 4,
+                border: 'none',
+                background: '#f0f0f0',
+              },
+            }))}
+          />
+        ) : (
+          <Empty
+            image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+            imageStyle={{ height: 60, display: 'flex', justifyContent: 'center' }}
+          />
+        )}
       </div>
     </div>
   )