162 lines
3.2 KiB
Vue
162 lines
3.2 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import {
|
|
Home,
|
|
Community,
|
|
Calendar,
|
|
Hammer,
|
|
MultiplePagesPlus,
|
|
PathArrowSolid,
|
|
Clock,
|
|
HistoricShield,
|
|
} from "@iconoir/vue";
|
|
import SpeedDial from "primevue/speeddial";
|
|
|
|
const router = useRouter();
|
|
const categories = [
|
|
{ name: "Home", icon: Home, url: "/" },
|
|
{ name: "Calendar", icon: Calendar, url: "/calendar" },
|
|
{ name: "Clients", icon: Community, url: "/clients" },
|
|
{ name: "Jobs", icon: Hammer, url: "/jobs" },
|
|
{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
|
|
{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
|
|
{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
|
|
{
|
|
name: "Create New",
|
|
icon: MultiplePagesPlus,
|
|
},
|
|
];
|
|
|
|
const createButtons = ref([
|
|
{
|
|
label: "Client",
|
|
command: () => {
|
|
frappe.new_doc("Customer");
|
|
},
|
|
},
|
|
{
|
|
label: "Job",
|
|
command: () => {
|
|
frappe.new_doc("Job");
|
|
},
|
|
},
|
|
{
|
|
label: "Estimate",
|
|
command: () => {
|
|
frappe.new_doc("Estimate");
|
|
},
|
|
},
|
|
{
|
|
label: "Invoice",
|
|
command: () => {
|
|
alert("Create Invoice clicked");
|
|
},
|
|
},
|
|
{
|
|
label: "Warranty Claim",
|
|
command: () => {
|
|
alert("Create Warranty Claim clicked");
|
|
},
|
|
},
|
|
]);
|
|
const handleCategoryClick = (category) => {
|
|
router.push(category.url);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div id="sidebar" class="sidebar">
|
|
<template v-for="category in categories">
|
|
<template v-if="category.url">
|
|
<button
|
|
:class="[
|
|
'sidebar-button',
|
|
router.currentRoute.value.path === category.url ? 'active' : '',
|
|
]"
|
|
:key="category.name"
|
|
@click="handleCategoryClick(category)"
|
|
>
|
|
<component :is="category.icon" class="button-icon" /><span
|
|
class="button-text"
|
|
>{{ category.name }}</span
|
|
>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<SpeedDial :model="createButtons" direction="down" type="linear" radius="50">
|
|
<template #button="{ toggleCallback }">
|
|
<button
|
|
class="sidebar-button"
|
|
@click="toggleCallback"
|
|
:key="category.name"
|
|
>
|
|
<component :is="category.icon" class="button-icon" /><span
|
|
class="button-text"
|
|
>{{ category.name }}</span
|
|
>
|
|
</button>
|
|
</template>
|
|
<template #item="{ item, toggleCallback }">
|
|
<button class="create-item" @click="toggleCallback" :key="item.label">
|
|
<span class="p-menuitem-text">{{ item.label }}</span>
|
|
</button>
|
|
</template>
|
|
</SpeedDial>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
.sidebar-button.active {
|
|
background-color: rgb(25, 60, 53);
|
|
color: white;
|
|
}
|
|
|
|
.sidebar-button:hover {
|
|
background-color: rgb(82, 132, 119);
|
|
}
|
|
|
|
.button-icon {
|
|
justify-self: flex-start;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.create-item {
|
|
border: none;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-text {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.sidebar-button {
|
|
border-radius: 5px;
|
|
border: none;
|
|
background-color: rgb(69, 112, 101);
|
|
color: white;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
#sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 150px;
|
|
align-self: flex-start;
|
|
gap: 10px;
|
|
background-color: #f3f3f3;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
}
|
|
</style>
|