Merge pull request #2689 from paperless-ngx/feature-update-error-messages

Feature: update error message colors & show on document failures

src-ui/messages.xlf

@@ -1411,7 +1411,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/toast.service.ts</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">35</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6886003843406464884" datatype="html">
@@ -2645,11 +2645,36 @@
           <context context-type="linenumber">195</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="5758784066858623886" datatype="html">
+        <source>Error retrieving metadata</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
+          <context context-type="linenumber">305</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="2374084708811774419" datatype="html">
+        <source>Error retrieving suggestions</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
+          <context context-type="linenumber">319</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="448882439049417053" datatype="html">
+        <source>Error saving document</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
+          <context context-type="linenumber">432</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
+          <context context-type="linenumber">476</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="9021887951960049161" datatype="html">
         <source>Confirm delete</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">489</context>
+          <context context-type="linenumber">505</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/manage/management-list/management-list.component.ts</context>
@@ -2660,35 +2685,35 @@
         <source>Do you really want to delete document &quot;<x id="PH" equiv-text="this.document.title"/>&quot;?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">490</context>
+          <context context-type="linenumber">506</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6691075929777935948" datatype="html">
         <source>The files for this document will be deleted permanently. This operation cannot be undone.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">491</context>
+          <context context-type="linenumber">507</context>
         </context-group>
       </trans-unit>
       <trans-unit id="719892092227206532" datatype="html">
         <source>Delete document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">493</context>
+          <context context-type="linenumber">509</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1844801255494293730" datatype="html">
         <source>Error deleting document: <x id="PH" equiv-text="JSON.stringify(error)"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">509</context>
+          <context context-type="linenumber">525</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7362691899087997122" datatype="html">
         <source>Redo OCR confirm</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">529</context>
+          <context context-type="linenumber">545</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -2699,14 +2724,14 @@
         <source>This operation will permanently redo OCR for this document.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">530</context>
+          <context context-type="linenumber">546</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5641451190833696892" datatype="html">
         <source>This operation cannot be undone.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">531</context>
+          <context context-type="linenumber">547</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -2737,7 +2762,7 @@
         <source>Proceed</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">533</context>
+          <context context-type="linenumber">549</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -2764,7 +2789,7 @@
         <source>Redo OCR operation will begin in the background. Close and re-open or reload this document after the operation has completed to see new content.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">541</context>
+          <context context-type="linenumber">557</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8008978164775353960" datatype="html">
@@ -2773,7 +2798,7 @@
               )"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">552,554</context>
+          <context context-type="linenumber">568,570</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6857598786757174736" datatype="html">
@@ -4991,7 +5016,7 @@
         <source>Information</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/toast.service.ts</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">43</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3852289441366561594" datatype="html">

src-ui/src/app/components/common/toasts/toasts.component.scss

@@ -9,3 +9,14 @@
 .toast:not(.show) {
   display: block; // this corrects an ng-bootstrap bug that prevented animations
 }
+
+::ng-deep .toast.error .toast-header {
+  background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
+  border-color: black;
+}
+
+::ng-deep .toast.error .toast-body {
+  background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -301,6 +301,9 @@ export class DocumentDetailComponent
         },
         error: (error) => {
           this.metadata = null
+          this.toastService.showError(
+            $localize`Error retrieving metadata` + ': ' + error.toString()
+          )
         },
       })
     this.documentsService
@@ -312,6 +315,9 @@ export class DocumentDetailComponent
         },
         error: (error) => {
           this.suggestions = null
+          this.toastService.showError(
+            $localize`Error retrieving suggestions` + ': ' + error.toString()
+          )
         },
       })
     this.title = this.documentTitlePipe.transform(doc.title)
@@ -422,6 +428,11 @@ export class DocumentDetailComponent
         error: (error) => {
           this.networkActive = false
           this.error = error.error
+          this.toastService.showError(
+            $localize`Error saving document` +
+              ': ' +
+              (error.message ?? error.toString())
+          )
         },
       })
   }
@@ -461,6 +472,11 @@ export class DocumentDetailComponent
         error: (error) => {
           this.networkActive = false
           this.error = error.error
+          this.toastService.showError(
+            $localize`Error saving document` +
+              ': ' +
+              (error.message ?? error.toString())
+          )
         },
       })
   }

src-ui/src/app/services/toast.service.ts

@@ -11,6 +11,8 @@ export interface Toast {
   action?: any
 
   actionName?: string
+
+  classname?: string
 }
 
 @Injectable({
@@ -29,7 +31,12 @@ export class ToastService {
   }
 
   showError(content: string, delay: number = 10000) {
-    this.show({ title: $localize`Error`, content: content, delay: delay })
+    this.show({
+      title: $localize`Error`,
+      content: content,
+      delay: delay,
+      classname: 'error',
+    })
   }
 
   showInfo(content: string, delay: number = 5000) {