Added quick action buttons to Clients page and Client Detail Page.
This commit is contained in:
rocketdebris
parent
e615b84728
commit
181db2c4e6
@ -254,7 +254,7 @@ defineExpose({
|
||||
background: var(--surface-card);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--surface-border);
|
||||
/*border: 1px solid var(--surface-border);*/
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,22 @@
|
||||
<template>
|
||||
<div class="overview-container">
|
||||
<template v-if="!editMode && !isNew">
|
||||
<Button
|
||||
@click="toggleEditMode"
|
||||
icon="pi pi-pencil"
|
||||
label="Edit Information"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
/>
|
||||
<div class=quick-action-bar>
|
||||
<Button
|
||||
@click="toggleEditMode"
|
||||
icon="pi pi-pencil"
|
||||
label="Edit Information"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
/>
|
||||
<Button
|
||||
@click="handleCreateEstimate"
|
||||
icon=""
|
||||
label="Create Estimate"
|
||||
size="small"
|
||||
severity="secondary"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="status-cards">
|
||||
<template v-if="isNew || editMode">
|
||||
@ -43,7 +52,7 @@
|
||||
<!-- Display Mode (existing client view) -->
|
||||
<template v-else>
|
||||
<!-- Address Info Card -->
|
||||
<div class="info-card" v-if="selectedAddressData">
|
||||
<div class="info-card w-half" v-if="selectedAddressData">
|
||||
<h3>General Information</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item full-width">
|
||||
@ -70,7 +79,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Client Basic Info Card -->
|
||||
<div class="info-card">
|
||||
<div class="info-card w-half">
|
||||
<h3>Contact Information</h3>
|
||||
<template v-if="contactsForAddress.length > 0">
|
||||
<div class="info-grid">
|
||||
@ -122,7 +131,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Financials At a Glance -->
|
||||
<div class="info-card">
|
||||
<div class="info-card w-half">
|
||||
<h3>Open Balances</h3>
|
||||
<span>$3200.00</span>
|
||||
<button class="sidebar-button" @click="navigateTo('/invoices')">
|
||||
@ -150,7 +159,7 @@
|
||||
|
||||
<div class="status-cards">
|
||||
<!-- Location Map (only for existing clients) -->
|
||||
<div class="map-card" v-if="!isNew && !editMode">
|
||||
<div class="map-card w-half" v-if="!isNew && !editMode">
|
||||
<h3>Location</h3>
|
||||
<LeafletMap
|
||||
:latitude="latitude"
|
||||
@ -168,7 +177,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Client History -->
|
||||
<div class="info-card">
|
||||
<div class="info-card w-half">
|
||||
<History/>
|
||||
</div>
|
||||
</div>
|
||||
@ -538,6 +547,12 @@ const handleNewContactToggle = (isNewContact) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateEstimate = () => {
|
||||
if (props.selectedAddress) {
|
||||
router.push(`/estimate?new=true&address=${props.selectedAddress}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Edit mode methods
|
||||
const toggleEditMode = () => {
|
||||
showEditConfirmDialog.value = true;
|
||||
@ -631,8 +646,15 @@ const handleCancel = () => {
|
||||
.overview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
/*padding: 1rem;*/
|
||||
}
|
||||
|
||||
.quick-action-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.info-card,
|
||||
@ -643,6 +665,13 @@ const handleCancel = () => {
|
||||
border: 1px solid var(--surface-border);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.info-card {
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
|
||||
.map-card {
|
||||
flex: 1 1 600px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
@ -664,9 +693,8 @@ const handleCancel = () => {
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
@ -772,6 +800,10 @@ const handleCancel = () => {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/*.w-half {
|
||||
width: 45% !important;
|
||||
}*/
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.overview-container {
|
||||
padding: 0.5rem;
|
||||
|
||||
@ -132,6 +132,13 @@ const columns = [
|
||||
filterInputId: "propertySearchInput",
|
||||
},
|
||||
//{
|
||||
// label: "Create Estimate",
|
||||
// fieldName: "createEstimate",
|
||||
// type: "status-button",
|
||||
// buttonVariant: "outlined",
|
||||
// onStatusClick: (status, rowData) => handleEstimateClick(status, rowData),
|
||||
//},
|
||||
//{
|
||||
// label: "Appt. Scheduled",
|
||||
// fieldName: "appointmentScheduledStatus",
|
||||
// type: "status-button",
|
||||
@ -184,6 +191,14 @@ const tableActions = [
|
||||
},
|
||||
// Global action - always available
|
||||
},
|
||||
{
|
||||
label: "Create Estimate",
|
||||
rowAction: true,
|
||||
action: (rowData) => {
|
||||
const address = encodeURIComponent(rowData.address);
|
||||
router.push(`/estimate?new=true&address=${address}`);
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: "Export Selected",
|
||||
// action: (selectedRows) => {
|
||||
@ -284,13 +299,7 @@ const handleAppointmentClick = (status, rowData) => {
|
||||
|
||||
const handleEstimateClick = (status, rowData) => {
|
||||
const address = encodeURIComponent(rowData.address);
|
||||
if (status?.toLowerCase() === "not started") {
|
||||
// Navigate to create quotation/estimate
|
||||
router.push(`/estimate?new=true&address=${address}`);
|
||||
} else {
|
||||
// Navigate to view estimate details
|
||||
router.push('/estimate?address=' + address);
|
||||
}
|
||||
router.push(`/estimate?new=true&address=${address}`);
|
||||
};
|
||||
|
||||
const handlePaymentClick = (status, rowData) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user