add edit page for a role

app/components/role/edit.hbs

+<div class="mb-3">
+  <Label @for="name" @text="Name" />
+  <Input @value={{@role.name}}
+    class="form-control"
+    id="name"
+    placeholder="Role's name" />
+</div>
+
+<div class="mb-3">
+  <Button::Submit @onClick={{this.onSubmit}} />
+  <Button::Cancel @route="roles"/>
+</div>
\ No newline at end of file

app/components/role/edit.js

+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+
+class EditRoleComponent extends Component {
+  @service store;
+  @service router;
+
+  @tracked name = '';
+  chosen_permissions = [];
+
+  @action
+  onChange(permission, checked) {
+    if (checked) {
+      this.chosen_permissions.push(permission);
+    } else {
+      this.chosen_permissions = this.chosen_permissions.filter(
+        item => item.id != permission.id
+      );
+    }
+  }
+
+  @action
+  onSubmit() {
+
+    this.router.transitionTo('roles');
+  }
+}
+
+export default EditRoleComponent;

app/components/role/table_row.hbs

@@ -9,8 +9,8 @@
     {{@role.updated_at}}
   </td>
   <td>
-    <button class="btn btn-link" type="button"> Edit
-  </button>
+  <LinkTo @route="roles.edit" @model={{@role}}>Edit
+  </LinkTo>
   <Button::Link
     @text="Remove"
     @onClick={{(fn this.onRemove @role)}} />

app/routes/roles/edit.js

+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+class EditRoleRoute extends Route {
+  @service store;
+
+  async model(model_id) {
+    return this.store.peekRecord('permission', model_id);
+  }
+}
+
+export default EditRoleRoute;

app/templates/roles/edit.hbs

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