Refactor layout components and add loading state

- Refactor the layout components to improve code organization and readability.
- Add a new store called LoadingStore to manage the loading state.
- Update AppLayout.vue, AppMenu.vue, AppTopbar.vue, ScenarioStore.js, and UserPrefStore.js to import and use the LoadingStore.
- Add loading indicators in AppTopbar.vue and ScenarioList.vue components.
This commit is contained in:
andrea.terzani
2024-10-21 16:43:49 +02:00
parent 78c90e9730
commit e3ae7a4e94
7 changed files with 56 additions and 11 deletions

View File

@@ -64,6 +64,7 @@ const isOutsideClicked = (event) => {
<div v-if="userPrefStore.userLoaded" class="layout-wrapper" :class="containerClass">
<app-topbar :page="page"></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="layout-main-container">

View File

@@ -1,8 +1,11 @@
<script setup>
import { ref } from 'vue';
import { UserPrefStore } from '../stores/UserPrefStore.js';
import AppMenuItem from './AppMenuItem.vue';
const userPrefStore = UserPrefStore();
const model = ref([
{
label: 'Scenarios',

View File

@@ -4,6 +4,7 @@ import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { useRouter } from 'vue-router';
import { LoadingStore } from '../stores/LoadingStore.js';
import { ScenarioStore } from '../stores/ScenarioStore.js';
import { UserPrefStore } from '../stores/UserPrefStore.js';
@@ -16,6 +17,7 @@ const router = useRouter();
const props = defineProps(['page']);
const userPrefStore = UserPrefStore();
const scenario_store = ScenarioStore();
const loadingStore = LoadingStore()
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
@@ -54,6 +56,8 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
<div class="layout-topbar-actions">
<div class="layout-config-menu">
<ProgressSpinner v-if="loadingStore.isLoading" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>
<button @click="router.push('/canvas')" class="layout-topbar-action" >
<i class="pi pi-file-edit"></i>
</button >
@@ -75,6 +79,7 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
<AppConfigurator />
</div>
</div>
<Dropdown
v-model="userPrefStore.selectedApp"
:options="userPrefStore.availableApp"