Skip to content

Commit b5e65ee

Browse files
yaroslav8765yaroslav8765
committed
feat: add settings button in userMenu
1 parent 99d0791 commit b5e65ee

File tree

3 files changed

+91
-16
lines changed

3 files changed

+91
-16
lines changed

‎adminforth/spa/src/App.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@
5959
:adminUser="coreStore.adminUser"
6060
/>
6161
</li>
62+
<li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
63+
<UserMenuSettingsButton />
64+
</li>
6265
<li>
6366
<button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">{{ $t('Sign out') }}</button>
6467
</li>
@@ -268,7 +271,7 @@ import type { AdminForthConfigMenuItem, AnnouncementBadgeResponse } from './type
268271
import { Tooltip } from '@/afcl';
269272
import { initFrontedAPI } from '@/adminforth';
270273
import adminforth from '@/adminforth';
271-
274+
import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
272275
273276
const coreStore = useCoreStore();
274277
const toastStore = useToastStore();

‎adminforth/spa/src/components/UserMenuSettingsButton.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="min-w-40">
3+
<div class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black
4+
hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive
5+
w-full select-none "
6+
:class="{ 'bg-black bg-opacity-10 ': showDropdown }"
7+
@click="showDropdown = !showDropdown"
8+
>
9+
<span>Settings</span>
10+
<IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
11+
:class="{ 'transform rotate-180': showDropdown }"
12+
/>
13+
</div>
14+
15+
<div v-if="showDropdown" >
16+
17+
<div class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm
18+
text-black dark:text-darkSidebarTextHover
19+
bg-black bg-opacity-10
20+
hover:brightness-110
21+
hover:text-lightPrimary dark:hover:text-darkPrimary
22+
hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrast
23+
w-full text-select-none pl-5 select-none"
24+
v-for="option in options"
25+
@click="navigateTo(option)"
26+
>
27+
<span class="mr-1">
28+
<component v-if="option.icon" :is="getIcon(option.icon)" class="w-5 h-5 transition duration-75" ></component>
29+
</span>
30+
<span class="text-gray-900 dark:text-white">{{ option.pageLabel }}</span>
31+
</div>
32+
</div>
33+
34+
35+
</div>
36+
</template>
37+
38+
<script setup lang="ts">
39+
import 'flag-icon-css/css/flag-icons.min.css';
40+
import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
41+
import { computed, ref, onMounted, watch } from 'vue';
42+
import { useCoreStore } from '@/stores/core';
43+
import { getIcon } from '@/utils';
44+
import { useRouter } from 'vue-router';
45+
46+
const router = useRouter();
47+
const coreStore = useCoreStore();
48+
49+
const showDropdown = ref(false);
50+
const props = defineProps(['meta', 'resource']);
51+
52+
const options = computed(() => {
53+
console.log('Returning setting pages', coreStore.config?.settingPages);
54+
return coreStore.config?.settingPages?.map((page) => {
55+
return {
56+
pageLabel: page.pageLabel,
57+
slug: page.slug || null,
58+
icon: page.icon || null,
59+
};
60+
});
61+
});
62+
63+
function slugifyString(str: string): string {
64+
return str
65+
.toString()
66+
.toLowerCase()
67+
.replace(/\s+/g, '-')
68+
.replace(/[^a-z0-9-_]/g, '-');
69+
}
70+
71+
function navigateTo(option: { slug?: string | null | undefined, pageLabel: string }) {
72+
console.log('Navigating to option', option);
73+
if (option.slug) {
74+
console.log('Navigating to settings page', option.slug);
75+
router.push({ name: 'settings', query: { page: option.slug } });
76+
} else {
77+
const destinationSlug = slugifyString(option.pageLabel);
78+
console.log('Navigating to settings page by label', destinationSlug);
79+
router.push({ name: 'settings', params: { page: destinationSlug } });
80+
}
81+
}
82+
83+
</script>

‎adminforth/spa/src/views/SettingsView.vue‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,7 @@
44
v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
55
class="h-14 top-0 z-20 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
66
>
7-
<div class="af-header px-3 lg:px-5 lg:pl-3 flex items-center justify-between h-full w-full" >
8-
<div class="flex items-center justify-start rtl:justify-end">
9-
<button @click="sideBarOpen = !sideBarOpen"
10-
type="button" class="inline-flex items-center p-2 text-sm rounded-lg sm:hidden hover:bg-lightSidebarItemHover focus:outline-none focus:ring-2 focus:ring-lightSidebarDevider dark:text-darkSidebarIcons dark:hover:bg-darkSidebarHover dark:focus:ring-lightSidebarDevider">
11-
<span class="sr-only">{{ $t('Open sidebar') }}</span>
12-
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
13-
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
14-
</svg>
15-
</button>
16-
</div>
7+
<div class="af-header px-3 lg:px-5 lg:pl-3 flex items-center justify-end h-full w-full" >
178
<div class="flex items-center">
189
<component
1910
v-if="coreStore?.adminUser"
@@ -59,6 +50,9 @@
5950
:adminUser="coreStore.adminUser"
6051
/>
6152
</li>
53+
<li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
54+
<UserMenuSettingsButton />
55+
</li>
6256
<li>
6357
<button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">{{ $t('Sign out') }}</button>
6458
</li>
@@ -156,7 +150,6 @@ watch(dropdownUserButton, (el) => {
156150
157151
onMounted(async () => {
158152
await loadMenu();
159-
await loadPublicConfig();
160153
loginRedirectCheckIsReady.value = true;
161154
const routeParamsPage = route?.params?.page;
162155
if (!routeParamsPage) {
@@ -181,10 +174,6 @@ onMounted(async () => {
181174
}
182175
});
183176
184-
async function loadPublicConfig() {
185-
await coreStore.getPublicConfig();
186-
}
187-
188177
async function loadMenu() {
189178
await initRouter();
190179
await coreStore.fetchMenuAndResource();

0 commit comments

Comments
 (0)