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

Force line endings and whitespace, and revamp logout via introduction of a new profile component.

Browse source
This commit is contained in:
Cameron Redmore 2025-04-25 13:56:12 +01:00
parent f6df79d83f
commit 0e491ecabe
31 changed files with 4870 additions and 4797 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.vscode/settings.json vendored
View file

@ -13,5 +13,8 @@
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"editor.formatOnSave": true
"editor.formatOnSave": true,
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"editor.trimAutoWhitespace": true
}

6
eslint.config.js
View file

@ -75,6 +75,12 @@ export default
//Enforce semicolon
'@stylistic/semi': ['warn', 'always'],
'@stylistic/space-before-function-paren': ['warn', 'never'],
//Force LF and not CRLF
'@stylistic/linebreak-style': ['warn', 'unix'],
//Force no trailing spaces
'@stylistic/no-trailing-spaces': ['warn', { skipBlankLines: false, ignoreComments: false }]
}
},

2
quasar.config.js
View file

@ -23,7 +23,7 @@ export default defineConfig((/* ctx */) =>
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v7',
'mdi-v7',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',

180
src/layouts/MainLayout.vue
View file

@ -6,22 +6,83 @@
persistent
:model-value="true"
>
<q-list>
<q-item
clickable
v-ripple
@click="toggleLeftDrawer"
<q-item
clickable
v-ripple
@click="toggleLeftDrawer"
>
<q-item-section avatar>
<q-icon name="menu" />
</q-item-section>
<q-item-section>
<q-item-label class="text-h6">
StylePoint
</q-item-label>
</q-item-section>
</q-item>
<template v-if="authStore.isAuthenticated">
<q-card
v-if="leftDrawerOpen"
bordered
flat
class="q-ma-sm text-center"
>
<q-item-section avatar>
<q-icon name="menu" />
</q-item-section>
<q-item-section>
<q-item-label class="text-h6">
StylePoint
</q-item-label>
</q-item-section>
</q-item>
<q-card-section>
<q-avatar
class="bg-primary cursor-pointer text-white"
>
<q-icon name="mdi-account" />
<q-tooltip>
{{ authStore.user.username }}
</q-tooltip>
</q-avatar>
<div class="text-h6">
{{ authStore.user.username }}
</div>
<q-btn
class="full-width q-mt-sm"
dense
outline
@click="logout"
>
Logout
</q-btn>
</q-card-section>
</q-card>
<q-list
padding
class="menu-list"
v-else
>
<q-item
clickable
v-ripple
dense
@click="logout"
class="q-mb-sm"
>
<q-tooltip
anchor="center right"
self="center left"
>
<span>Logout</span>
</q-tooltip>
<q-item-section avatar>
<q-icon name="logout" />
</q-item-section>
<q-item-section>
<q-item-label class="text-h6">
Logout
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</template>
<q-separator />
<q-list
padding
class="menu-list"
>
<!-- Dynamic Navigation Items -->
<q-item
v-for="item in navItems"
@ -30,6 +91,7 @@
v-ripple
:to="{ name: item.name }"
exact
dense
>
<q-tooltip
anchor="center right"
@ -47,27 +109,6 @@
</q-item-label>
</q-item-section>
</q-item>
<!-- Logout Button (Conditional) -->
<q-item
v-if="authStore.isAuthenticated"
clickable
v-ripple
@click="logout"
>
<q-tooltip
anchor="center right"
self="center left"
>
<span>Logout</span>
</q-tooltip>
<q-item-section avatar>
<q-icon name="logout" />
</q-item-section>
<q-item-section>
<q-item-label>Logout</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
@ -86,7 +127,6 @@
icon="chat"
color="accent"
direction="up"
padding="sm"
@click="toggleChat"
/>
</q-page-sticky>
@ -95,8 +135,6 @@
<q-dialog
v-model="isChatVisible"
:maximized="$q.screen.lt.sm"
fixed
persistent
style="width: max(400px, 25%);"
>
<q-card style="width: max(400px, 25%); height: 600px; max-height: 80vh;">
@ -216,32 +254,58 @@ function toggleLeftDrawer()
{
leftDrawerOpen.value = !leftDrawerOpen.value;
}
async function logout()
{
try
$q.dialog({
title: 'Confirm Logout',
message: 'Are you sure you want to logout?',
cancel: true,
persistent: true
}).onOk(async() =>
{
await axios.post('/api/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);
try
{
await axios.post('/api/auth/logout');
authStore.logout();
$q.notify({
color: 'negative',
message: 'Logout failed. Please try again.',
icon: 'report_problem'
});
}
$q.notify({
color: 'positive',
message: 'Logout successful.',
icon: 'check_circle'
});
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>
<style scoped>
/* Add any specific styles for the layout or chat window here */
<style lang="scss" scoped>
.q-dialog .q-card {
overflow: hidden; /* Prevent scrollbars on the card itself */
overflow: hidden;
}
.menu-list .q-item {
border-radius: 32px;
margin: 5px 5px;
}
.menu-list .q-item:first-child {
margin-top: 0px;
}
.menu-list .q-router-link--active {
background-color: var(--q-primary);
color: #fff;
}
</style>