include tags

app/components/tag.hbs

-<h1>{{@model.name}}</h1>
\ No newline at end of file

app/components/tag/edit.hbs

+<h1>Edit {{@model.name}} Tag</h1>
+
+<form>
+    <div class="mb-3">
+        <label for="tag" class="form-label">Name</label>
+        <Input id="tag-name" @type="text" @value="{{@model.name}}" />
+    </div>
+    <div class="mb-3">
+        <Input id="tag-pinned" @type="checkbox" @checked={{true}} />
+        <label for="tag" class="form-label">Pinned?</label>
+        <p>
+            <small class="form-text text-muted">
+                Pinned tag will be displayed under Documents menu.
+                It serves as shortcut to quickly filter folders/documents
+                associated with this tag
+            </small>
+        </p>
+    </div>
+    <div class="mb-3">
+        <label for="tag" class="form-label">Foreground Color</label>
+        <Input id="tag-fg-color" @type="color" />
+    </div>
+    <div class="mb-3">
+        <label for="tag" class="form-label">Background Color</label>
+        <Input id="tag-bg-color" @type="color" />
+    </div>
+    <div class="mb-3">
+        <label for="tag" class="form-label">Description</label>
+        <Input id="tag-description" @type="text" />
+    </div>
+</form>
\ No newline at end of file

app/components/tags.hbs

 <div class="tags">
-  <ul class="results">
+  <table class="table table-striped">
+    <thead>
+      <tr class="text-uppercase">
+        <th class="border-top-0"><input type="checkbox" /></th>
+        <th class="border-top-0">Tag Name</th>
+        <th class="border-top-0">Pinned?</th>
+        <th class="border-top-0">Description</th>
+      </tr>
+    </thead>
+    <tbody>
       {{#each @tags as |tag|}}
-        <li class="item">
-            <Tag @model={{tag}} />
-        </li>
+        <tr>
+          <th scope="row"><input type="checkbox" /></th>
+          <td>
+            <LinkTo @route="tags.edit" @model={{tag.id}}>
+              {{tag.name}}
+            </LinkTo>
+          </td>
+          <td>{{tag.pinned}}</td>
+          <td>{{tag.description}}</td>
+        </tr>
       {{/each}}
-  </ul>
+    </tbody>
+  </table>
 </div>
\ No newline at end of file

app/router.js

@@ -16,7 +16,7 @@ Router.map(function () {
 
   this.route('tags', function () {
     this.route('add');
-    this.route('tag', { path: '/:tag_id' });
+    this.route('edit', { path: ':tag_id/edit' });
     this.route('index', { path: '/' });
   });
 

app/routes/tags/edit.js

+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+
+export default class TagsRoute extends Route {
+  @service store;
+
+  async model(params) {
+    let ret = this.store.findRecord('tag', params.tag_id);
+    console.log(ret);
+    return ret;
+  }
+}

app/routes/tags/index.js

+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+
+export default class TagsRoute extends Route {
+  @service store;
+
+  async model() {
+    return this.store.findAll('tag');
+  }
+}

app/serializers/application.js

+import { underscore } from '@ember/string';
 import JSONAPISerializer from '@ember-data/serializer/json-api';
 
 
 export default class ApplicationSerializer extends JSONAPISerializer {
-
+    keyForAttribute(attr) {
+        return underscore(attr);
+    }
 }
\ No newline at end of file

app/templates/tags/edit.hbs

+<Tag::Edit @model={{@model}}/>
\ No newline at end of file

app/templates/tags/index.hbs

@@ -2,4 +2,4 @@
 
 <LinkTo @route="tags.add" class="btn btn-success">New</LinkTo>
 
-<Tags @tags=@model />
\ No newline at end of file
+<Tags @tags={{@model}} />
\ No newline at end of file

app/templates/tags/tag.hbs

-<h1>Tags</h1>
\ No newline at end of file

public/api/tags.json

+{
+  "data": [
+    {
+      "id": 1,
+      "type": "tag",
+      "attributes": {
+        "name": "important",
+        "fg_color": "#ffffff",
+        "bg_color": "#ff0000",
+        "description": "",
+        "pinned": "true"
+      }
+    }, {
+      "id": 2,
+      "type": "tag",
+      "attributes": {
+        "name": "paid",
+        "fg-color": "#ffffff",
+        "bg-color": "#ff0000",
+        "description": "",
+        "pinned": "true"
+      }
+    }, {
+      "id": 3,
+      "type": "tag",
+      "attributes": {
+        "name": "unpaid",
+        "fg-color": "#ffffff",
+        "bg-color": "#ff0000",
+        "description": "",
+        "pinned": "true"
+      }
+    }, {
+      "id": 4,
+      "type": "tag",
+      "attributes": {
+        "name": "invoice",
+        "fg-color": "#ffffff",
+        "bg-color": "#ff0000",
+        "description": "",
+        "pinned": "true"
+      }
+    }
+  ]
+}
\ No newline at end of file

public/api/tags/1.json

+{
+    "data": {
+        "type": "tag",
+        "id": 1,
+        "attributes": {
+            "name": "important",
+            "fg_color": "#ffffff",
+            "bg_color": "#ff0000",
+            "description": "",
+            "pinned": "true"
+        }
+    }
+}
\ No newline at end of file