CaWittMN08/custom_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build

Browse Source
This commit is contained in:
Casey Wittrock 2025-10-22 02:21:19 -05:00
parent 3ecf24c3ea
commit cdb1bb30b1
18 changed files with 337 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"@iconoir/vue": "^7.11.0",
"axios": "^1.12.2",
"frappe-ui": "^0.1.205",
"pinia": "^3.0.3",
@ -645,6 +646,19 @@
}
}
},
"node_modules/@iconoir/vue": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@iconoir/vue/-/vue-7.11.0.tgz",
"integrity": "sha512-o768Cu9nayRcxryYElKmfRLBOfY26xVKB4T8z+ppJnEWy2QiDLIs8NJVc53HGvTsrfn7JC7+uu32ZUdFpx4m6A==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/iconoir"
},
"peerDependencies": {
"vue": "3"
}
},
"node_modules/@interactjs/types": {
"version": "1.10.27",
"resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.27.tgz",

1
frontend/package.json
View File

@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"@iconoir/vue": "^7.11.0",
"axios": "^1.12.2",
"frappe-ui": "^0.1.205",
"pinia": "^3.0.3",

49
frontend/src/App.vue
View File

@ -1,30 +1,37 @@
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { IconoirProvider } from "@iconoir/vue";
import SideBar from "./components/SideBar.vue";
</script>
<template>
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<IconoirProvider
:icon-props="{
color: 'white',
'stroke-width': 2,
width: '1.2em',
height: '1.2em',
}"
>
<div id="snw-ui">
<SideBar />
<div id="display-content">
<RouterView />
</div>
</div>
</IconoirProvider>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
<style lang="css">
#snw-ui {
display: flex;
flex-direction: row;
width: 100vw;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
#display-content {
flex-grow: 1;
margin-left: auto;
margin-right: auto;
max-width: 75vw;
}
</style>

43
frontend/src/components/DataTable.vue Normal file
View File

@ -0,0 +1,43 @@
<template lang="">
<div id="paging-controls">
<p>Show rows:</p>
<button class="page-num-button">25</button>
<button class="page-num-button">50</button>
<button class="page-num-button">100</button>
<button class="page-turn-button">Prev</button>
<button class="page-turn-button">Next</button>
</div>
<div ref="dataTableContainer"></div>
</template>
<script setup>
import { defineProps, ref, onMounted } from "vue";
const dataTableContainer = ref(null);
const props = defineProps({
columns: {
type: Array,
required: true,
},
data: {
type: Array,
required: true,
},
});
onMounted(() => {
console.log(dataTableContainer);
if (!dataTableContainer.value) {
console.error("Datatable container not found!");
return;
}
const columnsList = props.columns.map((col) => col.label);
const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
// Pass the actual DOM element
new frappe.DataTable(dataTableContainer.value, {
columns: columnsList,
data: dataList,
});
});
</script>
<style lang=""></style>

38
frontend/src/components/HelloWorld.vue
View File

@ -1,38 +0,0 @@
<script setup>
import { ref } from "vue";
import SideBar from "./SideBar.vue";
defineProps({
msg: String,
});
const count = ref(0);
</script>
<template>
<SideBar />
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p></p>
<p>
Learn more about IDE Support for Vue in the
<a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Testing cache update</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

83
frontend/src/components/SideBar.vue
View File

@ -1,15 +1,86 @@
<script setup>
import { ref } from "vue";
const isOpen = ref(true);
const selectedItem = ref("home");
import { useRouter } from "vue-router";
import {
Community,
Calendar,
Hammer,
MultiplePagesPlus,
PathArrowSolid,
Clock,
HistoricShield,
} from "@iconoir/vue";
const onDisclosure = () => {
isOpen = !isOpen;
const router = useRouter();
const categories = [
{ 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: "Create", icon: MultiplePagesPlus, url: "/create" },
{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
];
const handleCategoryClick = (category) => {
router.push(category.url);
};
</script>
<template>
<div class="snw-side-bar">
<button @click="onDisclosure">{{ isOpen ? "Close" : "Open" }}</button>
<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>
</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;
}
.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;
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;
}
</style>

6
frontend/src/components/pages/Calendar.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<div>
<h2>Calendar</h2>
</div>
</template>
<script setup></script>

