remove unused component
This commit is contained in:
Dede Fuji Abdul
parent
36c34ade42
commit
3a29562969
@ -3,8 +3,11 @@ import { RouterView } from 'vue-router'
|
||||
import { NotificationProvider } from '@/components/Notification'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
|
||||
import CommandPalettes from '@/components/CommandPalettes.vue';
|
||||
import { useCommandPalattesStore } from '@/stores/command';
|
||||
|
||||
const dialog = useDialogStore()
|
||||
const command = useCommandPalattesStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -13,6 +16,7 @@ const dialog = useDialogStore()
|
||||
:open="dialog.open" :title="dialog.title" :message="dialog.content" :confirm-text="dialog.confirmText"
|
||||
:cancel-text="dialog.cancelText" @on-close="dialog.open = false" @on-confirm="dialog.onConfirm"
|
||||
@on-cancel="dialog.onCancel" :type="dialog.type" />
|
||||
<CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
|
||||
<RouterView />
|
||||
</NotificationProvider>
|
||||
</template>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import CommandPalettes from '@/components/CommandPalettes.vue'
|
||||
import MessageBox from '@/components/MessageBox.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useCommandPalattesStore } from '@/stores/command'
|
||||
import { useMessageStore } from '@/stores/message'
|
||||
import { useMenuStore } from '@/stores/menu'
|
||||
import {
|
||||
Menu,
|
||||
@ -18,12 +15,11 @@ import {
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
|
||||
import PictureInitial from './PictureInitial.vue'
|
||||
import Icon from '@/assets/images/pln-with-text.png'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import { IconApp } from '@/utils/icons'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const user = useUserStore()
|
||||
const message = useMessageStore()
|
||||
const command = useCommandPalattesStore()
|
||||
const menu = useMenuStore()
|
||||
const dialog = useDialogStore()
|
||||
@ -53,7 +49,7 @@ const showDialogLogout = () => {
|
||||
<Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
|
||||
<img class="w-auto h-11" :src="Icon" alt="PLN" />
|
||||
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
|
||||
</div>
|
||||
<div class="flex justify-end w-full px-4">
|
||||
<!-- <div class="flex flex-1">
|
||||
@ -79,12 +75,7 @@ const showDialogLogout = () => {
|
||||
class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
|
||||
<span class="sr-only">Manual Book</span>
|
||||
<BookOpenIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button>
|
||||
<button type="button" @click="message.showDialogMessageBox"
|
||||
class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
|
||||
<span class="sr-only">Message</span>
|
||||
<ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
|
||||
</button> -->
|
||||
</button -->
|
||||
<button @click="command.showCommandPalettes" type="button"
|
||||
class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
|
||||
<span class="sr-only">Search</span>
|
||||
@ -143,7 +134,4 @@ const showDialogLogout = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
|
||||
<MessageBox :open="message.open" @onClose="message.handleOnDismissMessageBox" />
|
||||
</template>
|
||||
@ -1,177 +0,0 @@
|
||||
<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>
|
||||
@ -1,24 +0,0 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { dispatchNotification } from '@/components/Notification'
|
||||
import router from '@/router'
|
||||
|
||||
export const useMessageStore = defineStore('message_box', () => {
|
||||
const message = ref('')
|
||||
const isSending = ref(false)
|
||||
const open = ref(false)
|
||||
|
||||
function handleOnDismissMessageBox() {
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function showDialogMessageBox() {
|
||||
open.value = true;
|
||||
}
|
||||
|
||||
function send() {
|
||||
|
||||
}
|
||||
|
||||
return { message, send, isSending, open, handleOnDismissMessageBox, showDialogMessageBox }
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user