bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

build out mock views

Browse source
This commit is contained in:
Casey Wittrock 2025-10-24 03:40:53 -05:00
parent 6dac3bfb02
commit 403b29a8b8
12 changed files with 1066 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

94
frontend/src/components/SideBar.vue
View file

@ -11,6 +11,7 @@ import {
Clock,
HistoricShield,
} from "@iconoir/vue";
import SpeedDial from "primevue/speeddial";
const router = useRouter();
const categories = [
@ -19,10 +20,40 @@ const categories = [
{ name: "Clients", icon: Community, url: "/clients" },
{ name: "Jobs", icon: Hammer, url: "/jobs" },
{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
{ name: "Create", icon: MultiplePagesPlus, url: "/create" },
{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
{
name: "Create New",
icon: MultiplePagesPlus,
},
];
const items = ref([
{
label: "Client",
command: () => {
frappe.new_doc("Customer");
},
},
{
label: "Estimate",
command: () => {
frappe.new_doc("Estimate");
},
},
{
label: "Job",
command: () => {
frappe.new_doc("Job");
},
},
{
label: "Invoice",
command: () => {
frappe.new_doc("Sales Invoice");
},
},
]);
const handleCategoryClick = (category) => {
router.push(category.url);
};
@ -30,19 +61,44 @@ const handleCategoryClick = (category) => {
<template>
<div id="sidebar" class="sidebar">
<button
v-for="category in categories"
: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 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="items" 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>
@ -61,6 +117,15 @@ const handleCategoryClick = (category) => {
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;
@ -85,5 +150,6 @@ const handleCategoryClick = (category) => {
padding: 10px;
border-radius: 5px;
margin-top: 10px;
position: relative;
}
</style>