From 6d67e92749b25794c2fd48c90b49e687a425b1a0 Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Thu, 16 May 2024 10:41:12 +0200
Subject: [PATCH] User dropdown User id in acquisition about

---
 src/App.vue                                   |  9 +++-
 src/auth.ts                                   |  3 +-
 src/components/Dropdown.vue                   | 46 +++++++++++++++++++
 src/components/index.ts                       |  1 +
 .../acquisition/AcquisitionResultTable.vue    |  4 +-
 src/market/acquisition/acquisition.ts         |  4 +-
 src/market/type/MarketTypeInput.vue           |  2 +-
 src/routes.ts                                 |  2 +-
 src/service.ts                                |  8 +++-
 src/sidebar/Sidebar.vue                       | 39 ++++++++++++++--
 10 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Dropdown.vue

diff --git a/src/App.vue b/src/App.vue
index 0e7c80c..59f767c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/auth';
-import { RouterView } from 'vue-router';
+import { computed } from 'vue';
+import { RouterView, useRoute } from 'vue-router';
 import { Sidebar } from './sidebar';
 
+const route = useRoute();
 const authStore = useAuthStore();
 
+const hideSidebar = computed(() => {
+    return !authStore.isLoggedIn || route.name === 'callback' || route.name === 'about';
+});
 </script>
 
 <template>
-    <template v-if="!authStore.isLoggedIn">
+    <template v-if="hideSidebar">
         <RouterView />
     </template>
     <template v-else>
