almost finish bookmark view

resources/js/views/Bookmark/Bookmark.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="bg-gray-300 rounded text-black m-2 p-2">
+        <div v-if="!edit" class="edit flex flex-wrap items-center">
+            <a :href="bookmark.data.attributes.data.url"
+               class="flex-1">
+                <img v-if="bookmark.data.attributes.data.favicon"
+                     class="w-5 h-5 mr-2 inline-block"
+                     :src="bookmark.data.attributes.data.favicon"
+                     alt="">
+                <span class="font-bold">
+                    {{ bookmark.data.attributes.data.name }}
+                </span>
+            </a>
+            <span class="edit-icon inline-block text-red cursor-pointer" @click="edit = !edit">
+                <svg-vue icon="edit" class="inline w-4 fill-current cursor-pointer mx-2" />
+            </span>
+        </div>
+        <div v-else class="flex items-center">
+            <img v-if="bookmark.data.attributes.data.favicon"
+                 class="w-5 h-5 mr-2 inline-block"
+                 :src="bookmark.data.attributes.data.favicon"
+                 alt="">
+            <input
+                type="text"
+                v-model="name"
+                @keypress.enter="update"
+                class="flex-1 w-10 font-semibold pl-1">
+            <div @click="edit = !edit">
+                <svg-vue icon="edit" class="w-4 fill-current cursor-pointer mx-2" />
+            </div>
+            <div @click="destroy">
+                <svg-vue icon="close" class="w-4 fill-current text-red-dark cursor-pointer mx-2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Bookmark',
+    props: [
+        'bookmark'
+    ],
+    data: function () {
+        return {
+            name: this.bookmark.data.attributes.data.name,
+            url: '',
+            edit: false,
+            errors: null,
+        }
+    },
+    methods: {
+        update() {
+            // eslint-disable-next-line no-undef
+            axios.patch('/api/bookmarks/' + this.bookmark.data.bookmark_id, { name: this.name, url: this.bookmark.data.attributes.data.url })
+                .then(() => {
+                    this.edit = false
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        },
+        destroy() {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/bookmarks/' + this.bookmark.data.bookmark_id)
+                .then(() => {
+                    this.edit = false
+                    this.$emit('update:destroy', this.bookmark.data.bookmark_id)
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        }
+    },
+    watch: {
+        name(val) {
+            return this.bookmark.data.attributes.data.name = val
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+    .edit-icon {
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .edit:hover .edit-icon {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+
+</style>

resources/js/views/Bookmark/BookmarkIndex.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="p-4">
+        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+        <div v-if="modal" class="modal px-2">
+            <p class="m-2 text-center">Add a new to-do list ?</p>
+            <InputField name="name" label="Title" placeholder="Your Title" @update:field="name = $event" :errors="errors" classes="border" />
+            <InputField name="name" label="Url" placeholder="Website Url" required @update:field="url = $event" :errors="errors" classes="border" />
+            <div class="flex justify-center mx-2 my-4">
+                <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
+                <button class="btn-primary" @click="create">Create</button>
+            </div>
+        </div>
+        <div class="flex justify-between mb-1">
+            <router-link to="/" class="btn">Back</router-link>
+
+            <a href="#" class="btn-primary" @click="modal = ! modal">Add Bookmark</a>
+        </div>
+        <Loader v-if="loading" />
+        <div v-else class="flex flex-wrap -m-2 mt-2">
+            <div v-if="bookmarks.length < 1" class="font-bold p-2">No Bookmark Yet</div>
+            <div v-else
+                 v-for="(bookmark, index) in bookmarks"
+                 :key="index"
+                 class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
+                <Bookmark :bookmark="bookmark" @update:destroy="deleteBookmark" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Loader from '../../components/Loader'
+import InputField from '../../components/InputField'
+import Bookmark from './Bookmark'
+
+export default {
+    name: 'BookmarkIndex',
+    components: {
+        Loader, InputField, Bookmark
+    },
+    data: function () {
+        return {
+            loading: true,
+            modal: false,
+            bookmarks: null,
+            name: '',
+            url: '',
+            errors: null,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/bookmarks')
+            .then(res => {
+                this.bookmarks = res.data.data
+                this.loading = false
+            })
+            .catch(errorRes => {
+                this.loading = false
+                if (errorRes.response.status === 404) {
+                    this.$router.push('/')
+                }
+            })
+    },
+    methods: {
+        create: function () {
+            // eslint-disable-next-line no-undef
+            axios.post('/api/bookmarks', {name: this.name, url: this.url})
+                .then(res => {
+                    console.log(res)
+                    this.modal = false
+                    this.name = ''
+                    this.url = ''
+                    this.bookmarks.push(res.data)
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete contact.' + errorRes)
+                })
+        },
+        deleteBookmark: function(e) {
+            this.bookmarks.forEach((bookmark, index) => {
+                if(bookmark.data.bookmark_id === e) {
+                    console.log(bookmark, bookmark.data.bookmark_id, index)
+                    this.bookmarks.splice(index, 1)
+                }
+            })
+        }
+    }
+}
+</script>
+
+