@finema/finework-layer 0.2.14 → 0.2.16

package/app/components/Layout/User/index.vue

@@ -1,99 +1,102 @@
-<template>
-  <div class="overflow-hidden pt-[80px]">
-    <div class="flex min-h-[calc(100vh-80px)] flex-col">
-      <nav
-        class="fixed top-0 left-0 z-20 flex min-h-[80px] w-screen items-center justify-center bg-white"
-        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04)"
-      >
-        <div class="mx-auto flex w-full px-4 md:px-8">
-          <div class="flex items-center gap-4">
-            <NuxtLink :to="routes.home.to">
-              <img
-                src="/logo-mini.png"
-                alt="logo_mini"
-                class="h-[27px] w-[172px] cursor-pointer"
-              />
-            </NuxtLink>
-            <Apps />
-          </div>
-
-          <div class="flex flex-1 items-center justify-end gap-2">
-            <DropdownMenu
-              :items="userMenuItems"
-              size="xl"
-              :content="{
-                align: 'end',
-                side: 'bottom',
-              }"
-              :ui="{
-                content: 'w-48',
-              }"
-            >
-              <div class="relative flex cursor-pointer items-center gap-2">
-                <div class="hidden flex-col justify-end text-right lg:flex">
-                  <p class="text-sm font-bold">
-                    {{
-                      auth.me.value?.display_name || auth.me.value?.full_name
-                    }}
-                  </p>
-                  <p class="text-muted text-xs">
-                    {{ auth.me.value?.email }}
-                  </p>
-                </div>
-                <Avatar
-                  class="border-muted size-[36px] border text-2xl"
-                  icon="ri:user-line"
-                  :src="auth.me.value?.avatar_url"
-                />
-                <Icon name="i-ph:caret-down-light" class="size-5" />
-              </div>
-            </DropdownMenu>
-          </div>
-        </div>
-      </nav>
-      <main class="mx-auto w-full max-w-7xl flex-1 px-4 pb-20 2xl:max-w-7/10">
-        <div
-          v-if="app.pageMeta.title"
-          class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-center"
-        >
-          <div class="flex flex-1 flex-col">
-            <h1
-              class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
-              :title="app.pageMeta.title"
-            >
-              {{ app.pageMeta.title }}
-              <span id="page-title-extra" />
-            </h1>
-
-            <div id="page-subtitle" />
-          </div>
-          <div id="page-header" />
-        </div>
-        <slot />
-      </main>
-      <div id="page-footer" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { DropdownMenuItem } from '@nuxt/ui'
-import Apps from '../Apps.vue'
-
-const app = useApp()
-const auth = useAuth()
-const userMenuItems: DropdownMenuItem[] = [
-  {
-    label: 'View profile',
-    icon: 'i-lucide-user',
-    to: routes.account.profile.to,
-  },
-
-  {
-    label: routes.logout.label,
-    icon: 'i-lucide-log-out',
-    to: routes.logout.to,
-    external: true,
-  },
-]
-</script>
+<template>
+  <div class="overflow-hidden pt-[80px]">
+    <div class="flex min-h-[calc(100vh-80px)] flex-col">
+      <nav
+        class="fixed top-0 left-0 z-20 flex min-h-[80px] w-screen items-center justify-center bg-white"
+        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04)"
+      >
+        <div class="mx-auto flex w-full px-4 md:px-8">
+          <div class="flex items-center gap-4">
+            <NuxtLink :to="routes.home.to">
+              <img
+                src="/logo-mini.png"
+                alt="logo_mini"
+                class="h-[27px] w-[172px] cursor-pointer"
+              />
+            </NuxtLink>
+            <Apps />
+          </div>
+
+          <div class="flex flex-1 items-center justify-end gap-2">
+            <DropdownMenu
+              :items="userMenuItems"
+              size="xl"
+              :content="{
+                align: 'end',
+                side: 'bottom',
+              }"
+              :ui="{
+                content: 'w-48',
+              }"
+            >
+              <div class="relative flex cursor-pointer items-center gap-2">
+                <div class="hidden flex-col justify-end text-right lg:flex">
+                  <p class="text-sm font-bold">
+                    {{
+                      auth.me.value?.display_name || auth.me.value?.full_name
+                    }}
+                  </p>
+                  <p class="text-muted text-xs">
+                    {{ auth.me.value?.email }}
+                  </p>
+                </div>
+                <Avatar
+                  class="border-muted size-[36px] border text-2xl"
+                  icon="ri:user-line"
+                  :src="auth.me.value?.avatar_url"
+                />
+                <Icon
+                  name="i-ph:caret-down-light"
+                  class="size-5"
+                />
+              </div>
+            </DropdownMenu>
+          </div>
+        </div>
+      </nav>
+      <main class="mx-auto w-full max-w-7xl flex-1 px-4 pb-20 2xl:max-w-7/10">
+        <div
+          v-if="app.pageMeta.title"
+          class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-center"
+        >
+          <div class="flex flex-1 flex-col">
+            <h1
+              class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
+              :title="app.pageMeta.title"
+            >
+              {{ app.pageMeta.title }}
+              <span id="page-title-extra" />
+            </h1>
+
+            <div id="page-subtitle" />
+          </div>
+          <div id="page-header" />
+        </div>
+        <slot />
+      </main>
+      <div id="page-footer" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DropdownMenuItem } from '@nuxt/ui'
+import Apps from '../Apps.vue'
+
+const app = useApp()
+const auth = useAuth()
+const userMenuItems: DropdownMenuItem[] = [
+  {
+    label: 'View profile',
+    icon: 'i-lucide-user',
+    to: routes.account.profile.to,
+  },
+
+  {
+    label: routes.logout.label,
+    icon: 'i-lucide-log-out',
+    to: routes.logout.to,
+    external: true,
+  },
+]
+</script>

