Merge branch 'feature/delete' of koeeckho/vue-crud into master

src/components/DeleteModal.vue

@@ -0,0 +1,93 @@
+<template>
+    <div
+        :class="['delete-modal__background', travel === null ? 'hide' : 'show']"
+        @click.self="closeModal"
+    >
+        <div class="delete-modal__window" v-if="travel !== null">
+            <header>Delete</header>
+            <main>Are you sure you want to delete travel {{ travel.id }}</main>
+            <footer>
+                <button @click="deleteTravel(travel.id)">Delete</button
+                ><button @click="closeModal">Cancel</button>
+            </footer>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeleteModal',
+    data() {
+        return {
+            travel: null,
+        };
+    },
+    mounted() {
+        this.$root.$on('delete-travel', this.openModal);
+    },
+    methods: {
+        openModal(travel) {
+            console.log(travel);
+            this.travel = travel;
+        },
+        closeModal() {
+            this.travel = null;
+        },
+        deleteTravel(id) {
+            this.travel = null;
+            this.$root.directusClient.deleteItem('travel', id).then(() => {
+                this.$root.$emit('notify', `Travel ${id} was deleted`);
+                this.$root.$emit('refresh-travels');
+            });
+        },
+    },
+};
+</script>
+
+<style scoped>
+.delete-modal__background.hide {
+    display: none;
+}
+.delete-modal__background {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.delete-modal__window {
+    background-color: white;
+    width: 50%;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
+}
+
+.delete-modal__window header {
+    font-size: 2rem;
+    border-bottom: 1px solid grey;
+    padding: 1rem;
+}
+
+.delete-modal__window main {
+    height: 10rem;
+    padding: 1rem;
+    border-bottom: 1px solid grey;
+}
+
+.delete-modal__window footer {
+    padding: 1rem;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.delete-modal__window footer button {
+    margin-bottom: 0;
+    margin-left: 2rem;
+}
+</style>

src/components/ManualTable.vue

@@ -60,7 +60,10 @@
                     >
                         <Pencil size="18" />
                     </button>
-                    <button class="action-btn delete-btn">
+                    <button
+                        class="action-btn delete-btn"
+                        @click="$root.$emit('delete-travel', travel)"
+                    >
                         <Delete size="18" />
                     </button>
                 </td>
@@ -141,6 +144,9 @@ export default {
         SortAscending,
         SortDescending,
     },
+    mounted() {
+        this.$root.$on('refresh-travels', this.fetch);
+    },
     created() {
         this.fetch();
     },

src/views/Home.vue

@@ -1,13 +1,15 @@
 <template>
     <div class="home-page">
+        <DeleteModal />
         <ManualTable />
     </div>
 </template>
 
 <script>
 import ManualTable from '../components/ManualTable';
+import DeleteModal from '../components/DeleteModal';
 export default {
     name: 'Home',
-    components: { ManualTable },
+    components: { DeleteModal, ManualTable },
 };
 </script>