bt-core-app 1.3.4 → 1.3.6

package/src/components/BT-Nav-Menu-Item.vue

@@ -0,0 +1,61 @@
+<template>
+    <v-list-group v-if="doShowItem && relevantChildren.length > 0"
+        color="accent"
+        :subGroup="isSubGroup"
+        fluid>
+        <template #activator="{ props }">
+            <v-list-item v-bind="props"
+                :prepend-icon="item.icon"
+                :title="item.displayName" />
+        </template>
+        <BT-Nav-Menu-Item 
+            v-for="child in relevantChildren"
+            :key="child.name"
+            isSubGroup
+            :item="child" />
+    </v-list-group>
+    <v-list-item v-else-if="doShowItem"
+        color="accent"
+        :prepend-icon="item.icon"
+        nav
+        :title="item.displayName ?? item.name"
+        :to="{ name: item.name }">
+    </v-list-item>
+    <v-divider v-else-if="item.isDivider" />
+    <div v-else>test</div>
+</template>
+
+<script setup lang="ts">
+    import BTNavMenuItem from './BT-Nav-Menu-Item.vue'
+    import { computed } from 'vue'
+    import { useAuth } from '../composables/auth'
+    import { isLengthyArray } from '../composables/helpers'
+    import { type NavigationItem } from '../composables/navigation'
+
+    
+    interface ItemProps {
+        allowedSubscriptionCodes?: string[],
+        isSubGroup?: boolean,
+        item?: any
+    }
+
+    const props = withDefaults(defineProps<ItemProps>(), {
+        allowedSubscriptionCodes: () => [],
+        isSubGroup: false,
+        item: null
+    })
+
+    const { doShowByNav } = useAuth()
+
+    const relevantChildren = computed(() => {
+        const l = props.item.children?.filter((x: NavigationItem) => x.isInNavMenu !== false) ?? []
+        if (!isLengthyArray(props.allowedSubscriptionCodes)) {
+            return l
+        }
+
+        return l.filter((navItem: NavigationItem) => !isLengthyArray(navItem.subFilters) || props.allowedSubscriptionCodes.some(code => navItem.subFilters?.some(sFilter => sFilter == code)))
+    })
+    
+    const doShowItem = computed(() => doShowByNav(props.item, true))
+
+</script>

package/src/components/BT-Nav-Sidebar.vue

@@ -0,0 +1,78 @@
+<template>
+    <v-navigation-drawer
+        v-if="isLoggedIn"
+        disabled-resize-watcher
+        expand-on-hover
+        :rail="!state.drawerStick"
+        permanent
+        v-model="state.drawer">
+        <slot>
+            <v-list class="pt-1">
+                <v-list-item nav :title="title">
+                    <template #prepend>
+                        <v-avatar size="36">
+                            <v-img :src="iconSrc" />
+                        </v-avatar>
+                    </template>
+                    <template #append>
+                        <v-row class="mr-1">
+                            <v-btn
+                                @click="toggleDrawerStick"
+                                flat
+                                icon
+                                size="small"
+                                title="Pin/Unpin Menu">
+                                <v-icon>{{ state.drawerStick ? 'mdi-pin-off' : 'mdi-pin' }}</v-icon>
+                            </v-btn>
+                        </v-row>
+                    </template>
+                </v-list-item>
+                <slot name="top-list">
+                   
+                </slot>
+            </v-list>
+
+            <slot name="middle-list">
+                <v-list nav>
+                    <BT-Nav-Menu-Item
+                        v-for="(item, index) in navItems"
+                        :key="index"
+                        :item="item" />
+                </v-list>
+            </slot>
+        </slot>
+        <template #append>
+            <slot name="bottom-list">
+                <v-list v-if="isLoggedIn" class="ma-0 pa-0">
+                    <v-list-item
+                        class="bg-primary"
+                        prepend-icon="mdi-logout"
+                        title="Logout"
+                        @click="() => logout()" />
+                </v-list>
+            </slot>
+        </template>
+    </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import BTNavMenuItem from './BT-Nav-Menu-Item.vue'
+import { useCosmetics } from '../composables/cosmetics'
+import { useNavigation } from '../composables/navigation'
+import { useAuth } from '../composables/auth'
+import { computed } from 'vue'
+
+interface SidebarProps {
+    // greeting?: string
+    iconSrc?: string
+    title?: string
+}
+
+defineProps<SidebarProps>()
+const { state, toggleDrawerStick } = useCosmetics()
+const { isLoggedIn, logout } = useAuth()
+const navigation = useNavigation()
+
+const navItems = computed(() => navigation.navigationItems.filter(x => x.isInNavMenu !== false && navigation.backgroundName.value == x.background));
+
+</script>

package/src/components/Dialog-Select-Date.vue

@@ -16,7 +16,7 @@
                         :model-auto="range"
                         :range="range"
                         :time-picker-inline="!range && useTime"
-                        :timezone="credentials.timeZone"
+                        :timezone="timeZone"
                         utc
                         v-bind="$attrs"
                         v-model="date" />
@@ -50,7 +50,7 @@
 
     const emit = defineEmits(['confirm', 'cancel'])
     const date = ref()
