From 15228f03337d8f39e058c00a8ad7f3296b14b89b Mon Sep 17 00:00:00 2001
From: yelinz <yelin.zhang@adfinis.com>
Date: Wed, 21 Jun 2023 13:51:05 +0200
Subject: [PATCH] fix(ember): uniform filter order for work item and case

---
 .../ui/components/case-filters/template.hbs   | 116 +++++------
 .../components/work-item-filters/template.hbs | 180 +++++++++---------
 ember/app/utils/filters-component.js          |   5 +
 3 files changed, 154 insertions(+), 147 deletions(-)

diff --git a/ember/app/ui/components/case-filters/template.hbs b/ember/app/ui/components/case-filters/template.hbs
index 300155216..81e326cf8 100644
--- a/ember/app/ui/components/case-filters/template.hbs
+++ b/ember/app/ui/components/case-filters/template.hbs
@@ -28,65 +28,65 @@
       @resetFilters={{@resetFilters}}
       class="uk-width-auto"
     >
-      <Filters
-        class="uk-grid-match uk-flex-around uk-child-width-1-4@l uk-child-width-1-5@xl modal-filters"
-        uk-grid
-        as |Filter|
-      >
-        <Filter.Input
-          @label={{t "work-items.filters.documentNumber"}}
-          @value={{@filters.documentNumber}}
-          @inverted={{@invertedFilters.documentNumber}}
-          @onChange={{perform @updateFilter "documentNumber"}}
-          @invertFilter={{perform @invertFilter "documentNumber"}}
-        />
-        <Filter.Input
-          @label={{t "work-items.filters.answer"}}
-          @value={{@filters.answerSearch}}
-          @inverted={{@invertedFilters.answerSearch}}
-          @onChange={{perform @updateFilter "answerSearch"}}
-          @invertFilter={{perform @invertFilter "answerSearch"}}
-        />
-        {{#if (can "filter access case")}}
-          <Filter.Identity
-            @selected={{@filters.identities}}
-            @onChange={{perform @updateFilter "identities"}}
-            @inverted={{@invertedFilters.identities}}
-            @invertFilter={{perform @invertFilter "identities"}}
+      <Filters class="uk-flex uk-flex-column uk-flex-between" as |Filter|>
+        <div class="uk-flex uk-flex-row uk-flex-around uk-margin-medium">
+          <Filter.Input
+            @label={{t "work-items.filters.documentNumber"}}
+            @value={{@filters.documentNumber}}
+            @inverted={{@invertedFilters.documentNumber}}
+            @onChange={{perform @updateFilter "documentNumber"}}
+            @invertFilter={{perform @invertFilter "documentNumber"}}
           />
-        {{/if}}
-        <Filter.Dropdown
-          @label={{t "work-items.filters.forms"}}
-          @selected={{@filters.forms}}
-          @inverted={{@invertedFilters.forms}}
-          @options={{this.forms.value}}
-          @onChange={{perform @updateFilter "forms"}}
-          @invertFilter={{perform @invertFilter "forms"}}
-        />
-        <Filter.Dropdown
-          @label={{t "work-items.filters.expertAssociations"}}
-          @selected={{@filters.expertAssociations}}
-          @inverted={{@invertedFilters.expertAssociations}}
-          @options={{this.expertAssociations}}
-          @onChange={{perform @updateFilter "expertAssociations"}}
-          @invertFilter={{perform @invertFilter "expertAssociations"}}
-        />
-        <Filter.Dropdown
-          @label={{t "work-items.filters.distributionPlans"}}
-          @selected={{@filters.distributionPlans}}
-          @inverted={{@invertedFilters.distributionPlans}}
-          @options={{this.distributionPlans}}
-          @onChange={{perform @updateFilter "distributionPlans"}}
-          @invertFilter={{perform @invertFilter "distributionPlans"}}
-        />
-        <Filter.Dropdown
-          @label={{t "work-items.filters.sections"}}
-          @selected={{@filters.sections}}
-          @inverted={{@invertedFilters.sections}}
-          @options={{this.sections}}
-          @onChange={{perform @updateFilter "sections"}}
-          @invertFilter={{perform @invertFilter "sections"}}
-        />
+          <Filter.Input
+            @label={{t "work-items.filters.answer"}}
+            @value={{@filters.answerSearch}}
+            @inverted={{@invertedFilters.answerSearch}}
+            @onChange={{perform @updateFilter "answerSearch"}}
+            @invertFilter={{perform @invertFilter "answerSearch"}}
+          />
+          {{#if (can "filter access case")}}
+            <Filter.Identity
+              @selected={{@filters.identities}}
+              @onChange={{perform @updateFilter "identities"}}
+              @inverted={{@invertedFilters.identities}}
+              @invertFilter={{perform @invertFilter "identities"}}
+            />
+          {{/if}}
+          <Filter.Dropdown
+            @label={{t "work-items.filters.forms"}}
+            @selected={{@filters.forms}}
+            @inverted={{@invertedFilters.forms}}
+            @options={{this.forms.value}}
+            @onChange={{perform @updateFilter "forms"}}
+            @invertFilter={{perform @invertFilter "forms"}}
+          />
+        </div>
+        <div class="uk-flex uk-flex-row uk-flex-around">
+          <Filter.Dropdown
+            @label={{t "work-items.filters.expertAssociations"}}
+            @selected={{@filters.expertAssociations}}
+            @inverted={{@invertedFilters.expertAssociations}}
+            @options={{this.expertAssociations}}
+            @onChange={{perform @updateFilter "expertAssociations"}}
+            @invertFilter={{perform @invertFilter "expertAssociations"}}
+          />
+          <Filter.Dropdown
+            @label={{t "work-items.filters.distributionPlans"}}
+            @selected={{@filters.distributionPlans}}
+            @inverted={{@invertedFilters.distributionPlans}}
+            @options={{this.distributionPlans}}
+            @onChange={{perform @updateFilter "distributionPlans"}}
+            @invertFilter={{perform @invertFilter "distributionPlans"}}
+          />
+          <Filter.Dropdown
+            @label={{t "work-items.filters.sections"}}
+            @selected={{@filters.sections}}
+            @inverted={{@invertedFilters.sections}}
+            @options={{this.sections}}
+            @onChange={{perform @updateFilter "sections"}}
+            @invertFilter={{perform @invertFilter "sections"}}
+          />
+        </div>
       </Filters>
     </FilterModal>
 
diff --git a/ember/app/ui/components/work-item-filters/template.hbs b/ember/app/ui/components/work-item-filters/template.hbs
index f8575f757..6b0608c58 100644
--- a/ember/app/ui/components/work-item-filters/template.hbs
+++ b/ember/app/ui/components/work-item-filters/template.hbs
@@ -26,11 +26,6 @@
     @invertedIcon={{@invertedFilters.taskTypes}}
     @onChange={{perform @updateFilter "taskTypes"}}
   />
-  <Filter.Identity
-    @selected={{@filters.identities}}
-    @invertedIcon={{@invertedFilters.identities}}
-    @onChange={{perform @updateFilter "identities"}}
-  />
   <Filter.Input
     class="uk-width-small"
     @label={{t "work-items.filters.documentNumber"}}
@@ -44,96 +39,103 @@
     @invertedIcon={{@invertedFilters.answerSearch}}
     @onChange={{perform @updateFilter "answerSearch"}}
   />
+  <Filter.Identity
+    @selected={{@filters.identities}}
+    @invertedIcon={{@invertedFilters.identities}}
+    @onChange={{perform @updateFilter "identities"}}
+  />
 
   <FilterModal
     @setFiltersAmount={{this.setFiltersAmount}}
     @resetFilters={{@resetFilters}}
     class="uk-width-auto"
   >
-    <Filters
-      class="uk-grid-match uk-flex-around uk-child-width-1-4@l uk-child-width-1-5@xl modal-filters"
-      uk-grid
-      as |Filter|
-    >
-      <Filter.RadioButtons
-        @label={{t "work-items.filters.status"}}
-        @selected={{@filters.status}}
-        @options={{array
-          (hash value="open" label=(t "work-items.filters.open"))
-          (hash value="closed" label=(t "work-items.filters.closed"))
-        }}
-        @onChange={{perform @updateFilter "status"}}
-      />
-      <Filter.RadioButtons
-        @label={{t "work-items.filters.responsible"}}
-        @selected={{@filters.responsible}}
-        @options={{array
-          (hash value="all" label=(t "work-items.filters.all"))
-          (hash value="own" label=(t "work-items.filters.own"))
-        }}
-        @onChange={{perform @updateFilter "responsible"}}
-      />
-      <Filter.Dropdown
-        @label={{t "work-items.filters.taskTypes"}}
-        @selected={{@filters.taskTypes}}
-        @inverted={{@invertedFilters.taskTypes}}
-        @options={{this.taskTypes.value}}
-        @onChange={{perform @updateFilter "taskTypes"}}
-        @invertFilter={{perform @invertFilter "taskTypes"}}
-      />
-      <Filter.Identity
-        @selected={{@filters.identities}}
-        @inverted={{@invertedFilters.identities}}
-        @onChange={{perform @updateFilter "identities"}}
-        @invertFilter={{perform @invertFilter "identities"}}
-      />
-      <Filter.Input
-        @label={{t "work-items.filters.documentNumber"}}
-        @inverted={{@invertedFilters.documentNumber}}
-        @value={{@filters.documentNumber}}
-        @onChange={{perform @updateFilter "documentNumber"}}
-        @invertFilter={{perform @invertFilter "documentNumber"}}
-      />
-      <Filter.Input
-        @label={{t "work-items.filters.answer"}}
-        @value={{@filters.answerSearch}}
-        @inverted={{@invertedFilters.answerSearch}}
-        @onChange={{perform @updateFilter "answerSearch"}}
-        @invertFilter={{perform @invertFilter "answerSearch"}}
-      />
-      <Filter.Dropdown
-        @label={{t "work-items.filters.forms"}}
-        @selected={{@filters.forms}}
-        @inverted={{@invertedFilters.documenformstNumber}}
-        @options={{this.forms.value}}
-        @onChange={{perform @updateFilter "forms"}}
-        @invertFilter={{perform @invertFilter "forms"}}
-      />
-      <Filter.Dropdown
-        @label={{t "work-items.filters.expertAssociations"}}
-        @selected={{@filters.expertAssociations}}
-        @inverted={{@invertedFilters.expertAssociations}}
-        @options={{this.expertAssociations}}
-        @onChange={{perform @updateFilter "expertAssociations"}}
-        @invertFilter={{perform @invertFilter "expertAssociations"}}
-      />
-      <Filter.Dropdown
-        @label={{t "work-items.filters.distributionPlans"}}
-        @selected={{@filters.distributionPlans}}
-        @inverted={{@invertedFilters.distributionPlans}}
-        @options={{this.distributionPlans}}
-        @onChange={{perform @updateFilter "distributionPlans"}}
-        @invertFilter={{perform @invertFilter "distributionPlans"}}
-      />
-      <Filter.Dropdown
-        @label={{t "work-items.filters.sections"}}
-        @selected={{@filters.sections}}
-        @inverted={{@invertedFilters.sections}}
-        @options={{this.sections}}
-        @onChange={{perform @updateFilter "sections"}}
-        @loading={{this.questionOptions.isLoading}}
-        @invertFilter={{perform @invertFilter "sections"}}
-      />
+    <Filters class="uk-flex uk-flex-column uk-flex-between" as |Filter|>
+      <div class="uk-flex uk-flex-row uk-flex-around">
+        <Filter.RadioButtons
+          @label={{t "work-items.filters.status"}}
+          @selected={{@filters.status}}
+          @options={{array
+            (hash value="open" label=(t "work-items.filters.open"))
+            (hash value="closed" label=(t "work-items.filters.closed"))
+          }}
+          @onChange={{perform @updateFilter "status"}}
+        />
+        <Filter.RadioButtons
+          @label={{t "work-items.filters.responsible"}}
+          @selected={{@filters.responsible}}
+          @options={{array
+            (hash value="all" label=(t "work-items.filters.all"))
+            (hash value="own" label=(t "work-items.filters.own"))
+          }}
+          @onChange={{perform @updateFilter "responsible"}}
+        />
+        <Filter.Dropdown
+          @label={{t "work-items.filters.taskTypes"}}
+          @selected={{@filters.taskTypes}}
+          @inverted={{@invertedFilters.taskTypes}}
+          @options={{this.taskTypes.value}}
+          @onChange={{perform @updateFilter "taskTypes"}}
+          @invertFilter={{perform @invertFilter "taskTypes"}}
+        />
+      </div>
+      <div class="uk-flex uk-flex-row uk-flex-around uk-margin-medium">
+        <Filter.Input
+          @label={{t "work-items.filters.documentNumber"}}
+          @inverted={{@invertedFilters.documentNumber}}
+          @value={{@filters.documentNumber}}
+          @onChange={{perform @updateFilter "documentNumber"}}
+          @invertFilter={{perform @invertFilter "documentNumber"}}
+        />
+        <Filter.Input
+          @label={{t "work-items.filters.answer"}}
+          @value={{@filters.answerSearch}}
+          @inverted={{@invertedFilters.answerSearch}}
+          @onChange={{perform @updateFilter "answerSearch"}}
+          @invertFilter={{perform @invertFilter "answerSearch"}}
+        />
+        <Filter.Identity
+          @selected={{@filters.identities}}
+          @inverted={{@invertedFilters.identities}}
+          @onChange={{perform @updateFilter "identities"}}
+          @invertFilter={{perform @invertFilter "identities"}}
+        />
+        <Filter.Dropdown
+          @label={{t "work-items.filters.forms"}}
+          @selected={{@filters.forms}}
+          @inverted={{@invertedFilters.documenformstNumber}}
+          @options={{this.forms.value}}
+          @onChange={{perform @updateFilter "forms"}}
+          @invertFilter={{perform @invertFilter "forms"}}
+        />
+      </div>
+      <div class="uk-flex uk-flex-row uk-flex-around">
+        <Filter.Dropdown
+          @label={{t "work-items.filters.expertAssociations"}}
+          @selected={{@filters.expertAssociations}}
+          @inverted={{@invertedFilters.expertAssociations}}
+          @options={{this.expertAssociations}}
+          @onChange={{perform @updateFilter "expertAssociations"}}
+          @invertFilter={{perform @invertFilter "expertAssociations"}}
+        />
+        <Filter.Dropdown
+          @label={{t "work-items.filters.distributionPlans"}}
+          @selected={{@filters.distributionPlans}}
+          @inverted={{@invertedFilters.distributionPlans}}
+          @options={{this.distributionPlans}}
+          @onChange={{perform @updateFilter "distributionPlans"}}
+          @invertFilter={{perform @invertFilter "distributionPlans"}}
+        />
+        <Filter.Dropdown
+          @label={{t "work-items.filters.sections"}}
+          @selected={{@filters.sections}}
+          @inverted={{@invertedFilters.sections}}
+          @options={{this.sections}}
+          @onChange={{perform @updateFilter "sections"}}
+          @loading={{this.questionOptions.isLoading}}
+          @invertFilter={{perform @invertFilter "sections"}}
+        />
+      </div>
     </Filters>
   </FilterModal>
 
diff --git a/ember/app/utils/filters-component.js b/ember/app/utils/filters-component.js
index af8e66e7d..5b552c835 100644
--- a/ember/app/utils/filters-component.js
+++ b/ember/app/utils/filters-component.js
@@ -41,6 +41,11 @@ export default class FiltersComponent extends Component {
     }
 
     const question = this.questionOptions.value.filterBy("slug", slug)[0];
+
+    if (!question) {
+      return [];
+    }
+
     const options = question[question.__typename].edges;
 
     return options.map((edge) => ({