diff options
| -rw-r--r-- | pages/models/_id/index.vue | 57 | ||||
| -rw-r--r-- | store/models.js | 54 |
2 files changed, 111 insertions, 0 deletions
diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue index ab28187..abc9a34 100644 --- a/pages/models/_id/index.vue +++ b/pages/models/_id/index.vue @@ -86,6 +86,15 @@ p {{ model.description }} .mb-5.text-right + button.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-white.py-2.px-4.mr-2.text-sm.font-medium.text-black.shadow-sm( + class="hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2" + @click="toggleLike" + ) + svg(v-if="!likedByUser()" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1") + <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /> + svg(v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 mr-1") + <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" /> + | {{ model.likes ? model.likes.length : 0 }} button.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-yellow-600.py-2.px-4.mr-2.text-sm.font-medium.text-white.shadow-sm( class="hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2" @click="boxReport = true" @@ -282,6 +291,54 @@ export default { } }); }, + likedByUser() { + if (!this.model.likes || !this.me) { + return false; + } + + return this.model.likes.filter((x) => x.user_id == this.me.id).length > 0; + }, + toggleLike() { + if (this.likedByUser()) { + this.$store + .dispatch("models/removeLike", this.model.id) + .then((response) => { + if (response.status == 204) { + this.$toast.success("Like removed!"); + this.$store + .dispatch("models/findModel", this.id) + .then((response) => { + if (response.status != 200) { + window.location.href = "/models"; + } else { + this.model = response.data; + } + }); + } else { + this.$toast.error(response.data.error); + } + }); + } else { + this.$store + .dispatch("models/addLike", this.model.id) + .then((response) => { + if (response.status == 201) { + this.$toast.success("Like added!"); + this.$store + .dispatch("models/findModel", this.id) + .then((response) => { + if (response.status != 200) { + window.location.href = "/models"; + } else { + this.model = response.data; + } + }); + } else { + this.$toast.error(response.data.error); + } + }); + } + }, }, }; </script> diff --git a/store/models.js b/store/models.js index 04717f2..890ba8c 100644 --- a/store/models.js +++ b/store/models.js @@ -201,4 +201,58 @@ export const actions = { return res; }, + // Add like to a model + async addLike({ commit, rootGetters }, model_id) { + commit("loadingStatus", true, { root: true }); + let res = { status: 0, data: null }; + let api = this.$config.api; + + await fetch(`${api}/v1/models/${model_id}/like`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${rootGetters["auth/accessToken"]}`, + }, + }) + .then(async (response) => { + res.status = response.status; + if (res.status != 201) { + res.data = await response.json(); + } + }) + .catch((e) => { + res.status = e.status; + }); + + commit("loadingStatus", false, { root: true }); + + return res; + }, + // Remove a like from a model + async removeLike({ commit, rootGetters }, model_id) { + commit("loadingStatus", true, { root: true }); + let res = { status: 0, data: null }; + let api = this.$config.api; + + await fetch(`${api}/v1/models/${model_id}/like`, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${rootGetters["auth/accessToken"]}`, + }, + }) + .then(async (response) => { + res.status = response.status; + if (res.status != 204) { + res.data = await response.json(); + } + }) + .catch((e) => { + res.status = e.status; + }); + + commit("loadingStatus", false, { root: true }); + + return res; + }, }; |