From 3a29562969ed2654faba160a642be42900e12411 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 19 Oct 2023 09:03:41 +0700
Subject: [PATCH] remove unused component

---
 src/App.vue                   |   4 +
 src/components/Header.vue     |  18 +---
 src/components/MessageBox.vue | 177 ----------------------------------
 src/stores/message.ts         |  24 -----
 4 files changed, 7 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/MessageBox.vue
 delete mode 100644 src/stores/message.ts

diff --git a/src/App.vue b/src/App.vue
index 6e654db..25b53f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6c452d9..2719906 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
deleted file mode 100644
index 586b602..0000000
--- a/src/components/MessageBox.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/stores/message.ts b/src/stores/message.ts
deleted file mode 100644
index e2ba6aa..0000000
--- a/src/stores/message.ts
+++ /dev/null
@@ -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 }
-})
\ No newline at end of file