Added the Invoice Modal.
This commit is contained in:
rocketdebris
parent
b5adab5786
commit
9033ae9d79
@ -171,6 +171,16 @@ def upsert_job(data):
|
||||
pass
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def upsert_invoice(data):
|
||||
pass
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def upsert_warranty(data):
|
||||
pass
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def upsert_client(data):
|
||||
data = json.loads(data)
|
||||
|
||||
@ -4,6 +4,7 @@ import SideBar from "./components/SideBar.vue";
|
||||
import CreateClientModal from "./components/modals/CreateClientModal.vue";
|
||||
import CreateEstimateModal from "./components/modals/CreateEstimateModal.vue";
|
||||
import CreateJobModal from "./components/modals/CreateJobModal.vue";
|
||||
import CreateInvoiceModal from "./components/modals/CreateInvoiceModal.vue";
|
||||
import GlobalLoadingOverlay from "./components/common/GlobalLoadingOverlay.vue";
|
||||
import ScrollPanel from "primevue/scrollpanel";
|
||||
</script>
|
||||
@ -30,6 +31,7 @@ import ScrollPanel from "primevue/scrollpanel";
|
||||
<CreateClientModal />
|
||||
<CreateEstimateModal />
|
||||
<CreateJobModal />
|
||||
<CreateInvoiceModal />
|
||||
|
||||
<!-- Global Loading Overlay -->
|
||||
<GlobalLoadingOverlay />
|
||||
|
||||
@ -5,6 +5,7 @@ const FRAPPE_PROXY_METHOD = "custom_ui.api.proxy.request";
|
||||
const FRAPPE_UPSERT_CLIENT_METHOD = "custom_ui.api.db.upsert_client";
|
||||
const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.upsert_estimate";
|
||||
const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.upsert_job";
|
||||
const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.upsert_invoice";
|
||||
|
||||
class Api {
|
||||
static async request(frappeMethod, args = {}) {
|
||||
@ -425,6 +426,13 @@ class Api {
|
||||
return result
|
||||
}
|
||||
|
||||
static async createInvoice(invoiceData) {
|
||||
const payload = DataUtils.toSnakeCaseObject(invoiceData);
|
||||
const result = await this.request(FRAPPE_UPSERT_INVOICE_METHOD, { data: payload });
|
||||
console.log("DEBUG: API - Created Invoice: ", result);
|
||||
return result
|
||||
}
|
||||
|
||||
// External API calls
|
||||
|
||||
/**
|
||||
|
||||
@ -55,7 +55,7 @@ const createButtons = ref([
|
||||
{
|
||||
label: "Invoice",
|
||||
command: () => {
|
||||
alert("Create Invoice clicked");
|
||||
modalStore.openModal("createInvoice");
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
398
frontend/src/components/modals/CreateInvoiceModal.vue
Normal file
398
frontend/src/components/modals/CreateInvoiceModal.vue
Normal file
@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<Modal
|
||||
:visible="isVisible"
|
||||
:options="modalOptions"
|
||||
@update:visible="handleVisibilityChange"
|
||||
@close="handleClose"
|
||||
>
|
||||
<template #title> Create New Invoice </template>
|
||||
|
||||
<!-- Status Message -->
|
||||
<div v-if="statusMessage" class="status-message" :class="`status-${statusType}`">
|
||||
<i :class="getStatusIcon(statusType)" class="status-icon"></i>
|
||||
{{ statusMessage }}
|
||||
</div>
|
||||
|
||||
<Form
|
||||
ref="formRef"
|
||||
:fields="formFields"
|
||||
:form-data="formData"
|
||||
:show-cancel-button="true"
|
||||
:validate-on-change="false"
|
||||
:validate-on-blur="true"
|
||||
:validate-on-submit="true"
|
||||
:loading="isSubmitting"
|
||||
:disable-on-loading="true"
|
||||
submit-button-text="Create Invoice"
|
||||
cancel-button-text="Cancel"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from "vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Modal from "@/components/common/Modal.vue";
|
||||
import Form from "@/components/common/Form.vue";
|
||||
import Api from "@/api";
|
||||
import DataUtils from "../../utils";
|
||||
|
||||
const modalStore = useModalStore();
|
||||
|
||||
// Modal visibility computed property
|
||||
const isVisible = computed(() => modalStore.isModalOpen("createInvoice"));
|
||||
const customerNames = ref([]);
|
||||
const companyNames = ref([]);
|
||||
// Form reference for controlling its state
|
||||
const formRef = ref(null);
|
||||
// Form data
|
||||
const formData = reactive({
|
||||
customerName: "",
|
||||
address: "",
|
||||
company: "",
|
||||
dueDate: "",
|
||||
});
|
||||
|
||||
// Status message for user feedback
|
||||
const statusMessage = ref("");
|
||||
const statusType = ref("info"); // 'info', 'warning', 'error', 'success'
|
||||
|
||||
// Modal configuration
|
||||
const modalOptions = {
|
||||
maxWidth: "600px",
|
||||
persistent: false,
|
||||
showActions: false,
|
||||
title: "Create New Invoice",
|
||||
overlayColor: "rgb(59, 130, 246)", // Blue background
|
||||
overlayOpacity: 0.8,
|
||||
cardClass: "create-invoice-modal",
|
||||
closeOnOutsideClick: true,
|
||||
closeOnEscape: true,
|
||||
};
|
||||
|
||||
// Form field definitions
|
||||
const formFields = computed(() => [
|
||||
{
|
||||
name: "customerName",
|
||||
label: "Client Name",
|
||||
type: "autocomplete", // Changed from 'select' to 'autocomplete'
|
||||
required: true,
|
||||
placeholder: "Type or select client name",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
options: customerNames.value, // Direct array of strings
|
||||
forceSelection: false, // Allow custom entries not in the list
|
||||
dropdown: true,
|
||||
// For string arrays, don't set optionLabel at all
|
||||
helpText: "Select an existing client or enter a new client name",
|
||||
// Let the Form component handle filtering automatically
|
||||
},
|
||||
{
|
||||
name: "address",
|
||||
label: "Address",
|
||||
type: "text",
|
||||
required: true,
|
||||
placeholder: "Enter street address",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
},
|
||||
{
|
||||
name: "company",
|
||||
label: "Company",
|
||||
type: "autocomplete",
|
||||
required: true,
|
||||
placeholder: "Type or select Company",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
options: companyNames.value,
|
||||
forceSelection: true,
|
||||
dropdown: true,
|
||||
helpText: "Select the company associated with this Invoice."
|
||||
},
|
||||
{
|
||||
name: "dueDate",
|
||||
label: "Due Date",
|
||||
type: "date",
|
||||
required: true,
|
||||
cols: 12,
|
||||
md: 6
|
||||
}
|
||||
]);
|
||||
|
||||
// Handle zipcode change and API lookup
|
||||
async function handleZipcodeChange(value, fieldName, currentFormData) {
|
||||
if (value.length < 5) {
|
||||
return;
|
||||
}
|
||||
if (fieldName === "pincode" && value && value.length >= 5) {
|
||||
// Only process if it's a valid zipcode format
|
||||
const zipcode = value.replace(/\D/g, "").substring(0, 5);
|
||||
|
||||
if (zipcode.length === 5) {
|
||||
isLoadingZipcode.value = true;
|
||||
|
||||
try {
|
||||
const places = await Api.getCityStateByZip(zipcode);
|
||||
console.log("API response for zipcode", zipcode, ":", places);
|
||||
|
||||
if (places && places.length > 0) {
|
||||
availableCities.value = places;
|
||||
|
||||
// Update the reactive formData directly to ensure reactivity
|
||||
// Use "state abbreviation" instead of "state" for proper abbreviation format
|
||||
const stateValue = places[0]["state abbreviation"] || places[0].state;
|
||||
console.log("Setting state to:", stateValue, "from place object:", places[0]);
|
||||
formData.state = stateValue;
|
||||
|
||||
// If only one city, auto-select it
|
||||
if (places.length === 1) {
|
||||
formData.city = places[0]["place name"];
|
||||
showStatusMessage(
|
||||
`Location found: ${places[0]["place name"]}, ${places[0]["state abbreviation"] || places[0].state}`,
|
||||
"success",
|
||||
);
|
||||
} else {
|
||||
// Clear city selection if multiple cities
|
||||
formData.city = "";
|
||||
showStatusMessage(
|
||||
`Found ${places.length} cities for this zip code. Please select one.`,
|
||||
"info",
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// No results found - enable manual entry
|
||||
handleApiFailure("No location data found for this zip code");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching city/state data:", error);
|
||||
|
||||
// Check if it's a network/CORS error
|
||||
if (error.code === "ERR_NETWORK" || error.message.includes("Network Error")) {
|
||||
handleApiFailure(
|
||||
"Unable to fetch location data. Please enter city and state manually.",
|
||||
);
|
||||
} else {
|
||||
handleApiFailure(
|
||||
"Location lookup failed. Please enter city and state manually.",
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
isLoadingZipcode.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle API failure by enabling manual entry
|
||||
function handleApiFailure(message) {
|
||||
console.warn("Zipcode API failed:", message);
|
||||
|
||||
// Clear existing data
|
||||
availableCities.value = [];
|
||||
formData.city = "";
|
||||
formData.state = "";
|
||||
|
||||
// Show user-friendly message
|
||||
showStatusMessage(message, "warning");
|
||||
}
|
||||
|
||||
// Show status message to user
|
||||
function showStatusMessage(message, type = "info") {
|
||||
statusMessage.value = message;
|
||||
statusType.value = type;
|
||||
|
||||
// Auto-clear message after 5 seconds
|
||||
setTimeout(() => {
|
||||
statusMessage.value = "";
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Get icon class for status messages
|
||||
function getStatusIcon(type) {
|
||||
switch (type) {
|
||||
case "warning":
|
||||
return "pi pi-exclamation-triangle";
|
||||
case "error":
|
||||
return "pi pi-times-circle";
|
||||
case "success":
|
||||
return "pi pi-check-circle";
|
||||
default:
|
||||
return "pi pi-info-circle";
|
||||
}
|
||||
}
|
||||
|
||||
// Submission state to prevent double submission
|
||||
const isSubmitting = ref(false);
|
||||
|
||||
// Handle form submission
|
||||
async function handleSubmit(formDataFromEvent) {
|
||||
// Prevent double submission with detailed logging
|
||||
if (isSubmitting.value) {
|
||||
console.warn(
|
||||
"CreateInvoiceModal: Form submission already in progress, ignoring duplicate submission",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(
|
||||
"CreateInvoiceModal: Form submission started with data:",
|
||||
formDataFromEvent || formData,
|
||||
);
|
||||
|
||||
isSubmitting.value = true;
|
||||
|
||||
try {
|
||||
showStatusMessage("Creating invoice...", "info");
|
||||
|
||||
// Use the form data from the event if provided, otherwise use reactive formData
|
||||
const dataToSubmit = formDataFromEvent || formData;
|
||||
|
||||
console.log("CreateInvoiceModal: Calling API with data:", dataToSubmit);
|
||||
|
||||
// Call API to create invoice
|
||||
const response = await Api.createInvoice(dataToSubmit);
|
||||
|
||||
console.log("CreateInvoiceModal: API response received:", response);
|
||||
|
||||
if (response && response.success) {
|
||||
showStatusMessage("Invoice created successfully!", "success");
|
||||
|
||||
// Close modal after a brief delay
|
||||
setTimeout(() => {
|
||||
handleClose();
|
||||
}, 1500);
|
||||
} else {
|
||||
throw new Error(response?.message || "Failed to create invoice");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("CreateInvoiceModal: Error creating invoice:", error);
|
||||
showStatusMessage(error.message || "Failed to create invoice. Please try again.", "error");
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
// Also reset the Form component's internal submission state
|
||||
if (formRef.value && formRef.value.stopLoading) {
|
||||
formRef.value.stopLoading();
|
||||
}
|
||||
console.log("CreateInvoiceModal: Form submission completed, isSubmitting reset to false");
|
||||
}
|
||||
}
|
||||
|
||||
// Handle cancel action
|
||||
function handleCancel() {
|
||||
handleClose();
|
||||
}
|
||||
|
||||
// Handle modal close
|
||||
function handleClose() {
|
||||
modalStore.closeModal("createInvoice");
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// Handle visibility changes
|
||||
function handleVisibilityChange(visible) {
|
||||
if (!visible) {
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
|
||||
// Reset form data
|
||||
function resetForm() {
|
||||
Object.keys(formData).forEach((key) => {
|
||||
formData[key] = "";
|
||||
});
|
||||
availableCities.value = [];
|
||||
isLoadingZipcode.value = false;
|
||||
statusMessage.value = "";
|
||||
statusType.value = "info";
|
||||
}
|
||||
|
||||
// Initialize modal in store when component mounts
|
||||
modalStore.initializeModal("createInvoice", {
|
||||
closeOnEscape: true,
|
||||
closeOnOutsideClick: true,
|
||||
});
|
||||
|
||||
watch(isVisible, async () => {
|
||||
if (isVisible.value) {
|
||||
try {
|
||||
const names = await Api.getCustomerNames();
|
||||
customerNames.value = names;
|
||||
} catch (error) {
|
||||
console.error("Error loading customer names:", error);
|
||||
}
|
||||
try {
|
||||
const names = await Api.getCompanyNames();
|
||||
companyNames.value = names;
|
||||
} catch (error) {
|
||||
console.error("Error loading company names:", error);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.create-invoice-modal {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Custom styling for the modal content */
|
||||
:deep(.modal-header) {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.modal-title) {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
:deep(.modal-close-btn) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.modal-content) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Status message styling */
|
||||
.status-message {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
background-color: #e3f2fd;
|
||||
color: #1565c0;
|
||||
border-left-color: #2196f3;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #fff3e0;
|
||||
color: #ef6c00;
|
||||
border-left-color: #ff9800;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
border-left-color: #f44336;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: #e8f5e8;
|
||||
color: #2e7d32;
|
||||
border-left-color: #4caf50;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user