137 lines
3.5 KiB
Vue
137 lines
3.5 KiB
Vue
<template>
|
|
<div class="flex flex-column">
|
|
<div class="flex flex-row items-center ">
|
|
<img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
|
|
<div class="flex-grow">
|
|
<div class="flex flex-row bg-gray-100 rounded-2xl">
|
|
<v-textarea
|
|
v-model="value"
|
|
density="compact"
|
|
variant="underlined"
|
|
placeholder="Votre commentaire..."
|
|
hide-details
|
|
auto-grow
|
|
rows="1"
|
|
maxlength="1024"
|
|
class="pr-1 ml-6 flex-grow"
|
|
@keydown.enter.prevent="publish"
|
|
|
|
>
|
|
</v-textarea>
|
|
<div class="flex flex-col justify-center">
|
|
<v-btn
|
|
icon
|
|
variant="text"
|
|
@click="publish"
|
|
>
|
|
<v-icon>mdi-send</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end items-center mt-1">
|
|
<div v-if="value.length < 1024" class="text-gray-500 text-sm">{{ value.length }}/1024</div>
|
|
<div v-if="value.length >= 1024" class="text-red-500 text-sm">{{ value.length }}/1024</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<v-dialog v-model="loginModal" max-width="400">
|
|
<v-card>
|
|
<div class="flex flex-col items-center">
|
|
<v-img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" class="w-50"></v-img>
|
|
<LoginForm :onSuccess="handleSuccess" :onFailure="handleFailure"></LoginForm>
|
|
<v-card-text>Vous devez être connecté pour poster un commentaire.</v-card-text>
|
|
</div>
|
|
<v-card-actions>
|
|
<v-btn color="primary" text @click="closeModal">Fermer</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue';
|
|
import {v7} from 'uuid';
|
|
import {useRouter} from "vue-router";
|
|
import {useClient} from '@/plugins/api.js';
|
|
import {useUserStore} from "@/stores/userStore.js";
|
|
import {useAuthStore} from "@/stores/authStore.js";
|
|
import LoginForm from "@/views/main/LoginForm.vue";
|
|
|
|
const closeModal = () => {
|
|
loginModal.value = false;
|
|
}
|
|
|
|
const props = defineProps({
|
|
subjectId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['message-posted'])
|
|
|
|
const loginModal = ref(false);
|
|
const client = useClient()
|
|
const value = ref("")
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const authStore = useAuthStore()
|
|
|
|
const publish = async () => {
|
|
if (!authStore.isAuthenticated) {
|
|
loginModal.value = true;
|
|
} else {
|
|
try {
|
|
const messageId = v7()
|
|
await client.post(`/api/messages/`, {
|
|
"id": messageId,
|
|
"subjectId": props.subjectId,
|
|
"message": value.value
|
|
})
|
|
emit('message-posted', {
|
|
"id": messageId,
|
|
"subjectId": props.subjectId,
|
|
"createdBy": userStore.user.id,
|
|
"createdByName": userStore.alias,
|
|
"createdByPortraitUrl": userStore.portraitUrl,
|
|
"createdAt": new Date(Date.now()).toISOString(),
|
|
"value": value.value,
|
|
"parentId": null
|
|
})
|
|
value.value = ''
|
|
} catch (error) {
|
|
console.error(`post api/message : ${error}`)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleSuccess = () => {
|
|
loginModal.value = false;
|
|
}
|
|
|
|
const handleFailure = () => {
|
|
console.error('Login failed');
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-red-500 {
|
|
color: #f56565;
|
|
}
|
|
|
|
.text-gray-500 {
|
|
color: #a0aec0;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.mt-1 {
|
|
margin-top: 0.25rem;
|
|
}
|
|
</style>
|