From be2bea7cf9a2c751b9dc66a66b2f90f34ca11102 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Thu, 30 Sep 2021 20:32:03 +0200
Subject: [PATCH] basic implementation for tag management
---
app/components/common/boolean.hbs | 7 ++++
app/components/tag/item.hbs | 5 +++
app/components/tag/new.hbs | 67 +++++++++++++++++++++++++++++++
app/components/tag/new.js | 57 ++++++++++++++++++++++++++
app/controllers/tags/index.js | 36 -----------------
app/styles/app.scss | 2 +
app/styles/tag.scss | 10 +++++
app/templates/tags/add.hbs | 1 -
app/templates/tags/index.hbs | 40 +++++-------------
public/api/tags.json | 12 +++---
10 files changed, 164 insertions(+), 73 deletions(-)
create mode 100644 app/components/common/boolean.hbs
create mode 100644 app/components/tag/item.hbs
create mode 100644 app/components/tag/new.hbs
create mode 100644 app/components/tag/new.js
delete mode 100644 app/controllers/tags/index.js
create mode 100644 app/styles/tag.scss
delete mode 100644 app/templates/tags/add.hbs
diff --git a/app/components/common/boolean.hbs b/app/components/common/boolean.hbs
new file mode 100644
index 0000000..abe6d2a
--- /dev/null
+++ b/app/components/common/boolean.hbs
@@ -0,0 +1,7 @@
+<h3>
+ {{#if @value}}
+ <i class="bi-check text-success"></i>
+ {{else}}
+ <i class="bi-x text-danger"></i>
+ {{/if}}
+</h3>
\ No newline at end of file
diff --git a/app/components/tag/item.hbs b/app/components/tag/item.hbs
new file mode 100644
index 0000000..161eb5b
--- /dev/null
+++ b/app/components/tag/item.hbs
@@ -0,0 +1,5 @@
+<div class="tag tag-item">
+ <span style="background-color: {{@bg_color}}; color: {{@fg_color}}">
+ {{@name}}
+ </span>
+</div>
diff --git a/app/components/tag/new.hbs b/app/components/tag/new.hbs
new file mode 100644
index 0000000..afbb3cf
--- /dev/null
+++ b/app/components/tag/new.hbs
@@ -0,0 +1,67 @@
+<button class="btn btn-success" type="button" {{on "click" this.onToggleNew}}>
+ New
+</button>
+
+{{#if this.form_visible}}
+ <form>
+ <div class="row my-2">
+ <div class="col-md-1">
+ <Tag::Item
+ @name={{this.new_name}}
+ @fg_color={{this.new_fg_color}}
+ @bg_color={{this.new_bg_color}} />
+ </div>
+ </div>
+
+ <div class="row mb-2">
+ <div class="col-md-3">
+ <label for="name" class="form-label">Name</label>
+ <Input
+ id="name"
+ @type="text"
+ @value={{this.new_name}}
+ class="form-control"
+ />
+ </div>
+ <div class="col-md-5">
+ <label for="description" class="form-label">Description</label>
+ <Input
+ id="description"
+ @type="text"
+ @value={{this.new_description}}
+ class="form-control"
+ />
+ </div>
+ <div class="col-md-1">
+ <label for="fg_color" class="form-label">Fg Color</label>
+ <Input id="fg_color" @type="color" @value={{this.new_fg_color}} class="form-control form-control-color" />
+ </div>
+ <div class="col-md-1">
+ <label for="bg_color" class="form-label">Bg Color</label>
+ <Input id="bg_color" @type="color" @value={{this.new_bg_color}} class="form-control form-control-color" />
+ </div>
+ </div>
+ <div class="row mb-2">
+ <div class="col">
+ <Input @type="checkbox" @checked={{this.pinned}} class="form-check-input" id="is_pinned" />
+ <label class="form-check-label" for="is_pinned">Is Pinned?</label>
+ </div>
+ </div>
+ <div class="row mb-2">
+ <div class="col">
+ <button
+ type="button"
+ {{on "click" this.onCreate}}
+ class="btn btn-success">
+ Create Tag
+ </button>
+ <button
+ type="button"
+ {{on "click" this.onCancel}}
+ class="btn btn-secondary">
+ Cancel
+ </button>
+ </div>
+ </div>
+ </form>
+{{/if}}
\ No newline at end of file
diff --git a/app/components/tag/new.js b/app/components/tag/new.js
new file mode 100644
index 0000000..a5426de
--- /dev/null
+++ b/app/components/tag/new.js
@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+
+export default class NewTagComponent extends Component {
+ /*
+ Component to create new tag.
+
+ It consists from a button labeled 'new' which
+ when clicked will toggle a 'new tag' form.
+ */
+
+ @service store;
+
+ // initially only 'new' button is visible
+ @tracked form_visible = false;
+ @tracked new_name = "";
+ @tracked new_description = "";
+ @tracked new_pinned = false;
+
+ @action
+ onToggleNew() {
+ this.form_visible = !this.form_visible;
+ }
+
+ @action
+ onCreate() {
+ this.store.createRecord('tag', {
+ name: this.new_name,
+ description: this.new_description,
+ pinned: this.new_pinned,
+ bg_color: this.new_bg_color,
+ fg_color: this.new_fg_color
+ }).save();
+
+ this._empty_form();
+ }
+
+ @action
+ onCancel() {
+ this._empty_form();
+ }
+
+ _empty_form() {
+ /*
+ Resets the form to initial state
+ */
+ this.new_name = "";
+ this.new_description = "";
+ this.new_fg_color = "#ffffff";
+ this.new_bg_color = "#ff0000";
+ this.new_pinned = false;
+ this.form_visible = false;
+ }
+}
\ No newline at end of file
diff --git a/app/controllers/tags/index.js b/app/controllers/tags/index.js
deleted file mode 100644
index df0143c..0000000
--- a/app/controllers/tags/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-
-export default class TagsController extends Controller {
-
- @action
- onToggleNew() {
- this.set('new', !this.new);
- }
-
- @action
- onCreate() {
- this.store.createRecord('tag', {
- name: this.new_name,
- description: this.new_description,
- pinned: true,
- bg_color: "#ff0000",
- fg_color: "#ffffff"
- }).save();
-
- this.set('new_name', "");
- this.set('new_description', "");
- this.set('new_fg_color', "#ffffff");
- this.set('new_bg_color', "#ff0000");
- this.set('new', false);
- }
-
- @action
- onCancel() {
- this.set('new', false);
- this.set('new_name', "");
- this.set('new_description', "");
- this.set('new_fg_color', "#ffffff");
- this.set('new_bg_color', "#ff0000");
- }
-}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 0f23275..37c0cc7 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -1,4 +1,6 @@
@import "node_modules/bootstrap/scss/bootstrap";
+@import "./tag";
+
main {
display: flex;
diff --git a/app/styles/tag.scss b/app/styles/tag.scss
new file mode 100644
index 0000000..3c1e07c
--- /dev/null
+++ b/app/styles/tag.scss
@@ -0,0 +1,10 @@
+.tag {
+ span {
+ padding: 0.35rem;
+ border-radius: 0.25rem;
+ }
+}
+
+.tag-link {
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/app/templates/tags/add.hbs b/app/templates/tags/add.hbs
deleted file mode 100644
index 04307c4..0000000
--- a/app/templates/tags/add.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<h1>New Tag</h1>
\ No newline at end of file
diff --git a/app/templates/tags/index.hbs b/app/templates/tags/index.hbs
index 5e73a6d..043c1e6 100644
--- a/app/templates/tags/index.hbs
+++ b/app/templates/tags/index.hbs
@@ -1,35 +1,10 @@
<h1>Tags Index</h1>
-<button class="btn btn-success" type="button" {{on "click" this.onToggleNew}}>New</button>
-{{#if this.new}}
-<div>
- <p>
- <Input type="text" @value={{this.new_name}}/>
- <Input type="text" @value={{this.new_description}} />
- <Input @type="color" @value={{this.new_fg_color}} />
- <Input @type="color" @value={{this.new_bg_color}} />
- </p>
- <p>
- <Input @type="checkbox" @checked={{this.pinned}} />Is Pinned?
- </p>
- <button
- type="button"
- {{on "click" this.onCreate}}
- class="btn btn-success">
- Create Tag
- </button>
- <button
- type="button"
- {{on "click" this.onCancel}}
- class="btn btn-secondary">
- Cancel
- </button>
-</div>
-{{/if}}
+<Tag::New />
<div class="tags">
- <table class="table table-striped">
+ <table class="table table-striped align-middle">
<thead>
<tr class="text-uppercase">
<th class="border-top-0">Tag Name</th>
@@ -41,11 +16,16 @@
{{#each @model as |tag|}}
<tr>
<td>
- <LinkTo @route="tags.edit" @model={{tag.id}}>
- {{tag.name}}
+ <LinkTo @route="tags.edit" @model={{tag.id}} class="tag-link">
+ <Tag::Item
+ @name={{tag.name}}
+ @fg_color={{tag.fg_color}}
+ @bg_color={{tag.bg_color}} />
</LinkTo>
</td>
- <td>{{tag.pinned}}</td>
+ <td>
+ <Common::Boolean @value={{tag.pinned}} />
+ </td>
<td>{{tag.description}}</td>
</tr>
{{/each}}
diff --git a/public/api/tags.json b/public/api/tags.json
index 185e634..f07e116 100644
--- a/public/api/tags.json
+++ b/public/api/tags.json
@@ -15,8 +15,8 @@
"type": "tag",
"attributes": {
"name": "paid",
- "fg-color": "#ffffff",
- "bg-color": "#ff0000",
+ "fg_color": "#ffffff",
+ "bg_color": "#006684",
"description": "",
"pinned": "true"
}
@@ -25,8 +25,8 @@
"type": "tag",
"attributes": {
"name": "unpaid",
- "fg-color": "#ffffff",
- "bg-color": "#ff0000",
+ "fg_color": "#ffffff",
+ "bg_color": "#0000ff",
"description": "",
"pinned": "true"
}
@@ -35,8 +35,8 @@
"type": "tag",
"attributes": {
"name": "invoice",
- "fg-color": "#ffffff",
- "bg-color": "#ff0000",
+ "fg_color": "#ffffff",
+ "bg_color": "#661200",
"description": "",
"pinned": "true"
}
--
GitLab