diff --git a/src/auth.ts b/src/auth.ts
index 44d865b..e9644e8 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -18,6 +18,7 @@ export const useAuthStore = defineStore('auth', () => {
     const isLoggedIn = computed(() => !!user.value);
     const accessToken = computed(() => user.value?.access_token);
     const username = computed(() => user.value?.profile.name ?? "");
+    const userId = computed(() => user.value?.profile.sub ?? "");
 
     const redirect = async () => {
         await userManager.signinRedirect();
@@ -42,5 +43,5 @@ export const useAuthStore = defineStore('auth', () => {
     }
     userManager.events.addUserLoaded(setUser);
     userManager.getUser().then(setUser);
-    return { redirect, login, logout, isLoggedIn, accessToken, username };
+    return { redirect, login, logout, isLoggedIn, accessToken, username, userId };
 });
\ No newline at end of file
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
new file mode 100644
index 0000000..061a96b
--- /dev/null
+++ b/src/components/Dropdown.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
+import { vOnClickOutside } from '@vueuse/components';
+import { useEventListener } from '@vueuse/core';
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+useEventListener('keyup', e => {
+    if (e.key === 'Escape') {
+        isOpen.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
+        <button @click="isOpen = !isOpen">
+            <slot name="button" />
+            <ChevronDownIcon v-if="!isOpen" class="chevron" />
+            <ChevronUpIcon v-else class="chevron" />
+        </button>
+
+        <Transition name="fade">
+            <div v-if="isOpen" class="relative">
+                <div class="z-10 divide-y rounded-b-md absolute">
+                    <slot />
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.chevron {
+    @apply w-4 h-4 ms-1;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 100ms ease-out;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index ffbf94e..b39d25c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 export { default as ClipboardButton } from './ClipboardButton.vue';
+export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
diff --git a/src/market/acquisition/AcquisitionResultTable.vue b/src/market/acquisition/AcquisitionResultTable.vue
index 4e6e184..ffb87f2 100644
--- a/src/market/acquisition/AcquisitionResultTable.vue
+++ b/src/market/acquisition/AcquisitionResultTable.vue
@@ -36,7 +36,7 @@ defineEmits<Emits>();
 
 const marketTaxStore = useMarketTaxStore();
 
-const threshold = useStorage('market-aquisition-threshold', 10);
+const threshold = useStorage('market-acquisition-threshold', 10);
 const filter = ref("");
 const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
     .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
@@ -107,7 +107,7 @@ const getLineColor = (result: Result) => {
                 <td class="text-right">{{ formatIsk(r.sell) }}</td>
                 <td class="text-right">{{ formatIsk(r.price) }}</td>
                 <td class="text-right">{{ r.count }}</td>
-                <td class="text-right">{{  percentFormater.format(r.precentProfit) }}</td>
+                <td class="text-right">{{ percentFormater.format(r.precentProfit) }}</td>
                 <td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
                 <td class="text-right">
                     <button class="btn-icon me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
diff --git a/src/market/acquisition/acquisition.ts b/src/market/acquisition/acquisition.ts
index 37ab4c6..8d4f3ca 100644
--- a/src/market/acquisition/acquisition.ts
+++ b/src/market/acquisition/acquisition.ts
@@ -1,3 +1,4 @@
+import { useAuthStore } from "@/auth";
 import { marbasAxiosInstance } from "@/service";
 import { defineStore } from "pinia";
 import { computed, onMounted, ref } from "vue";
@@ -17,6 +18,7 @@ const endpoint = '/api/acquisitions';
 
 export const useAcquiredItemStore = defineStore('market-acquisition', () => {
     const _acquiredItems = ref<AcquiredMarketItem[]>([]);
+    const authStore = useAuthStore();
 
     const items = computed(() => _acquiredItems.value);
     const addAcquiredItem = async (type: number, quantity: number, price: number) => { 
@@ -27,7 +29,7 @@ export const useAcquiredItemStore = defineStore('market-acquisition', () => {
             price: price,
             date: new Date(),
             source: 'bo',
-            user: 0 // TODO: get user id
+            user: authStore.userId,
         })).data];
     };
     const removeAcquiredItem = async (type: number, quantity: number) => {
diff --git a/src/market/type/MarketTypeInput.vue b/src/market/type/MarketTypeInput.vue
index 03df28d..5bf6ff5 100644
--- a/src/market/type/MarketTypeInput.vue
+++ b/src/market/type/MarketTypeInput.vue
@@ -96,7 +96,7 @@ watchEffect(async () => {
 <template>
     <div @click="() => isOpen = true" v-on-click-outside="() => isOpen = false">
         <div class="fake-input">
-            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon`" />
+            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon`" alt="" />
             <input type="text" v-model="name" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp" />
         </div>
         <div v-if="suggestions.length > 1" class="z-10 absolute w-96">
diff --git a/src/routes.ts b/src/routes.ts
index 3d2857c..d150dcb 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -11,5 +11,5 @@ export const routes: RouteRecordRaw[] = [
         { path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue') },
     ] },
     { path: '/tools', component: () => import('@/pages/Tools.vue') },
-    { path: '/about', component: () => import('@/pages/About.vue') },
+    { path: '/about', name: 'about', component: () => import('@/pages/About.vue') },
 ];
\ No newline at end of file
diff --git a/src/service.ts b/src/service.ts
index 315addc..9af37d0 100644
--- a/src/service.ts
+++ b/src/service.ts
@@ -44,7 +44,13 @@ marbasAxiosInstance.interceptors.response.use(async r => {
     return r;
 })
 marbasAxiosInstance.interceptors.request.use(r => {
-    const accessToken = useAuthStore().accessToken;
+    const authStore = useAuthStore();
+
+    if (!authStore.isLoggedIn) {
+        throw new Error("Not logged in");
+    }
+    
+    const accessToken = authStore.accessToken;
 
     if (accessToken) {
         r.headers.Authorization = `Bearer ${accessToken}`;
diff --git a/src/sidebar/Sidebar.vue b/src/sidebar/Sidebar.vue
index 6e38ea8..32e7d60 100644
--- a/src/sidebar/Sidebar.vue
+++ b/src/sidebar/Sidebar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/auth';
+import { Dropdown } from '@/components';
 import { RouterLink } from 'vue-router';
 
 const links = [
@@ -18,22 +19,52 @@ const logout = async () => {
 <template>
     <aside class="fixed top-0 left-0 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
         <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700 flex flex-col">
+            <div class="mb-2 border-b-2 border-emerald-500">
+                <Dropdown class="mb-2 user-dropdown">
+                    <template #button>
+                        <span>{{ authStore.username }}</span>
+                    </template>
+                    <ul>
+                        <li>
+                            <RouterLink class="sidebar-button py-0.5 px-2" :to="{name: 'about'}">About EVE Online</RouterLink>
+                        </li>
+                        <li>
+                            <a class="sidebar-button py-0.5 px-2 text-amber-700" @click="logout">Logout</a>
+                        </li>
+                    </ul>
+                </Dropdown>
+            </div>
             <ul class="space-y-2 font-medium">
                 <li v-for="link in links" :key="link.name">
-                    <RouterLink :to="link.path" class="flex items-center p-2 rounded-md hover:bg-slate-800">
+                    <RouterLink :to="link.path" class="sidebar-button p-2">
                         <span>{{ link.name }}</span>
                     </RouterLink>
                 </li>
             </ul>
-            <div class="mt-auto">
-                <button @click="logout">Logout</button>
-            </div>
         </div>
     </aside>
 </template>
 
 <style scoped lang="postcss">
+.sidebar-button {
+    @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
+}
 .router-link-active {
     @apply bg-emerald-500 hover:bg-emerald-700;
 }
+.user-dropdown {
+    @apply w-full;
+    :deep(>div) {
+        @apply w-full;
+        >div {
+            @apply w-full bg-slate-800;
+        }
+    }
+    :deep(>button) {
+        @apply bg-slate-700 hover:bg-slate-800 border-none flex items-center w-full;
+    }
+    &.dropdown-open:deep(>button) {
+        @apply bg-slate-800 rounded-b-none;
+    }
+}
 </style>