From 5680b067a8116b80dd8e779b282c0cb697bdc226 Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Sat, 23 Aug 2025 00:53:47 +0100 Subject: [PATCH] Fixed warnings and info pages. --- .../FilamentStocks/FilamentStockInfo.jsx | 308 +++++++------- .../Dashboard/Management/DocumentSizes.jsx | 4 +- .../DocumentSizes/DocumentSizeInfo.jsx | 289 +++++++------ .../Management/Filaments/FilamentInfo.jsx | 323 ++++++++------- .../Management/NoteTypes/NoteTypeInfo.jsx | 258 ++++++------ .../Dashboard/Management/Parts/PartInfo.jsx | 297 +++++++------- .../Management/Products/ProductInfo.jsx | 318 +++++++------- .../Dashboard/Management/Users/UserInfo.jsx | 285 +++++++------ .../Management/Vendors/VendorInfo.jsx | 292 +++++++------ .../Production/GCodeFiles/GCodeFileInfo.jsx | 388 +++++++++--------- .../Dashboard/Production/Jobs/JobInfo.jsx | 326 ++++++++------- .../Dashboard/common/ActionHandler.jsx | 2 +- .../Dashboard/common/NoteTypeSelect.jsx | 92 ----- .../Dashboard/common/NotesPanel.jsx | 8 +- .../Dashboard/common/OperationDisplay.jsx | 2 +- .../Dashboard/context/ApiServerContext.jsx | 6 +- .../Dashboard/context/PrintServerContext.jsx | 43 +- src/database/models/FilamentStock.js | 1 + 18 files changed, 1567 insertions(+), 1675 deletions(-) delete mode 100644 src/components/Dashboard/common/NoteTypeSelect.jsx diff --git a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx index d7318d1..2d5cce0 100644 --- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx +++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import useCollapseState from '../../hooks/useCollapseState' @@ -19,6 +20,8 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder' const FilamentStockInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const filamentStockId = new URLSearchParams(location.search).get( 'filamentStockId' ) @@ -31,161 +34,166 @@ const FilamentStockInfo = () => { auditLogs: true } ) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + } + } return ( - - {({ - loading, - isEditing, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - const actions = { - reload: () => { - fetchObject() - return true - } - } - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={true} - loading={editLoading} + type='filamentStock' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - - - - } - active={collapseState.events} - onToggle={(expanded) => - updateCollapseState('events', expanded) - } - collapseKey='events' - > - {loading ? ( - - ) : ( - - )} - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.events} + onToggle={(expanded) => updateCollapseState('events', expanded)} + collapseKey='events' + > + {editFormState.loading ? ( + + ) : ( + + )} + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Management/DocumentSizes.jsx b/src/components/Dashboard/Management/DocumentSizes.jsx index f8943b6..5416803 100644 --- a/src/components/Dashboard/Management/DocumentSizes.jsx +++ b/src/components/Dashboard/Management/DocumentSizes.jsx @@ -14,9 +14,7 @@ const DocumentSizes = () => { const [messageApi, contextHolder] = message.useMessage() const [newDocumentSizeOpen, setNewDocumentSizeOpen] = useState(false) const tableRef = useRef() - const [viewMode, setViewMode] = useViewMode('documentSize') - const [columnVisibility, setColumnVisibility] = useColumnVisibility('documentSize') @@ -85,7 +83,7 @@ const DocumentSizes = () => { { setNewDocumentSizeOpen(false) - messageApi.success('New note type created successfully.') + messageApi.success('New document size created successfully.') tableRef.current?.reload() }} reset={!newDocumentSizeOpen} diff --git a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx index 32fd17c..51cd094 100644 --- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx +++ b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import { LoadingOutlined } from '@ant-design/icons' @@ -24,6 +25,8 @@ log.setLevel(config.logLevel) const DocumentSizeInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const documentSizeId = new URLSearchParams(location.search).get( 'documentSizeId' ) @@ -35,159 +38,149 @@ const DocumentSizeInfo = () => { auditLogs: true } ) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + } + } return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - // Define actions for ActionHandler - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - } - } - - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + } isEditing={isEditing} - handleUpdate={() => { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} + type='documentSize' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - } - isEditing={isEditing} - type='documentSize' - objectData={objectData} - /> - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx index cff66b1..ea088e3 100644 --- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx +++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import { LoadingOutlined } from '@ant-design/icons' @@ -25,6 +26,8 @@ log.setLevel(config.logLevel) const FilamentInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const filamentId = new URLSearchParams(location.search).get('filamentId') const [collapseState, updateCollapseState] = useCollapseState( 'FilamentInfo', @@ -36,104 +39,110 @@ const FilamentInfo = () => { } ) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + } + } + return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - // Define actions for ActionHandler - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - } - } + <> + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + - return ( - - {({ callAction }) => ( - + + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} - /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > + { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => { + return ( } @@ -141,73 +150,69 @@ const FilamentInfo = () => { type='filament' objectData={objectData} /> - + ) + }} + + + - } - active={collapseState.stocks} - onToggle={(expanded) => - updateCollapseState('stocks', expanded) - } - collapseKey='stocks' - > - {loading ? ( - - ) : ( - - )} - + } + active={collapseState.stocks} + onToggle={(expanded) => updateCollapseState('stocks', expanded)} + collapseKey='stocks' + > + {editFormState.loading ? ( + + ) : ( + + )} + - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + + + + ) } diff --git a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx index 6c9a5da..bf2e955 100644 --- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx +++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex } from 'antd' import { LoadingOutlined } from '@ant-design/icons' @@ -17,6 +18,8 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx' const NoteTypeInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const noteTypeId = new URLSearchParams(location.search).get('noteTypeId') const [collapseState, updateCollapseState] = useCollapseState( 'NoteTypeInfo', @@ -25,140 +28,137 @@ const NoteTypeInfo = () => { auditLogs: true } ) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + } + } return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - // Define actions for ActionHandler - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - } - } - - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + } isEditing={isEditing} - handleUpdate={() => { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} + type='noteType' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - } - isEditing={isEditing} - type='noteType' - objectData={objectData} - /> - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Management/Parts/PartInfo.jsx b/src/components/Dashboard/Management/Parts/PartInfo.jsx index 271e020..3242b90 100644 --- a/src/components/Dashboard/Management/Parts/PartInfo.jsx +++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx @@ -1,4 +1,4 @@ -import { useContext } from 'react' +import { useRef, useState, useContext } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import useCollapseState from '../../hooks/useCollapseState' @@ -20,168 +20,165 @@ import { ApiServerContext } from '../../context/ApiServerContext' const PartInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const partId = new URLSearchParams(location.search).get('partId') - const { fetchObjectContent } = useContext(ApiServerContext) - const [collapseState, updateCollapseState] = useCollapseState('PartInfo', { info: true, parts: true, notes: true, auditLogs: true }) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + }, + download: () => { + if (partId && editFormRef?.current?.getObjectData) { + const objectData = editFormRef.current.getObjectData() + fetchObjectContent(partId, 'part', `${objectData?.name || 'part'}.stl`) + return true + } + } + } return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - }, - download: () => { - if (partId) { - fetchObjectContent(partId, 'part', `${objectData.name}.stl`) - return true - } - } - } - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} + type='part' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Management/Products/ProductInfo.jsx b/src/components/Dashboard/Management/Products/ProductInfo.jsx index 7bf53b4..29850e0 100644 --- a/src/components/Dashboard/Management/Products/ProductInfo.jsx +++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import useCollapseState from '../../hooks/useCollapseState' @@ -19,6 +20,8 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx' const ProductInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const productId = new URLSearchParams(location.search).get('productId') const [collapseState, updateCollapseState] = useCollapseState('ProductInfo', { info: true, @@ -26,172 +29,165 @@ const ProductInfo = () => { notes: true, auditLogs: true }) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + } + } return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - } - } - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} + type='product' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - - - - } - active={collapseState.parts} - onToggle={(expanded) => - updateCollapseState('parts', expanded) - } - collapseKey='parts' - > - - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.parts} + onToggle={(expanded) => updateCollapseState('parts', expanded)} + collapseKey='parts' + > + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Management/Users/UserInfo.jsx b/src/components/Dashboard/Management/Users/UserInfo.jsx index b58945c..c87da07 100644 --- a/src/components/Dashboard/Management/Users/UserInfo.jsx +++ b/src/components/Dashboard/Management/Users/UserInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import { LoadingOutlined } from '@ant-design/icons' @@ -19,161 +20,157 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx' const UserInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const userId = new URLSearchParams(location.search).get('userId') const [collapseState, updateCollapseState] = useCollapseState('UserInfo', { info: true, notes: true, auditLogs: true }) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.fetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + } + } return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - // Define actions for ActionHandler - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - } - } - - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + } isEditing={isEditing} - handleUpdate={() => { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading || true} - loading={editLoading} + type='user' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - } - isEditing={isEditing} - type='user' - objectData={objectData} - /> - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx index fd28453..5d116f1 100644 --- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx +++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import loglevel from 'loglevel' @@ -23,165 +24,160 @@ log.setLevel(config.logLevel) const VendorInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const vendorId = new URLSearchParams(location.search).get('vendorId') const [collapseState, updateCollapseState] = useCollapseState('VendorInfo', { info: true, notes: true, auditLogs: true }) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + lock: null, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current?.handleFetchObject?.() + return true + }, + edit: () => { + editFormRef?.current?.startEditing?.() + return false + }, + cancelEdit: () => { + editFormRef?.current?.cancelEditing?.() + return true + }, + finishEdit: () => { + editFormRef?.current?.handleUpdate?.() + return true + }, + delete: () => { + editFormRef?.current?.handleDelete?.() + return true + } + } return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleFetchObject, - handleUpdate, - handleDelete, - formValid, - objectData, - editLoading, - lock - }) => { - // Define actions for ActionHandler - const actions = { - reload: () => { - handleFetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - }, - delete: () => { - handleDelete() - return true - } - } - - return ( - - {({ callAction }) => ( - + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + +
+ + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} + type='vendor' + objectData={objectData} /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + )} + + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx index 949aa74..72ad475 100644 --- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx +++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx @@ -1,223 +1,225 @@ -import { useContext } from 'react' +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card, Typography } from 'antd' import { LoadingOutlined } from '@ant-design/icons' -import useCollapseState from '../../hooks/useCollapseState' -import NotesPanel from '../../common/NotesPanel' -import InfoCollapse from '../../common/InfoCollapse' -import ObjectInfo from '../../common/ObjectInfo' -import ViewButton from '../../common/ViewButton' -import EditObjectForm from '../../common/EditObjectForm' -import EditButtons from '../../common/EditButtons' -import LockIndicator from '../../common/LockIndicator.jsx' -import ActionHandler from '../../common/ActionHandler' +import loglevel from 'loglevel' +import config from '../../../../config.js' +import useCollapseState from '../../hooks/useCollapseState.js' +import NotesPanel from '../../common/NotesPanel.jsx' +import InfoCollapse from '../../common/InfoCollapse.jsx' +import ObjectInfo from '../../common/ObjectInfo.jsx' +import ViewButton from '../../common/ViewButton.jsx' import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx' import NoteIcon from '../../../Icons/NoteIcon.jsx' import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx' -import GCodeFileIcon from '../../../Icons/GCodeFileIcon.jsx' -import { ApiServerContext } from '../../context/ApiServerContext' +import EditObjectForm from '../../common/EditObjectForm.jsx' +import EditButtons from '../../common/EditButtons.jsx' +import LockIndicator from '../../common/LockIndicator.jsx' +import ActionHandler from '../../common/ActionHandler.jsx' import ObjectActions from '../../common/ObjectActions.jsx' import ObjectTable from '../../common/ObjectTable.jsx' import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx' +import EyeIcon from '../../../Icons/EyeIcon.jsx' const { Text } = Typography +const log = loglevel.getLogger('GCodeFileInfo') +log.setLevel(config.logLevel) + const GCodeFileInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const gcodeFileId = new URLSearchParams(location.search).get('gcodeFileId') - - const { fetchObjectContent } = useContext(ApiServerContext) const [collapseState, updateCollapseState] = useCollapseState( - 'gcodeFileInfo', + 'GCodeFileInfo', { info: true, - preview: true, + stocks: true, notes: true, auditLogs: true } ) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + locked: false, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current.handleFetchObject() + return true + }, + edit: () => { + editFormRef?.current.startEditing() + return false + }, + cancelEdit: () => { + editFormRef?.current.cancelEditing() + return true + }, + finishEdit: () => { + editFormRef?.current.handleUpdate() + return true + } + } + return ( - - {({ - loading, - isEditing, - startEditing, - cancelEditing, - handleUpdate, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - // Define actions that can be triggered via URL, now with access to startEditing - const actions = { - reload: () => { - fetchObject() - return true - }, - edit: () => { - startEditing() - return false - }, - cancelEdit: () => { - cancelEditing() - return true - }, - finishEdit: () => { - handleUpdate() - return true - }, - download: () => { - if (gcodeFileId) { - fetchObjectContent( - gcodeFileId, - 'gcodeFile', - `${objectData.name}.gcode` - ) - return true - } - } - } + <> + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + - return ( - - {({ callAction }) => ( - + + + { + console.log('Got edit form state change', state) + setEditFormState((prev) => ({ ...prev, ...state })) + }} > - - - - - - - - - - { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={lock?.locked || loading} - loading={editLoading} - /> - - - -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - } - isEditing={isEditing} - objectData={objectData} - type='gcodeFile' - /> - - - } - active={collapseState.preview} - onToggle={(expanded) => - updateCollapseState('preview', expanded) - } - collapseKey='preview' - > - - {objectData?.gcodeFileInfo?.thumbnail ? ( - GCodeFile - ) : ( - n/a - )} - - - - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - { + return ( + + } + active={collapseState.info} + onToggle={(expanded) => + updateCollapseState('info', expanded) + } + collapseKey='info' + > + } + isEditing={isEditing} + type='gcodeFile' + objectData={objectData} + visibleProperties={{}} /> - )} - - -
- - )} - - ) - }} - + + } + active={collapseState.preview} + onToggle={(expanded) => + updateCollapseState('preview', expanded) + } + collapseKey='preview' + > + + {objectData?.gcodeFileInfo?.thumbnail ? ( + GCodeFile + ) : ( + n/a + )} + + + + ) + }} + + + + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + + + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + + + + ) } diff --git a/src/components/Dashboard/Production/Jobs/JobInfo.jsx b/src/components/Dashboard/Production/Jobs/JobInfo.jsx index 146e545..bc0d379 100644 --- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx +++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx @@ -1,25 +1,33 @@ +import { useRef, useState } from 'react' import { useLocation } from 'react-router-dom' import { Space, Flex, Card } from 'antd' import { LoadingOutlined } from '@ant-design/icons' -import useCollapseState from '../../hooks/useCollapseState' -import NotesPanel from '../../common/NotesPanel' -import InfoCollapse from '../../common/InfoCollapse' -import ObjectInfo from '../../common/ObjectInfo' -import ViewButton from '../../common/ViewButton' -import EditObjectForm from '../../common/EditObjectForm' -import EditButtons from '../../common/EditButtons' +import loglevel from 'loglevel' +import config from '../../../../config.js' +import useCollapseState from '../../hooks/useCollapseState.js' +import NotesPanel from '../../common/NotesPanel.jsx' +import InfoCollapse from '../../common/InfoCollapse.jsx' +import ObjectInfo from '../../common/ObjectInfo.jsx' +import ViewButton from '../../common/ViewButton.jsx' +import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx' +import NoteIcon from '../../../Icons/NoteIcon.jsx' +import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx' +import EditObjectForm from '../../common/EditObjectForm.jsx' +import EditButtons from '../../common/EditButtons.jsx' import LockIndicator from '../../common/LockIndicator.jsx' -import ActionHandler from '../../common/ActionHandler' -import InfoCircleIcon from '../../../Icons/InfoCircleIcon' -import JobIcon from '../../../Icons/JobIcon' -import AuditLogIcon from '../../../Icons/AuditLogIcon' -import NoteIcon from '../../../Icons/NoteIcon' +import ActionHandler from '../../common/ActionHandler.jsx' import ObjectActions from '../../common/ObjectActions.jsx' import ObjectTable from '../../common/ObjectTable.jsx' import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx' +import JobIcon from '../../../Icons/JobIcon.jsx' + +const log = loglevel.getLogger('JobInfo') +log.setLevel(config.logLevel) const JobInfo = () => { const location = useLocation() + const editFormRef = useRef(null) + const actionHandlerRef = useRef(null) const jobId = new URLSearchParams(location.search).get('jobId') const [collapseState, updateCollapseState] = useCollapseState('JobInfo', { info: true, @@ -28,152 +36,170 @@ const JobInfo = () => { auditLogs: true }) + const [editFormState, setEditFormState] = useState({ + isEditing: false, + editLoading: false, + formValid: false, + locked: false, + loading: false + }) + + const actions = { + reload: () => { + editFormRef?.current.handleFetchObject() + return true + }, + edit: () => { + editFormRef?.current.startEditing() + return false + }, + cancelEdit: () => { + editFormRef?.current.cancelEditing() + return true + }, + finishEdit: () => { + editFormRef?.current.handleUpdate() + return true + } + } + return ( - - {({ - loading, - isEditing, - formValid, - objectData, - editLoading, - lock, - fetchObject - }) => { - // Define actions that can be triggered via URL, now with access to startEditing - const actions = { - reload: () => { - fetchObject() - return true - } - } + <> + + + + + + + + + + + { + actionHandlerRef.current.callAction('finishEdit') + }} + cancelEditing={() => { + actionHandlerRef.current.callAction('cancelEdit') + }} + startEditing={() => { + actionHandlerRef.current.callAction('edit') + }} + editLoading={editFormState.editLoading} + formValid={editFormState.formValid} + disabled={editFormState.lock?.locked || editFormState.loading} + loading={editFormState.editLoading} + /> + + - return ( - - {({ callAction }) => ( - + + + } + active={collapseState.info} + onToggle={(expanded) => updateCollapseState('info', expanded)} + collapseKey='info' > - - - - - - - - - - { + setEditFormState((prev) => ({ ...prev, ...state })) + }} + > + {({ loading, isEditing, objectData }) => ( + } isEditing={isEditing} - handleUpdate={() => { - callAction('finishEdit') - }} - cancelEditing={() => { - callAction('cancelEdit') - }} - startEditing={() => { - callAction('edit') - }} - editLoading={editLoading} - formValid={formValid} - disabled={true} - loading={editLoading} + type='job' + objectData={objectData} /> - - + )} + + + -
- - } - active={collapseState.info} - onToggle={(expanded) => - updateCollapseState('info', expanded) - } - collapseKey='info' - > - } - isEditing={isEditing} - type='job' - objectData={objectData} - /> - + } + active={collapseState.subJobs} + onToggle={(expanded) => updateCollapseState('subJobs', expanded)} + collapseKey='subJobs' + > + + - } - active={collapseState.subJobs} - onToggle={(expanded) => - updateCollapseState('subJobs', expanded) - } - collapseKey='subJobs' - > - - + } + active={collapseState.notes} + onToggle={(expanded) => updateCollapseState('notes', expanded)} + collapseKey='notes' + > + + + + - } - active={collapseState.notes} - onToggle={(expanded) => - updateCollapseState('notes', expanded) - } - collapseKey='notes' - > - - - - - - } - active={collapseState.auditLogs} - onToggle={(expanded) => - updateCollapseState('auditLogs', expanded) - } - collapseKey='auditLogs' - > - {loading ? ( - - ) : ( - - )} - - -
- - )} - - ) - }} - + } + active={collapseState.auditLogs} + onToggle={(expanded) => + updateCollapseState('auditLogs', expanded) + } + collapseKey='auditLogs' + > + {editFormState.loading ? ( + + ) : ( + + )} + + + + + ) } diff --git a/src/components/Dashboard/common/ActionHandler.jsx b/src/components/Dashboard/common/ActionHandler.jsx index 85aa40c..fa707cd 100644 --- a/src/components/Dashboard/common/ActionHandler.jsx +++ b/src/components/Dashboard/common/ActionHandler.jsx @@ -83,7 +83,7 @@ const ActionHandler = forwardRef( ActionHandler.displayName = 'ActionHandler' ActionHandler.propTypes = { - children: PropTypes.func, + children: PropTypes.oneOf([PropTypes.func, PropTypes.object]), actions: PropTypes.objectOf(PropTypes.func), actionParam: PropTypes.string, clearAfterExecute: PropTypes.bool, diff --git a/src/components/Dashboard/common/NoteTypeSelect.jsx b/src/components/Dashboard/common/NoteTypeSelect.jsx deleted file mode 100644 index 6f18992..0000000 --- a/src/components/Dashboard/common/NoteTypeSelect.jsx +++ /dev/null @@ -1,92 +0,0 @@ -// NoteTypeSelect.js -import PropTypes from 'prop-types' -import { message, Tag, Select, Space } from 'antd' -import { useEffect, useState, useContext, useCallback } from 'react' -import axios from 'axios' -import { AuthContext } from '../context/AuthContext' -import config from '../../../config' - -const NoteTypeSelect = ({ onChange, disabled, value = null }) => { - const [noteTypeOptions, setNoteTypeOptions] = useState([]) - const [loading, setLoading] = useState(true) - const [messageApi] = message.useMessage() - - const { authenticated } = useContext(AuthContext) - - const fetchNoteTypesData = useCallback(async () => { - if (!authenticated) { - return - } - setLoading(true) - - try { - const response = await axios.get( - `${config.backendUrl}/notetypes?active=true`, - { - headers: { - Accept: 'application/json' - }, - withCredentials: true // Important for including cookies - } - ) - const data = response.data - - setNoteTypeOptions(() => { - var options = [] - data.map((noteType) => { - var newNoteTypeOption = { - label: ( - - {noteType.name} - - ), - value: noteType._id - } - options.push(newNoteTypeOption) - }) - return options - }) - - setLoading(false) - } catch (error) { - if (error.response) { - // For other errors, show a message - messageApi.error( - 'Error fetching note types data:', - error.response.status - ) - } else { - messageApi.error( - 'An unexpected error occurred. Please try again later.' - ) - } - } - }, [authenticated, messageApi]) - - useEffect(() => { - if (authenticated) { - fetchNoteTypesData() - } - }, [authenticated, fetchNoteTypesData]) - - return ( -