better UX (#583)

Author: ciur

changelog.md

@@ -15,6 +15,8 @@
 - Column sorting and filtering in document type list view
 - Column sorting and filtering in custom field list view
 - Column sorting and filtering in tags list view
+- Minor UX improvements: notification messages on custom field and document type CRUD
+  operations
 
 
 ## [3.3.1] - 2025-01-19

ui2/src/app/listenerMiddleware.ts

@@ -1,4 +1,7 @@
+import {customFieldCRUDListeners} from "@/features/custom-fields/customFieldsSlice"
+import {documentTypeCRUDListeners} from "@/features/document-types/documentTypesSlice"
 import {moveNodesListeners} from "@/features/nodes/nodesSlice"
+
 import {addListener, createListenerMiddleware} from "@reduxjs/toolkit"
 import type {AppDispatch, RootState} from "./types"
 
@@ -14,3 +17,5 @@ export const addAppListener = addListener.withTypes<RootState, AppDispatch>()
 export type AppAddListener = typeof addAppListener
 
 moveNodesListeners(startAppListening)
+documentTypeCRUDListeners(startAppListening)
+customFieldCRUDListeners(startAppListening)

ui2/src/features/custom-fields/customFieldsSlice.ts

@@ -1,8 +1,15 @@
+import {AppStartListening} from "@/app/listenerMiddleware"
+import {notifications} from "@mantine/notifications"
 import {PayloadAction, createSelector, createSlice} from "@reduxjs/toolkit"
 
 import {RootState} from "@/app/types"
 import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
-import type {CustomField, Paginated, PaginationType} from "@/types"
+import type {
+  CustomField,
+  Paginated,
+  PaginationType,
+  ServerErrorType
+} from "@/types"
 import {apiSliceWithCustomFields} from "./apiSlice"
 
 import type {CustomFieldListColumnName, CustomFieldSortByInput} from "./types"
@@ -175,3 +182,82 @@ export const selectReverseSortedByType = (state: RootState) => {
 export const selectFilterText = (state: RootState) => {
   return state.customFields.listTableSort.filter
 }
+
+export const customFieldCRUDListeners = (
+  startAppListening: AppStartListening
+) => {
+  // Create positive
+  startAppListening({
+    matcher:
+      apiSliceWithCustomFields.endpoints.addNewCustomField.matchFulfilled,
+    effect: async () => {
+      notifications.show({
+        withBorder: true,
+        message: "Custom Field successfully created"
+      })
+    }
+  })
+  // Create negative
+  startAppListening({
+    matcher: apiSliceWithCustomFields.endpoints.addNewCustomField.matchRejected,
+    effect: async action => {
+      const error = action.payload as ServerErrorType
+      notifications.show({
+        autoClose: false,
+        withBorder: true,
+        color: "red",
+        title: "Error",
+        message: error.data.detail
+      })
+    }
+  })
+  // Update positive
+  startAppListening({
+    matcher: apiSliceWithCustomFields.endpoints.editCustomField.matchFulfilled,
+    effect: async () => {
+      notifications.show({
+        withBorder: true,
+        message: "Custom Field successfully updated"
+      })
+    }
+  })
+  // Update negative
+  startAppListening({
+    matcher: apiSliceWithCustomFields.endpoints.editCustomField.matchRejected,
+    effect: async action => {
+      const error = action.payload as ServerErrorType
+      notifications.show({
+        autoClose: false,
+        withBorder: true,
+        color: "red",
+        title: "Error",
+        message: error.data.detail
+      })
+    }
+  })
+  // Delete positive
+  startAppListening({
+    matcher:
+      apiSliceWithCustomFields.endpoints.deleteCustomField.matchFulfilled,
+    effect: async () => {
+      notifications.show({
+        withBorder: true,
+        message: "Custom Field successfully deleted"
+      })
+    }
+  })
+  // Delete negative
+  startAppListening({
+    matcher: apiSliceWithCustomFields.endpoints.deleteCustomField.matchRejected,
+    effect: async action => {
+      const error = action.payload as ServerErrorType
+      notifications.show({
+        autoClose: false,
+        withBorder: true,
+        color: "red",
+        title: "Error",
+        message: error.data.detail
+      })
+    }
+  })
+}

ui2/src/features/document-types/documentTypesSlice.ts

@@ -1,8 +1,11 @@
+import {AppStartListening} from "@/app/listenerMiddleware"
+import {notifications} from "@mantine/notifications"
 import {PayloadAction, createSelector, createSlice} from "@reduxjs/toolkit"
 
 import {RootState} from "@/app/types"
 import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
-import type {Paginated, PaginationType} from "@/types"
+import type {Paginated, PaginationType, ServerErrorType} from "@/types"
+
 import {apiSliceWithDocTypes} from "./apiSlice"
 import type {
   DocType,
@@ -153,3 +156,80 @@ export const selectTableSortColumns = (state: RootState) =>
 export const selectFilterText = (state: RootState) => {
   return state.customFields.listTableSort.filter
 }
+
+export const documentTypeCRUDListeners = (
+  startAppListening: AppStartListening
+) => {
+  // Create positive
+  startAppListening({
+    matcher: apiSliceWithDocTypes.endpoints.addDocumentType.matchFulfilled,
+    effect: async () => {
+      notifications.show({
+        withBorder: true,
+        message: "Document Type successfully created"
+      })
+    }
+  })
+  // Create negative
+  startAppListening({
+    matcher: apiSliceWithDocTypes.endpoints.addDocumentType.matchRejected,
+    effect: async action => {
+      const error = action.payload as ServerErrorType
+      notifications.show({
+        autoClose: false,
+        withBorder: true,
+        color: "red",
+        title: "Error",
+        message: error.data.detail
+      })
+    }
+  })
+  // Update positive
+  startAppListening({
+    matcher: apiSliceWithDocTypes.endpoints.editDocumentType.matchFulfilled,
+    effect: async () => {
+      notifications.show({
+        withBorder: true,
+        message: "Document Type successfully updated"
+      })
+    }
+  })
+  // Update negative
+  startAppListening({
+    matcher: apiSliceWithDocTypes.endpoints.editDocumentType.matchRejected,
+    effect: async action => {
+      const error = action.payload as ServerErrorType
+      notifications.show({
+        autoClose: false,
+        withBorder: true,
+        color: "red",
+        title: "Error",
+        message: error.data.detail
+      })
+    }
+  })
+  // Delete positive
+  startAppListening({
+    matcher: apiSliceWithDocTypes.endpoints.deleteDocumentType.matchFulfilled,
+    effect: async () => {
+      notifications.show({
+        withBorder: true,
+        message: "Document Type successfully deleted"
+      })
+    }
+  })
+  // Delete negative
+  startAppListening({
+    matcher: apiSliceWithDocTypes.endpoints.deleteDocumentType.matchRejected,
+    effect: async action => {
+      const error = action.payload as ServerErrorType
+      notifications.show({
+        autoClose: false,
+        withBorder: true,
+        color: "red",
+        title: "Error",
+        message: error.data.detail
+      })
+    }
+  })
+}

ui2/src/features/document/components/DocumentDetails/DocumentDetails.tsx

@@ -12,11 +12,15 @@ import {useContext} from "react"
 
 import PanelContext from "@/contexts/PanelContext"
 import {useGetDocumentQuery} from "@/features/document/apiSlice"
-import {selectDocumentVersionOCRLang} from "@/features/document/documentVersSlice"
+import {
+  selectDocumentVersionID,
+  selectDocumentVersionOCRLang
+} from "@/features/document/documentVersSlice"
 import {skipToken} from "@reduxjs/toolkit/query"
 import {IconEdit} from "@tabler/icons-react"
 import classes from "./DocumentDetails.module.css"
 
+import CopyButton from "@/components/CopyButton"
 import {EditNodeTagsModal} from "@/components/EditNodeTags"
 import {
   selectCurrentNodeID,
@@ -34,6 +38,7 @@ export default function DocumentDetails() {
     selectDocumentDetailsPanelOpen(s, mode)
   )
   const ocrLang = useAppSelector(s => selectDocumentVersionOCRLang(s, mode))
+  const docVerID = useAppSelector(s => selectDocumentVersionID(s, mode))
 
   if (!ocrLang || !docID || isLoading) {
     return (
@@ -52,7 +57,18 @@ export default function DocumentDetails() {
     return (
       <Group align="flex-start" className={classes.documentDetailsOpened}>
         <Stack className={classes.documentDetailsContent} justify="flex-start">
-          <TextInput label="ID" readOnly value={docID} />
+          <TextInput
+            label="ID"
+            readOnly
+            value={docID}
+            rightSection={<CopyButton value={docID || ""} />}
+          />
+          <TextInput
+            label="Version ID"
+            readOnly
+            value={docVerID}
+            rightSection={<CopyButton value={docVerID || ""} />}
+          />
           <TextInput label="OCR Language" readOnly value={ocrLang} mt="md" />
           <Group>
             <TagsInput

ui2/src/features/document/documentVersSlice.ts

@@ -214,6 +214,16 @@ export const selectDocumentVersionOCRLang = (
   }
 }
 
+export const selectDocumentVersionID = (state: RootState, mode: PanelMode) => {
+  if (mode == "main") {
+    return state.ui.mainViewerCurrentDocVerID
+  }
+
+  if (mode == "secondary") {
+    return state.ui.secondaryViewerCurrentDocVerID
+  }
+}
+
 export const selectSelectedPageIDs = (state: RootState, mode: PanelMode) => {
   if (mode == "main") {
     return state.ui.mainViewerSelectedIDs