From 5d804a58ac4f5a829819f546426da8eb49d17e2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Pr=C3=A9vost?= <sprevost@mirego.com>
Date: Wed, 12 Aug 2020 07:17:12 -0400
Subject: [PATCH] wip select

---
 .../pods/components/acc-select/component.ts   |  8 +++-
 .../pods/components/acc-select/styles.scss    | 28 ++++++++++++++
 .../pods/components/acc-select/template.hbs   | 38 ++++++++++++-------
 .../revision-export-options/component.ts      |  4 +-
 4 files changed, 62 insertions(+), 16 deletions(-)
 create mode 100644 webapp/app/pods/components/acc-select/styles.scss

diff --git a/webapp/app/pods/components/acc-select/component.ts b/webapp/app/pods/components/acc-select/component.ts
index 4e6ad106..97213621 100644
--- a/webapp/app/pods/components/acc-select/component.ts
+++ b/webapp/app/pods/components/acc-select/component.ts
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import {action} from '@ember/object';
 
 interface Args {
   searchEnabled: boolean;
@@ -12,4 +13,9 @@ interface Args {
   renderInPlace: boolean;
 }
 
-export default class Select extends Component<Args> {}
+export default class Select extends Component<Args> {
+  @action
+  selectChange(event: Event) {
+    this.args.onchange(event.target);
+  }
+}
diff --git a/webapp/app/pods/components/acc-select/styles.scss b/webapp/app/pods/components/acc-select/styles.scss
new file mode 100644
index 00000000..add50e71
--- /dev/null
+++ b/webapp/app/pods/components/acc-select/styles.scss
@@ -0,0 +1,28 @@
+.root {
+  position: relative;
+
+  :global(select) {
+    appearance: none;
+    width: 100%;
+    font-size: 13px;
+    cursor: pointer;
+    padding: 5px 10px;
+    background: var(--body-background);
+    box-shadow: none;
+    border: 1px solid transparent;
+    border-color: var(--background-light-highlight);
+    color: var(--color-black-opacity-70);
+  }
+
+  &:after {
+    display: block;
+    pointer-events: none;
+    cursor: pointer;
+    content: "›";
+    position: absolute;
+    bottom: 0;
+    right: 11px;
+    font-size: 150%;
+    transform: rotate(90deg);
+  }
+}
diff --git a/webapp/app/pods/components/acc-select/template.hbs b/webapp/app/pods/components/acc-select/template.hbs
index e62a123c..3a8d051f 100644
--- a/webapp/app/pods/components/acc-select/template.hbs
+++ b/webapp/app/pods/components/acc-select/template.hbs
@@ -1,13 +1,25 @@
-<PowerSelect
-  @options={{@options}}
-  @matchTriggerWidth={{@matchTriggerWidth}}
-  @searchEnabled={{@searchEnabled}}
-  @selected={{@selected}}
-  @search={{@search}}
-  @placeholder={{@placeholder}}
-  @searchPlaceholder={{@searchPlaceholder}}
-  @renderInPlace={{@renderInPlace}}
-  @onChange={{@onchange}} as |option|
->
-  {{option.label}}
-</PowerSelect>
+{{#if @searchEnabled}}
+  <PowerSelect
+    @options={{@options}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @searchEnabled={{@searchEnabled}}
+    @selected={{@selected}}
+    @search={{@search}}
+    @placeholder={{@placeholder}}
+    @searchPlaceholder={{@searchPlaceholder}}
+    @renderInPlace={{@renderInPlace}}
+    @onChange={{@onchange}} as |option|
+  >
+    {{option.label}}
+  </PowerSelect>
+{{else}}
+  <div local-class="root">
+    <select {{on 'change' this.selectChange}}>
+      {{#each @options key="value" as |selectOption|}}
+        <option value={{selectOption.value}}>
+          {{selectOption.label}}
+        </option>
+      {{/each}}
+    </select>
+  </div>
+{{/if}}
diff --git a/webapp/app/pods/components/revision-export-options/component.ts b/webapp/app/pods/components/revision-export-options/component.ts
index 90199f51..55c730ac 100644
--- a/webapp/app/pods/components/revision-export-options/component.ts
+++ b/webapp/app/pods/components/revision-export-options/component.ts
@@ -41,7 +41,7 @@ export default class RevisionExportOptions extends Component<Args> {
   get orderByOptions() {
     return [
       {
-        value: null,
+        value: '',
         label: this.intl.t(
           'components.revision_export_options.orders.original'
         ),
@@ -71,7 +71,7 @@ export default class RevisionExportOptions extends Component<Args> {
   get formatOptions() {
     return [
       {
-        value: null,
+        value: '',
         label: this.intl.t('components.revision_export_options.default_format'),
       },
       ...this.formattedDocumentFormats,