137 lines
3.1 KiB
Vue
137 lines
3.1 KiB
Vue
<script setup>
|
|
import { IconoirProvider } from "@iconoir/vue";
|
|
import SideBar from "./components/SideBar.vue";
|
|
import { watchEffect, onMounted, ref } from "vue";
|
|
import { useCompanyStore } from "@/stores/company";
|
|
import { useThemeStore } from "@/stores/theme";
|
|
import CreateClientModal from "./components/modals/CreateClientModal.vue";
|
|
import CreateEstimateModal from "./components/modals/CreateEstimateModal.vue";
|
|
import CreateJobModal from "./components/modals/CreateJobModal.vue";
|
|
import CreateInvoiceModal from "./components/modals/CreateInvoiceModal.vue";
|
|
import CreateWarrantyModal from "./components/modals/CreateWarrantyModal.vue";
|
|
import GlobalLoadingOverlay from "./components/common/GlobalLoadingOverlay.vue";
|
|
import ScrollPanel from "primevue/scrollpanel";
|
|
import Toast from "primevue/toast";
|
|
import { useNotificationStore } from "@/stores/notifications-primevue";
|
|
|
|
// Get the notification store and create a ref for the toast
|
|
const notificationStore = useNotificationStore();
|
|
const toast = ref();
|
|
const companyStore = useCompanyStore();
|
|
const themeStore = useThemeStore();
|
|
const sidebarCollapsed = ref(false);
|
|
|
|
// Connect the toast instance to the store when component mounts
|
|
onMounted(() => {
|
|
if (toast.value) {
|
|
notificationStore.setToastInstance(toast.value);
|
|
}
|
|
|
|
// Apply initial theme
|
|
themeStore.applyTheme(companyStore.selectedCompany);
|
|
});
|
|
|
|
// Reactively apply theme when company changes
|
|
watchEffect(() => {
|
|
themeStore.applyTheme(companyStore.selectedCompany);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<IconoirProvider
|
|
:icon-props="{
|
|
color: 'white',
|
|
'stroke-width': 2,
|
|
width: '1.2em',
|
|
height: '1.2em',
|
|
}"
|
|
>
|
|
<div id="snw-ui">
|
|
<div class="sidebar-column" :class="{ collapsed: sidebarCollapsed }">
|
|
<SideBar @toggle="sidebarCollapsed = $event" />
|
|
</div>
|
|
<div id="display-content">
|
|
<ScrollPanel style="width: 100%; height: 100%">
|
|
<RouterView />
|
|
</ScrollPanel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Modals -->
|
|
<CreateClientModal />
|
|
<CreateEstimateModal />
|
|
<CreateJobModal />
|
|
<CreateInvoiceModal />
|
|
<CreateWarrantyModal />
|
|
|
|
<!-- Global Loading Overlay -->
|
|
<GlobalLoadingOverlay />
|
|
|
|
<!-- Global Notifications -->
|
|
<Toast ref="toast" />
|
|
</IconoirProvider>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
#snw-ui {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
border: 4px solid var(--theme-border);
|
|
max-width: 2500px;
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
height: 90vh;
|
|
background: var(--theme-background-gradient);
|
|
}
|
|
|
|
.sidebar-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
width: 170px;
|
|
min-width: 170px;
|
|
transition: width 0.3s ease, min-width 0.3s ease;
|
|
}
|
|
|
|
.sidebar-column.collapsed {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.sidebar-column {
|
|
width: 140px;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.sidebar-column.collapsed {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.sidebar-column {
|
|
width: 120px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.sidebar-column.collapsed {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
}
|
|
}
|
|
|
|
#display-content {
|
|
flex-grow: 1;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 100%;
|
|
min-width: 80%;
|
|
height: 100%;
|
|
}
|
|
</style>
|