From e807ad2b2ca2f6b90b5db40aa604970f448a1020 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Sun, 3 Oct 2021 12:21:38 +0200
Subject: [PATCH] playing with select component
---
app/components/automates/add.hbs | 9 ++++-----
app/components/automates/add.js | 9 +++++++++
app/components/select/index.hbs | 5 ++++-
app/components/select/index.js | 15 +++++++++++++++
4 files changed, 32 insertions(+), 6 deletions(-)
create mode 100644 app/components/select/index.js
diff --git a/app/components/automates/add.hbs b/app/components/automates/add.hbs
index 939af00..c863442 100644
--- a/app/components/automates/add.hbs
+++ b/app/components/automates/add.hbs
@@ -37,11 +37,10 @@
</div>
<div class="mb-3">
<Label @for="dst_folder" @text="Destination Folder" />
- <Select id="dst_folder" name="dst_folder">
- <option value="1">---</option>
- <option value="2">My Documents</option>
- <option value="3">Some Other Folder</option>
- </Select>
+ {{this.dst_folder}}
+ <Select @options={{this.dst_folder_options}}
+ @value={{this.dst_folder}}
+ name="dst_folder" />
</div>
<div class="mb-3">
<Button::Submit @onClick={{this.onSubmit}} />
diff --git a/app/components/automates/add.js b/app/components/automates/add.js
index e7251c2..a7d385d 100644
--- a/app/components/automates/add.js
+++ b/app/components/automates/add.js
@@ -12,6 +12,15 @@ class AddAutomateComponent extends Component {
@service store;
@service router;
+ get dst_folder_options() {
+ return [
+ {'key': '---', 'value': '---'},
+ {'key': '1', 'value': 'My Documents'},
+ {'key': '2', 'value': 'XXX Some Folder'},
+ {'key': '3', 'value': 'Invoices'}
+ ]
+ }
+
@action
onSubmit() {
/*
diff --git a/app/components/select/index.hbs b/app/components/select/index.hbs
index 621745c..c053a41 100644
--- a/app/components/select/index.hbs
+++ b/app/components/select/index.hbs
@@ -1,5 +1,8 @@
<select
+ {{on 'change' this.onSelect}}
class="form-select"
...attributes>
- {{yield}}
+ {{#each @options as |opt|}}
+ <option value="{{opt.key}}">{{opt.value}}</option>
+ {{/each}}
</select>
\ No newline at end of file
diff --git a/app/components/select/index.js b/app/components/select/index.js
new file mode 100644
index 0000000..262ecc5
--- /dev/null
+++ b/app/components/select/index.js
@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+class SelectComponent extends Component {
+ @tracked value = null;
+
+ @action
+ onSelect(event) {
+ console.log(`value=${event.target.value}`);
+ this.value = event.target.value;
+ }
+}
+
+export default SelectComponent;
\ No newline at end of file
--
GitLab