96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<template>
|
|
<div class="bg-white 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>
|