delete/rename nodes

app/components/commander/action_buttons.hbs

@@ -16,7 +16,7 @@
     <button
       class="btn btn-danger mx-5"
       type="button"
-      {{on "click" this.onDelete}}>
+      {{on "click" @openConfirmDeletionModal}}>
         <i class="fa fa-times"></i>
       Delete
     </button>
@@ -30,7 +30,7 @@
     <button
       class="btn btn-danger mx-5"
       type="button"
-      {{on "click" this.onDelete}}>
+       {{on "click" @openConfirmDeletionModal}}>
         <i class="fa fa-times"></i>
       Delete
     </button>

app/components/commander/action_buttons.js

@@ -25,9 +25,4 @@ export default class ActionButtonsComponent extends Component {
       this.args.selectedNodes[0]
     );
   }
-
-  @action
-  onDelete() {
-
-  }
 }

app/components/commander/index.hbs

@@ -3,6 +3,7 @@
     <Commander::ActionButtons
       @openNewFolderModal={{this.openNewFolderModal}}
       @openRenameModal={{this.openRenameModal}}
+      @openConfirmDeletionModal={{this.openConfirmDeletionModal}}
       @selectedNodes={{this.selected_nodes}}
       @node={{@node}} />
 
@@ -24,6 +25,12 @@
     @onClose={{this.closeRenameModal}}
     {{show-when this.show_rename_node_modal}} />
 
+  <Modal::DeleteNode
+    id="rename-node"
+    @selectedNodes={{this.selected_nodes}}
+    @onClose={{this.closeConfirmDeletionModal}}
+    {{show-when this.show_confirm_deletion_modal}} />
+
   <Breadcrumb
     @node={{@node}}
     @extranode={{@extranode}}
@@ -35,6 +42,7 @@
         {{! NodeType is either <Folder /> or <Document />}}
         <NodeType
           @model={{node}}
+          @selectedNodes={{this.selected_nodes}}
           @onCheckboxChange={{this.onCheckboxChange}} >
           {{#if (is_equal @hint "left")}}
             <Commander::LinkToLeft

app/components/commander/index.js

@@ -11,6 +11,8 @@ export default class CommanderComponent extends Component {
   // show rename node modal dialog?
   @tracked show_rename_node_modal = false;
 
+  @tracked show_confirm_deletion_modal = false;
+
   // nodes are displayed as list or as grid?
   @tracked view_mode = 'list';
 
@@ -29,6 +31,18 @@ export default class CommanderComponent extends Component {
   @action
   closeRenameModal() {
     this.show_rename_node_modal = false;
+    this.selected_nodes = A([]);
+  }
+
+  @action
+  openConfirmDeletionModal() {
+    this.show_confirm_deletion_modal = true;
+  }
+
+  @action
+  closeConfirmDeletionModal() {
+    this.show_confirm_deletion_modal = false;
+    this.selected_nodes = A([]);
   }
 
   @action

app/components/document.hbs

 <div class="node document {{if this.is_selected "checked"}}">
+
   <Input
     @type="checkbox"
+    @checked={{this.is_selected}}
     {{on "change" this.onCheckboxChange}} />
   <div class="icon document"></div>
   <div class="title">

app/components/folder.hbs

 <div class="node folder {{if this.is_selected "checked"}}">
   <Input
     @type="checkbox"
+    @checked={{this.is_selected}}
     {{on "change" this.onCheckboxChange}} />
   <div class="icon folder"></div>
   <div class="title">

app/components/modal/base.hbs

@@ -16,7 +16,7 @@
           {{on "click" @onCancel}}>Cancel</button>
         <button
           type="button"
-          class="btn btn-primary"
+          class="btn btn-primary {{this.submitButtonClass}}"
           {{on "click" @onSubmit}}>{{@actionTitle}}</button>
       </div>
     </div>

app/components/modal/base.js

+import Component from '@glimmer/component';
+
+
+export default class BaseComponent extends Component {
+  get submitButtonClass() {
+    return this.args.submitButtonClass || "btn-primary";
+  }
+}
\ No newline at end of file

app/components/modal/delete_node.hbs

+<Modal::Base
+  @title="Confirm Deletion"
+  @actionTitle="Delete"
+  @onClose={{@onClose}}
+  @onSubmit={{this.onSubmit}}
+  @submitButtonClass="btn-danger"
+  @onCancel={{this.onCancel}}
+  ...attributes
+>
+  <p>
+    If you click DELETE button following {{this.count}} document(s) and/or folder(s) will be deleted:
+    <strong>{{this.titles_to_be_deleted}}</strong>
+  </p>
+
+  <p>
+    Are you sure you want to do that?
+  </p>
+
+</Modal::Base>
\ No newline at end of file

app/components/modal/delete_node.js

+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+import BaseComponent from "./base";
+
+
+export default class DeleteNodeComponent extends BaseComponent {
+  @service store;
+  @service currentUser;
+
+  get nodes() {
+    return this.args.selectedNodes;
+  }
+
+  @action
+  onSubmit() {
+    this.nodes.forEach((node) => {
+      node.destroyRecord();
+    });
+
+    this.args.onClose();
+  }
+
+  get titles_to_be_deleted() {
+    return this.nodes.map(
+      (node) => {
+        return ` ${node.title}`;
+      }
+    );
+  }
+
+  get count() {
+    return this.nodes.length;
+  }
+
+  @action
+  onCancel() {
+    this.args.onClose();
+  }
+
+}

app/components/modal/rename_node.js

-import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
+import BaseComponent from "./base";
 
-export default class RenameNodeComponent extends Component {
+
+export default class RenameNodeComponent extends BaseComponent {
   @service store;
   @service currentUser;
 
@@ -38,9 +39,9 @@ export default class RenameNodeComponent extends Component {
       (node) => {
         node.title = this.title;
         node.save();
-    });
-
         this.args.onClose();
+        this.title = '';
+    });
   }
 
   @action

app/components/node.js

 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 
 export default class NodeComponent extends Component {
-  @tracked is_selected = false;
+  /**
+   * Receives arguments:
+   * `selectedNodes` - an array of currently selected nodes
+   * `model` - current node's model
+  */
+
+  get is_selected() {
+    let model = this.args.model,
+      nodes = this.args.selectedNodes;
+
+    if (nodes.includes(model)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  set is_selected(value) {
+    // if this node is selected or not is determened
+    // by parent component via this.args.selectedNodes
+    // array
+  }
 
   @action
   onCheckboxChange(event) {
     let is_checked = event.target.checked;
 
-    this.is_selected = is_checked;
-
+    // Notify parent componet that selection change.
+    // Parent component will update array of selected Nodes
     this.args.onCheckboxChange({
       node: this.args.model,
       is_selected: is_checked