package/app/components/StatusBox.vue

@@ -1,56 +1,56 @@
-<template>
-  <slot v-if="skip" />
-  <template v-else>
-    <Card v-if="status.isLoading">
-      <div class="flex items-center justify-center py-12">
-        <Loader />
-      </div>
-    </Card>
-
-    <!-- Not Found State -->
-    <Card v-else-if="status.isSuccess && !data || status.isError && status.errorData?.code === 'NOT_FOUND'">
-      <div class="py-12 text-center">
-        <Icon
-          name="lucide:search-x"
-          class="mx-auto mb-4 text-gray-400"
-          size="48"
-        />
-        <h3 class="mb-2 text-lg font-medium text-gray-900">
-          ไม่พบข้อมูล
-        </h3>
-        <p class="text-gray-600">
-          ไม่พบข้อมูลที่คุณค้นหา กรุณาลองใหม่อีกครั้ง
-        </p>
-      </div>
-    </Card>
-    <Card v-else-if="status.isError">
-      <div class="py-12 text-center">
-        <Icon
-          name="lucide:alert-circle"
-          class="mx-auto mb-4 text-red-500"
-          size="48"
-        />
-        <h3 class="mb-2 text-lg font-medium text-gray-900">
-          เกิดข้อผิดพลาด
-        </h3>
-        <p class="text-gray-600">
-          ไม่สามารถโหลดข้อมูลได้ กรุณาลองใหม่อีกครั้ง
-        </p>
-      </div>
-    </Card>
-    <slot
-      v-else-if="data"
-      :data="data"
-    />
-  </template>
-</template>
-
-<script lang="ts" setup generic="T">
-import type { IStatus } from '#core/types/lib'
-
-defineProps<{
-  status: IStatus
-  data: T
-  skip?: boolean
-}>()
-</script>
+<template>
+  <slot v-if="skip" />
+  <template v-else>
+    <Card v-if="status.isLoading">
+      <div class="flex items-center justify-center py-12">
+        <Loader />
+      </div>
+    </Card>
+
+    <!-- Not Found State -->
+    <Card v-else-if="status.isSuccess && !data || status.isError && status.errorData?.code === 'NOT_FOUND'">
+      <div class="py-12 text-center">
+        <Icon
+          name="lucide:search-x"
+          class="mx-auto mb-4 text-gray-400"
+          size="48"
+        />
+        <h3 class="mb-2 text-lg font-medium text-gray-900">
+          ไม่พบข้อมูล
+        </h3>
+        <p class="text-gray-600">
+          ไม่พบข้อมูลที่คุณค้นหา กรุณาลองใหม่อีกครั้ง
+        </p>
+      </div>
+    </Card>
+    <Card v-else-if="status.isError">
+      <div class="py-12 text-center">
+        <Icon
+          name="lucide:alert-circle"
+          class="mx-auto mb-4 text-red-500"
+          size="48"
+        />
+        <h3 class="mb-2 text-lg font-medium text-gray-900">
+          เกิดข้อผิดพลาด
+        </h3>
+        <p class="text-gray-600">
+          ไม่สามารถโหลดข้อมูลได้ กรุณาลองใหม่อีกครั้ง
+        </p>
+      </div>
+    </Card>
+    <slot
+      v-else-if="data"
+      :data="data"
+    />
+  </template>
+</template>
+
+<script lang="ts" setup generic="T">
+import type { IStatus } from '#core/types/lib'
+
+defineProps<{
+  status: IStatus
+  data: T
+  skip?: boolean
+}>()
+</script>

