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 9200264489f75e9f85dbfa180179274c53129c65..f537527ebdeb7724a6728563fa272f3371fae122 100644 (file)
--- 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 194c409049565a088f92bd0ecd1f13964f1cf053..844ea1932274e3e3710dbcd1fff941c8427f7626 100644 (file)
--- 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 2ed6995c8423b7ed908b2e9a898b37bdfb2fb7a9..7cfe14fdc83da5acce2181fe5162e31e6150bc94 100644 (file)
--- 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;
+}