98 lines
3.0 KiB
Vue
98 lines
3.0 KiB
Vue
<template>
|
|
<div class="bg-zinc-50">
|
|
<div class="flex flex-row justify-center py-5">
|
|
<ul class="justify-around">
|
|
<li
|
|
v-for="comment in contract.comments"
|
|
:key="comment.id"
|
|
class="bg-white rounded-lg shadow-2xl mb-4">
|
|
<div
|
|
class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
|
|
<div class="relative flex gap-4">
|
|
<font-awesome-icon
|
|
icon="fa-solid fa-user-large"
|
|
class="relative -mb-4 bg-white h-11 w-11" />
|
|
<div class="flex flex-col w-full">
|
|
<div class="flex flex-row justify-between">
|
|
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">
|
|
{{ comment.name }}
|
|
</p>
|
|
<a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
|
|
</div>
|
|
<p class="text-gray-400 text-sm">{{ new Date(comment.date).toDateString() }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="-mt-4 text-gray-500">{{ comment.message }}</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<div class="py-4 mb-10 shadow-2xl">
|
|
<form
|
|
class="w-full max-w-xl bg-white rounded-lg px-4 pt-2"
|
|
@submit.prevent
|
|
@submit="postComment()">
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<h2 class="px-4 pt-3 pb-2 text-gray-800 text-lg">Add comment</h2>
|
|
<div class="w-full md:w-full px-3 mb-2 mt-2">
|
|
<textarea
|
|
v-model="message"
|
|
class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white"
|
|
name="body"
|
|
placeholder="Type Your Comment"
|
|
required></textarea>
|
|
</div>
|
|
<div class="w-full md:w-full flex items-start px-3">
|
|
<div class="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
|
|
<div class="-mr-1">
|
|
<input
|
|
type="submit"
|
|
class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100"
|
|
value="Post Comment" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { saveComment } from '../../service/ContractsService'
|
|
|
|
export default {
|
|
props: {
|
|
contract: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
message: ''
|
|
}
|
|
},
|
|
computed: {
|
|
name() {
|
|
return this.$store.state.keycloak.keycloak.tokenParsed.name
|
|
}
|
|
},
|
|
methods: {
|
|
postComment() {
|
|
if (this.message === '') return
|
|
|
|
const comment = {
|
|
name: this.name,
|
|
text: this.message,
|
|
date: new Date()
|
|
}
|
|
|
|
saveComment(comment)
|
|
this.$router.go()
|
|
}
|
|
}
|
|
}
|
|
</script>
|