inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2026-09-02 18:58:37 +00:00
Code Activity

Add "no notes" item

Browse Source
This commit is contained in:
Oliver Walters
2026-05-20 12:31:31 +00:00
parent bc197f9409
commit ac8e8d978c
1 changed files with 49 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/components/editors/NotesEditor.tsx
+49 -33
View File
@@ -18,6 +18,7 @@ import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css'; import '@blocknote/mantine/style.css';
import { useCreateBlockNote } from '@blocknote/react'; import { useCreateBlockNote } from '@blocknote/react';
import { import {
Alert,
Box, Box,
Button, Button,
Flex, Flex,
@@ -27,7 +28,7 @@ import {
Tabs, Tabs,
Text Text
} from '@mantine/core'; } from '@mantine/core';
import { IconCirclePlus } from '@tabler/icons-react'; import { IconCirclePlus, IconInfoCircle } from '@tabler/icons-react';
import { useNoteFields } from '../../forms/CommonForms'; import { useNoteFields } from '../../forms/CommonForms';
import { useCreateApiFormModal } from '../../hooks/UseForm'; import { useCreateApiFormModal } from '../../hooks/UseForm';
import { useUserState } from '../../states/UserState'; import { useUserState } from '../../states/UserState';
@@ -88,10 +89,15 @@ export default function NotesEditor({
() => () =>
user.hasChangePermission(modelType) && user.hasChangePermission(modelType) &&
notesQuery.isFetched && notesQuery.isFetched &&
notesQuery.isSuccess, notesQuery.isSuccess &&
!!notesQuery.data,
[user, modelType, notesQuery] [user, modelType, notesQuery]
); );
const hasNotes = useMemo(() => {
return notesQuery.data && notesQuery.data.length > 0;
}, [notesQuery.data]);
const editor = useCreateBlockNote(); const editor = useCreateBlockNote();
const noteFields = useNoteFields({ modelType: modelType, modelId: modelId }); const noteFields = useNoteFields({ modelType: modelType, modelId: modelId });
@@ -115,39 +121,49 @@ export default function NotesEditor({
{createNote.modal} {createNote.modal}
<Flex align='left'> <Flex align='left'>
<Box style={{ flex: 1 }}> <Box style={{ flex: 1 }}>
<Paper p='md' shadow='sm' withBorder> <Paper p='sm' shadow='sm' withBorder>
<BlockNoteView {hasNotes ? (
editor={editor} <Stack gap='xs'>
content={''} <BlockNoteView
editable={canEdit} editor={editor}
style={{ minHeight: '400px' }} content={''}
/> editable={canEdit}
style={{ minHeight: '400px' }}
/>
</Stack>
) : (
<Alert title={t`Notes`} icon={<IconInfoCircle />}>
{t`There are no notes yet for this item.`}
</Alert>
)}
</Paper> </Paper>
</Box> </Box>
<Stack gap='xs'> <Paper p='sm' shadow='sm' withBorder ml='md' style={{ width: '200px' }}>
<Button leftSection={<IconCirclePlus />} onClick={createNote.open}> <Stack gap='xs'>
{t`Add Note`} <Button leftSection={<IconCirclePlus />} onClick={createNote.open}>
</Button> {t`Add Note`}
<Tabs </Button>
orientation='vertical' <Tabs
placement='right' orientation='vertical'
value={selectedNote?.toString()} placement='right'
> value={selectedNote?.toString()}
<Tabs.List style={{ minWidth: '200px' }}> >
{notesQuery.data?.map((note: any) => ( <Tabs.List style={{ width: '100%' }}>
<Tabs.Tab {notesQuery.data?.map((note: any) => (
key={note.pk} <Tabs.Tab
value={note.pk?.toString()} key={note.pk}
onClick={() => setSelectedNote(note.pk)} value={note.pk?.toString()}
> onClick={() => setSelectedNote(note.pk)}
<Group gap='xs' wrap='nowrap'> >
<Text size='sm'>{note.title}</Text> <Group gap='xs' wrap='nowrap'>
</Group> <Text size='sm'>{note.title}</Text>
</Tabs.Tab> </Group>
))} </Tabs.Tab>
</Tabs.List> ))}
</Tabs> </Tabs.List>
</Stack> </Tabs>
</Stack>
</Paper>
</Flex> </Flex>
</> </>
); );