-    const { credentials } = useAuth()
+    const { timeZone } = useAuth()
 
     const canAccept = computed(() => {
         return !props.required || date.value

package/src/composables/api.ts

@@ -188,13 +188,13 @@ export function createApi(options?: UseApiOptions): BTApi {
 
     function defaultBuildHeaders(path: PathOptions): HeadersInit {
         let fetchOptions:any = { ...path.headers }
-        const auth = options?.auth?.credentials
+        //const auth = options?.auth?.credentials
 
         if (path.proxyID)
             fetchOptions.ManagedCompanyAccountID ??= path.proxyID
 
-        if (options?.useBearerToken != false && auth?.isLoggedIn == true)
-            fetchOptions.authorization ??= `bearer ${auth.token}`
+        if (options?.useBearerToken != false && options?.auth?.isLoggedIn.value == true)
+            fetchOptions.authorization ??= `bearer ${options?.auth?.credentials.value.token}`
         
         fetchOptions['Content-Type'] ??= (path.contentType ?? options?.defaultContentType ?? 'application/json')
 

package/src/composables/auth.ts

@@ -3,7 +3,7 @@ import { DateTime } from 'luxon'
 import { type RemovableRef, useStorage } from '@vueuse/core'
 import { type BTDemo } from '../composables/demo'
 import { useRouter } from 'vue-router'
-import { toValue } from 'vue'
+import { computed, type ComputedRef, toValue } from 'vue'
 import { useAuthUrl } from './urls'
 import { useApi } from './api'
 
@@ -66,15 +66,17 @@ export interface BTAuth {
     canEditPermit: (permit: string) => boolean
     canView: (navName?: string) => boolean
     canViewPermit: (permit: string) => boolean
-    credentials: any
+    credentials: RemovableRef<any>
     doShow: (subcodes?: string[], permissions?: string[], action?: 'view' | 'edit') => boolean
     doShowByNav: (navName?: string | AuthItem, includeChildren?: boolean) => boolean
     getAuthorizeUrl: (redirectPath?: string) => string
     getTimeZone: () => string
     getToken: (code?: string, state?: string) => Promise<void>
+    isLoggedIn: ComputedRef<boolean>
     login: (redirectPath?: string) => void
     logout: (navNameRedirect?: string) => void
     setAuth: (jwtToken?: string) => void
+    timeZone: ComputedRef<string>
     tryLogin: () => boolean | undefined
 }
 
@@ -430,15 +432,19 @@ export function createAuth(options: CreateAuthOptions): BTAuth {
         canEditPermit,
         canView,
         canViewPermit,
-        credentials: state.value,
+        credentials: state,
         doShow,
         doShowByNav,
         getAuthorizeUrl,
         getTimeZone,
         getToken,
+        isLoggedIn: computed(() => state.value.isLoggedIn === true),
         login,
         logout,
         setAuth,
+        timeZone: computed(() => {
+            return state.value.timeZone ?? options.defaultTimeZone ?? defaultTimeZone
+        }),
         tryLogin
     }
 

package/src/composables/cosmetics.ts

@@ -48,7 +48,7 @@ export interface UseCosmeticsOptions<T extends BaseCosmeticTheme> {
 }
 
 export interface BTCosmetics {
-    state: CosmeticData
+    state: RemovableRef<CosmeticData>
     initiate: () => void
     resetCosmetics: (toDefault: boolean) => void
     setTemporaryColor: (color: string) => void
@@ -153,7 +153,7 @@ export function useCosmetics(): BTCosmetics {
     }
 
     return {
-        state: state.value,
+        state: state,
         initiate: loadCosmetics,
         resetCosmetics,
         setTemporaryColor,

package/src/composables/stores.ts

@@ -193,14 +193,14 @@ export function createSessionStoreDefinition(options: UseSessionStoreOptions): B
         // const authData = useAuthData()
         
         function getKey(dOptions: PathOptions) {
-            return `${options.storeName}_${options.auth?.credentials.userID ?? 'no-user-id'}_${dOptions.id ?? dOptions.data?.id ?? 'no-item-id'}`
+            return `${options.storeName}_${options.auth?.credentials.value.userID ?? 'no-user-id'}_${dOptions.id ?? dOptions.data?.id ?? 'no-item-id'}`
         }
 
         async function getAll<T extends BaseModel>(dOptions: PathOptions): Promise<StoreGetAllReturn<T>> {
             dOptions.additionalUrl ??= '/getAll'
             
             const path = buildPath(dOptions)
-            const key = `${options.storeName}_${options.auth?.credentials.userID ?? 'no-user-id'}_${path}`
+            const key = `${options.storeName}_${options.auth?.credentials.value.userID ?? 'no-user-id'}_${path}`
             const refresh = dOptions.refresh
 
             if (!refresh && searchMemory.value[key] !== undefined)
@@ -508,7 +508,7 @@ export function createWholeLastUpdateStoreDefinition(options: UseWholeLastUpdate
         const cacheLocally = options.storageMode == 'local-cache'
         
         function getKey() {
-            return `${options.storeName}_${options.auth?.credentials.userID ?? 'no-user-id'}`
+            return `${options.storeName}_${options.auth?.credentials.value.userID ?? 'no-user-id'}`
         }
 
         async function trySaveToLocalCache() {

package/src/index.ts

@@ -42,6 +42,10 @@ export * from './types'
 export type { CoreApp, CreateCoreOptions } from './core'
 export { createCore } from './core'
 
+import BTNavMenuItem from './components/BT-Nav-Menu-Item.vue'
+import BTNavSidebar from './components/BT-Nav-Sidebar.vue'
+
+export { BTNavMenuItem, BTNavSidebar }
 
 // import BTBtn from './components/BT-Btn.vue'
 // import BTCol from './components/BT-Col.vue'

package/test/auth.test.ts

@@ -47,7 +47,7 @@ describe('default auth', () => {
 
     test('creates successfully', () => {
         const state = auth.authState
-        const creds = auth.credentials
+        const creds = auth.credentials.value
         
         expect(state).not.toBeNull()
         expect(auth.credentials).not.toBeNull()