pretty good tag table

app/components/tag/new.hbs

@@ -22,6 +22,19 @@
                     @value={{this.new_name}}
                     class="form-control"
                 />
+                <div class="d-flex flex-row my-1">
+                    <Input id="fg_color" @type="color" @value={{this.new_fg_color}} class="form-control form-control-color" />
+                    <Input id="bg_color" @type="color" @value={{this.new_bg_color}} class="form-control form-control-color" />
+                </div>
+            </div>
+            <div class="col-md-1">
+                <label class="form-check-label" for="is_pinned">Is Pinned?</label>
+                <div>
+                    <Input
+                        @type="checkbox"
+                        @checked={{this.new_pinned}}
+                        class="form-check-input" id="is_pinned" />
+                </div>
             </div>
             <div class="col-md-5">
                 <label for="description" class="form-label">Description</label>
@@ -32,45 +45,32 @@
                     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.new_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.onCancel}}
-                    class="btn btn-secondary">
-                    Cancel
-                </button>
-                {{#if this.new_name }}
-                    <button
-                        type="button"
-                        {{on "click" this.onCreate}}
-                        class="btn btn-success">
-                        Create Tag
-                    </button>
-                {{else}}
+            <div class="col-md-3">
+                <label for="action" class="form-label">Action</label>
+                <div>
                     <button
                         type="button"
-                        {{on "click" this.onCreate}}
-                        disabled
-                        class="btn btn-success">
-                        Create Tag
+                        {{on "click" this.onCancel}}
+                        class="btn btn-secondary">
+                        Cancel
                     </button>
-                {{/if}}
+                    {{#if this.new_name }}
+                        <button
+                            type="button"
+                            {{on "click" this.onCreate}}
+                            class="btn btn-success">
+                            Create Tag
+                        </button>
+                    {{else}}
+                        <button
+                            type="button"
+                            {{on "click" this.onCreate}}
+                            disabled
+                            class="btn btn-success">
+                            Create Tag
+                        </button>
+                    {{/if}}
+                </div>
             </div>
         </div>
     </form>

app/components/tag/table_row.hbs

@@ -2,26 +2,43 @@
 {{#if  (eq this.edit_mode_id @tag.id)}}
   {{! inline edit }}
   <td>
-      <Tag::Item
-        @name={{@tag.name}}
-        @fg_color={{@tag.fg_color}}
-        @bg_color={{@tag.bg_color}} />
-
-      <label for="name" class="form-label">Name</label>
+      <p class="my-2">
+        <Tag::Item
+          @name={{@tag.name}}
+          @fg_color={{@tag.fg_color}}
+          @bg_color={{@tag.bg_color}} />
+      </p>
       <Input
         id="name"
         @type="text"
         @value={{@tag.name}}
         class="form-control"
       />
+      <div class="d-flex flex-row">
+        <Input id="fg_color" @type="color" @value={{@tag.fg_color}} class="form-control form-control-color" />
+        <Input id="bg_color" @type="color" @value={{@tag.bg_color}} class="form-control form-control-color" />
+      </div>
+  </td>
+  <td>
+    <Input @type="checkbox" @checked={{@tag.pinned}} class="form-check-input" id="is_pinned" />
   </td>
   <td>
+      <Input
+        id="description"
+        @type="text"
+        @value={{@tag.description}}
+        class="form-control" />
   </td>
-  <td>{{tag.description}}</td>
   <td>
     <button class="btn btn-secondary" {{on "click" (fn this.onCancel)}}>
     Cancel
     </button>
+    <button
+        type="button"
+        class="btn btn-success"
+        {{on "click" (fn this.onSaveChanges @tag)}}>
+        Save Changes
+    </button>
   </td>
 {{else}}
   <td>

app/components/tag/table_row.js

 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 
 export default class TableRowComponent extends Component {
+  // keeps track of the ID of the tag currently
+  // being edited i.e. in edit mode
   @tracked edit_mode_id = 0;
+  @service store;
 
   @action
   async onRemove(tag) {
@@ -13,6 +17,7 @@ export default class TableRowComponent extends Component {
 
   @action
   onEdit(tag) {
+    console.log(`TAG ID = ${tag.id}`);
     this.edit_mode_id = tag.id;
   }
 
@@ -20,4 +25,31 @@ export default class TableRowComponent extends Component {
   onCancel() {
     this.edit_mode_id = undefined;
   }
+
+  @action
+  async onSaveChanges(tag) {
+    let that = this;
+
+    if (!tag) {
+      console.warn(
+        "onSaveChanges received an undefined tag object"
+      );
+      return;
+    }
+
+    this.edit_mode_id = undefined;
+
+    if (tag.id) {
+      this.store.findRecord('tag', tag.id).then(found_tag => {
+        found_tag.name = tag.name;
+        found_tag.description = tag.description;
+        found_tag.save();
+      });
+    } else {
+      console.warn(
+        `onSaveChanges received tag=${tag} object without tag ID`
+      );
+      return;
+    }
+  }
 }
\ No newline at end of file