feat: improve streeet search component

addon/components/model-form.hbs

@@ -85,7 +85,7 @@
           model=f.model
           importedData=this.importData
           translationBase=@translationBase
-          input=f.input
+          inputComponent=f.input
           registerDiff=this.registerDiff
           resolveDiff=this.resolveDiff
           disabled=@disabled

addon/components/model-form/field.hbs

@@ -4,7 +4,7 @@
 >
   {{#let
     (component
-      @input
+      @inputComponent
       label=(unless
         @noLabel (t (or @label (concat @translationBase "." @attr)))
       )
@@ -45,6 +45,7 @@
         max=@max
       )
       errorComponent=(component "validated-form-error")
+      model=@model
     )
     as |InputComponent|
   }}
@@ -60,4 +61,4 @@
       <InputComponent ...attributes />
     {{/if}}
   {{/let}}
-</div>
+</div>

addon/components/search-street.hbs

@@ -1,38 +1,54 @@
 <div class="uk-margin">
-  <label class="uk-form-label" for={{this.guid}}>{{t
+  <label class="uk-form-label" for={{this.inputId}}>{{t
       "ember-gwr.buildingEntrance.fields.street.description.descriptionLong"
     }}{{if @required " *"}}
   </label>
-  <PowerSelect
-    @disabled={{@disabled}}
-    @renderInPlace={{true}}
-    @tabIndex={{"0"}}
-    @triggerClass="uk-select"
-    @searchEnabled={{true}}
-    @search={{perform this.search}}
-    @selected={{@street}}
-    @onChange={{@onChange}}
-    @onFocus={{this.handleFocus}}
-    @searchMessage={{t "ember-gwr.components.linkStreet.search"}}
-    @noMatchesMessage={{t "ember-gwr.components.search.noResults"}}
-    @loadingMessage={{t "ember-gwr.components.search.loading"}}
-    id={{this.guid}}
-    class="uk-overflow-hidden"
-    ...attributes
-    as |streetList|
-  >
-    {{streetList.description.descriptionLong}}{{#if
-      streetList.description.descriptionLong
-    }}
-      <small
-        data-test-street-esid
-        class="uk-text-muted uk-text-right uk-text-italic uk-margin-small-left"
-      >{{t "ember-gwr.street.ESID"}}: {{streetList.ESID}}</small>
-    {{/if}}
-  </PowerSelect>
+  <div class="uk-form-controls">
+    <PowerSelect
+      @disabled={{@disabled}}
+      @renderInPlace={{true}}
+      @tabIndex={{"0"}}
+      @triggerClass="uk-select"
+      @searchEnabled={{true}}
+      @search={{perform this.search}}
+      @selected={{@value}}
+      @onChange={{queue (fn (mut this.dirty) true) @on-update}}
+      @onFocus={{this.handleFocus}}
+      @searchMessage={{t "ember-gwr.components.linkStreet.search"}}
+      @noMatchesMessage={{t "ember-gwr.components.search.noResults"}}
+      @loadingMessage={{t "ember-gwr.components.search.loading"}}
+      id={{this.inputId}}
+      class={{class-list
+        "uk-overflow-hidden"
+        (if this.isValid "uk-form-success")
+        (if this.isInvalid "uk-form-danger")
+      }}
+      ...attributes
+      as |streetList|
+    >
+      {{streetList.description.descriptionLong}}{{#if
+        streetList.description.descriptionLong
+      }}
+        <small
+          data-test-search-street-locality-name
+          class="uk-text-muted uk-text-right uk-text-italic uk-margin-small-left"
+        >{{t "ember-gwr.locality.name.nameLong"}}:
+          {{streetList.locality.name.nameLong}},
+        </small>
+        <small
+          data-test-search-street-esid
+          class="uk-text-muted uk-text-right uk-text-italic uk-margin-small-left"
+        >
+          {{t "ember-gwr.street.ESID"}}:
+          {{streetList.ESID}}</small>
+      {{/if}}
+    </PowerSelect>
+  </div>
   {{#if @disabled}}
     <small data-test-hint class="uk-text-muted">{{t
         "ember-gwr.components.streetSearch.requiredInputs"
       }}</small>
+    <br />
   {{/if}}
-</div>
+  {{component @errorComponent errors=this.errors}}
+</div>

addon/components/search-street.js

@@ -1,34 +1,23 @@
 import { action } from "@ember/object";
-import { guidFor } from "@ember/object/internals";
 import { inject as service } from "@ember/service";
 import { isBlank } from "@ember/utils";
-import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { task, timeout } from "ember-concurrency";
+import ValidatedInput from "ember-validated-form/components/validated-input";
 
-export default class SearchStreetComponent extends Component {
+export default class SearchStreetComponent extends ValidatedInput {
   @service("street") streetAPI;
   @service notification;
   @service intl;
 
   @tracked searchTerm = "";
 
-  constructor(...args) {
-    super(...args);
-
-    this.guid = guidFor(this);
-  }
-
-  get localityName() {
-    return this.args.locality.name.nameLong;
-  }
-
   get swissZipCode() {
-    return this.args.locality.swissZipCode;
+    return this.args.options.locality.swissZipCode;
   }
 
   get swissZipCodeAddOn() {
-    return this.args.locality.swissZipCodeAddOn;
+    return this.args.options.locality.swissZipCodeAddOn;
   }
 
   get query() {
@@ -40,9 +29,6 @@ export default class SearchStreetComponent extends Component {
       locality: {
         swissZipCode: this.swissZipCode,
         swissZipCodeAddOn: this.swissZipCodeAddOn,
-        name: {
-          nameLong: this.localityName,
-        },
       },
       language: this.streetAPI.language,
     };

addon/controllers/building/edit/entrance/edit/index.js

@@ -48,6 +48,17 @@ export default class BuildingEditEntranceEditIndexController extends ImportContr
     this.fetchBuildingEntrance.perform();
   }
 
+  @action
+  syncLocalityWithSelectedStreet(changeset, streetList) {
+    changeset.set("locality.street", streetList);
+    changeset.set("locality.name.nameLong", streetList.locality.name.nameLong);
+    changeset.set("locality.swissZipCode", streetList.locality.swissZipCode);
+    changeset.set(
+      "locality.swissZipCodeAddOn",
+      streetList.locality.swissZipCodeAddOn,
+    );
+  }
+
   @dropTask
   *saveBuildingEntrance() {
     try {

addon/controllers/building/edit/form.js

@@ -100,6 +100,22 @@ export default class BuildingFormController extends ImportController {
     this.fetchBuildingWork.perform();
   }
 
+  @action
+  syncLocalityWithStreet(changeset, streetList) {
+    changeset.set(
+      "building.buildingEntrance.locality.name.nameLong",
+      streetList.locality.name.nameLong,
+    );
+    changeset.set(
+      "building.buildingEntrance.locality.swissZipCode",
+      streetList.locality.swissZipCode,
+    );
+    changeset.set(
+      "building.buildingEntrance.locality.swissZipCodeAddOn",
+      streetList.locality.swissZipCodeAddOn,
+    );
+  }
+
   @dropTask
   *saveBuildingWork() {
     try {

addon/templates/building/edit/entrance/edit/index.hbs

@@ -27,8 +27,8 @@
       {{/unless}}
       <Field
         @attr="locality.name.nameLong"
-        @required={{true}}
         @disabled={{not this.buildingEntrance.isNew}}
+        @required={{true}}
       />
       <Field
         @attr="locality.swissZipCode"
@@ -37,17 +37,22 @@
         @required={{true}}
       />
       {{#if this.buildingEntrance.isNew}}
-        <SearchStreet
-          @locality={{changeset-get changeset "locality"}}
-          @street={{changeset-get changeset "street"}}
+        <Field
+          @attr="street"
+          @label="ember-gwr.buildingEntrance.fields.street.description.descriptionLong"
+          @inputComponent="search-street"
+          @options={{hash
+            locality=(changeset-get
+              changeset "locality"
+            )
+          }}
+          @on-update={{fn this.syncLocalityWithSelectedStreet changeset}}
           @disabled={{not
-            (and
-              (changeset-get changeset "locality.swissZipCode")
-              (changeset-get changeset "locality.name.nameLong")
+            (changeset-get
+              changeset "locality.swissZipCode"
             )
           }}
           @required={{true}}
-          @onChange={{fn (mut this.buildingEntrance.street)}}
         />
       {{else}}
         <Field
@@ -107,4 +112,4 @@
       {{/unless}}
     </ModelForm>
   {{/if}}
-</div>
+</div>

addon/templates/building/edit/form.hbs

@@ -149,28 +149,28 @@
         <small class="uk-margin-bottom">
           {{t "ember-gwr.building.buildingEntrance.info"}}
         </small>
-        <Field
-          @attr="building.buildingEntrance.locality.name.nameLong"
-          @required={{true}}
-          @label="ember-gwr.buildingEntrance.fields.locality.name.nameLong"
-        />
         <Field
           @attr="building.buildingEntrance.locality.swissZipCode"
           @type="number"
           @label="ember-gwr.buildingEntrance.fields.locality.swissZipCode"
           @required={{true}}
         />
-        <SearchStreet
-          @locality={{changeset-get changeset "building.buildingEntrance.locality"}}
-          @street={{changeset-get changeset "building.buildingEntrance.street"}}
+        <Field
+          @attr="building.buildingEntrance.locality.street"
+          @label="ember-gwr.buildingEntrance.fields.street.description.descriptionLong"
+          @inputComponent="search-street"
+          @options={{hash
+            locality=(changeset-get
+              changeset "building.buildingEntrance.locality"
+            )
+          }}
+          @on-update={{fn this.syncLocalityWithStreet changeset}}
           @disabled={{not
-            (and
-              (changeset-get changeset "building.buildingEntrance.locality.swissZipCode")
-              (changeset-get changeset "building.buildingEntrance.locality.name.nameLong")
+            (changeset-get
+              changeset "building.buildingEntrance.locality.swissZipCode"
             )
           }}
           @required={{true}}
-          @onChange={{fn (changeset-set changeset "building.buildingEntrance.street")}}
         />
         <Field
           @attr="building.buildingEntrance.buildingEntranceNo"
@@ -472,4 +472,4 @@
       <Field @attr="building.buildingFreeText2" />
     </ModelForm>
   {{/if}}
-</div>
+</div>

addon/validations/building-entrance.js

@@ -11,8 +11,6 @@ export default {
       validatePresence(true),
       validateNumber({ integer: true, gte: 1000, lte: 9699 }),
     ],
-    name: {
-      nameLong: [validatePresence(true), validateLength({ min: 2, max: 40 })],
-    },
+    street: [validatePresence(true)],
   },
 };

addon/xml/templates/street.js

@@ -1,13 +1,15 @@
 // prettier-ignore
 export const getStreet =
-`{{#>base}}
+  `{{#>base}}
   <ns2:getStreet>
     {{#if model.description.descriptionLong}}
       <ns2:description>
         <ns2:language>{{model.language}}</ns2:language>
         <ns2:descriptionLong>{{model.description.descriptionLong}}</ns2:descriptionLong>
       </ns2:description>
     {{/if}}
-    {{> Locality model=model.locality}}
+    {{#if model.locality.nameLong}}
+      {{> Locality model=model.locality}}
+    {{/if}}
   </ns2:getStreet>
 {{/base}}`;

app/styles/_validated-form.scss

@@ -2,4 +2,14 @@
   .uk-form-label {
     @extend .uk-text-bold;
   }
+
+  .ember-power-select-trigger {
+    &.uk-form-success {
+      border-color: $alert-success-color;
+    }
+
+    &.uk-form-danger {
+      border-color: $alert-danger-color;
+    }
+  }
 }

app/styles/ember-ebau-gwr.scss

@@ -11,7 +11,8 @@ $ember-power-select-trigger-icon-color: transparent;
     @extend .uk-invisible;
   }
 
-  .ember-power-select-option:hover > small {
+  .ember-power-select-option:hover > small,
+  .ember-power-select-option[aria-current="true"] > small {
     mix-blend-mode: multiply;
   }
 }