OPH-787 | Blueprint dropdown options are shown on open (#156)

* feat: when opening the link to blueprint dropdown the options are fetched

Refs: oph-787

* refactor: make the naam bestuur dropdown also show options on open

Refs: oph-787

Author: JonasVanHoof

app/components/process-select-by-group.hbs

@@ -5,14 +5,14 @@
     @loadingMessage="Aan het laden..."
     @noMatchesMessage="Geen resultaten"
     @searchMessage="Typ om te zoeken"
-    @searchField="group"
-    @search={{perform this.loadGroupsTask}}
+    @options={{this.groups}}
+    @onOpen={{perform this.loadGroupsTask}}
     @selected={{@selected}}
     @onChange={{@onChange}}
     @classifications={{@classifications}}
     @triggerId={{@id}}
     as |group|
   >
-    {{group}}
+    <p class="au-u-word-break-all">{{group}}</p>
   </PowerSelect>
 </div>

app/components/process-select-by-group.js

@@ -1,17 +1,17 @@
 import Component from '@glimmer/component';
+import { A } from '@ember/array';
 import { service } from '@ember/service';
-import { restartableTask, timeout } from 'ember-concurrency';
+import { restartableTask } from 'ember-concurrency';
 import ENV from 'frontend-openproceshuis/config/environment';
+import { tracked } from '@glimmer/tracking';
 
 export default class ProcessSelectByGroupComponent extends Component {
   @service store;
 
-  @restartableTask
-  *loadGroupsTask(searchParams = '') {
-    if (!searchParams?.trim()) return;
-
-    yield timeout(200);
+  @tracked groups = A([]);
 
+  @restartableTask
+  *loadGroupsTask() {
     const processQuery = {
       'filter[:not:status]': ENV.resourceStates.archived,
       include: 'publisher,relevant-administrative-units',
@@ -43,11 +43,8 @@ export default class ProcessSelectByGroupComponent extends Component {
       sort: ':no-case:name',
     };
 
-    if (searchParams) {
-      groupQuery['filter[name]'] = searchParams;
-    }
-
     const result = yield this.store.query('group', groupQuery);
-    if (result) return [...new Set(result.map((r) => r.name))];
+    this.groups.clear();
+    this.groups.pushObjects([...new Set(result.map((r) => r.name))]);
   }
 }

app/components/process/blueprint-card/blueprint-multiple-select.hbs

@@ -1,10 +1,12 @@
 <div class={{if @error "ember-power-select--error"}}>
   <PowerSelectMultiple
-    @searchEnabled="true"
+    @searchEnabled={{true}}
     @searchMessage="Typ om te zoeken"
     @loadingMessage="Aan het laden ..."
     @noMatchesMessage="Geen resultaten"
+    @options={{this.processes}}
     @search={{perform this.loadBlueprintProcessesTask}}
+    @onOpen={{perform this.loadBlueprintProcessesTask}}
     @selected={{@selected}}
     @onChange={{@onChange}}
     as |blueprintProcess|

app/components/process/blueprint-card/blueprint-multiple-select.js

@@ -1,24 +1,33 @@
 import Component from '@glimmer/component';
-import { task } from 'ember-concurrency';
-import { inject as service } from '@ember/service';
+
+import { A } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+import { restartableTask } from 'ember-concurrency';
+
 import ENV from 'frontend-openproceshuis/config/environment';
 
 export default class ProcessIcrCardBlueprintMultipleSelectComponent extends Component {
   @service store;
 
-  @task
-  *loadBlueprintProcessesTask(params) {
+  @tracked processes = A([]);
+
+  loadBlueprintProcessesTask = restartableTask(async (params) => {
     const query = {
       filter: {
-        title: params,
         'is-blueprint': true,
         ':not:status': ENV.resourceStates.archived,
       },
+      sort: 'title',
     };
 
-    return yield this.store.query('process', query).then(
-      // fixme: frontend workaround because booleans are not interpreted correctly by the query
-      (results) => results.filter((process) => process.isBlueprint === true),
-    );
-  }
+    if (params && typeof params === 'string' && params.trim() !== '') {
+      query.filter.title = params;
+    }
+
+    const processes = await this.store.query('process', query);
+    this.processes.clear();
+    this.processes.pushObjects(processes);
+  });
 }