40
frontend/src/components/pages/Clients.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div>
<H2>Client Contact List</H2>
<div id="filter-container" class="filter-container">
<input placeholder="Type to Search" />
<p>Type:</p>
<select id="type-selector"></select>
<button @click="onClick" id="add-customer-button" class="interaction-button">
Add
</button>
</div>
<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../DataTable.vue";
const tableData = ref([]);
const onClick = () => {
frappe.new_doc("Customer");
};
const searchFields = { fields: ["full_name", "address", "email_id", "phone"] };
const columns = [
{ label: "Name", fieldName: "full_name" },
{ label: "Location", fieldName: "address" },
{ label: "Type", fieldName: "contact_type" },
{ label: "Contact", fieldName: "full_name" },
{ label: "Email", fieldName: "email_id" },
{ label: "Phone", fieldName: "phone" },
];
onMounted(async () => {
let data = await frappe.db.get_list("Contact", searchFields);
console.log(data);
tableData.value = data;
});
</script>
<style lang=""></style>

9
frontend/src/components/pages/Create.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h2>Create Page</h2>
</div>
</template>
<script>
export default {};
</script>
<style lang=""></style>

9
frontend/src/components/pages/Home.vue
View File

@ -0,0 +1,9 @@
<template lang="">
<div>
<h2>Hello!</h2>
</div>
</template>
<script>
export default {};
</script>
<style lang=""></style>

9
frontend/src/components/pages/Jobs.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h2>Jobs</h2>
</div>
</template>
<script>
export default {};
</script>
<style lang=""></style>

9
frontend/src/components/pages/Routes.vue Normal file
View File

@ -0,0 +1,9 @@
<template lang="">
<div>
<h2>Routes Page</h2>
</div>
</template>
<script>
export default {};
</script>
<style lang=""></style>

9
frontend/src/components/pages/TimeSheets.vue Normal file
View File

@ -0,0 +1,9 @@
<template lang="">
<div>
<h2>TimeSheets Page</h2>
</div>
</template>
<script>
export default {};
</script>
<style lang=""></style>

9
frontend/src/components/pages/Warranties.vue Normal file
View File

@ -0,0 +1,9 @@
<template lang="">
<div>
<h2>Warranties Page</h2>
</div>
</template>
<script>
export default {};
</script>
<style lang=""></style>

3
frontend/src/main.js
View File

@ -1,5 +1,6 @@
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
createApp(App).mount("#custom-ui-app");
createApp(App).use(router).mount("#custom-ui-app");

31
frontend/src/router.js Normal file
View File

@ -0,0 +1,31 @@
import { RouterView } from "vue-router";
import { createRouter, createWebHashHistory } from "vue-router";
import Calendar from "./components/pages/Calendar.vue";
import Clients from "./components/pages/Clients.vue";
import Jobs from "./components/pages/Jobs.vue";
import Create from "./components/pages/Create.vue";
import Routes from "./components/pages/Routes.vue";
import TimeSheets from "./components/pages/TimeSheets.vue";
import Warranties from "./components/pages/Warranties.vue";
import Home from "./components/pages/Home.vue";
const routes = [
{
path: "/",
component: Home,
},
{ path: "/calendar", component: Calendar },
{ path: "/clients", component: Clients },
{ path: "/jobs", component: Jobs },
{ path: "/routes", component: Routes },
{ path: "/create", component: Create },
{ path: "/timesheets", component: TimeSheets },
{ path: "/warranties", component: Warranties },
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;

11
frontend/src/router/index.js
View File

@ -1,11 +0,0 @@
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../components/pages/Home.vue";
const routes = [{ path: "/", component: Home }];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;

92
frontend/src/style.css
View File

@ -1,44 +1,6 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
--primary-text-color: #ffffff;
--secondary-background-color: #669084;
}
#custom-ui-app {
@ -49,15 +11,43 @@ button:focus-visible {
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
.page-turn-button {
border-radius: 5px;
border: none;
}
.page-num-button {
border: none;
background-color: Transparent;
}
.interaction-button {
border: none;
border-radius: 5px;
/*background-color: mediumseagreen;*/
color: white;
background-color: rgb(69, 112, 101);
}
.interaction-button:hover {
background-color: rgb(82, 132, 119);
}
#client-content {
display: flex;
flex-direction: column;
width: 95%;
justify-content: center;
}
#filter-container {
display: flex;
flex-direction: row;
gap: 5px 5px;
}
#paging-controls {
display: flex;
justify-content: flex-end;
gap: 5px;
}