feat(web): add button to create record in calendar board

undb-io · Jan 7, 2023 · 4727fd5 · 4727fd5
1 parent 7ceb248
commit 4727fd5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 51 deletions.
diff --git a/apps/web/components/calendar-ui/calendar-board.tsx b/apps/web/components/calendar-ui/calendar-board.tsx
@@ -1,11 +1,7 @@
 import { DndContext, rectIntersection } from '@dnd-kit/core'
 import type { ICalendarField, Records, Table } from '@egodb/core'
 import { Calendar, Grid } from '@egodb/ui'
-import { useSetAtom } from 'jotai'
-import { useState } from 'react'
 import { trpc } from '../../trpc'
-import { createRecordInitialValueAtom } from '../create-record-form/create-record-initial-value.atom'
-import { createRecordFormDrawerOpened } from '../create-record-form/drawer-opened.atom'
 import type { ITableBaseProps } from '../table/table-base-props'
 import { CalendarRecords } from './calendar-records'
 import { Day } from './day'
@@ -17,15 +13,8 @@ interface IProps extends ITableBaseProps {
 }
 
 export const CalendarBoard: React.FC<IProps> = ({ table, field, records }) => {
-  const [date, setDate] = useState<Date | null>(null)
-  const setOpened = useSetAtom(createRecordFormDrawerOpened)
-  const setInitialValue = useSetAtom(createRecordInitialValueAtom)
-
-  const onChange = (date: Date) => {
-    setDate(date)
-    setOpened(true)
-    setInitialValue({ [field.id.value]: date })
-  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const onChange = () => {}
 
   const utils = trpc.useContext()
   const updateRecord = trpc.record.update.useMutation({
@@ -55,7 +44,6 @@ export const CalendarBoard: React.FC<IProps> = ({ table, field, records }) => {
         </Grid.Col>
         <Grid.Col span={10}>
           <Calendar
-            value={date}
             onChange={onChange}
             h="100%"
             fullWidth

diff --git a/apps/web/components/calendar-ui/day.tsx b/apps/web/components/calendar-ui/day.tsx
@@ -3,9 +3,12 @@ import { CSS } from '@dnd-kit/utilities'
 import type { ICalendarField, Records } from '@egodb/core'
 import type { Record } from '@egodb/core'
 import { DateEqual } from '@egodb/core'
-import { Box, Indicator, Stack, Text } from '@egodb/ui'
-import { isToday } from 'date-fns'
+import { ActionIcon, Box, Group, IconPlus, Indicator, Stack, Text, useHover } from '@egodb/ui'
+import { isEqual, isToday } from 'date-fns'
+import { useAtom } from 'jotai'
 import { useMemo } from 'react'
+import { createRecordInitialValueAtom } from '../create-record-form/create-record-initial-value.atom'
+import { createRecordFormDrawerOpened } from '../create-record-form/drawer-opened.atom'
 
 interface IProps {
   records: Records
@@ -17,6 +20,7 @@ const DraggableRecord: React.FC<{ record: Record }> = ({ record }) => {
   const { setNodeRef, attributes, listeners, transform, isDragging } = useDraggable({
     id: record.id.value,
   })
+
   return (
     <Box
       ref={setNodeRef}
@@ -52,41 +56,67 @@ export const Day: React.FC<IProps> = ({ date, field, records }) => {
     return records.filter((r) => spec.isSatisfiedBy(r))
   }, [records])
 
+  const { hovered, ref } = useHover()
+
+  const [opened, setCreateRecordOpened] = useAtom(createRecordFormDrawerOpened)
+  const [initialValue, setRecordInitialValue] = useAtom(createRecordInitialValueAtom)
+
   return (
-    <Stack
-      ref={setNodeRef}
-      spacing="xs"
-      px="sm"
-      py="xs"
-      w="100%"
-      h="100%"
-      sx={(theme) => ({
-        lineHeight: theme.fontSizes.md + 'px',
-      })}
-    >
-      <Box maw={10} sx={{ textAlign: 'start' }}>
-        <Indicator position="top-end" offset={-2} size={6} color="red" disabled={!isToday(date)}>
-          <span>{date.getDate()}</span>
-        </Indicator>
-      </Box>
-      <Stack spacing={5}>
-        {isOver ? (
-          <Box
-            bg="white"
-            px="xs"
-            w="100%"
-            h={20}
-            sx={(theme) => ({
-              textAlign: 'start',
-              borderRadius: theme.radius.xs,
-              border: `1px ${theme.colors.gray[5]} dashed`,
-            })}
-          />
-        ) : null}
-        {filteredRecords.map((record) => (
-          <DraggableRecord record={record} key={record.id.value} />
-        ))}
+    <Box w="100%" h="100%" ref={ref}>
+      <Stack
+        ref={setNodeRef}
+        spacing="xs"
+        px="sm"
+        py="xs"
+        w="100%"
+        h="100%"
+        sx={(theme) => ({
+          lineHeight: theme.fontSizes.md + 'px',
+        })}
+      >
+        <Group position="apart" ref={ref}>
+          <Box maw={10} sx={{ textAlign: 'start' }}>
+            <Indicator position="top-end" offset={-2} size={6} color="red" disabled={!isToday(date)}>
+              <span>{date.getDate()}</span>
+            </Indicator>
+          </Box>
+
+          <ActionIcon
+            onClick={() => {
+              setCreateRecordOpened(true)
+              setRecordInitialValue({ [field.id.value]: date })
+            }}
+            size={16}
+            sx={{
+              visibility:
+                hovered ||
+                (opened && initialValue[field.id.value] && isEqual(initialValue[field.id.value] as Date, date))
+                  ? 'visible'
+                  : 'hidden',
+            }}
+          >
+            <IconPlus />
+          </ActionIcon>
+        </Group>
+        <Stack spacing={5}>
+          {isOver ? (
+            <Box
+              bg="white"
+              px="xs"
+              w="100%"
+              h={20}
+              sx={(theme) => ({
+                textAlign: 'start',
+                borderRadius: theme.radius.xs,
+                border: `1px ${theme.colors.gray[5]} dashed`,
+              })}
+            />
+          ) : null}
+          {filteredRecords.map((record) => (
+            <DraggableRecord record={record} key={record.id.value} />
+          ))}
+        </Stack>
       </Stack>
-    </Stack>
+    </Box>
   )
 }
diff --git a/packages/ui/theme.ts b/packages/ui/theme.ts
@@ -1 +1 @@
-export { useMantineTheme as useEgoUITheme, type MantineTheme } from '@mantine/core'
+export { createStyles, useMantineTheme as useEgoUITheme, type MantineTheme } from '@mantine/core'