Merge pull request #4 from firefinchdev/master

Add: Delete Button With Confirmation For Each Question

Author: abhishek97

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+# WebStorm local user files
+/.idea/
+
 # compiled output
 /dist/
 /tmp/

app/pods/questions/index/controller.js

@@ -3,6 +3,11 @@ import Controller from '@ember/controller';
 export default Controller.extend({
   queryParams: ['page', 'limit'],
   page: 1,
-  limit: 10
+  limit: 10,
+  actions : {
+    deleteQuestion(question) {
+      question.destroyRecord()
+    }
+  }
 
 });

app/pods/questions/index/template.hbs

@@ -14,6 +14,14 @@
         <p class="card-text">
           {{question.description}}
         </p>
+        <div class="button-solid">
+          {{#confirm-dialog
+            dialogClass="custom-confirm-dialog"
+            title="Delete Question"
+            text="Are you sure you want to delete this question?"}}
+            <button {{action "deleteQuestion" question}}>Delete</button>
+          {{/confirm-dialog}}
+        </div>
         <div class="button-solid">
           {{#link-to 'questions.id' question.id class="white"}}
             <button>Edit</button>

app/styles/app.scss

@@ -1,4 +1,6 @@
 @import "ember-searchable-select/style";
+@import "ember-modal-dialog/ember-modal-structure";
+@import "ember-modal-dialog/ember-modal-appearance";
 
 .card {
   height: auto;
@@ -25,5 +27,22 @@
 }
 
 .correct {
-  background-color: rgba(0, 255, 0, 0.1); 
-}
+  background-color: rgba(0, 255, 0, 0.1);
+}
+.custom-confirm-dialog {
+
+  .dialog-title{
+    background-color: #bbc7bc;
+    font-weight: bold;
+    padding: 10px;
+  }
+
+  .dialog-text{
+    margin: 0px;
+  }
+
+  .dialog-footer{
+    background-color: #fcffb0;
+    padding: 5px;
+  }
+}