first commit
This commit is contained in:
Dede Fuji Abdul
177
src/components/MessageBox.vue
Normal file
177
src/components/MessageBox.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<TransitionRoot as="template" :show="open">
|
||||
<Dialog as="div" class="relative z-10" @close="close">
|
||||
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur-sm" />
|
||||
|
||||
<div class="fixed inset-0 overflow-hidden">
|
||||
<div class="absolute inset-0 overflow-hidden ">
|
||||
<div class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none lg:pl-10">
|
||||
<TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
enter-from="translate-x-full" enter-to="translate-x-0"
|
||||
leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0"
|
||||
leave-to="translate-x-full">
|
||||
<DialogPanel class="w-screen max-w-sm pointer-events-auto">
|
||||
<div class="flex flex-col h-full bg-white shadow-xl">
|
||||
<div class="flex flex-col flex-1 min-h-0 ">
|
||||
<div class="flex items-center w-full h-16 px-4 bg-white sm:px-6 drop-shadow-sm">
|
||||
<div class="flex items-start justify-between w-full">
|
||||
<DialogTitle v-if="peopleIndexSelected !== null"
|
||||
class="text-sm font-medium text-gray-900">
|
||||
<PictureInitial class-name="mr-2" background-class="bg-primary-400"
|
||||
font-class="font-medium text-white text-md"
|
||||
:name="people[peopleIndexSelected].name" />
|
||||
{{ people[peopleIndexSelected].name }}
|
||||
</DialogTitle>
|
||||
<DialogTitle v-else class="font-medium text-gray-900 text-md">
|
||||
Team
|
||||
</DialogTitle>
|
||||
<div class="flex items-center ml-3 h-7 ">
|
||||
<button type="button"
|
||||
class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:ring-0 "
|
||||
@click="peopleIndexSelected === null ? close() : selectPeople(null)">
|
||||
<span class="sr-only">Close panel</span>
|
||||
<XMarkIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto bg-layout">
|
||||
<div v-if="peopleIndexSelected !== null"
|
||||
class="flex flex-col items-center justify-center h-full px-4 sm:px-6"
|
||||
aria-hidden="true">
|
||||
<ChatBubbleLeftRightIcon class="w-12 h-12 mx-auto text-gray-400"
|
||||
aria-hidden="true" />
|
||||
<h3
|
||||
class="mt-2 font-bold text-center text-gray-900 whitespace-pre-wrap text-md">
|
||||
Tidak ada percakapan
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-center text-gray-600 whitespace-pre-wrap ">
|
||||
Mulai percakapan dengan <b>{{ people[peopleIndexSelected].name }}</b>
|
||||
untuk melihat percakapan disini.
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="h-full bg-white" aria-hidden="true">
|
||||
<ul role="list" class="flex-1 overflow-y-auto divide-y divide-gray-50">
|
||||
<li v-for="(person, index) in people" :key="person.id"
|
||||
class="cursor-pointer" @click="selectPeople(index)">
|
||||
<div class="relative flex items-center px-5 py-3 group">
|
||||
<div class="flex-1 block p-1 -m-1">
|
||||
<div class="absolute inset-0 group-hover:bg-primary-100"
|
||||
aria-hidden="true" />
|
||||
<div class="relative flex items-center flex-1 min-w-0">
|
||||
<span class="relative flex-shrink-0 inline-block">
|
||||
<PictureInitial size-class="w-10 h-10"
|
||||
background-class="bg-primary-400"
|
||||
font-class="font-medium text-white text-md"
|
||||
:name="person.name" />
|
||||
<span
|
||||
:class="[person.online ? 'bg-green-400' : 'bg-gray-300', 'absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white']"
|
||||
aria-hidden="true" />
|
||||
</span>
|
||||
<div class="ml-4 truncate">
|
||||
<p
|
||||
class="text-sm font-medium text-gray-900 truncate">
|
||||
{{ person.name }}</p>
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
@User</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-4 py-4 shadow" v-if="peopleIndexSelected !== null">
|
||||
<form @submit.prevent="messageStore.send"
|
||||
class="flex items-center justify-between flex-shrink-0">
|
||||
<InputText class-name="w-full mr-4 py-2 px-4" placeholder="Tulis pesan di sini"
|
||||
:value="messageStore.message"
|
||||
@update:value="messageStore.message = $event" />
|
||||
|
||||
<button type="submit" :disabled="messageStore.isSending"
|
||||
class="text-sm font-bold text-white bg-transparent border-transparent rounded-full w-7 h-7 focus:outline-0 focus:ring-0">
|
||||
<PaperAirplaneIcon class="pointer-events-none w-7 h-7 text-primary-500"
|
||||
aria-hidden="true" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
|
||||
import { XMarkIcon } from '@heroicons/vue/24/outline'
|
||||
import { useMessageStore } from '@/stores/message';
|
||||
import { ChatBubbleLeftRightIcon, DocumentArrowUpIcon, PaperAirplaneIcon } from '@heroicons/vue/24/solid';
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import PictureInitial from '@/components/PictureInitial.vue'
|
||||
|
||||
const messageStore = useMessageStore()
|
||||
const props = defineProps({ open: Boolean })
|
||||
const emit = defineEmits(['onClose'])
|
||||
const open = ref(props.open)
|
||||
|
||||
const peopleIndexSelected = ref(null)
|
||||
|
||||
const people = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Ajeng Sindia',
|
||||
image: 'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
online: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Jamaludin',
|
||||
image: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
online: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Kumara',
|
||||
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
online: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Bellayanti',
|
||||
image: 'https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
online: false
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Jefri',
|
||||
image: 'https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
online: false
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Kinanti',
|
||||
image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
online: false
|
||||
},
|
||||
]
|
||||
|
||||
function selectPeople(value: any) {
|
||||
peopleIndexSelected.value = value
|
||||
}
|
||||
|
||||
function close() {
|
||||
open.value = false
|
||||
emit('onClose')
|
||||
}
|
||||
|
||||
watch(() => props.open, (value) => {
|
||||
open.value = value;
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user