cameron/stock-management-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds in authentication system and overhauls the navigation bar to be built dynamically.

Browse source
This commit is contained in:
Cameron Redmore 2025-04-24 21:35:52 +01:00
parent 7e98b5345d
commit 28c054de22
21 changed files with 1531 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/layouts/MainLayout.vue
View file

@ -16,71 +16,42 @@
</q-item-section>
</q-item>
<q-item clickable v-ripple :to="{ name: 'formList' }" exact>
<q-tooltip anchor="center right" self="center left" >
<span>Forms</span>
</q-tooltip>
<q-item-section avatar>
<q-icon name="list_alt" />
</q-item-section>
<q-item-section>
<q-item-label>Forms</q-item-label>
<q-item-label caption>View existing forms</q-item-label>
</q-item-section>
</q-item>
<!-- Dynamic Navigation Items -->
<q-item
v-for="item in navItems"
:key="item.name"
clickable
v-ripple
:to="{ name: 'mantisSummaries' }"
:to="{ name: item.name }"
exact
>
<q-tooltip anchor="center right" self="center left" >
<span>Mantis Summaries</span>
<span>{{ item.meta.title }}</span>
</q-tooltip>
<q-item-section avatar>
<q-icon name="summarize" />
<q-icon :name="item.meta.icon" />
</q-item-section>
<q-item-section>
<q-item-label>Mantis Summaries</q-item-label>
<q-item-label caption>View daily summaries</q-item-label>
<q-item-label>{{ item.meta.title }}</q-item-label>
<q-item-label caption>{{ item.meta.caption }}</q-item-label>
</q-item-section>
</q-item>
<!-- Logout Button (Conditional) -->
<q-item
v-if="authStore.isAuthenticated"
clickable
v-ripple
:to="{ name: 'emailSummaries' }"
exact
@click="logout"
>
<q-tooltip anchor="center right" self="center left" >
<span>Email Summaries</span>
<span>Logout</span>
</q-tooltip>
<q-item-section avatar>
<q-icon name="email" />
<q-icon name="logout" />
</q-item-section>
<q-item-section>
<q-item-label>Email Summaries</q-item-label>
<q-item-label caption>View email summaries</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
to="/settings" exact
>
<q-tooltip anchor="center right" self="center left" >
<span>Settings</span>
</q-tooltip>
<q-item-section
avatar
>
<q-icon name="settings" />
</q-item-section>
<q-item-section>
<q-item-label>Settings</q-item-label>
<q-item-label caption>Manage application settings</q-item-label>
<q-item-label>Logout</q-item-label>
</q-item-section>
</q-item>
@ -94,11 +65,55 @@
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ref, computed } from 'vue' // Import computed
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { useAuthStore } from 'stores/auth'; // Import the auth store
import routes from '../router/routes'; // Import routes
const $q = useQuasar()
const leftDrawerOpen = ref(false)
const router = useRouter()
const authStore = useAuthStore(); // Use the auth store
// Get the child routes of the main layout
const mainLayoutRoutes = routes.find(r => r.path === '/')?.children || [];
// Compute navigation items based on auth state and route meta
const navItems = computed(() => {
const isAuthenticated = authStore.isAuthenticated;
return mainLayoutRoutes.filter(route => {
const navGroup = route.meta?.navGroup;
if (!navGroup) return false; // Only include routes with navGroup defined
if (navGroup === 'always') return true;
if (navGroup === 'auth' && isAuthenticated) return true;
if (navGroup === 'noAuth' && !isAuthenticated) return true;
return false; // Exclude otherwise
});
});
function toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
}
async function logout() {
try {
await axios.post('/auth/logout');
authStore.logout(); // Use the store action to update state
// No need to manually push, router guard should redirect
// router.push({ name: 'login' });
} catch (error) {
console.error('Logout failed:', error);
$q.notify({
color: 'negative',
message: 'Logout failed. Please try again.',
icon: 'report_problem'
});
}
}
</script>