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

updated calendar to be tabular, moved bid schedule there, started client view refactoring

Browse source
This commit is contained in:
Casey 2025-12-12 08:03:48 -06:00
parent c5c5ffb0fb
commit 440381265c
18 changed files with 2283 additions and 2159 deletions
Download patch file Download diff file Expand all files Collapse all files

100
frontend/src/components/pages/Client.vue
View file

@ -1,22 +1,8 @@
<template>
<div class="client-page">
<!-- Client Header -->
<div class="client-header" v-if="client.customerName">
<div class="client-info">
<h2 class="client-name">{{ client.customerName }}</h2>
<div class="address-section" v-if="addresses.length > 0">
<label class="address-label">Address:</label>
<Select
v-if="addresses.length > 1"
v-model="selectedAddress"
:options="addresses"
class="address-dropdown"
placeholder="Select an address"
/>
<span v-else class="single-address">{{ addresses[0] }}</span>
</div>
</div>
</div>
<TopBar :selectedAddressIdx="selectedAddressIdx" :client="client" :nextVisitDate="nextVisitDate" v-if="client.customerName" @update:selectedAddressIdx="selectedAddressIdx = $event" />
<AdditionalInfoBar :address="client.addresses[selectedAddressIdx]" v-if="client.customerName" />
<Tabs value="0">
<TabList>
@ -53,7 +39,6 @@ import TabList from "primevue/tablist";
import Tab from "primevue/tab";
import TabPanels from "primevue/tabpanels";
import TabPanel from "primevue/tabpanel";
import Select from "primevue/select";
import Api from "../../api";
import { useRoute } from "vue-router";
import { useLoadingStore } from "../../stores/loading";
@ -61,6 +46,8 @@ import { useNotificationStore } from "../../stores/notifications-primevue";
import DataUtils from "../../utils";
import Overview from "../clientSubPages/Overview.vue";
import ProjectStatus from "../clientSubPages/ProjectStatus.vue";
import TopBar from "../clientView/TopBar.vue";
import AdditionalInfoBar from "../clientView/AdditionalInfoBar.vue";
const route = useRoute();
const loadingStore = useLoadingStore();
@ -88,6 +75,17 @@ const addresses = computed(() => {
return [];
});
const nextVisitDate = ref(null); // Placeholder, update as needed
const selectedAddressIdx = computed({
get: () => addresses.value.indexOf(selectedAddress.value),
set: (idx) => {
if (idx >= 0 && idx < addresses.value.length) {
selectedAddress.value = addresses.value[idx];
}
}
});
const getClientNames = async (type) => {
loadingStore.setLoading(true);
try {
@ -181,53 +179,6 @@ watch(
);
</script>
<style lang="css">
.client-header {
background: var(--surface-card);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--surface-border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.client-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.client-name {
margin: 0;
color: var(--text-color);
font-size: 1.75rem;
font-weight: 600;
}
.address-section {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.address-label {
font-weight: 500;
color: var(--text-color-secondary);
min-width: 70px;
}
.address-dropdown {
min-width: 300px;
flex: 1;
max-width: 500px;
}
.single-address {
color: var(--text-color);
font-size: 0.95rem;
padding: 0.5rem 0;
}
.tab-info-alert {
background-color: #a95e46;
border-radius: 10px;
@ -237,25 +188,4 @@ watch(
padding-top: 2px;
padding-bottom: 2px;
}
@media (max-width: 768px) {
.client-info {
gap: 0.75rem;
}
.client-name {
font-size: 1.5rem;
}
.address-section {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.address-dropdown {
min-width: 100%;
max-width: 100%;
}
}
</style>