updated calendar to be tabular, moved bid schedule there, started client view refactoring
This commit is contained in:
parent
c5c5ffb0fb
commit
440381265c
18 changed files with 2283 additions and 2159 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import ApiUtils from "./apiUtils";
|
||||
import DataUtils from "./utils";
|
||||
import { useErrorStore } from "./stores/errors";
|
||||
|
||||
const ZIPPOPOTAMUS_BASE_URL = "https://api.zippopotam.us/us";
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const createButtons = ref([
|
|||
{
|
||||
label: "Bid",
|
||||
command: () => {
|
||||
router.push("/schedule-bid?new=true");
|
||||
router.push("/calendar?tab=bids&new=true");
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -132,7 +132,7 @@ const categories = ref([
|
|||
icon: Community,
|
||||
buttons: clientButtons,
|
||||
},
|
||||
{ name: "Bids", icon: Neighbourhood, url: "/schedule-bid" },
|
||||
// { name: "Bids", icon: Neighbourhood, url: "/schedule-bid" },
|
||||
{ name: "Estimates", icon: Calculator, url: "/estimates" },
|
||||
{ name: "Jobs", icon: Hammer, url: "/jobs" },
|
||||
{ name: "Payments/Invoices", icon: ReceiveDollars, url: "/invoices" },
|
||||
|
|
|
|||
63
frontend/src/components/calendar/CalendarNavigation.vue
Normal file
63
frontend/src/components/calendar/CalendarNavigation.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="calendar-navigation">
|
||||
<TabView v-model:activeIndex="activeIndex" @tab-change="onTabChange">
|
||||
<TabPanel header="Bids">
|
||||
<ScheduleBid />
|
||||
</TabPanel>
|
||||
<TabPanel header="Installs">
|
||||
<div class="coming-soon">
|
||||
<p>Installs feature coming soon!</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Jobs">
|
||||
<JobsCalendar />
|
||||
</TabPanel>
|
||||
<TabPanel header="Maintenance">
|
||||
<div class="coming-soon">
|
||||
<p>Maintenance feature coming soon!</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Service">
|
||||
<div class="coming-soon">
|
||||
<p>Service feature coming soon!</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TabView from 'primevue/tabview'
|
||||
import TabPanel from 'primevue/tabpanel'
|
||||
import ScheduleBid from '../calendar/bids/ScheduleBid.vue'
|
||||
import JobsCalendar from '../calendar/jobs/JobsCalendar.vue'
|
||||
import { useNotificationStore } from '../../stores/notifications-primevue'
|
||||
|
||||
const notifications = useNotificationStore()
|
||||
|
||||
const activeIndex = ref(0)
|
||||
|
||||
const onTabChange = (event) => {
|
||||
const tabHeaders = ['Bids', 'Installs', 'Jobs', 'Maintenance', 'Service']
|
||||
const selectedTab = tabHeaders[event.index]
|
||||
if (selectedTab !== 'Bids' && selectedTab !== 'Jobs') {
|
||||
notifications.addWarning(`${selectedTab} feature coming soon!`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar-navigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
color: #6c757d;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -214,11 +214,11 @@
|
|||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import BidMeetingModal from "../modals/BidMeetingModal.vue";
|
||||
import MeetingDetailsModal from "../modals/MeetingDetailsModal.vue";
|
||||
import { useLoadingStore } from "../../stores/loading";
|
||||
import { useNotificationStore } from "../../stores/notifications-primevue";
|
||||
import Api from "../../api";
|
||||
import BidMeetingModal from "../../modals/BidMeetingModal.vue";
|
||||
import MeetingDetailsModal from "../../modals/MeetingDetailsModal.vue";
|
||||
import { useLoadingStore } from "../../../stores/loading";
|
||||
import { useNotificationStore } from "../../../stores/notifications-primevue";
|
||||
import Api from "../../../api";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
1175
frontend/src/components/calendar/jobs/JobsCalendar.vue
Normal file
1175
frontend/src/components/calendar/jobs/JobsCalendar.vue
Normal file
File diff suppressed because it is too large
Load diff
29
frontend/src/components/clientView/AdditionalInfoBar.vue
Normal file
29
frontend/src/components/clientView/AdditionalInfoBar.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div class="additional-info-bar">
|
||||
<span>additional address information. coming soon</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
address: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.additional-info-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25rem 1rem;
|
||||
background: linear-gradient(135deg, #f0f9f0 0%, #e8f5e8 100%);
|
||||
color: #2d5a47;
|
||||
border-bottom: 1px solid #c8e6c9;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
min-height: 30px;
|
||||
}
|
||||
</style>
|
||||
180
frontend/src/components/clientView/TopBar.vue
Normal file
180
frontend/src/components/clientView/TopBar.vue
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<div class="top-bar">
|
||||
<div class="address-section">
|
||||
<label class="section-label">Address:</label>
|
||||
<Dropdown
|
||||
v-model="selectedAddressIdx"
|
||||
:options="addressOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
placeholder="Select Address"
|
||||
class="address-dropdown"
|
||||
/>
|
||||
</div>
|
||||
<div class="contact-section">
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<strong>{{ primaryContact.name }}</strong>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="pi pi-phone"></i> {{ primaryContact.phone }}
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="pi pi-envelope"></i> {{ primaryContact.email }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="client.customerName !== primaryContact.fullName" class="customer-name">
|
||||
<span class="customer-label">Customer:</span> {{ client.customerName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="visit-section">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Next Visit: {{ nextVisitDate ? formatDate(nextVisitDate) : 'None' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
|
||||
const props = defineProps({
|
||||
client: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
nextVisitDate: {
|
||||
type: [String, Date],
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const selectedAddressIdx = defineModel('selectedAddressIdx')
|
||||
|
||||
const addressOptions = computed(() => {
|
||||
return props.client.addresses.map((addr, index) => ({
|
||||
label: addr.fullAddress,
|
||||
value: index
|
||||
}))
|
||||
})
|
||||
|
||||
const primaryContact = computed(() => {
|
||||
const contactName = props.client.addresses[selectedAddressIdx.value]?.customContactName
|
||||
return props.client.contacts.find(contact => contact.name === contactName) || {}
|
||||
})
|
||||
|
||||
const formatDate = (date) => {
|
||||
// Assuming date is a string or Date object, format as needed
|
||||
return new Date(date).toLocaleDateString()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(135deg, #0d4f3c 0%, #1a5f4a 100%);
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #2d5a47;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-weight: 500;
|
||||
color: #adb5bd;
|
||||
white-space: nowrap;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.address-dropdown {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
font-size: 0.75rem;
|
||||
color: #adb5bd;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.customer-label {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.visit-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
background: #495057;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.top-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0.5rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.address-section {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.visit-section {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -237,6 +237,7 @@
|
|||
dataKey="id"
|
||||
:loading="loading"
|
||||
:loadingIcon="loadingIcon"
|
||||
@row-click="$emit('row-click', $event)"
|
||||
>
|
||||
<template #empty>
|
||||
<div class="text-center py-6">
|
||||
|
|
@ -475,6 +476,7 @@ const props = defineProps({
|
|||
|
||||
const emit = defineEmits([
|
||||
"rowClick",
|
||||
"row-click",
|
||||
"lazy-load",
|
||||
"page-change",
|
||||
"sort-change",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
:totalRecords="totalRecords"
|
||||
:loading="isLoading"
|
||||
@lazy-load="handleLazyLoad"
|
||||
@row-click="handleRowClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -121,7 +122,7 @@ const columns = [
|
|||
filterInputId: "customerSearchInput",
|
||||
},
|
||||
{
|
||||
label: "Address",
|
||||
label: "Property",
|
||||
fieldName: "address",
|
||||
type: "text",
|
||||
sortable: true,
|
||||
|
|
@ -181,20 +182,6 @@ const tableActions = [
|
|||
},
|
||||
// Global action - always available
|
||||
},
|
||||
{
|
||||
label: "View Details",
|
||||
action: (rowData) => {
|
||||
router.push(`/client?client=${rowData.customerName}&address=${rowData.address}`);
|
||||
},
|
||||
type: "button",
|
||||
style: "info",
|
||||
icon: "pi pi-eye",
|
||||
requiresSelection: true, // Single selection action - appears above table, enabled when exactly one row selected
|
||||
layout: {
|
||||
position: "center",
|
||||
variant: "outlined",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: "Export Selected",
|
||||
// action: (selectedRows) => {
|
||||
|
|
@ -338,6 +325,12 @@ watch(
|
|||
{ deep: true },
|
||||
);
|
||||
|
||||
// Handle row click to navigate to client details
|
||||
const handleRowClick = (event) => {
|
||||
const rowData = event.data;
|
||||
router.push(`/client?client=${rowData.customerName}&address=${rowData.address}`);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// if lookup has a value (it will either be "customer" or "property", put focus onto the appropriate search input)
|
||||
if (lookup) {
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>Create Page</h2>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style lang=""></style>
|
||||
|
|
@ -1,664 +0,0 @@
|
|||
<template>
|
||||
<div class="error-handling-example">
|
||||
<h3>PrimeVue Toast Error Handling Demo</h3>
|
||||
|
||||
<!-- Error Display Section -->
|
||||
<div class="error-section" v-if="errorStore.hasAnyError">
|
||||
<h4>Current Component Errors (for debugging):</h4>
|
||||
<div class="error-list">
|
||||
<div v-if="errorStore.lastError" class="error-item global-error">
|
||||
<strong>Global Error:</strong> {{ errorStore.lastError.message }}
|
||||
<button @click="errorStore.clearGlobalError()" class="clear-btn">Clear</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(error, component) in errorStore.componentErrors"
|
||||
:key="component"
|
||||
v-if="error"
|
||||
class="error-item component-error"
|
||||
>
|
||||
<strong>{{ component }} Error:</strong> {{ error.message }}
|
||||
<button @click="errorStore.clearComponentError(component)" class="clear-btn">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Buttons -->
|
||||
<div class="demo-section">
|
||||
<h4>Test PrimeVue Toast Notifications:</h4>
|
||||
<div class="button-group">
|
||||
<Button
|
||||
@click="testSuccessfulApiCall"
|
||||
label="Successful API Call"
|
||||
class="p-button-success"
|
||||
:loading="loadingStore.getComponentLoading('demo-success')"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@click="testFailingApiCall"
|
||||
label="Failing API Call"
|
||||
class="p-button-danger"
|
||||
:loading="loadingStore.getComponentLoading('demo-fail')"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@click="testRetryApiCall"
|
||||
label="API Call with Retry"
|
||||
class="p-button-warning"
|
||||
:loading="loadingStore.getComponentLoading('demo-retry')"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@click="testDirectToasts"
|
||||
label="Direct Toast Messages"
|
||||
class="p-button-info"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<Button @click="testComponentError" label="Component Error" severity="secondary" />
|
||||
|
||||
<Button @click="testGlobalError" label="Global Error" severity="secondary" />
|
||||
|
||||
<Button @click="clearAllErrors" label="Clear All Errors" severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Real API Demo with ApiWithToast -->
|
||||
<div class="api-demo-section">
|
||||
<h4>Real API Integration with ApiWithToast:</h4>
|
||||
<div class="button-group">
|
||||
<Button
|
||||
@click="loadClientData"
|
||||
label="Load Client Data"
|
||||
class="p-button-primary"
|
||||
:loading="loadingStore.getComponentLoading('clients')"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@click="loadJobData"
|
||||
label="Load Job Data"
|
||||
class="p-button-primary"
|
||||
:loading="loadingStore.getComponentLoading('jobs')"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@click="createTestClient"
|
||||
label="Create Test Client"
|
||||
class="p-button-success"
|
||||
:loading="loadingStore.getComponentLoading('form')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="clientData.length > 0" class="data-preview">
|
||||
<h5>Client Data ({{ clientData.length }} items):</h5>
|
||||
<pre>{{ JSON.stringify(clientData.slice(0, 2), null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<div v-if="clientStatusData" class="data-preview">
|
||||
<h5>Client Status Counts:</h5>
|
||||
<div class="status-grid">
|
||||
<div
|
||||
v-for="(count, status) in clientStatusData"
|
||||
:key="status"
|
||||
class="status-item"
|
||||
>
|
||||
<strong>{{ status }}:</strong> {{ count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error History -->
|
||||
<div class="history-section">
|
||||
<h4>Error History:</h4>
|
||||
<Button
|
||||
@click="showHistory = !showHistory"
|
||||
:label="`${showHistory ? 'Hide' : 'Show'} History (${errorStore.errorHistory.length})`"
|
||||
severity="secondary"
|
||||
/>
|
||||
|
||||
<div v-if="errorStore.errorHistory.length === 0 && showHistory" class="no-history">
|
||||
<p>
|
||||
No errors in history yet. Try clicking the error buttons above to generate some
|
||||
errors!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Debug info -->
|
||||
<div v-if="showHistory" class="debug-info">
|
||||
<p><strong>Debug Info:</strong></p>
|
||||
<p>History array length: {{ errorStore.errorHistory.length }}</p>
|
||||
<p>
|
||||
Recent errors method returns: {{ errorStore.getRecentErrors(5).length }} items
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="showHistory && errorStore.errorHistory.length > 0" class="history-list">
|
||||
<div
|
||||
v-for="error in errorStore.getRecentErrors(5)"
|
||||
:key="error.id"
|
||||
class="history-item"
|
||||
>
|
||||
<div class="history-header">
|
||||
<span class="error-type">{{ error.type }}</span>
|
||||
<span class="error-source">{{ error.source }}</span>
|
||||
<span class="error-time">{{ formatTime(error.timestamp) }}</span>
|
||||
</div>
|
||||
<div class="error-message">{{ error.message }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import Button from "primevue/button";
|
||||
import { useErrorStore } from "@/stores/errors";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import ApiWithToast from "@/api-toast";
|
||||
|
||||
const errorStore = useErrorStore();
|
||||
const loadingStore = useLoadingStore();
|
||||
|
||||
const clientData = ref([]);
|
||||
const clientStatusData = ref(null);
|
||||
const showHistory = ref(false);
|
||||
|
||||
// Test functions using ApiWithToast
|
||||
const testSuccessfulApiCall = async () => {
|
||||
try {
|
||||
await ApiWithToast.makeApiCall(
|
||||
async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
|
||||
return { success: true };
|
||||
},
|
||||
{
|
||||
componentName: "demo-success",
|
||||
showSuccessToast: true,
|
||||
successMessage: "API call completed successfully!",
|
||||
loadingMessage: "Processing request...",
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
// Error toast shown automatically
|
||||
console.log("Error was handled automatically");
|
||||
}
|
||||
};
|
||||
|
||||
const testFailingApiCall = async () => {
|
||||
try {
|
||||
await ApiWithToast.makeApiCall(
|
||||
async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate delay
|
||||
throw new Error("This is a simulated API failure for demo purposes");
|
||||
},
|
||||
{
|
||||
componentName: "demo-fail",
|
||||
showErrorToast: true,
|
||||
customErrorMessage: "Demo API call failed as expected",
|
||||
loadingMessage: "Attempting to fail...",
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
console.log("Error was handled by ApiWithToast");
|
||||
}
|
||||
};
|
||||
|
||||
const testRetryApiCall = async () => {
|
||||
let attempts = 0;
|
||||
|
||||
try {
|
||||
await ApiWithToast.makeApiCall(
|
||||
async () => {
|
||||
attempts++;
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
|
||||
if (attempts < 3) {
|
||||
throw new Error(`Attempt ${attempts} failed - will retry`);
|
||||
}
|
||||
|
||||
return { success: true, attempts };
|
||||
},
|
||||
{
|
||||
componentName: "demo-retry",
|
||||
retryCount: 2,
|
||||
retryDelay: 1000,
|
||||
showSuccessToast: true,
|
||||
successMessage: `Success after ${attempts} attempts!`,
|
||||
customErrorMessage: "All retry attempts failed",
|
||||
loadingMessage: "Retrying operation...",
|
||||
},
|
||||
);
|
||||
} catch (error) {
|
||||
console.log("Retry test completed");
|
||||
}
|
||||
};
|
||||
|
||||
const testDirectToasts = () => {
|
||||
// Test different toast types directly through error store
|
||||
errorStore.setSuccess("This is a success message!");
|
||||
|
||||
setTimeout(() => {
|
||||
errorStore.setInfo("This is an info message!");
|
||||
}, 500);
|
||||
|
||||
setTimeout(() => {
|
||||
errorStore.setWarning("This is a warning message!");
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
errorStore.setGlobalError(new Error("This is an error message!"));
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const testComponentError = () => {
|
||||
errorStore.setComponentError(
|
||||
"demo-component",
|
||||
new Error("This is a component-specific error"),
|
||||
);
|
||||
// Error notification will be shown automatically!
|
||||
};
|
||||
|
||||
const testGlobalError = () => {
|
||||
errorStore.setGlobalError(
|
||||
new Error("This is a global error that affects the entire application"),
|
||||
);
|
||||
// Error notification will be shown automatically!
|
||||
};
|
||||
|
||||
const clearAllErrors = () => {
|
||||
errorStore.clearAllErrors();
|
||||
errorStore.setSuccess("All errors cleared!");
|
||||
};
|
||||
|
||||
// Real API integration using ApiWithToast
|
||||
const loadClientData = async () => {
|
||||
try {
|
||||
const result = await ApiWithToast.getPaginatedClientDetails(
|
||||
{ page: 0, pageSize: 5 },
|
||||
{},
|
||||
[],
|
||||
{
|
||||
showSuccessToast: true,
|
||||
successMessage: "Client data loaded successfully!",
|
||||
},
|
||||
);
|
||||
|
||||
clientData.value = result?.data || [];
|
||||
|
||||
// Also load client status counts
|
||||
const statusResult = await ApiWithToast.getClientStatusCounts();
|
||||
clientStatusData.value = statusResult;
|
||||
} catch (error) {
|
||||
console.log("Client data loading failed, but error was handled automatically");
|
||||
}
|
||||
};
|
||||
|
||||
const loadJobData = async () => {
|
||||
try {
|
||||
const result = await ApiWithToast.getPaginatedJobDetails(
|
||||
{ page: 0, pageSize: 5 },
|
||||
{},
|
||||
[],
|
||||
{
|
||||
showSuccessToast: true,
|
||||
successMessage: "Job data loaded successfully!",
|
||||
},
|
||||
);
|
||||
console.log("Job data loaded:", result);
|
||||
} catch (error) {
|
||||
console.log("Job data loading failed, but error was handled automatically");
|
||||
}
|
||||
};
|
||||
|
||||
const createTestClient = async () => {
|
||||
const testClient = {
|
||||
customer_name: `Demo Client ${Date.now()}`,
|
||||
mobile_no: "555-0199",
|
||||
email: `demo${Date.now()}@example.com`,
|
||||
status: "Active",
|
||||
};
|
||||
|
||||
try {
|
||||
await ApiWithToast.createClient(testClient);
|
||||
// Success toast shown automatically
|
||||
// Reload client data to show the change
|
||||
await loadClientData();
|
||||
} catch (error) {
|
||||
console.log("Client creation failed, but error was handled automatically");
|
||||
}
|
||||
};
|
||||
|
||||
// Utility functions
|
||||
const formatTime = (timestamp) => {
|
||||
return new Date(timestamp).toLocaleTimeString();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// Show a welcome notification using the integrated error store
|
||||
errorStore.setInfo(
|
||||
"🎉 Error Store now automatically creates PrimeVue Toast notifications! No need to import both stores anymore.",
|
||||
"Welcome",
|
||||
);
|
||||
|
||||
// Add some sample errors to history for demonstration (without showing notifications)
|
||||
setTimeout(() => {
|
||||
errorStore.setComponentError(
|
||||
"demo-component",
|
||||
new Error("Sample component error from page load"),
|
||||
false,
|
||||
);
|
||||
errorStore.setApiError(
|
||||
"demo-api",
|
||||
new Error("Sample API error from initialization"),
|
||||
false,
|
||||
);
|
||||
|
||||
// Clear the component errors so they don't show in the error section, but keep them in history
|
||||
setTimeout(() => {
|
||||
errorStore.clearComponentError("demo-component");
|
||||
errorStore.clearApiError("demo-api");
|
||||
}, 100);
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error-handling-example {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.info-banner {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.info-banner h4 {
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-banner p {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-banner strong {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.error-section {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-left: 4px solid var(--orange-500);
|
||||
}
|
||||
|
||||
.error-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.error-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.global-error {
|
||||
background: #fee2e2;
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
|
||||
.component-error {
|
||||
background: #fef3c7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.demo-section,
|
||||
.api-demo-section,
|
||||
.history-section {
|
||||
margin-bottom: 2rem;
|
||||
background: var(--surface-card);
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn.success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.success:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.btn.error {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.error:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn.warning {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.warning:hover:not(:disabled) {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
.btn.info {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.info:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.primary:hover:not(:disabled) {
|
||||
background: #4f46e5;
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.secondary:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.data-preview {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--surface-ground);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.data-preview pre {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-color);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
padding: 0.75rem;
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.error-type {
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.error-source {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* Keep some button styles for legacy buttons like clear-btn */
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.secondary:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.no-history {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--surface-ground);
|
||||
border-radius: 6px;
|
||||
color: var(--text-color-secondary);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--yellow-50);
|
||||
border: 1px solid var(--yellow-200);
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.debug-info p {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
<template>
|
||||
<div class="test-date-form">
|
||||
<h2>Enhanced Date Picker Test</h2>
|
||||
<p>This page demonstrates the enhanced date picker functionality in the Form component.</p>
|
||||
|
||||
<Form
|
||||
:fields="dateFields"
|
||||
:form-data="formData"
|
||||
@submit="handleSubmit"
|
||||
@change="handleFieldChange"
|
||||
submit-button-text="Save Dates"
|
||||
/>
|
||||
|
||||
<div v-if="Object.keys(formData).length" class="results mt-6">
|
||||
<h3>Current Form Values:</h3>
|
||||
<div class="results-grid">
|
||||
<div v-for="(value, key) in formData" :key="key" class="result-item">
|
||||
<strong>{{ formatFieldLabel(key) }}:</strong>
|
||||
<span v-if="value instanceof Date" class="date-value">
|
||||
{{ formatDateValue(key, value) }}
|
||||
</span>
|
||||
<span v-else-if="value" class="value">{{ value }}</span>
|
||||
<span v-else class="empty">Not set</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Form from "../common/Form.vue";
|
||||
|
||||
const formData = ref({});
|
||||
|
||||
const dateFields = [
|
||||
// Basic date picker with US format
|
||||
{
|
||||
name: "birthDate",
|
||||
label: "Birth Date",
|
||||
type: "date",
|
||||
format: "mm/dd/yyyy",
|
||||
required: true,
|
||||
maxDate: "today",
|
||||
yearNavigator: true,
|
||||
yearRange: "1920:2010",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Your date of birth",
|
||||
},
|
||||
|
||||
// Date with default to today
|
||||
{
|
||||
name: "startDate",
|
||||
label: "Project Start Date",
|
||||
type: "date",
|
||||
format: "YYYY-MM-DD",
|
||||
defaultToToday: true,
|
||||
minDate: "today",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "When should this project start?",
|
||||
},
|
||||
|
||||
// Date and time picker
|
||||
{
|
||||
name: "appointmentDateTime",
|
||||
label: "Appointment Date & Time",
|
||||
type: "date",
|
||||
showTime: true,
|
||||
hourFormat: "12",
|
||||
stepMinute: 15,
|
||||
defaultToNow: true,
|
||||
minDate: "today",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Select appointment date and time",
|
||||
},
|
||||
|
||||
// Time-only picker
|
||||
{
|
||||
name: "preferredTime",
|
||||
label: "Preferred Contact Time",
|
||||
type: "date",
|
||||
timeOnly: true,
|
||||
hourFormat: "12",
|
||||
stepMinute: 30,
|
||||
defaultValue: "09:00",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Best time to contact you",
|
||||
},
|
||||
|
||||
// European date format with week numbers
|
||||
{
|
||||
name: "eventDate",
|
||||
label: "Event Date",
|
||||
type: "date",
|
||||
format: "dd/mm/yyyy",
|
||||
showWeek: true,
|
||||
monthNavigator: true,
|
||||
yearNavigator: true,
|
||||
yearRange: "2024:2026",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
},
|
||||
|
||||
// Date with seconds
|
||||
{
|
||||
name: "preciseTime",
|
||||
label: "Precise Timestamp",
|
||||
type: "date",
|
||||
showTime: true,
|
||||
showSeconds: true,
|
||||
hourFormat: "24",
|
||||
stepSecond: 1,
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Precise time with seconds",
|
||||
},
|
||||
];
|
||||
|
||||
const handleSubmit = (data) => {
|
||||
console.log("Date form submitted:", data);
|
||||
alert("Form submitted! Check console for details.");
|
||||
};
|
||||
|
||||
const handleFieldChange = (event) => {
|
||||
console.log("Field changed:", event.fieldName, "->", event.value);
|
||||
};
|
||||
|
||||
const formatFieldLabel = (fieldName) => {
|
||||
const field = dateFields.find((f) => f.name === fieldName);
|
||||
return field ? field.label : fieldName;
|
||||
};
|
||||
|
||||
const formatDateValue = (fieldName, dateValue) => {
|
||||
if (!dateValue) return "Not set";
|
||||
|
||||
const field = dateFields.find((f) => f.name === fieldName);
|
||||
|
||||
if (field?.timeOnly) {
|
||||
return dateValue.toLocaleTimeString();
|
||||
} else if (field?.showTime) {
|
||||
return dateValue.toLocaleString();
|
||||
} else {
|
||||
return dateValue.toLocaleDateString();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.test-date-form {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.results {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #28a745;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.result-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,15 +5,11 @@ import Clients from "./components/pages/Clients.vue";
|
|||
import Jobs from "./components/pages/Jobs.vue";
|
||||
import Invoices from "./components/pages/Invoices.vue";
|
||||
import Estimates from "./components/pages/Estimates.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";
|
||||
import TestDateForm from "./components/pages/TestDateForm.vue";
|
||||
import Client from "./components/pages/Client.vue";
|
||||
import ErrorHandlingDemo from "./components/pages/ErrorHandlingDemo.vue";
|
||||
import ScheduleBid from "./components/pages/ScheduleBid.vue";
|
||||
import Estimate from "./components/pages/Estimate.vue";
|
||||
|
||||
const routes = [
|
||||
|
|
@ -24,17 +20,13 @@ const routes = [
|
|||
{ path: "/calendar", component: Calendar },
|
||||
{ path: "/clients", component: Clients },
|
||||
{ path: "/client", component: Client },
|
||||
{ path: "/schedule-bid", component: ScheduleBid },
|
||||
{ path: "/jobs", component: Jobs },
|
||||
{ path: "/invoices", component: Invoices },
|
||||
{ path: "/estimates", component: Estimates },
|
||||
{ path: "/estimate", component: Estimate },
|
||||
{ path: "/routes", component: Routes },
|
||||
{ path: "/create", component: Create },
|
||||
{ path: "/timesheets", component: TimeSheets },
|
||||
{ path: "/warranties", component: Warranties },
|
||||
{ path: "/test-dates", component: TestDateForm },
|
||||
{ path: "/dev/error-handling-demo", component: ErrorHandlingDemo },
|
||||
{ path: "/:pathMatch(.*)*", component: Home }, // Fallback to Home for unknown routes
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue