feat: add gantt popup

haydenull · May 4, 2022 · 9498568 · 9498568
1 parent 88b7542
commit 9498568
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 24 deletions.
diff --git a/src/model/gantt.ts → src/model/gantt.tsx b/src/model/gantt.ts → src/model/gantt.tsx
@@ -5,6 +5,7 @@ import { atom } from 'jotai'
 import { ISchedule } from 'tui-calendar'
 import dayjs from 'dayjs'
 import { scheduleCalendarMapAtom } from './schedule'
+import { getPageData } from '@/util/logseq'
 
 const MOCK_PROJECTS: IGroup[] = [
   { id: '111', title: 'project1', events: [ { title: 'xxxxxxx', start: '2022-05-03', end: '2022-05-04', id: 'yyyy' } ], milestones: [ {start: '2022-05-03', end: '2022-05-03', title: 'milesttttsfasfsadfasffdasf', 'id': 'xxx'} ], style: { bgColor: '#fff', borderColor: '#fff', color: '#000' } },
@@ -21,10 +22,8 @@ export const ganttDataAtom = atom<IGroup[] | null>((get) => {
     if (!schedules) return null
     const convertScheduleToGanttEvent = (schedule: ISchedule): IEvent => {
       const { raw = {}, start, end, id = '', title = '' } = schedule
-      // @ts-ignore
-      const dayjsStart = dayjs(start)
-      // @ts-ignore
-      const dayjsEnd = dayjs(end)
+      const dayjsStart = dayjs(start as string)
+      const dayjsEnd = dayjs(end as string)
       return {
         id,
         title,
@@ -34,25 +33,25 @@ export const ganttDataAtom = atom<IGroup[] | null>((get) => {
           blockData: raw,
           calendarSchedule: schedule,
         },
-        // detailPopup: (<div className="text-xs">
-        //   <div className="font-bold text-base my-2">{title}</div>
-        //   <div className="my-2">{`${dayjsStart.format('YYYY.MM.DD hh:mm a')} - ${dayjsEnd.format('hh:mm a')}`}</div>
-        //   <p className="whitespace-pre-line">{raw.content}</p>
+        detailPopup: (<div className="text-xs">
+          <div className="font-bold text-base my-2">{title}</div>
+          <div className="my-2">{`${dayjsStart.format('YYYY.MM.DD hh:mm a')} - ${dayjsEnd.format('hh:mm a')}`}</div>
+          <p className="whitespace-pre-line">{raw.content}</p>
 
-        //   <a onClick={async () => {
-        //     const rawData: any = raw
-        //     const { id: pageId, originalName } = rawData?.page || {}
-        //     let pageName = originalName
-        //     // datascriptQuery 查询出的 block, 没有详细的 page 属性, 需要手动查询
-        //     if (!pageName) {
-        //       const page = await getPageData({ id: pageId })
-        //       pageName = page?.originalName
-        //     }
-        //     const { uuid: blockUuid } = await logseq.Editor.getBlock(rawData.id) || { uuid: '' }
-        //     logseq.Editor.scrollToBlockInPage(pageName, blockUuid)
-        //     logseq.hideMainUI()
-        //   }}>Navigate to block</a>
-        // </div>)
+          <a onClick={async () => {
+            const rawData: any = raw
+            const { id: pageId, originalName } = rawData?.page || {}
+            let pageName = originalName
+            // datascriptQuery 查询出的 block, 没有详细的 page 属性, 需要手动查询
+            if (!pageName) {
+              const page = await getPageData({ id: pageId })
+              pageName = page?.originalName
+            }
+            const { uuid: blockUuid } = await logseq.Editor.getBlock(rawData.id) || { uuid: '' }
+            logseq.Editor.scrollToBlockInPage(pageName, blockUuid)
+            logseq.hideMainUI()
+          }}>Navigate to block</a>
+        </div>)
       }
     }
     return {

diff --git a/src/pages/Gantt/components/Gantt.tsx b/src/pages/Gantt/components/Gantt.tsx
@@ -7,13 +7,50 @@ import { IoIosArrowUp, IoIosArrowDown} from 'react-icons/io'
 
 import s from '../index.module.less'
 import useTheme from '@/hooks/useTheme'
+import { getPageData } from '@/util/logseq'
+import dayjs from 'dayjs'
+import { ISchedule } from 'tui-calendar'
+
+export const getGanttDetailPopup = (schedule: ISchedule) => {
+  const { raw = {}, start, end, id = '', title = '' } = schedule
+  const dayjsStart = dayjs(start as string)
+  const dayjsEnd = dayjs(end as string)
+
+  return  (
+    <div className="text-xs">
+      <div className="font-bold text-base my-2">{title}</div>
+      <div className="my-2">{`${dayjsStart.format('YYYY.MM.DD hh:mm a')} - ${dayjsEnd.format('hh:mm a')}`}</div>
+      <p className="whitespace-pre-line">{raw.content}</p>
+
+      <a onClick={async () => {
+        const rawData: any = raw
+        const { id: pageId, originalName } = rawData?.page || {}
+        let pageName = originalName
+        // datascriptQuery 查询出的 block, 没有详细的 page 属性, 需要手动查询
+        if (!pageName) {
+          const page = await getPageData({ id: pageId })
+          pageName = page?.originalName
+        }
+        const { uuid: blockUuid } = await logseq.Editor.getBlock(rawData.id) || { uuid: '' }
+        logseq.Editor.scrollToBlockInPage(pageName, blockUuid)
+        logseq.hideMainUI()
+      }}>Navigate to block</a>
+    </div>
+  )
+}
 
 const Timeline: React.FC<{
   project: IGroup
 }> = ({ project }) => {
   const [expand, setExpand] = useState(true)
   const theme = useTheme()
 
+
+  // const projectWidthPopup = {
+  //   ...project,
+  //   events: project.events.map(event => 
+  // }
+
   return (
     <div className={classNames(s.timelineWrapper, {[s.expand]: expand}, 'rounded-2xl mb-9 h-auto p-6 shadow')}>
       <h3 className="title-text flex items-center cursor-pointer" onClick={() => setExpand(_expand => !_expand)}>

diff --git a/src/util/logseq.ts b/src/util/logseq.ts
@@ -55,8 +55,7 @@ export const getPageData = async (srcPage: { id?: number; uuid?: string; origina
 }
 
 export const getCurrentTheme = async () => {
-  if (import.meta.env.DEV) return 'light'
-  const logseqTheme = await logseq.App.getStateFromStore<'dark' | 'light'>('ui/theme')
+  const logseqTheme = import.meta.env.DEV ? 'light' : await logseq.App.getStateFromStore<'dark' | 'light'>('ui/theme')
   const lightTheme = (logseq.settings?.lightTheme as ISettingsForm['lightTheme']) || 'green'
   return logseqTheme === 'dark' ? 'dark' : lightTheme
 }