estimate handling, percentage discounts
This commit is contained in:
parent
9c837deb52
commit
b8c264f779
10 changed files with 1365 additions and 31 deletions
|
|
@ -77,9 +77,53 @@
|
|||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
@input="updateTotal"
|
||||
class="qty-input"
|
||||
/>
|
||||
<span>Price: ${{ (item.standardRate || 0).toFixed(2) }}</span>
|
||||
<span>Total: ${{ ((item.qty || 0) * (item.standardRate || 0)).toFixed(2) }}</span>
|
||||
<div class="discount-container">
|
||||
<div class="discount-input-wrapper">
|
||||
<InputNumber
|
||||
v-if="item.discountType === 'currency'"
|
||||
v-model="item.discountAmount"
|
||||
mode="currency"
|
||||
currency="USD"
|
||||
locale="en-US"
|
||||
:min="0"
|
||||
:disabled="!isEditable"
|
||||
@input="updateTotal"
|
||||
placeholder="$0.00"
|
||||
class="discount-input"
|
||||
/>
|
||||
<InputNumber
|
||||
v-else
|
||||
v-model="item.discountPercentage"
|
||||
suffix="%"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:disabled="!isEditable"
|
||||
@input="updateTotal"
|
||||
placeholder="0%"
|
||||
class="discount-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="discount-toggle">
|
||||
<Button
|
||||
icon="pi pi-dollar"
|
||||
class="p-button-sm p-button-outlined"
|
||||
:class="{ 'p-button-secondary': item.discountType !== 'currency' }"
|
||||
@click="toggleDiscountType(item, 'currency')"
|
||||
:disabled="!isEditable"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-percentage"
|
||||
class="p-button-sm p-button-outlined"
|
||||
:class="{ 'p-button-secondary': item.discountType !== 'percentage' }"
|
||||
@click="toggleDiscountType(item, 'percentage')"
|
||||
:disabled="!isEditable"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span>Total: ${{ ((item.qty || 0) * (item.standardRate || 0) - (item.discountType === 'percentage' ? ((item.qty || 0) * (item.standardRate || 0) * ((item.discountPercentage || 0) / 100)) : (item.discountAmount || 0))).toFixed(2) }}</span>
|
||||
<Button
|
||||
v-if="isEditable"
|
||||
icon="pi pi-trash"
|
||||
|
|
@ -259,6 +303,7 @@ const notificationStore = useNotificationStore();
|
|||
const company = useCompanyStore();
|
||||
|
||||
const addressQuery = computed(() => route.query.address || "");
|
||||
const nameQuery = computed(() => route.query.name || "");
|
||||
const isNew = computed(() => route.query.new === "true");
|
||||
|
||||
const isSubmitting = ref(false);
|
||||
|
|
@ -353,7 +398,7 @@ const selectAddress = async (address) => {
|
|||
const addItem = (item) => {
|
||||
const existing = selectedItems.value.find((i) => i.itemCode === item.itemCode);
|
||||
if (!existing) {
|
||||
selectedItems.value.push({ ...item, qty: 1 });
|
||||
selectedItems.value.push({ ...item, qty: 1, discountAmount: null, discountPercentage: null, discountType: 'currency' });
|
||||
}
|
||||
showAddItemModal.value = false;
|
||||
};
|
||||
|
|
@ -366,7 +411,7 @@ const addSelectedItems = (selectedRows) => {
|
|||
existing.qty += 1;
|
||||
} else {
|
||||
// Add new item with quantity 1
|
||||
selectedItems.value.push({ ...item, qty: 1 });
|
||||
selectedItems.value.push({ ...item, qty: 1, discountAmount: null, discountPercentage: null, discountType: 'currency' });
|
||||
}
|
||||
});
|
||||
showAddItemModal.value = false;
|
||||
|
|
@ -394,7 +439,13 @@ const saveDraft = async () => {
|
|||
const data = {
|
||||
addressName: formData.addressName,
|
||||
contactName: selectedContact.value.name,
|
||||
items: selectedItems.value.map((i) => ({ itemCode: i.itemCode, qty: i.qty })),
|
||||
customer: selectedAddress.value?.customer?.name,
|
||||
items: selectedItems.value.map((i) => ({
|
||||
itemCode: i.itemCode,
|
||||
qty: i.qty,
|
||||
discountAmount: i.discountType === 'currency' ? i.discountAmount : 0,
|
||||
discountPercentage: i.discountType === 'percentage' ? i.discountPercentage : 0
|
||||
})),
|
||||
estimateName: formData.estimateName,
|
||||
requiresHalfPayment: formData.requiresHalfPayment,
|
||||
company: company.currentCompany
|
||||
|
|
@ -406,7 +457,7 @@ const saveDraft = async () => {
|
|||
);
|
||||
|
||||
// Redirect to view mode (remove new param)
|
||||
router.push(`/estimate?address=${encodeURIComponent(formData.address)}`);
|
||||
router.push(`/estimate?name=${encodeURIComponent(estimate.value.name)}`);
|
||||
} catch (error) {
|
||||
console.error("Error saving estimate:", error);
|
||||
notificationStore.addNotification("Failed to save estimate", "error");
|
||||
|
|
@ -456,6 +507,16 @@ const confirmAndSendEstimate = async () => {
|
|||
estimate.value = updatedEstimate;
|
||||
};
|
||||
|
||||
const toggleDiscountType = (item, type) => {
|
||||
item.discountType = type;
|
||||
if (type === 'currency') {
|
||||
item.discountPercentage = null;
|
||||
} else {
|
||||
item.discountAmount = null;
|
||||
}
|
||||
updateTotal();
|
||||
};
|
||||
|
||||
const tableActions = [
|
||||
{
|
||||
label: "Add Selected Items",
|
||||
|
|
@ -470,7 +531,13 @@ const totalCost = computed(() => {
|
|||
return (selectedItems.value || []).reduce((sum, item) => {
|
||||
const qty = item.qty || 0;
|
||||
const rate = item.standardRate || 0;
|
||||
return sum + qty * rate;
|
||||
let discount = 0;
|
||||
if (item.discountType === 'percentage') {
|
||||
discount = (qty * rate) * ((item.discountPercentage || 0) / 100);
|
||||
} else {
|
||||
discount = item.discountAmount || 0;
|
||||
}
|
||||
return sum + (qty * rate) - discount;
|
||||
}, 0);
|
||||
});
|
||||
|
||||
|
|
@ -499,7 +566,7 @@ watch(
|
|||
() => route.query,
|
||||
async (newQuery, oldQuery) => {
|
||||
// If 'new' param or address changed, reload component state
|
||||
if (newQuery.new !== oldQuery.new || newQuery.address !== oldQuery.address) {
|
||||
if (newQuery.new !== oldQuery.new || newQuery.address !== oldQuery.address || newQuery.name !== oldQuery.name) {
|
||||
const duplicating = isDuplicating.value;
|
||||
const preservedItems = duplicating
|
||||
? (duplicatedItems.value || []).map((item) => ({ ...item }))
|
||||
|
|
@ -527,29 +594,45 @@ watch(
|
|||
// Reload data based on new query params
|
||||
const newIsNew = newQuery.new === "true";
|
||||
const newAddressQuery = newQuery.address;
|
||||
const newNameQuery = newQuery.name;
|
||||
|
||||
if (newAddressQuery && newIsNew) {
|
||||
// Creating new estimate - pre-fill address
|
||||
await selectAddress(newAddressQuery);
|
||||
} else if (newAddressQuery && !newIsNew) {
|
||||
} else if ((newNameQuery || newAddressQuery) && !newIsNew) {
|
||||
// Viewing existing estimate - load and populate all fields
|
||||
try {
|
||||
estimate.value = await Api.getEstimateFromAddress(newAddressQuery);
|
||||
if (newNameQuery) {
|
||||
estimate.value = await Api.getEstimate(newNameQuery);
|
||||
} else {
|
||||
estimate.value = await Api.getEstimateFromAddress(newAddressQuery);
|
||||
}
|
||||
|
||||
if (estimate.value) {
|
||||
formData.estimateName = estimate.value.name;
|
||||
await selectAddress(newAddressQuery);
|
||||
formData.contact = estimate.value.partyName;
|
||||
selectedContact.value = contacts.value.find((c) => c.name === estimate.value.partyName) || null;
|
||||
const fullAddress = estimate.value.fullAddress || estimate.value.full_address;
|
||||
if (fullAddress) {
|
||||
await selectAddress(fullAddress);
|
||||
} else if (newAddressQuery) {
|
||||
await selectAddress(newAddressQuery);
|
||||
}
|
||||
|
||||
formData.contact = estimate.value.contactPerson;
|
||||
selectedContact.value = contacts.value.find((c) => c.name === estimate.value.contactPerson) || null;
|
||||
|
||||
if (estimate.value.items && estimate.value.items.length > 0) {
|
||||
selectedItems.value = estimate.value.items.map(item => {
|
||||
const fullItem = quotationItems.value.find(qi => qi.itemCode === item.itemCode);
|
||||
const discountPercentage = item.discountPercentage || item.discount_percentage || 0;
|
||||
const discountAmount = item.discountAmount || item.discount_amount || 0;
|
||||
return {
|
||||
itemCode: item.itemCode,
|
||||
itemName: item.itemName,
|
||||
qty: item.qty,
|
||||
standardRate: item.rate || fullItem?.standardRate || 0,
|
||||
discountAmount: discountAmount === 0 ? null : discountAmount,
|
||||
discountPercentage: discountPercentage === 0 ? null : discountPercentage,
|
||||
discountType: discountPercentage > 0 ? 'percentage' : 'currency'
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -579,31 +662,46 @@ onMounted(async () => {
|
|||
if (addressQuery.value && isNew.value) {
|
||||
// Creating new estimate - pre-fill address
|
||||
await selectAddress(addressQuery.value);
|
||||
} else if (addressQuery.value && !isNew.value) {
|
||||
} else if ((nameQuery.value || addressQuery.value) && !isNew.value) {
|
||||
// Viewing existing estimate - load and populate all fields
|
||||
try {
|
||||
estimate.value = await Api.getEstimateFromAddress(addressQuery.value);
|
||||
if (nameQuery.value) {
|
||||
estimate.value = await Api.getEstimate(nameQuery.value);
|
||||
} else {
|
||||
estimate.value = await Api.getEstimateFromAddress(addressQuery.value);
|
||||
}
|
||||
console.log("DEBUG: Loaded estimate:", estimate.value);
|
||||
|
||||
if (estimate.value) {
|
||||
// Set the estimate name for upserting
|
||||
formData.estimateName = estimate.value.name;
|
||||
|
||||
await selectAddress(addressQuery.value);
|
||||
const fullAddress = estimate.value.fullAddress || estimate.value.full_address;
|
||||
if (fullAddress) {
|
||||
await selectAddress(fullAddress);
|
||||
} else if (addressQuery.value) {
|
||||
await selectAddress(addressQuery.value);
|
||||
}
|
||||
|
||||
// Set the contact from the estimate
|
||||
formData.contact = estimate.value.partyName;
|
||||
selectedContact.value = contacts.value.find((c) => c.name === estimate.value.partyName) || null;
|
||||
formData.contact = estimate.value.contactPerson;
|
||||
selectedContact.value = contacts.value.find((c) => c.name === estimate.value.contactPerson) || null;
|
||||
|
||||
// Populate items from the estimate
|
||||
if (estimate.value.items && estimate.value.items.length > 0) {
|
||||
selectedItems.value = estimate.value.items.map(item => {
|
||||
// Find the full item details from quotationItems
|
||||
const fullItem = quotationItems.value.find(qi => qi.itemCode === item.itemCode);
|
||||
const discountPercentage = item.discountPercentage || item.discount_percentage || 0;
|
||||
const discountAmount = item.discountAmount || item.discount_amount || 0;
|
||||
return {
|
||||
itemCode: item.itemCode,
|
||||
itemName: item.itemName,
|
||||
qty: item.qty,
|
||||
standardRate: item.rate || fullItem?.standardRate || 0,
|
||||
discountAmount: discountAmount === 0 ? null : discountAmount,
|
||||
discountPercentage: discountPercentage === 0 ? null : discountPercentage,
|
||||
discountType: discountPercentage > 0 ? 'percentage' : 'currency'
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -672,7 +770,7 @@ onMounted(async () => {
|
|||
|
||||
.item-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr auto auto auto;
|
||||
grid-template-columns: 3fr 140px 1.5fr 220px 1.5fr auto;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -681,9 +779,54 @@ onMounted(async () => {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.qty-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qty-input :deep(.p-inputtext) {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.qty-input :deep(.p-button) {
|
||||
width: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.discount-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.discount-input-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.discount-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.discount-input :deep(.p-inputtext) {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.discount-toggle {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.discount-toggle .p-button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
/* When viewing (not editing), adjust grid to remove delete button column */
|
||||
.estimate-page:has(h2:contains("View")) .item-row {
|
||||
grid-template-columns: 2fr 1fr auto auto;
|
||||
grid-template-columns: 3fr 140px 1.5fr 220px 1.5fr;
|
||||
}
|
||||
|
||||
.total-section {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue