added confirmation modal on delete

Antoinerev · Antoinerev · commit 66b92ba682ff · 2017-09-13T10:56:23.000+02:00
diff --git a/App.css b/App.css
@@ -69,3 +69,69 @@ li {
   direction: row;
   justify-content: space-between;
 }
+/************************************************************/
+/*MODAL*/
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  display: table;
+  transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 300px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+  transition: all .3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #42b983;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
   <title>Hello Vue!</title>
 </head>
 <body>
+
   <div id="app">
     <div class="app-content">
       <div class="todobox" >
@@ -30,9 +31,41 @@
         </ul>
       </div>
     </div>
-
   </div>
 
+  <!-- template for the modal component -->
+  <script type="text/x-template" id="modal-template">
+    <transition name="modal">
+      <div class="modal-mask">
+        <div class="modal-wrapper">
+          <div class="modal-container">
+
+            <div class="modal-header">
+              <slot name="header">
+                default header
+              </slot>
+            </div>
+
+            <div class="modal-body">
+              <slot name="body">
+                default body
+              </slot>
+            </div>
+
+            <div class="modal-footer">
+              <slot name="footer">
+                default footer
+                <button class="modal-default-button" @click="$emit('close')">
+                  OK
+                </button>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </script>
+
   <script>
     // Vue.component('test-global-cmp', {
     //   template: '<div>Composant de test</div>'
@@ -107,26 +140,47 @@ <h2 v-on:click="activateTodolist">{{todolist.title}} </h2>\
       }
     });
 
+    Vue.component('modal', {
+      template: '#modal-template'
+    });
+
     var itemDetails = {
       props: ['item'],
       template: '<span>{{item.id}} - {{item.name}}</span>'
     };
+
     Vue.component('item-cmp', {
+      data: function() {
+        return {showModal: false}
+      },
       components: {'item-details': itemDetails},
       props: ['todoItem'],
       template:'<span>\
                   <h3>\
                     <i class="fa fa-pencil-square-o" aria-hidden="true" v-on:click="activateTodoItem()"> - \
                       <item-details :item="todoItem"></item-details> \
                     </i>\
-                     - <i class="fa fa-trash-o" aria-hidden="true" v-on:click="deleteItem"></i>\
+                     - <i class="fa fa-trash-o" aria-hidden="true" id="show-modal" @click="showModal = true"></i>\
+                    <modal v-if="showModal" @close="showModal = false">\
+                      <h3 slot="header">Confirmer la suppression ?</h3>\
+                      <div slot="body">La tache "{{todoItem.name}}" va être definitivement supprimée</div>\
+                      <p slot="footer">\
+                        <button class="modal-default-button" @click="showModal = false">\
+                          Annuler\
+                        </button>\
+                        <button class="modal-default-button" @click="deleteItem">\
+                          OK\
+                        </button>\
+                      </p>\
+                    </modal>\
                   </h3>\
                 </span>',
       methods: {
         activateTodoItem: function() {
           this.$emit('activateItem');
         },
         deleteItem: function() {
+          this.showModal = false;
           this.$emit('deleteItem');
         }
       }
@@ -160,7 +214,7 @@ <h3>\
         todoItem: {name:"", },
         todoItems: [],
         // active: false,
-        activeTodo: 1
+        activeTodo: 0
       },
       created: function() {
         // let ajaxUrlLocal = 'http://localhost:3000/api/todos/todos/1/items';
@@ -220,7 +274,7 @@ <h3>\
           .then(function(response) {
             var lastIndex = response.all_items.length -1
             var newItem = response.all_items[lastIndex];
-            todolist.all_items.splice(lastIndex, 0, newItem);
+            todolist.all_items.push(newItem);
           });
           this.todoItem.name = "";
         }
