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:
@@ -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">
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user