VueComponent Post.vue <template>
Wed Nov 03 2021 14:12:58 GMT+0000 (Coordinated Universal Time)
Saved by @devdave
<template>
<!-- post tplt -->
<div class="post__content--Container">
<div class="post__content--Wrapper">
<div class="post__content--header">
<div class="post__userContainer">
<router-link
:to="{ name: 'Profile', params: { id: post.User.id } }"
class="user__profileContainer"
>
<img :src="post.User.picture" class="post__userPicture" />
<span class="post__user--Bold user__profileLink">{{
post.User.username
}}</span></router-link
>
</div>
<span class="post__user--BoldAlt">{{
dateFormatter(post.createdAt)
}}</span>
</div>
<div v-if="post.imageUrl.length > 0" class="img__container">
<img :src="post.imageUrl" alt="" />
</div>
<!-- like container -->
<!-- like container -->
<div class="cta__container">
<!--<Like :postId="postId" />-->
<div class="cta__public">
<div class="like__container">
<div
id="likeAnimation"
class="icon__tplt--like like__icon"
type="button"
@click="likeFunction()"
:class="{ active: likeActive }"
:key="postId"
></div>
</div>
<div>
<svg
@click="toggleComment"
:class="{ 'icon__comment--active': commentActive }"
class="icon__tplt icon__comment"
xmlns="http://www.w3.org/2000/svg"
width="8.4667mm"
height="8.4667mm"
viewBox="0 0 24 24"
>
<path
class="cls-1"
d="M12,22.81a2.2668,2.2668,0,0,1-1.8-.96l-1.5-2a.4669.4669,0,0,0-.2046-.1H8c-4.1675,0-6.75-1.1289-6.75-6.75V8c0-4.416,2.334-6.75,6.75-6.75h8c4.416,0,6.75,2.334,6.75,6.75v5c0,4.416-2.334,6.75-6.75,6.75h-.5a.2627.2627,0,0,0-.2021.1025L13.8,21.85A2.2645,2.2645,0,0,1,12,22.81ZM8,2.75C4.4185,2.75,2.75,4.4183,2.75,8v5c0,4.5205,1.5479,5.25,5.25,5.25h.5a1.8647,1.8647,0,0,1,1.4067.709L11.4,20.95a.6908.6908,0,0,0,1.2,0l1.5-2A1.7651,1.7651,0,0,1,15.5,18.25H16c3.582,0,5.25-1.668,5.25-5.25V8c0-3.5815-1.668-5.25-5.25-5.25Z"
/>
<path
class="cls-1"
d="M16.0059,12a1,1,0,0,1-.01-2h.01a1,1,0,1,1,0,2Z"
/>
<path
class="cls-1"
d="M12.0044,12a1,1,0,0,1-.0088-2h.0088a1,1,0,0,1,0,2Z"
/>
<path
class="cls-1"
d="M8.0034,12a1,1,0,0,1-.0088-2h.0088a1,1,0,1,1,0,2Z"
/>
</svg>
</div>
</div>
<div v-if="authUpdatePost" class="cta__private">
<div @click="toggleUpdatePost()" :key="post.id">
<svg
xmlns="http://www.w3.org/2000/svg"
width="8.4667mm"
height="8.4667mm"
viewBox="0 0 24 24"
class="icon__tplt icon__edit"
>
<path
class="cls-1"
d="M15,22.75H9c-5.4321,0-7.75-2.3174-7.75-7.75V9C1.25,3.5677,3.5679,1.25,9,1.25h2a.75.75,0,0,1,0,1.5H9C4.3857,2.75,2.75,4.3856,2.75,9v6c0,4.6143,1.6357,6.25,6.25,6.25h6c4.6143,0,6.25-1.6357,6.25-6.25V13a.75.75,0,1,1,1.5,0v2C22.75,20.433,20.4326,22.75,15,22.75Z"
/>
<path
class="cls-1"
d="M8.5054,17.6986a2.2138,2.2138,0,0,1-1.5923-.6309,2.26,2.26,0,0,1-.5854-1.9463l.43-3.0073A3.4245,3.4245,0,0,1,7.63,10.3695l7.88-7.88h0C17.5.5,19.52.4974,21.5107,2.49c1.99,1.99,1.99,4.0093,0,6L13.63,16.37a3.51,3.51,0,0,1-1.7432.8721l-3.0107.43A2.6642,2.6642,0,0,1,8.5054,17.6986ZM16.57,3.55,8.69,11.43a2.0043,2.0043,0,0,0-.4478.8936l-.43,3.0127a.7733.7733,0,0,0,.166.6748.7961.7961,0,0,0,.689.1758l3.0063-.4287a2.1055,2.1055,0,0,0,.9038-.457L20.45,7.43c1.1641-1.1646,1.6094-2.27,0-3.8794s-2.7168-1.1626-3.88,0Z"
/>
<path
class="cls-1"
d="M19.85,9.84a.7591.7591,0,0,1-.2041-.0283,7.9465,7.9465,0,0,1-5.458-5.459.75.75,0,0,1,1.4443-.4053A6.4377,6.4377,0,0,0,20.0537,8.368.75.75,0,0,1,19.85,9.84Z"
/>
</svg>
</div>
<div @click="toggleDeletePost()">
<svg
xmlns="http://www.w3.org/2000/svg"
width="8.4667mm"
height="8.4667mm"
viewBox="0 0 24 24"
class="icon__tplt icon__delete"
>
<path
class="cls-1"
d="M21.001,6.73c-.0244,0-.05-.001-.0752-.0034a79.467,79.467,0,0,0-15.81-.2l-2.0425.2a.75.75,0,0,1-.1465-1.4932l2.04-.2a80.9826,80.9826,0,0,1,16.1074.2A.75.75,0,0,1,21.001,6.73Z"
/>
<path
class="cls-1"
d="M15.499,5.72a.7493.7493,0,0,1-.7383-.625l-.22-1.3C14.3994,2.9291,14.37,2.75,13.31,2.75H10.69c-1.0562,0-1.08.1377-1.23,1.0347l-.22,1.31A.75.75,0,0,1,7.76,4.8456l.22-1.31C8.1426,2.5712,8.3647,1.25,10.69,1.25h2.62c2.335,0,2.5615,1.3833,2.7109,2.2988l.2188,1.2964a.75.75,0,0,1-.6143.8647A.7828.7828,0,0,1,15.499,5.72Z"
/>
<path
class="cls-1"
d="M15.21,22.75H8.79c-3.4932,0-3.6289-1.9336-3.7383-3.4873l-.65-10.0747a.75.75,0,0,1,1.4971-.0967l.65,10.0708C6.6553,20.681,6.6953,21.25,8.79,21.25h6.42c2.0947,0,2.1348-.5693,2.2422-2.0928l.6494-10.0659a.7631.7631,0,0,1,.7959-.7.7492.7492,0,0,1,.7.7969l-.6494,10.07C18.8389,20.8168,18.7031,22.75,15.21,22.75Z"
/>
<path
class="cls-1"
d="M13.66,17.25H10.33a.75.75,0,0,1,0-1.5h3.33a.75.75,0,0,1,0,1.5Z"
/>
<path
class="cls-1"
d="M14.5,13.2494h-5a.75.75,0,1,1,0-1.5h5a.75.75,0,1,1,0,1.5Z"
/>
</svg>
</div>
</div>
</div>
<transition name="fade">
<div
v-if="deleteActive"
class="deleteModal__container"
:class="{ 'deleteModal__container--isActive': deleteActive }"
>
<div class="deleteModal__wrapper">
<div class="deleteModal__content">
Are you sure you want to delete this post?
</div>
<div class="deleteModal__btnContainer">
<button @click="deletePost()" class="deleteModal__btn--confirm">
Yes
</button>
<button
@click="deleteActive = false"
class="deleteModal__btn--delete"
>
No
</button>
</div>
</div>
</div>
</transition>
<p class="post__content--body">
{{ post.content }}
</p>
<!-- edit Post tplt -->
<div class="updatePost__relativeContainer">
<div
v-if="authUpdatePost"
class="updatePost__container"
:class="{ 'toggleUpdateMenu--isActive': toggleUpdateMenuAnimation }"
>
<textarea
v-model="inputCreatePost"
class=" form-row__input--updatePost updatePost__eraseTextInput"
:placeholder="post.content"
cols="30"
rows="2"
oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'
></textarea>
<div class="updatePost__footer">
<button
@click="updatePost(inputCreatePost)"
class="updatePost__button"
>
<svg
class="button__icon button__send"
ixmlns="http://www.w3.org/2000/svg"
width="8.4667mm"
height="8.4667mm"
viewBox="0 0 24.0001 24.0001"
>
<path
class="cls-1"
d="M5.4072,21.7543a3.0806,3.0806,0,0,1-2.2827-.832c-.875-.876-1.5015-2.7529.4849-6.7178L4.48,12.473a1.2869,1.2869,0,0,0-.02-.9775l-.8516-1.7c-1.9849-3.9639-1.3569-5.84-.48-6.7168s2.7529-1.5054,6.7173.481l8.56,4.28C20.53,8.9017,21.7,10.3793,21.7,12s-1.17,3.0981-3.2949,4.1606l-8.56,4.28A10.2869,10.2869,0,0,1,5.4072,21.7543Zm0-18.0093a1.675,1.675,0,0,0-1.2187.394c-.7241.7241-.4395,2.5874.7612,4.9849l.8706,1.7407a2.8273,2.8273,0,0,1,.0186,2.24l-.89,1.7725c-1.2007,2.3975-1.4863,4.2607-.7642,4.9844s2.5879.4385,4.9888-.7627l8.561-4.28C19.3018,14.0355,20.2,13.0082,20.2,12s-.8984-2.0356-2.4648-2.8188l-8.561-4.28,0,0A9.1894,9.1894,0,0,0,5.4077,3.745Z"
/>
<path
class="cls-1"
d="M10.84,12.75H5.44a.75.75,0,1,1,0-1.5h5.4a.75.75,0,0,1,0,1.5Z"
/>
</svg>
</button>
</div>
</div>
</div>
<!-- edit Post tplt -->
<!-- comment tplt -->
<div class="comment__section">
<div
v-if="this.post.Comments.length > 0"
class="comment__contentHeader "
>
<div class="comment__content--Title comment__user--Bold">
Comments
</div>
</div>
<Comment
v-for="comment in this.post.Comments"
:key="comment.id"
:comment="comment"
v-on:commentDeleted="handleCommentDeleted"
/>
<div v-if="commentActive">
<div class="commentCreate__container">
<textarea
v-model="inputCreateComment"
class=" form-row__input"
:placeholder="`What do you think ` + [[loggedFirstname]] + `?`"
cols="30"
rows="1"
oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'
></textarea>
<button @click="createComment()" class="button button__sendAnim">
<svg
class="button__icon button__send"
ixmlns="http://www.w3.org/2000/svg"
width="8.4667mm"
height="8.4667mm"
viewBox="0 0 24.0001 24.0001"
>
<path
class="cls-1"
d="M5.4072,21.7543a3.0806,3.0806,0,0,1-2.2827-.832c-.875-.876-1.5015-2.7529.4849-6.7178L4.48,12.473a1.2869,1.2869,0,0,0-.02-.9775l-.8516-1.7c-1.9849-3.9639-1.3569-5.84-.48-6.7168s2.7529-1.5054,6.7173.481l8.56,4.28C20.53,8.9017,21.7,10.3793,21.7,12s-1.17,3.0981-3.2949,4.1606l-8.56,4.28A10.2869,10.2869,0,0,1,5.4072,21.7543Zm0-18.0093a1.675,1.675,0,0,0-1.2187.394c-.7241.7241-.4395,2.5874.7612,4.9849l.8706,1.7407a2.8273,2.8273,0,0,1,.0186,2.24l-.89,1.7725c-1.2007,2.3975-1.4863,4.2607-.7642,4.9844s2.5879.4385,4.9888-.7627l8.561-4.28C19.3018,14.0355,20.2,13.0082,20.2,12s-.8984-2.0356-2.4648-2.8188l-8.561-4.28,0,0A9.1894,9.1894,0,0,0,5.4077,3.745Z"
/>
<path
class="cls-1"
d="M10.84,12.75H5.44a.75.75,0,1,1,0-1.5h5.4a.75.75,0,0,1,0,1.5Z"
/>
</svg>
</button>
</div>
</div>
</div>
<!-- comment tplt -->
</div>
</div>
<!-- post tplt -->
</template>
Comments