From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 14 Dec 2023 18:05:36 +0000 (-0800)
Subject: Fix: show errors for select dropdowns (#4979)
X-Git-Tag: v2.1.3~1^2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=72000cac362e85495a2e17a1e562d351b90a4f30;p=thirdparty%2Fpaperless-ngx.git

Fix: show errors for select dropdowns (#4979)
---

diff --git a/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.html
index 9200264489..f537527ebd 100644
--- a/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.html
@@ -17,7 +17,7 @@
         <div class="col-md-4">
           <h5 class="border-bottom pb-2" i18n>Filters</h5>
           <p class="small" i18n>Process documents that match <em>all</em> filters specified below.</p>
-          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.filter_filename"></pngx-input-select>
+          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
           <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
           <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case insensitive.</a>" [error]="error?.filter_path"></pngx-input-text>
           <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 194c409049..844ea19322 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -9,7 +9,7 @@
       </button>
     </div>
     <div [class.col-md-9]="horizontal">
-      <div [class.input-group]="allowCreateNew || showFilter">
+      <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
         <ng-select name="inputId" [(ngModel)]="value"
           [disabled]="disabled"
           [style.color]="textColor"
@@ -42,6 +42,9 @@
           </svg>
         </button>
       </div>
+      <div class="invalid-feedback">
+        {{error}}
+      </div>
       <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
       <small *ngIf="getSuggestions().length > 0">
         <span i18n>Suggestions:</span>&nbsp;
diff --git a/src-ui/src/app/components/common/input/select/select.component.scss b/src-ui/src/app/components/common/input/select/select.component.scss
index 2ed6995c84..7cfe14fdc8 100644
--- a/src-ui/src/app/components/common/input/select/select.component.scss
+++ b/src-ui/src/app/components/common/input/select/select.component.scss
@@ -17,3 +17,12 @@
     font-style: italic;
     opacity: .75;
 }
+
+::ng-deep .is-invalid ng-select .ng-select-container input {
+    // replicate bootstrap
+    padding-right: calc(1.5em + 0.75rem) !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
+    background-repeat: no-repeat !important;
+    background-position: right calc(0.375em + 0.1875rem) center !important;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
+}