package/app/composables/useAuth.ts

@@ -71,14 +71,29 @@ export const useAuth = () => {
   const isAuthenticated = computed(() => !!token.value)
   const me = defineStore('auth.me', () => {
     const value = ref<IUser | null>(null)
+    const timestamp = ref<number | null>(null)
 
     const set = (user: IUser | null) => {
       value.value = user
     }
 
+    const setTimestamp = (t: number | null) => {
+      timestamp.value = t
+    }
+
+    const isShouldFetch = computed(() => {
+      if (!value.value) return true
+
+      // expire 1 mins
+      return !timestamp.value || timestamp.value < Date.now() - 1000 * 60 * 1
+    })
+
     return {
       value,
       set,
+      timestamp,
+      setTimestamp,
+      isShouldFetch,
     }
   })()
 
@@ -111,11 +126,13 @@ export const useAuth = () => {
   }
 
   useWatchTrue(() => fetchMe.status.value.isSuccess, () => {
+    me.setTimestamp(Date.now())
     me.set(fetchMe.data.value)
   })
 
   useWatchTrue(() => fetchMe.status.value.isError, () => {
     token.value = undefined
+    me.setTimestamp(null)
     me.set(null)
   })
 

package/app/composables/useRequestOptions.ts

@@ -1,50 +1,50 @@
-import type { AxiosRequestConfig } from 'axios'
-
-export const useRequestOptions = () => {
-  const config = useRuntimeConfig()
-
-  const mock = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPIMock || 'http://localhost:3000/api/mock',
-    }
-  }
-
-  const base = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPI,
-    }
-  }
-
-  const auth = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPI,
-      headers: {
-        Authorization: `Bearer ${useAuth().token.value}`,
-      },
-    }
-  }
-
-  const file = (): Omit<AxiosRequestConfig, 'baseURL'> & {
-    baseURL: string
-  } => {
-    return {
-      baseURL: config.public.baseAPI + '/uploads',
-      headers: {
-        Authorization: `Bearer ${useAuth().token.value}`,
-      },
-    }
-  }
-
-  return {
-    base,
-    mock,
-    auth,
-    file,
-  }
-}
+import type { AxiosRequestConfig } from 'axios'
+
+export const useRequestOptions = () => {
+  const config = useRuntimeConfig()
+
+  const mock = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPIMock || 'http://localhost:3000/api/mock',
+    }
+  }
+
+  const base = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI,
+    }
+  }
+
+  const auth = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI,
+      headers: {
+        Authorization: `Bearer ${useAuth().token.value}`,
+      },
+    }
+  }
+
+  const file = (): Omit<AxiosRequestConfig, 'baseURL'> & {
+    baseURL: string
+  } => {
+    return {
+      baseURL: config.public.baseAPI + '/uploads',
+      headers: {
+        Authorization: `Bearer ${useAuth().token.value}`,
+      },
+    }
+  }
+
+  return {
+    base,
+    mock,
+    auth,
+    file,
+  }
+}