119 lines
4.5 KiB
Vue
119 lines
4.5 KiB
Vue
<script setup>
|
|
import logo from '@/assets/Apollo_simple_logo.webp';
|
|
import { useLayout } from '@/layout/composables/layout';
|
|
import { useAuth } from '@websanova/vue-auth/src/v3.js';
|
|
import { useRouter } from 'vue-router';
|
|
import { watch, ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
//import AppConfigurator from './AppConfigurator.vue';
|
|
import AppProfileMenu from './AppProfileMenu.vue';
|
|
import { UserPrefStore } from '../stores/UserPrefStore.js';
|
|
|
|
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
|
|
const auth = useAuth();
|
|
const logoSrc = ref(logo);
|
|
const userPrefStore = UserPrefStore();
|
|
const router = useRouter();
|
|
const selectedApp = ref(userPrefStore.getSelApp);
|
|
const route = useRoute();
|
|
|
|
async function updateApplication() {
|
|
await userPrefStore.setSelectedApp(selectedApp.value);
|
|
|
|
// here scenario_store.fetchApplicationScenarios();
|
|
|
|
}
|
|
|
|
function redirectProject() {
|
|
router.push({ name: 'projects-list' }); // Specifica il percorso per la pagina "Projects"
|
|
}
|
|
|
|
function appUpdated() {
|
|
selectedApp.value = userPrefStore.getSelApp;
|
|
}
|
|
|
|
const isDropdownDisabled = computed(() => {
|
|
return route.path === '/projects'
|
|
});
|
|
|
|
watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout-topbar">
|
|
<div class="layout-topbar-logo-container">
|
|
<button class="layout-topbar-action" @click="onMenuToggle"> <!--class layout-menu-button -->
|
|
<i class="pi pi-bars"></i>
|
|
</button>
|
|
|
|
<router-link to="/" class="layout-topbar-logo">
|
|
<img :src="logoSrc" alt="Logo" class="logo-image" />
|
|
|
|
<span>KNOWLEDGE</span>
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="layout-topbar-actions">
|
|
<div class="layout-config-menu">
|
|
<button type="button" class="layout-topbar-action" @click="toggleDarkMode">
|
|
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
|
|
</button>
|
|
|
|
<div class="topbar-project">
|
|
<button @click="redirectProject()" class="p-button p-button-outlined"
|
|
v-tooltip="'Click to change the project'"> {{ userPrefStore.user.selectedProject.fe_name
|
|
}}</button>
|
|
<!-- <span v-if="userPrefStore.user.selectedProject">
|
|
<small>PROJECT:</small> {{ userPrefStore.user.selectedProject.fe_name }}
|
|
</span> -->
|
|
</div>
|
|
<Dropdown v-model="selectedApp" :options="userPrefStore.availableApp" optionLabel="fe_name"
|
|
placeholder="Select an Application" class="dropdown-list menu-list" @change="updateApplication()"
|
|
:disabled="isDropdownDisabled" />
|
|
<!--div class="relative">
|
|
<button
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
type="button" class="layout-topbar-action layout-topbar-action-highlight">
|
|
<i class="pi pi-palette"></i>
|
|
</button>
|
|
<AppConfigurator />
|
|
</div-->
|
|
</div>
|
|
|
|
<button class="layout-topbar-menu-button layout-topbar-action"
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }">
|
|
<i class="pi pi-ellipsis-v"></i>
|
|
</button>
|
|
|
|
<div class="layout-topbar-menu hidden lg:block">
|
|
<div class="layout-topbar-menu-content">
|
|
|
|
<button
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
type="button" class="layout-topbar-action ">
|
|
<i class="pi pi-user"></i>
|
|
</button>
|
|
<AppProfileMenu />
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo-image {
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
/* Adjust the size as needed */
|
|
height: 40px;
|
|
/* Adjust the size as needed */
|
|
object-fit: cover;
|
|
/* Ensures the logo scales nicely within the circle */
|
|
}
|
|
</style>
|