Add New Document Printer functionality to DocumentPrinters component, including modal integration and success message upon creation. Enhance dropdown menu with new action item for creating document printers.

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -1,5 +1,6 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Button, Flex, Space, Dropdown } from 'antd'
+import { Button, Flex, Space, Dropdown, message, Modal } from 'antd'
+import PlusIcon from '../../Icons/PlusIcon'
 import ObjectTable from '../common/ObjectTable'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
@@ -7,10 +8,12 @@ import GridIcon from '../../Icons/GridIcon'
 import ListIcon from '../../Icons/ListIcon'
 import useViewMode from '../hooks/useViewMode'
 import ColumnViewButton from '../common/ColumnViewButton'
+import NewDocumentPrinter from './DocumentPrinters/NewDocumentPrinter'
 
 const DocumentPrinters = () => {
+  const [messageApi, contextHolder] = message.useMessage()
   const tableRef = useRef()
-
+  const [newDocumentPrinterOpen, setNewDocumentPrinterOpen] = useState(false)
   const [viewMode, setViewMode] = useViewMode('documentPrinter')
 
   const [columnVisibility, setColumnVisibility] =
@@ -18,6 +21,12 @@ const DocumentPrinters = () => {
 
   const actionItems = {
     items: [
+      {
+        label: 'New Document Printer',
+        key: 'newDocumentPrinter',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
       {
         label: 'Reload List',
         key: 'reloadList',
@@ -27,6 +36,8 @@ const DocumentPrinters = () => {
     onClick: ({ key }) => {
       if (key === 'reloadList') {
         tableRef.current?.reload()
+      } else if (key === 'newDocumentPrinter') {
+        setNewDocumentPrinterOpen(true)
       }
     }
   }
@@ -34,6 +45,7 @@ const DocumentPrinters = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large'>
+        {contextHolder}
         <Flex justify={'space-between'}>
           <Space size='small'>
             <Dropdown menu={actionItems}>
@@ -62,6 +74,22 @@ const DocumentPrinters = () => {
           cards={viewMode === 'cards'}
         />
       </Flex>
+      <Modal
+        open={newDocumentPrinterOpen}
+        onCancel={() => setNewDocumentPrinterOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewDocumentPrinter
+          onOk={() => {
+            setNewDocumentPrinterOpen(false)
+            messageApi.success('New note type created successfully.')
+            tableRef.current?.reload()
+          }}
+          reset={!newDocumentPrinterOpen}
+        />
+      </Modal>
     </>
   )
 }