Merge pull request #887 from undb-xyz/release/v0.2.11

.czrc

@@ -1,3 +1,3 @@
 {
-  "path": "cz-emoji"
+  "path": "cz-conventional-changelog"
 }

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec -- commitlint --edit ${1}

apps/backend/src/i18n/i18n.middleware.ts

@@ -3,7 +3,6 @@ import { type i18n } from 'i18next'
 import { ClsService } from 'nestjs-cls'
 
 export const i18nMiddleware = (cls: ClsService, i18next: i18n) => (req: Request, res: Response, next: NextFunction) => {
-  console.log(req.language)
   cls.set('lang', req.language as 'en' | 'zh-CN')
   cls.set('t', i18next.t)
   next()

apps/frontend/src/features/calendar-ui/calendar-records.tsx

@@ -5,12 +5,11 @@ import type { Record, ICalendarField } from '@undb/core'
 import { ActionIcon, Box, Group, IconGripVertical, Skeleton, Space, Stack, Title } from '@undb/ui'
 import { useMemo, useRef } from 'react'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import { setSelectedRecordId } from '@undb/store'
 import { useCurrentTable } from '../../hooks/use-current-table'
 import { useTranslation } from 'react-i18next'
 import { RecordValues } from '../record/record-values'
-import { useAppDispatch } from '../../hooks'
 import { useFetchRecords } from '../../hooks/use-fetch-records'
+import { useNavigate } from 'react-router-dom'
 
 interface IProps {
   field: ICalendarField
@@ -20,8 +19,7 @@ const DraggableRecord: React.FC<{ record: Record }> = ({ record }) => {
   const { setNodeRef, attributes, listeners, setActivatorNodeRef, transform, isDragging } = useDraggable({
     id: record.id.value,
   })
-
-  const dispatch = useAppDispatch()
+  const navigate = useNavigate()
 
   return (
     <Box
@@ -31,7 +29,7 @@ const DraggableRecord: React.FC<{ record: Record }> = ({ record }) => {
       py="sm"
       onClick={(e) => {
         e.stopPropagation()
-        dispatch(setSelectedRecordId(record.id.value))
+        navigate(`r/${record.id.value}`)
       }}
       sx={(theme) => ({
         cursor: 'pointer',

apps/frontend/src/features/calendar-ui/day.tsx

@@ -3,16 +3,15 @@ import { CSS } from '@dnd-kit/utilities'
 import type { Record, ICalendarField, Records } from '@undb/core'
 import { DateFieldValue } from '@undb/core'
 import { DateEqual } from '@undb/core'
-import { setSelectedRecordId } from '@undb/store'
 import { ActionIcon, Box, Group, IconGripVertical, IconPlus, Stack, useHover } from '@undb/ui'
 import { isEqual, isToday } from 'date-fns'
 import { useAtom } from 'jotai'
 import { useMemo } from 'react'
-import { useAppDispatch } from '../../hooks'
 import { useCloseAllDrawers } from '../../hooks/use-close-all-drawers'
 import { createRecordInitialValueAtom } from '../create-record-form/create-record-initial-value.atom'
 import { createRecordFormDrawerOpened } from '../create-record-form/drawer-opened.atom'
 import { RecordValues } from '../record/record-values'
+import { useNavigate } from 'react-router-dom'
 
 interface IProps {
   records: Records
@@ -25,7 +24,7 @@ const DraggableRecord: React.FC<{ record: Record }> = ({ record }) => {
     id: record.id.value,
   })
 
-  const dispatch = useAppDispatch()
+  const navigate = useNavigate()
 
   return (
     <Group
@@ -51,7 +50,7 @@ const DraggableRecord: React.FC<{ record: Record }> = ({ record }) => {
       })}
       onClick={(e) => {
         e.stopPropagation()
-        dispatch(setSelectedRecordId(record.id.value))
+        navigate(`r/${record.id.value}`)
       }}
     >
       <IconGripVertical

apps/frontend/src/features/create-field-form/create-field-form.tsx

@@ -19,9 +19,8 @@ import { FieldVariantControl } from '../field/field-variant-control'
 import { FieldItem } from '../field-inputs/field-item'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
 import type { ICreateFieldSchema } from '@undb/core'
-import { canDisplay } from '@undb/core'
+import { canDisplay, createCreateFieldSchema } from '@undb/core'
 import { isControlledFieldType } from '@undb/core'
-import { createFieldSchema } from '@undb/core'
 import { zodResolver } from '@hookform/resolvers/zod'
 import type { ICreateFieldProps } from './create-field.props'
 import { useCreateFieldMutation } from '@undb/store'
@@ -46,7 +45,9 @@ export const CreateFieldForm: React.FC<ICreateFieldProps> = ({ onCancel, at }) =
 
   const form = useForm<ICreateFieldSchema>({
     defaultValues,
-    resolver: zodResolver(createFieldSchema),
+    resolver: zodResolver(createCreateFieldSchema(table)),
+    reValidateMode: 'onChange',
+    mode: 'onChange',
   })
 
   const [createField, { isLoading }] = useCreateFieldMutation()
@@ -101,6 +102,7 @@ export const CreateFieldForm: React.FC<ICreateFieldProps> = ({ onCancel, at }) =
             label={<FieldInputLabel>{t('Name', { ns: 'common' })}</FieldInputLabel>}
             required
             placeholder={t('Field Name') as string}
+            error={form.getFieldState('name').error?.message}
           />
           <FieldVariantControl isNew />
 

apps/frontend/src/features/create-table-form/create-table-form-drawer.tsx

@@ -42,6 +42,7 @@ export const CreateTableFormDrawer: React.FC = () => {
       <Drawer
         target="body"
         opened={opened}
+        withinPortal
         onClose={() => {
           if (form.formState.isDirty) {
             confirm()
@@ -53,9 +54,13 @@ export const CreateTableFormDrawer: React.FC = () => {
         padding="xl"
         position="right"
         size={700}
+        overlayProps={{ sx: { zIndex: 198 } }}
         styles={{
           header: { zIndex: 1000 },
+          inner: { zIndex: 199 },
           body: {
+            height: 'calc(100% - 80px)',
+            overflow: 'scroll',
             paddingBottom: '80px',
           },
         }}

apps/frontend/src/features/create-table-form/fields/field-common-control.tsx

@@ -35,7 +35,14 @@ export const FieldCommonControl: React.FC<IProps> = ({ index }) => {
         </Menu.Target>
 
         <Menu.Dropdown>
-          <Menu.Item h={30} color="red" onClick={() => remove(index)}>
+          <Menu.Item
+            h={30}
+            color="red"
+            onClick={() => {
+              remove(index)
+              form.trigger('schema')
+            }}
+          >
             <Text size={14}>{t('Delete', { ns: 'common' })}</Text>
           </Menu.Item>
         </Menu.Dropdown>

apps/frontend/src/features/field-inputs/parent-records-picker.tsx

@@ -1,15 +1,15 @@
 import type { ParentField } from '@undb/core'
-import { getSelectedRecordId, useParentAvailableQuery } from '@undb/store'
+import { useParentAvailableQuery } from '@undb/store'
 import type { SelectProps } from '@undb/ui'
 import { Select } from '@undb/ui'
 import { Group } from '@undb/ui'
 import { Loader } from '@undb/ui'
 import { forwardRef, useState } from 'react'
-import { useAppSelector } from '../../hooks'
 import { useCurrentTable } from '../../hooks/use-current-table'
 import { useReferenceDisplayValues } from '../../hooks/use-reference-display-values'
 import { RecordValue } from '../field-value/record-value'
 import { FieldIcon } from './field-Icon'
+import { useParams } from 'react-router-dom'
 
 interface IProps extends Omit<SelectProps, 'data'> {
   field: ParentField
@@ -27,7 +27,7 @@ const ParentSelectItem = forwardRef<HTMLDivElement, ItemProps>(({ label, ...othe
 ))
 
 export const ParentRecordPicker: React.FC<IProps> = ({ field, ...rest }) => {
-  const recordId = useAppSelector(getSelectedRecordId)
+  const { recordId } = useParams()
   const table = useCurrentTable()
 
   const [focused, setFocused] = useState(false)
@@ -46,7 +46,7 @@ export const ParentRecordPicker: React.FC<IProps> = ({ field, ...rest }) => {
     },
   )
 
-  const data = useReferenceDisplayValues(field, recordId, foreignRecords)
+  const data = useReferenceDisplayValues(field, recordId!, foreignRecords)
 
   return (
     <Select

apps/frontend/src/features/field-inputs/reference-record-picker.tsx

@@ -1,16 +1,16 @@
 import type { ReferenceField } from '@undb/core'
-import { getSelectedRecordId, useGetForeignRecordsQuery } from '@undb/store'
+import { useGetForeignRecordsQuery } from '@undb/store'
 import type { MultiSelectProps } from '@undb/ui'
 import { useDisclosure } from '@undb/ui'
 import { Loader } from '@undb/ui'
 import { Group } from '@undb/ui'
 import { MultiSelect } from '@undb/ui'
 import { forwardRef } from 'react'
-import { useAppSelector } from '../../hooks'
 import { useCurrentTable } from '../../hooks/use-current-table'
 import { useReferenceDisplayValues } from '../../hooks/use-reference-display-values'
 import { RecordValue } from '../field-value/record-value'
 import { FieldIcon } from './field-Icon'
+import { useParams } from 'react-router-dom'
 
 interface IProps extends Omit<MultiSelectProps, 'data'> {
   field: ReferenceField
@@ -28,7 +28,7 @@ const ReferenceSelectItem = forwardRef<HTMLDivElement, ItemProps>(({ label, ...o
 ))
 
 export const ReferenceRecordPicker: React.FC<IProps> = ({ field, ...rest }) => {
-  const recordId = useAppSelector(getSelectedRecordId)
+  const { recordId } = useParams()
   const table = useCurrentTable()
   const foreignTableId = field.foreignTableId.into() ?? table.id.value
 
@@ -45,7 +45,7 @@ export const ReferenceRecordPicker: React.FC<IProps> = ({ field, ...rest }) => {
     },
   )
 
-  const data = useReferenceDisplayValues(field, recordId, foreignRecords)
+  const data = useReferenceDisplayValues(field, recordId!, foreignRecords)
 
   return (
     <MultiSelect

apps/frontend/src/features/field-inputs/tree-records-picker.tsx

@@ -1,15 +1,15 @@
 import type { TreeField } from '@undb/core'
-import { getSelectedRecordId, useTreeAvailableQuery } from '@undb/store'
+import { useTreeAvailableQuery } from '@undb/store'
 import type { MultiSelectProps } from '@undb/ui'
 import { useDisclosure } from '@undb/ui'
 import { Group } from '@undb/ui'
 import { Loader, MultiSelect } from '@undb/ui'
-import { forwardRef, useState } from 'react'
-import { useAppSelector } from '../../hooks'
+import { forwardRef } from 'react'
 import { useCurrentTable } from '../../hooks/use-current-table'
 import { useReferenceDisplayValues } from '../../hooks/use-reference-display-values'
 import { RecordValue } from '../field-value/record-value'
 import { FieldIcon } from './field-Icon'
+import { useParams } from 'react-router-dom'
 
 interface IProps extends Omit<MultiSelectProps, 'data'> {
   field: TreeField
@@ -27,7 +27,7 @@ const TreeSelectItem = forwardRef<HTMLDivElement, ItemProps>(({ value, label, ..
 ))
 
 export const TreeRecordsPicker: React.FC<IProps> = ({ field, ...rest }) => {
-  const recordId = useAppSelector(getSelectedRecordId)
+  const { recordId } = useParams()
   const table = useCurrentTable()
 
   const [focused, handler] = useDisclosure(false)
@@ -46,7 +46,7 @@ export const TreeRecordsPicker: React.FC<IProps> = ({ field, ...rest }) => {
     },
   )
 
-  const data = useReferenceDisplayValues(field, recordId, foreignRecords)
+  const data = useReferenceDisplayValues(field, recordId!, foreignRecords)
 
   return (
     <MultiSelect

apps/frontend/src/features/header/header.tsx

@@ -1,4 +1,17 @@
-import { ActionIcon, Center, Group, IconLanguage, Image, Menu, Text, Avatar, IconLogout } from '@undb/ui'
+import {
+  ActionIcon,
+  Center,
+  Group,
+  IconLanguage,
+  Image,
+  Menu,
+  Text,
+  Avatar,
+  IconLogout,
+  Divider,
+  Button,
+  IconUsersGroup,
+} from '@undb/ui'
 import logo from '../../assets/logo.svg'
 import { useTranslation } from 'react-i18next'
 import { getMe, logout } from '@undb/store'
@@ -15,6 +28,7 @@ export const Header: React.FC = () => {
     <Group
       px="xs"
       h={50}
+      bg="white"
       py={6}
       sx={(theme) => ({ borderBottom: '1px solid ' + theme.colors.gray[3] })}
       position="apart"
@@ -29,6 +43,12 @@ export const Header: React.FC = () => {
       </Center>
 
       <Center mr="lg">
+        <Link to="/members">
+          <Button compact size="sm" color="gray" variant="subtle" leftIcon={<IconUsersGroup size={16} />}>
+            {t('Members', { ns: 'common' })}
+          </Button>
+        </Link>
+        <Divider mx={20} size="xs" orientation="vertical" />
         <Menu>
           <Menu.Target>
             <ActionIcon>
@@ -53,7 +73,16 @@ export const Header: React.FC = () => {
             </Menu.Target>
 
             <Menu.Dropdown>
-              <Menu.Item fw={600}>{me.username}</Menu.Item>
+              <Link to="/me/profile">
+                <Menu.Item fw={600}>
+                  <Group spacing="xs">
+                    <Avatar size="xs" src={me.avatar}>
+                      {me.username.slice(0, 2)}
+                    </Avatar>
+                    {me.username}
+                  </Group>
+                </Menu.Item>
+              </Link>
               <Menu.Divider />
               <Menu.Item icon={<IconLogout size={16} />} onClick={() => dispatch(logout())}>
                 {t('logout', { ns: 'auth' })}

apps/frontend/src/features/kanban-ui/kanban-card.tsx

@@ -6,18 +6,17 @@ import type { Record } from '@undb/core'
 import type { CSSProperties } from 'react'
 import { FieldIcon } from '../field-inputs/field-Icon'
 import { FieldValueFactory } from '../field-value/field-value.factory'
-import { setSelectedRecordId } from '@undb/store'
-import { useAppDispatch } from '../../hooks'
 import { useCurrentTable } from '../../hooks/use-current-table'
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 
 interface IProps {
   record: Record
 }
 
 export const KanbanCard: React.FC<IProps & SortableProps> = ({ record, attributes, listeners, setNodeRef, style }) => {
   const table = useCurrentTable()
-  const dispatch = useAppDispatch()
+  const navigate = useNavigate()
 
   return (
     <Card
@@ -31,7 +30,7 @@ export const KanbanCard: React.FC<IProps & SortableProps> = ({ record, attribute
       style={style}
       onClick={(e) => {
         e.stopPropagation()
-        dispatch(setSelectedRecordId(record.id.value))
+        navigate(`r/${record.id.value}`)
       }}
     >
       <Stack spacing={8} sx={(theme) => ({ fontSize: theme.fontSizes.sm })}>

apps/frontend/src/features/members/member-list-item.tsx

@@ -0,0 +1,32 @@
+import type { IQueryUser } from '@undb/core'
+import { useMeQuery } from '@undb/store'
+import { Avatar, Badge, Box, Group, Paper, Text } from '@undb/ui'
+import { t } from 'i18next'
+
+interface IProps {
+  member: IQueryUser
+}
+
+export const MemberListItem: React.FC<IProps> = ({ member }) => {
+  const { data } = useMeQuery()
+  const isMe = member.userId === data?.me.userId
+
+  return (
+    <Paper p="lg" shadow="xs" radius="md">
+      <Group position="apart">
+        <Group sx={{ flex: 1 }}>
+          <Avatar src={member.avatar}>{member.username.slice(0, 2)}</Avatar>
+
+          <Box>
+            <Text>{member.username}</Text>
+            <Text size="xs" color="gray">
+              {member.email}
+            </Text>
+          </Box>
+        </Group>
+
+        {isMe && <Badge>{t('You', { ns: 'common' })}</Badge>}
+      </Group>
+    </Paper>
+  )
+}