82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import { IconoirProvider } from "@iconoir/vue";
|
|
import SideBar from "./components/SideBar.vue";
|
|
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();
|
|
|
|
// Connect the toast instance to the store when component mounts
|
|
onMounted(() => {
|
|
if (toast.value) {
|
|
notificationStore.setToastInstance(toast.value);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<IconoirProvider
|
|
:icon-props="{
|
|
color: 'white',
|
|
'stroke-width': 2,
|
|
width: '1.2em',
|
|
height: '1.2em',
|
|
}"
|
|
>
|
|
<div id="snw-ui">
|
|
<SideBar />
|
|
<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 rgb(235, 230, 230);
|
|
max-width: 2500px;
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
height: 90vh;
|
|
}
|
|
|
|
#display-content {
|
|
/* flex-grow: 1; */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 50vw;
|
|
min-width: 80%;
|
|
height: 100%;
|
|
}
|
|
</style>
|