pixelfed/resources/assets/components/partials/post/CommentReplyForm.vue

65 lines
2 KiB
Vue
Raw Normal View History

2023-06-11 21:16:20 +00:00
<template>
<div class="my-3">
<div class="d-flex align-items-top reply-form child-reply-form">
<img class="shadow-sm media-avatar border" :src="profile.avatar" width="40" height="40" draggable="false" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
<div style="display: flex;flex-grow: 1;position: relative;">
<textarea
class="form-control bg-light rounded-lg shadow-sm" style="resize: none;padding-right: 60px;"
placeholder="Write a comment...."
v-model="replyContent"
:disabled="isPostingReply" />
<button
class="btn btn-sm py-1 font-weight-bold ml-1 rounded-pill"
:class="[replyContent && replyContent.length ? 'btn-primary' : 'btn-outline-muted']"
@click="storeComment"
:disabled="!replyContent || !replyContent.length"
style="position: absolute;right:10px;top:50%;transform:translateY(-50%)">
Post
</button>
</div>
</div>
<p class="text-right small font-weight-bold text-lighter">{{ replyContent ? replyContent.length : 0 }}/{{ config.uploader.max_caption_length }}</p>
</div>
</template>
<script type="text/javascript">
export default {
props: {
parentId: {
type: String
}
},
data() {
return {
config: App.config,
isPostingReply: false,
replyContent: '',
profile: window._sharedData.user,
sensitive: false
}
},
methods: {
storeComment() {
this.isPostingReply = true;
axios.post('/api/v1/statuses', {
status: this.replyContent,
in_reply_to_id: this.parentId,
sensitive: this.sensitive
})
.then(res => {
this.replyContent = undefined;
this.isPostingReply = false;
this.$emit('new-comment', res.data);
// this.ids.push(res.data.id);
// this.feed.push(res.data);
})
},
}
}
</script>