refact list front

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -1,5 +1,20 @@
 <template>
-    <div class="p-4">
+    <div class="px-4 py-2">
+        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+        <div v-if="modal" class="modal">
+            <p class="m-2 text-center">Are you sure you want to delete this list ?</p>
+            <div class="flex justify-center mx-2 my-4">
+                <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                <button class="btn-alert" @click="destroy"> Delete</button>
+            </div>
+        </div>
+        <div class="flex items-center justify-between pb-2">
+            <router-link to="/memos/" class="btn-secondary">Back</router-link>
+            <div class="flex-middle">
+                <router-link :to="'/to-do-lists/' + toDoList.data.to_do_list_id" class="btn-secondary mr-2" >Edit</router-link>
+                <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
+            </div>
+        </div>
         <div v-if="!loading" class="bg-orange-400 rounded p-1">
             <h1 class="text-2xl font-bold mb-2 ml-2">{{ toDoList.data.attributes.data.name }}</h1>
             <ul class='p-1'
@@ -48,6 +63,7 @@ export default {
             loading: true,
             name: '',
             errors: null,
+            modal: false,
         }
     },
     mounted() {
@@ -125,6 +141,16 @@ export default {
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
+        },
+        destroy: function () {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/to-do-lists/' + this.$route.params.id)
+                .then(() => {
+                    this.$router.push('/to-do-lists')
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete list.' + errorRes)
+                })
         }
     }
 }