177 lines
11 KiB
Vue
177 lines
11 KiB
Vue
<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> |