update with main
This commit is contained in:
parent
5e192a61e1
commit
ba3e2a4d8e
29 changed files with 51749 additions and 139 deletions
|
|
@ -10,6 +10,7 @@ const FRAPPE_GET_INCOMPLETE_BIDS_METHOD = "custom_ui.api.db.on_site_meetings.get
|
|||
// Estimate methods
|
||||
const FRAPPE_UPSERT_ESTIMATE_METHOD = "custom_ui.api.db.estimates.upsert_estimate";
|
||||
const FRAPPE_GET_ESTIMATES_METHOD = "custom_ui.api.db.estimates.get_estimate_table_data";
|
||||
const FRAPPE_GET_ESTIMATES_TABLE_DATA_V2_METHOD = "custom_ui.api.db.estimates.get_estimate_table_data_v2";
|
||||
const FRAPPE_GET_ESTIMATE_BY_ADDRESS_METHOD = "custom_ui.api.db.estimates.get_estimate_from_address";
|
||||
const FRAPPE_SEND_ESTIMATE_EMAIL_METHOD = "custom_ui.api.db.estimates.send_estimate_email";
|
||||
const FRAPPE_LOCK_ESTIMATE_METHOD = "custom_ui.api.db.estimates.lock_estimate";
|
||||
|
|
@ -47,7 +48,9 @@ const FRAPPE_GET_WARRANTY_CLAIMS_METHOD = "custom_ui.api.db.warranties.get_warra
|
|||
// On-Site Meeting methods
|
||||
const FRAPPE_GET_WEEK_ONSITE_MEETINGS_METHOD =
|
||||
"custom_ui.api.db.bid_meetings.get_week_bid_meetings";
|
||||
const FRAPPE_GET_BID_MEETING_NOTE_FORM_METHOD = "custom_ui.api.db.bid_meetings.get_bid_meeting_note_form";
|
||||
const FRAPPE_GET_ONSITE_MEETINGS_METHOD = "custom_ui.api.db.bid_meetings.get_bid_meetings";
|
||||
const FRAPPE_SUBMIT_BID_MEETING_NOTE_FORM_METHOD = "custom_ui.api.db.bid_meetings.submit_bid_meeting_note_form";
|
||||
// Address methods
|
||||
const FRAPPE_GET_ADDRESSES_METHOD = "custom_ui.api.db.addresses.get_addresses";
|
||||
// Client methods
|
||||
|
|
@ -62,6 +65,10 @@ const FRAPPE_GET_EMPLOYEES_METHOD = "custom_ui.api.db.employees.get_employees";
|
|||
const FRAPPE_GET_EMPLOYEES_ORGANIZED_METHOD = "custom_ui.api.db.employees.get_employees_organized";
|
||||
// Other methods
|
||||
const FRAPPE_GET_WEEK_HOLIDAYS_METHOD = "custom_ui.api.db.general.get_week_holidays";
|
||||
const FRAPPE_GET_DOC_LIST_METHOD = "custom_ui.api.db.general.get_doc_list";
|
||||
// Service Appointment methods
|
||||
const FRAPPE_GET_SERVICE_APPOINTMENTS_METHOD = "custom_ui.api.db.service_appointments.get_service_appointments";
|
||||
const FRAPPE_UPDATE_SERVICE_APPOINTMENT_SCHEDULED_DATES_METHOD = "custom_ui.api.db.service_appointments.update_service_appointment_scheduled_dates";
|
||||
class Api {
|
||||
// ============================================================================
|
||||
// CORE REQUEST METHOPD
|
||||
|
|
@ -166,6 +173,18 @@ class Api {
|
|||
// ON-SITE MEETING METHODS
|
||||
// ============================================================================
|
||||
|
||||
static async getBidMeetingNoteForm(projectTemplate) {
|
||||
return await this.request(FRAPPE_GET_BID_MEETING_NOTE_FORM_METHOD, { projectTemplate });
|
||||
}
|
||||
|
||||
static async submitBidMeetingNoteForm(data) {
|
||||
return await this.request(FRAPPE_SUBMIT_BID_MEETING_NOTE_FORM_METHOD, {
|
||||
bidMeeting: data.bidMeeting,
|
||||
projectTemplate: data.projectTemplate,
|
||||
formTemplate: data.formTemplate,
|
||||
fields: data.fields});
|
||||
}
|
||||
|
||||
static async getUnscheduledBidMeetings(company) {
|
||||
return await this.request(
|
||||
"custom_ui.api.db.bid_meetings.get_unscheduled_bid_meetings",
|
||||
|
|
@ -244,7 +263,7 @@ class Api {
|
|||
|
||||
console.log("DEBUG: API - Sending estimate options to backend:", page, pageSize, filters, sorting);
|
||||
|
||||
const result = await this.request(FRAPPE_GET_ESTIMATES_METHOD, { page, pageSize, filters, sorting});
|
||||
const result = await this.request(FRAPPE_GET_ESTIMATES_TABLE_DATA_V2_METHOD, { page, pageSize, filters, sorting});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
|
@ -425,6 +444,25 @@ class Api {
|
|||
return result;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SERVICE APPOINTMENT METHODS
|
||||
// ============================================================================
|
||||
|
||||
static async getServiceAppointments(companies = [], filters = {}) {
|
||||
return await this.request(FRAPPE_GET_SERVICE_APPOINTMENTS_METHOD, { companies, filters });
|
||||
}
|
||||
|
||||
static async updateServiceAppointmentScheduledDates(serviceAppointmentName, startDate, endDate, crewLeadName, startTime = null, endTime = null) {
|
||||
return await this.request(FRAPPE_UPDATE_SERVICE_APPOINTMENT_SCHEDULED_DATES_METHOD, {
|
||||
serviceAppointmentName,
|
||||
startDate,
|
||||
endDate,
|
||||
crewLeadName,
|
||||
startTime,
|
||||
endTime
|
||||
})
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// TASK METHODS
|
||||
// ============================================================================
|
||||
|
|
@ -689,20 +727,21 @@ class Api {
|
|||
*/
|
||||
static async getDocsList(
|
||||
doctype,
|
||||
fields = [],
|
||||
fields = ["*"],
|
||||
filters = {},
|
||||
page = 0,
|
||||
start = 0,
|
||||
pageLength = 0,
|
||||
pluck = null,
|
||||
) {
|
||||
const docs = await frappe.db.get_list(doctype, {
|
||||
fields,
|
||||
filters,
|
||||
start: start,
|
||||
limit: pageLength,
|
||||
});
|
||||
const docs = await this.request(
|
||||
FRAPPE_GET_DOC_LIST_METHOD,
|
||||
{
|
||||
doctype,
|
||||
fields,
|
||||
filters,
|
||||
pluck,
|
||||
}
|
||||
);
|
||||
console.log(
|
||||
`DEBUG: API - Fetched ${doctype} list (page ${page + 1}, start ${start}): `,
|
||||
`DEBUG: API - Fetched ${doctype} list: `,
|
||||
docs,
|
||||
);
|
||||
return docs;
|
||||
|
|
|
|||
|
|
@ -26,9 +26,37 @@
|
|||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
<div v-else class="coming-soon">
|
||||
<p>Calendar feature coming soon!</p>
|
||||
</div>
|
||||
<Tabs v-else value="0">
|
||||
<TabList>
|
||||
<Tab value="0">Bids</Tab>
|
||||
<Tab value="1">Projects</Tab>
|
||||
<Tab value="2">Service</Tab>
|
||||
<Tab value="3">Warranties</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel header="Bids" value="0">
|
||||
<ScheduleBid />
|
||||
</TabPanel>
|
||||
<TabPanel header="Projects" value="1">
|
||||
<div class="coming-soon">
|
||||
<p>Calendar Coming Soon!</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Service" value="2">
|
||||
<div class="coming-soon">
|
||||
<p>Calendar Coming Soon!</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Service" value="2">
|
||||
<div class="coming-soon">
|
||||
<p>Calendar Coming Soon!</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Warranties" value="3">
|
||||
<p>Calendar Coming Soon!</p>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -206,6 +206,7 @@
|
|||
:meeting="selectedMeeting"
|
||||
@close="closeMeetingModal"
|
||||
@meeting-updated="handleMeetingUpdated"
|
||||
@complete-meeting="openNoteForm"
|
||||
/>
|
||||
|
||||
<!-- New Meeting Modal -->
|
||||
|
|
@ -216,6 +217,17 @@
|
|||
@confirm="handleNewMeetingConfirm"
|
||||
@cancel="handleNewMeetingCancel"
|
||||
/>
|
||||
|
||||
<!-- Bid Meeting Note Form Modal -->
|
||||
<BidMeetingNoteForm
|
||||
v-if="selectedMeetingForNotes"
|
||||
:visible="showNoteFormModal"
|
||||
@update:visible="showNoteFormModal = $event"
|
||||
:bid-meeting-name="selectedMeetingForNotes.name"
|
||||
:project-template="selectedMeetingForNotes.projectTemplate"
|
||||
@submit="handleNoteFormSubmit"
|
||||
@cancel="handleNoteFormCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -224,6 +236,7 @@ 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 BidMeetingNoteForm from "../../modals/BidMeetingNoteForm.vue";
|
||||
import { useLoadingStore } from "../../../stores/loading";
|
||||
import { useNotificationStore } from "../../../stores/notifications-primevue";
|
||||
import { useCompanyStore } from "../../../stores/company";
|
||||
|
|
@ -251,6 +264,8 @@ const unscheduledMeetings = ref([]);
|
|||
const selectedMeeting = ref(null);
|
||||
const showMeetingModal = ref(false);
|
||||
const showNewMeetingModal = ref(false);
|
||||
const showNoteFormModal = ref(false);
|
||||
const selectedMeetingForNotes = ref(null);
|
||||
|
||||
// Drag and drop state
|
||||
const isDragOver = ref(false);
|
||||
|
|
@ -476,6 +491,63 @@ const handleMeetingUpdated = async () => {
|
|||
await loadUnscheduledMeetings();
|
||||
};
|
||||
|
||||
const openNoteForm = (meeting) => {
|
||||
// Verify meeting has required data
|
||||
if (!meeting || !meeting.name) {
|
||||
notificationStore.addNotification({
|
||||
type: "error",
|
||||
title: "Error",
|
||||
message: "Meeting information is incomplete",
|
||||
duration: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!meeting.projectTemplate) {
|
||||
notificationStore.addNotification({
|
||||
type: "error",
|
||||
title: "Missing Project Template",
|
||||
message: "This meeting does not have a project template assigned. Cannot open note form.",
|
||||
duration: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
selectedMeetingForNotes.value = meeting;
|
||||
showNoteFormModal.value = true;
|
||||
};
|
||||
|
||||
const handleNoteFormSubmit = async () => {
|
||||
// After successful submission, mark the meeting as completed
|
||||
try {
|
||||
loadingStore.setLoading(true);
|
||||
await Api.updateBidMeeting(selectedMeetingForNotes.value.name, {
|
||||
status: "Completed",
|
||||
});
|
||||
|
||||
notificationStore.addNotification({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Meeting marked as completed",
|
||||
duration: 5000,
|
||||
});
|
||||
|
||||
// Reload meetings
|
||||
await handleMeetingUpdated();
|
||||
} catch (error) {
|
||||
console.error("Error updating meeting status:", error);
|
||||
} finally {
|
||||
loadingStore.setLoading(false);
|
||||
showNoteFormModal.value = false;
|
||||
selectedMeetingForNotes.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleNoteFormCancel = () => {
|
||||
showNoteFormModal.value = false;
|
||||
selectedMeetingForNotes.value = null;
|
||||
};
|
||||
|
||||
const openNewMeetingModal = () => {
|
||||
showNewMeetingModal.value = true;
|
||||
};
|
||||
|
|
@ -491,7 +563,16 @@ const handleNewMeetingConfirm = async (meetingData) => {
|
|||
|
||||
showNewMeetingModal.value = false;
|
||||
|
||||
// Reload unscheduled meetings to show the new one
|
||||
// Optimistically add the new meeting to the unscheduled list
|
||||
unscheduledMeetings.value.unshift({
|
||||
name: result.name,
|
||||
address: meetingData.address,
|
||||
projectTemplate: meetingData.projectTemplate,
|
||||
contact: meetingData.contact,
|
||||
status: "Unscheduled",
|
||||
});
|
||||
|
||||
// Reload unscheduled meetings to ensure consistency
|
||||
await loadUnscheduledMeetings();
|
||||
|
||||
notificationStore.addNotification({
|
||||
|
|
@ -536,6 +617,7 @@ const handleDragStart = (event, meeting = null) => {
|
|||
notes: meeting.notes || "",
|
||||
assigned_employee: meeting.assigned_employee || "",
|
||||
status: meeting.status,
|
||||
projectTemplate: meeting.projectTemplate,
|
||||
};
|
||||
} else if (!draggedMeeting.value) {
|
||||
// If no meeting data is set, use query address
|
||||
|
|
@ -559,6 +641,7 @@ const handleMeetingDragStart = (event, meeting) => {
|
|||
assigned_employee: meeting.assigned_employee || "",
|
||||
status: meeting.status,
|
||||
isRescheduling: true, // Flag to indicate this is a reschedule
|
||||
projectTemplate: meeting.projectTemplate,
|
||||
};
|
||||
|
||||
// Store the original meeting data in case drag is cancelled
|
||||
|
|
@ -669,6 +752,7 @@ const handleDrop = async (event, date, time) => {
|
|||
notes: droppedMeeting.notes || "",
|
||||
assigned_employee: droppedMeeting.assigned_employee || "",
|
||||
status: "Scheduled",
|
||||
projectTemplate: droppedMeeting.projectTemplate,
|
||||
};
|
||||
|
||||
// If this is an existing meeting, update it in the backend
|
||||
|
|
@ -792,6 +876,7 @@ const handleDropToUnscheduled = async (event) => {
|
|||
notes: droppedMeeting.notes || "",
|
||||
status: "Unscheduled",
|
||||
assigned_employee: droppedMeeting.assigned_employee || "",
|
||||
projectTemplate: droppedMeeting.projectTemplate,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@
|
|||
|
||||
<!-- Event Details Modal -->
|
||||
<JobDetailsModal
|
||||
v-model:visible="eventDialog"
|
||||
v-model="eventDialog"
|
||||
:job="selectedEvent"
|
||||
:foremen="foremen"
|
||||
@close="eventDialog = false"
|
||||
|
|
@ -807,7 +807,8 @@ const toggleTemplate = (templateName) => {
|
|||
|
||||
const applyTemplateFilter = async () => {
|
||||
showTemplateMenu.value = false;
|
||||
await fetchProjects(currentDate.value);
|
||||
// await fetchProjects(currentDate.value);
|
||||
await fetchServiceAppointments();
|
||||
};
|
||||
|
||||
// Date picker methods
|
||||
|
|
@ -1238,14 +1239,20 @@ const stopResize = async () => {
|
|||
originalEndDate.value = null;
|
||||
};
|
||||
|
||||
const fetchProjects = async () => {
|
||||
const fetchServiceAppointments = async (currentDate) => {
|
||||
try {
|
||||
// Calculate date range for the week
|
||||
const startDate = weekStartDate.value;
|
||||
const endDate = addDays(startDate, 6);
|
||||
|
||||
const data = await Api.getJobsForCalendar(startDate, endDate, companyStore.currentCompany, selectedProjectTemplates.value);
|
||||
|
||||
// const data = await Api.getJobsForCalendar(startDate, endDate, companyStore.currentCompany, selectedProjectTemplates.value);
|
||||
const data = await Api.getServiceAppointments(
|
||||
[companyStore.currentCompany],
|
||||
{
|
||||
"expectedStartDate": ["<=", endDate],
|
||||
"expectedEndDate": [">=", startDate]
|
||||
}
|
||||
);
|
||||
// Transform the API response into the format the component expects
|
||||
const transformedServices = [];
|
||||
|
||||
|
|
@ -1350,21 +1357,24 @@ const fetchHolidays = async () => {
|
|||
}
|
||||
|
||||
watch(weekStartDate, async () => {
|
||||
await fetchProjects();
|
||||
// await fetchProjects();
|
||||
await fetchServiceAppointments();
|
||||
await fetchHolidays();
|
||||
});
|
||||
|
||||
watch(companyStore, async () => {
|
||||
await fetchForemen();
|
||||
await fetchProjectTemplates();
|
||||
await fetchProjects();
|
||||
// await fetchProjects();
|
||||
await fetchServiceAppointments();
|
||||
}, { deep: true });
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
await fetchForemen();
|
||||
await fetchProjectTemplates();
|
||||
await fetchProjects();
|
||||
// await fetchProjects();
|
||||
await fetchServiceAppointments();
|
||||
await fetchHolidays();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
978
frontend/src/components/modals/BidMeetingNoteForm.vue
Normal file
978
frontend/src/components/modals/BidMeetingNoteForm.vue
Normal file
|
|
@ -0,0 +1,978 @@
|
|||
<template>
|
||||
<Modal
|
||||
:visible="showModal"
|
||||
@update:visible="showModal = $event"
|
||||
:options="modalOptions"
|
||||
@confirm="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<template #title>
|
||||
<div class="modal-header">
|
||||
<i class="pi pi-file-edit" style="color: var(--primary-color); font-size: 1.2rem; margin-right: 0.5rem;"></i>
|
||||
{{ formTitle }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="isLoading" class="loading-container">
|
||||
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="4" />
|
||||
<p>Loading form...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="formConfig" class="form-container">
|
||||
<Button @click="debugLog" label="Debug" severity="secondary" size="small" class="debug-button" />
|
||||
<template v-for="row in groupedFields" :key="`row-${row.rowIndex}`">
|
||||
<div class="form-row">
|
||||
<div
|
||||
v-for="field in row.fields"
|
||||
:key="field.name"
|
||||
:class="`form-column-${Math.min(Math.max(field.columns || 12, 1), 12)}`"
|
||||
>
|
||||
<div class="form-field">
|
||||
<!-- Field Label -->
|
||||
<label :for="field.name" class="field-label">
|
||||
{{ field.label }}
|
||||
<span v-if="field.required" class="required-indicator">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Help Text -->
|
||||
<small v-if="field.helpText" class="field-help-text">
|
||||
{{ field.helpText }}
|
||||
</small>
|
||||
|
||||
<!-- Data/Text Field -->
|
||||
<template v-if="field.type === 'Data' || field.type === 'Text'">
|
||||
<InputText
|
||||
v-if="field.type === 'Data'"
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
:placeholder="field.label"
|
||||
class="w-full"
|
||||
/>
|
||||
<Textarea
|
||||
v-else
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
:placeholder="field.label"
|
||||
rows="3"
|
||||
class="w-full"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Check Field -->
|
||||
<template v-else-if="field.type === 'Check'">
|
||||
<div class="checkbox-container">
|
||||
<Checkbox
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:binary="true"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
/>
|
||||
<label :for="field.name" class="checkbox-label">
|
||||
{{ formData[field.name].value ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Date Field -->
|
||||
<template v-else-if="field.type === 'Date'">
|
||||
<DatePicker
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
dateFormat="yy-mm-dd"
|
||||
class="w-full"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Datetime Field -->
|
||||
<template v-else-if="field.type === 'Datetime'">
|
||||
<DatePicker
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
showTime
|
||||
hourFormat="12"
|
||||
dateFormat="yy-mm-dd"
|
||||
class="w-full"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Time Field -->
|
||||
<template v-else-if="field.type === 'Time'">
|
||||
<DatePicker
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
timeOnly
|
||||
hourFormat="12"
|
||||
class="w-full"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Number Field -->
|
||||
<template v-else-if="field.type === 'Number'">
|
||||
<InputNumber
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
class="w-full"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Select Field -->
|
||||
<template v-else-if="field.type === 'Select'">
|
||||
<div @click="console.log('Select wrapper clicked:', field.name, 'disabled:', field.readOnly || !isFieldVisible(field), 'options:', optionsForFields[field.name])">
|
||||
<Select
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:options="optionsForFields[field.name]"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
:placeholder="`Select ${field.label}`"
|
||||
:optionLabel="'label'"
|
||||
:optionValue="'value'"
|
||||
:editable="false"
|
||||
:showClear="true"
|
||||
:baseZIndex="10000"
|
||||
@click.native="console.log('Select native click:', field.name)"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Multi-Select Field -->
|
||||
<template v-else-if="field.type === 'Multi-Select'">
|
||||
<MultiSelect
|
||||
:id="field.name"
|
||||
v-model="formData[field.name].value"
|
||||
:options="optionsForFields[field.name]"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
:placeholder="`Select ${field.label}`"
|
||||
:key="`${field.name}-${field.readOnly || !isFieldVisible(field)}`"
|
||||
:optionLabel="'label'"
|
||||
:optionValue="'value'"
|
||||
:showClear="true"
|
||||
:baseZIndex="9999"
|
||||
display="chip"
|
||||
class="w-full"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Multi-Select w/ Quantity Field -->
|
||||
<template v-else-if="field.type === 'Multi-Select w/ Quantity'">
|
||||
<div class="multi-select-quantity-container">
|
||||
<!-- Item Selector -->
|
||||
<div class="item-selector">
|
||||
<Select
|
||||
v-model="currentItemSelection[field.name]"
|
||||
:options="optionsForFields[field.name]"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
:placeholder="`Add ${field.label}`"
|
||||
:key="`${field.name}-${field.readOnly || !isFieldVisible(field)}`"
|
||||
:optionLabel="'label'"
|
||||
:showClear="true"
|
||||
:baseZIndex="9999"
|
||||
class="w-full"
|
||||
@change="addItemToQuantityList(field)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Selected Items with Quantities -->
|
||||
<div v-if="formData[field.name].value && formData[field.name].value.length > 0" class="selected-items-list">
|
||||
<div
|
||||
v-for="(item, index) in formData[field.name].value"
|
||||
:key="index"
|
||||
class="quantity-item"
|
||||
>
|
||||
<div class="item-name">{{ getOptionLabel(field, item) }}</div>
|
||||
<div class="quantity-controls">
|
||||
<InputNumber
|
||||
v-model="item.quantity"
|
||||
:min="1"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
:step="1"
|
||||
decrementButtonClass="p-button-secondary"
|
||||
incrementButtonClass="p-button-secondary"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
severity="danger"
|
||||
text
|
||||
@click="removeItemFromQuantityList(field, index)"
|
||||
:disabled="field.readOnly || !isFieldVisible(field)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-else class="error-container">
|
||||
<i class="pi pi-exclamation-triangle" style="font-size: 2rem; color: var(--red-500);"></i>
|
||||
<p>Failed to load form configuration</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, reactive } from "vue";
|
||||
import Modal from "../common/Modal.vue";
|
||||
import InputText from "primevue/inputtext";
|
||||
import Textarea from "primevue/textarea";
|
||||
import Checkbox from "primevue/checkbox";
|
||||
import DatePicker from "primevue/datepicker";
|
||||
import InputNumber from "primevue/inputnumber";
|
||||
import Select from "primevue/select";
|
||||
import MultiSelect from "primevue/multiselect";
|
||||
import Button from "primevue/button";
|
||||
import ProgressSpinner from "primevue/progressspinner";
|
||||
import Api from "../../api";
|
||||
import { useLoadingStore } from "../../stores/loading";
|
||||
import { useNotificationStore } from "../../stores/notifications-primevue";
|
||||
|
||||
const docsForSelectFields = ref({});
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
bidMeetingName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
projectTemplate: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible", "submit", "cancel"]);
|
||||
|
||||
const loadingStore = useLoadingStore();
|
||||
const notificationStore = useNotificationStore();
|
||||
|
||||
const showModal = computed({
|
||||
get: () => props.visible,
|
||||
set: (value) => emit("update:visible", value),
|
||||
});
|
||||
|
||||
const isLoading = ref(false);
|
||||
const formConfig = ref(null);
|
||||
const formData = ref({}); // Will store fieldName: {fieldConfig, value}
|
||||
const currentItemSelection = ref({}); // For tracking current selection in Multi-Select w/ Quantity
|
||||
const doctypeOptions = ref({}); // Cache for doctype options
|
||||
|
||||
const formTitle = computed(() => {
|
||||
return formConfig.value?.title || "Bid Meeting Notes";
|
||||
});
|
||||
|
||||
// Include all fields from config plus a general notes field
|
||||
const allFields = computed(() => {
|
||||
if (!formConfig.value) return [];
|
||||
|
||||
const fields = [...(formConfig.value.fields || [])];
|
||||
|
||||
// Always add a general notes field at the end
|
||||
const generalNotesField = {
|
||||
name: 'general_notes',
|
||||
label: 'General Notes',
|
||||
type: 'Text',
|
||||
required: 0,
|
||||
readOnly: 0,
|
||||
helpText: 'Any additional notes or observations from the meeting',
|
||||
row: Math.max(...fields.map(f => f.row || 1), 0) + 1,
|
||||
columns: 12,
|
||||
};
|
||||
|
||||
fields.push(generalNotesField);
|
||||
return fields;
|
||||
});
|
||||
|
||||
// Group fields by row for grid layout
|
||||
const groupedFields = computed(() => {
|
||||
const groups = {};
|
||||
|
||||
allFields.value.forEach(field => {
|
||||
const rowNum = field.row || 1;
|
||||
if (!groups[rowNum]) {
|
||||
groups[rowNum] = { rowIndex: rowNum, fields: [] };
|
||||
}
|
||||
groups[rowNum].fields.push(field);
|
||||
});
|
||||
|
||||
// Sort fields by column and set columns span
|
||||
Object.values(groups).forEach(group => {
|
||||
group.fields.sort((a, b) => (a.column || 0) - (b.column || 0));
|
||||
const numFields = group.fields.length;
|
||||
const span = Math.floor(12 / numFields);
|
||||
group.fields.forEach(field => {
|
||||
field.columns = span;
|
||||
});
|
||||
});
|
||||
|
||||
return Object.values(groups).sort((a, b) => a.rowIndex - b.rowIndex);
|
||||
});
|
||||
|
||||
// Update field value in reactive form data
|
||||
const updateFieldValue = (fieldName, value) => {
|
||||
if (formData.value[fieldName]) {
|
||||
formData.value[fieldName].value = value;
|
||||
}
|
||||
};
|
||||
|
||||
// Get CSS class for field column span
|
||||
const getFieldColumnClass = (field) => {
|
||||
const columns = field.columns || 12; // Default to full width if not specified
|
||||
return `form-column-${Math.min(Math.max(columns, 1), 12)}`; // Ensure between 1-12
|
||||
};
|
||||
|
||||
const modalOptions = computed(() => ({
|
||||
maxWidth: "800px",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Submit",
|
||||
cancelButtonText: "Cancel",
|
||||
confirmButtonColor: "primary",
|
||||
zIndex: 1000, // Lower than select baseZIndex
|
||||
}));
|
||||
|
||||
// Helper to find field name by label
|
||||
const findFieldNameByLabel = (label) => {
|
||||
if (!formConfig.value || !formConfig.value.fields) return null;
|
||||
const field = formConfig.value.fields.find(f => f.label === label);
|
||||
return field ? field.name : null;
|
||||
};
|
||||
|
||||
const fetchDocsForSelectField = async (doctype, fieldName) => {
|
||||
const docs = await Api.getDocsList(doctype);
|
||||
docsForSelectFields[fieldName] = docs;
|
||||
}
|
||||
|
||||
// Check if a field should be visible based on conditional logic
|
||||
const isFieldVisible = (field) => {
|
||||
if (!field.conditionalOnField) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Find the actual field name from the label (conditionalOnField contains the label)
|
||||
const dependentFieldName = findFieldNameByLabel(field.conditionalOnField);
|
||||
if (!dependentFieldName) {
|
||||
console.warn(`Could not find field with label: ${field.conditionalOnField}`);
|
||||
return true; // Show field if we can't find the dependency
|
||||
}
|
||||
|
||||
const dependentFieldValue = formData.value[dependentFieldName]?.value;
|
||||
|
||||
console.log(`Checking visibility for ${field.label}:`, {
|
||||
conditionalOnField: field.conditionalOnField,
|
||||
dependentFieldName,
|
||||
dependentFieldValue,
|
||||
conditionalOnValue: field.conditionalOnValue,
|
||||
});
|
||||
|
||||
// If the dependent field is a checkbox, it should be true
|
||||
if (typeof dependentFieldValue === "boolean") {
|
||||
return dependentFieldValue === true;
|
||||
}
|
||||
|
||||
// If conditional_on_value is specified, check for exact match
|
||||
if (field.conditionalOnValue !== null && field.conditionalOnValue !== undefined) {
|
||||
return dependentFieldValue === field.conditionalOnValue;
|
||||
}
|
||||
|
||||
// Otherwise, just check if the dependent field has any truthy value
|
||||
return !!dependentFieldValue;
|
||||
};
|
||||
|
||||
// Get options for select/multi-select fields
|
||||
const getFieldOptions = (field) => {
|
||||
// Access reactive data to ensure reactivity
|
||||
const optionsData = docsForSelectFields.value[field.name];
|
||||
|
||||
console.log(`getFieldOptions called for ${field.label}:`, {
|
||||
type: field.type,
|
||||
options: field.options,
|
||||
optionsType: typeof field.options,
|
||||
doctypeForSelect: field.doctypeForSelect,
|
||||
doctypeLabelField: field.doctypeLabelField,
|
||||
hasDoctypeOptions: !!optionsData,
|
||||
});
|
||||
|
||||
// If options should be fetched from a doctype
|
||||
if (field.doctypeForSelect && optionsData) {
|
||||
console.log(`Using doctype options for ${field.label}:`, optionsData);
|
||||
return [...optionsData]; // Return a copy to ensure reactivity
|
||||
}
|
||||
|
||||
// If options are provided as a string (comma-separated), parse them
|
||||
if (field.options && typeof field.options === "string" && field.options.trim() !== "") {
|
||||
const optionStrings = field.options.split(",").map((opt) => opt.trim()).filter(opt => opt !== "");
|
||||
// Convert to objects for consistency with PrimeVue MultiSelect
|
||||
const options = optionStrings.map((opt) => ({
|
||||
label: opt,
|
||||
value: opt,
|
||||
}));
|
||||
console.log(`Parsed options for ${field.label}:`, options);
|
||||
return options;
|
||||
}
|
||||
|
||||
console.warn(`No options found for ${field.label}`);
|
||||
return [];
|
||||
};
|
||||
|
||||
// Get options for select/multi-select fields
|
||||
const optionsForFields = computed(() => {
|
||||
// Ensure reactivity by accessing docsForSelectFields
|
||||
const docsData = docsForSelectFields.value;
|
||||
const opts = {};
|
||||
allFields.value.forEach(field => {
|
||||
const options = getFieldOptions(field);
|
||||
opts[field.name] = options;
|
||||
console.log(`Computed options for ${field.name}:`, options);
|
||||
});
|
||||
console.log('optionsForFields computed:', opts);
|
||||
return opts;
|
||||
});
|
||||
|
||||
// Add item to quantity list for Multi-Select w/ Quantity fields
|
||||
const addItemToQuantityList = (field) => {
|
||||
const selectedItem = currentItemSelection.value[field.name];
|
||||
if (!selectedItem) return;
|
||||
|
||||
// selectedItem is now an object with { label, value }
|
||||
const itemValue = selectedItem.value || selectedItem;
|
||||
const itemLabel = selectedItem.label || selectedItem;
|
||||
|
||||
// Initialize array if it doesn't exist
|
||||
const fieldData = formData.value[field.name];
|
||||
if (!fieldData.value) {
|
||||
fieldData.value = [];
|
||||
}
|
||||
|
||||
// Check if item already exists (compare by value)
|
||||
const existingItem = fieldData.value.find((item) => item.item === itemValue);
|
||||
if (existingItem) {
|
||||
// Increment quantity if item already exists
|
||||
existingItem.quantity += 1;
|
||||
} else {
|
||||
// Add new item with quantity 1
|
||||
fieldData.value.push({
|
||||
item: itemValue,
|
||||
label: itemLabel,
|
||||
quantity: 1,
|
||||
});
|
||||
}
|
||||
|
||||
// Clear selection
|
||||
currentItemSelection.value[field.name] = null;
|
||||
};
|
||||
|
||||
// Remove item from quantity list
|
||||
const removeItemFromQuantityList = (field, index) => {
|
||||
const fieldData = formData.value[field.name];
|
||||
if (fieldData && fieldData.value) {
|
||||
fieldData.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// Get option label for display
|
||||
const getOptionLabel = (field, item) => {
|
||||
const options = optionsForFields.value[field.name];
|
||||
const option = options.find(o => o.value === item.item);
|
||||
return option ? option.label : item.label || item.item;
|
||||
};
|
||||
|
||||
// Initialize form data with default values
|
||||
const initializeFormData = () => {
|
||||
if (!formConfig.value) return;
|
||||
|
||||
const data = {};
|
||||
allFields.value.forEach((field) => {
|
||||
// Create reactive object with field config and value
|
||||
data[field.name] = {
|
||||
...field, // Include all field configuration
|
||||
value: null, // Initialize value
|
||||
};
|
||||
|
||||
// Set default value if provided
|
||||
if (field.defaultValue !== null && field.defaultValue !== undefined) {
|
||||
data[field.name].value = field.defaultValue;
|
||||
} else {
|
||||
// Initialize based on field type
|
||||
switch (field.type) {
|
||||
case "Check":
|
||||
data[field.name].value = false;
|
||||
break;
|
||||
case "Multi-Select":
|
||||
data[field.name].value = [];
|
||||
break;
|
||||
case "Multi-Select w/ Quantity":
|
||||
data[field.name].value = [];
|
||||
break;
|
||||
case "Number":
|
||||
data[field.name].value = null;
|
||||
break;
|
||||
case "Select":
|
||||
data[field.name].value = null;
|
||||
break;
|
||||
default:
|
||||
data[field.name].value = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
formData.value = data;
|
||||
};
|
||||
|
||||
// Load form configuration
|
||||
const loadFormConfig = async () => {
|
||||
if (!props.projectTemplate) return;
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const config = await Api.getBidMeetingNoteForm(props.projectTemplate);
|
||||
formConfig.value = config;
|
||||
console.log("Loaded form config:", config);
|
||||
|
||||
// Load doctype options for fields that need them
|
||||
await loadDoctypeOptions();
|
||||
|
||||
// Initialize form data
|
||||
initializeFormData();
|
||||
} catch (error) {
|
||||
console.error("Error loading form config:", error);
|
||||
notificationStore.addNotification({
|
||||
type: "error",
|
||||
title: "Error",
|
||||
message: "Failed to load form configuration",
|
||||
duration: 5000,
|
||||
});
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Load options for fields that reference doctypes
|
||||
const loadDoctypeOptions = async () => {
|
||||
if (!formConfig.value || !formConfig.value.fields) return;
|
||||
|
||||
const fieldsWithDoctype = formConfig.value.fields.filter(
|
||||
(field) => field.doctypeForSelect && field.doctypeForSelect !== ""
|
||||
);
|
||||
|
||||
for (const field of fieldsWithDoctype) {
|
||||
try {
|
||||
// Use the new API method for fetching docs
|
||||
let docs = await Api.getEstimateItems();
|
||||
|
||||
// Deduplicate by value field
|
||||
const valueField = field.doctypeValueField || 'name';
|
||||
const seen = new Set();
|
||||
docs = docs.filter(doc => {
|
||||
const val = doc[valueField] || doc.name || doc;
|
||||
if (seen.has(val)) return false;
|
||||
seen.add(val);
|
||||
return true;
|
||||
});
|
||||
|
||||
// Transform docs into options format
|
||||
// Use doctypeLabelField if specified, otherwise default to 'name'
|
||||
const labelField = field.doctypeLabelField || 'name';
|
||||
|
||||
const options = docs.map((doc) => ({
|
||||
label: doc[labelField] || doc.name || doc,
|
||||
value: doc[valueField] || doc.name || doc,
|
||||
}));
|
||||
|
||||
docsForSelectFields.value[field.name] = options;
|
||||
console.log(`Loaded ${options.length} options for ${field.label} from ${field.doctypeForSelect}`);
|
||||
} catch (error) {
|
||||
console.error(`Error loading options for ${field.doctypeForSelect}:`, error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Validate form
|
||||
const validateForm = () => {
|
||||
const errors = [];
|
||||
|
||||
if (!formConfig.value) return errors;
|
||||
|
||||
allFields.value.forEach((field) => {
|
||||
// Only validate if field is visible
|
||||
if (!isFieldVisible(field)) return;
|
||||
|
||||
// Skip required validation for checkboxes (they always have a value: true or false)
|
||||
if (field.type === 'Check') return;
|
||||
|
||||
if (field.required) {
|
||||
const value = formData.value[field.name]?.value;
|
||||
|
||||
if (value === null || value === undefined || value === "") {
|
||||
errors.push(`${field.label} is required`);
|
||||
} else if (Array.isArray(value) && value.length === 0) {
|
||||
errors.push(`${field.label} is required`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
// Format field data for submission
|
||||
const formatFieldData = (field) => {
|
||||
const value = formData.value[field.name]?.value;
|
||||
|
||||
// Include the entire field configuration
|
||||
const fieldData = {
|
||||
...field, // Include all field properties
|
||||
value: value, // Override with current value
|
||||
};
|
||||
|
||||
// Handle options: include unless fetched from doctype
|
||||
if (field.doctypeForSelect) {
|
||||
// Remove options if they were fetched from doctype
|
||||
delete fieldData.options;
|
||||
}
|
||||
|
||||
// For fields with include_options flag, include the selected options
|
||||
if (field.includeOptions) {
|
||||
if (field.type === "Multi-Select") {
|
||||
fieldData.selectedOptions = value || [];
|
||||
} else if (field.type === "Multi-Select w/ Quantity") {
|
||||
fieldData.items = value || [];
|
||||
} else if (field.type === "Select") {
|
||||
fieldData.selectedOption = value;
|
||||
}
|
||||
}
|
||||
|
||||
// Format dates as strings
|
||||
if (field.type === "Date" || field.type === "Datetime" || field.type === "Time") {
|
||||
if (value instanceof Date) {
|
||||
if (field.type === "Date") {
|
||||
fieldData.value = value.toISOString().split("T")[0];
|
||||
} else if (field.type === "Datetime") {
|
||||
fieldData.value = value.toISOString();
|
||||
} else if (field.type === "Time") {
|
||||
fieldData.value = value.toTimeString().split(" ")[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return fieldData;
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async () => {
|
||||
// Validate form
|
||||
const errors = validateForm();
|
||||
if (errors.length > 0) {
|
||||
notificationStore.addNotification({
|
||||
type: "error",
|
||||
title: "Validation Error",
|
||||
message: errors.join(", "),
|
||||
duration: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
loadingStore.setLoading(true);
|
||||
|
||||
// Format data for submission
|
||||
const submissionData = {
|
||||
bidMeeting: props.bidMeetingName,
|
||||
projectTemplate: props.projectTemplate,
|
||||
formName: formConfig.value?.name || formConfig.value?.title,
|
||||
formTemplate: formConfig.value?.name || formConfig.value?.title,
|
||||
fields: allFields.value
|
||||
.filter((field) => isFieldVisible(field))
|
||||
.map((field) => formatFieldData(field)),
|
||||
};
|
||||
|
||||
console.log("Submitting form data:", submissionData);
|
||||
|
||||
// Submit to API
|
||||
await Api.submitBidMeetingNoteForm(submissionData);
|
||||
|
||||
notificationStore.addNotification({
|
||||
type: "success",
|
||||
title: "Success",
|
||||
message: "Bid meeting notes submitted successfully",
|
||||
duration: 5000,
|
||||
});
|
||||
|
||||
emit("submit", submissionData);
|
||||
showModal.value = false;
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
notificationStore.addNotification({
|
||||
type: "error",
|
||||
title: "Error",
|
||||
message: "Failed to submit form. Please try again.",
|
||||
duration: 5000,
|
||||
});
|
||||
} finally {
|
||||
loadingStore.setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle cancel
|
||||
const handleCancel = () => {
|
||||
emit("cancel");
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
// Debug function to log current form data and select options
|
||||
const debugLog = () => {
|
||||
console.log("=== FORM DEBUG ===");
|
||||
|
||||
const debugData = {};
|
||||
allFields.value.forEach(field => {
|
||||
const fieldValue = formData.value[field.name]?.value;
|
||||
const fieldOptions = optionsForFields.value[field.name];
|
||||
const isVisible = isFieldVisible(field);
|
||||
const isDisabled = field.readOnly || !isVisible;
|
||||
|
||||
debugData[field.name] = {
|
||||
label: field.label,
|
||||
type: field.type,
|
||||
value: fieldValue,
|
||||
isVisible,
|
||||
isDisabled,
|
||||
...(field.type.includes('Select') ? {
|
||||
options: fieldOptions,
|
||||
optionsCount: fieldOptions?.length || 0
|
||||
} : {}),
|
||||
};
|
||||
});
|
||||
|
||||
console.log("Current Form Data:", debugData);
|
||||
console.log("==================");
|
||||
};
|
||||
|
||||
// Watch for modal visibility changes
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
loadFormConfig();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Load form config on mount if modal is visible
|
||||
onMounted(() => {
|
||||
if (props.visible) {
|
||||
loadFormConfig();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
gap: 1rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.debug-button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Grid Layout Styles */
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-column-1 { grid-column: span 1; }
|
||||
.form-column-2 { grid-column: span 2; }
|
||||
.form-column-3 { grid-column: span 3; }
|
||||
.form-column-4 { grid-column: span 4; }
|
||||
.form-column-5 { grid-column: span 5; }
|
||||
.form-column-6 { grid-column: span 6; }
|
||||
.form-column-7 { grid-column: span 7; }
|
||||
.form-column-8 { grid-column: span 8; }
|
||||
.form-column-9 { grid-column: span 9; }
|
||||
.form-column-10 { grid-column: span 10; }
|
||||
.form-column-11 { grid-column: span 11; }
|
||||
.form-column-12 { grid-column: span 12; }
|
||||
|
||||
.form-field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.form-field :deep(.p-select) {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.form-field :deep(.p-multiselect) {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.required-indicator {
|
||||
color: var(--red-500);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.field-help-text {
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.85rem;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.checkbox-container :deep(.p-checkbox) {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.checkbox-container :deep(.p-checkbox .p-checkbox-box) {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
border: 1px solid var(--surface-border) !important;
|
||||
border-radius: 3px !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.checkbox-container :deep(.p-checkbox .p-checkbox-input) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
opacity: 0 !important;
|
||||
cursor: pointer !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.checkbox-container :deep(.p-checkbox .p-checkbox-box .p-checkbox-icon) {
|
||||
font-size: 0.875rem !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color-secondary);
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.multi-select-quantity-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selected-items-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--surface-50);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.quantity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem;
|
||||
background-color: var(--surface-0);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.item-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.form-container {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.quantity-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.quantity-controls {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -171,7 +171,7 @@ import { ref, computed } from "vue";
|
|||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
|
@ -186,15 +186,15 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["update:visible", "close"]);
|
||||
const emit = defineEmits(["update:modelValue", "close"]);
|
||||
|
||||
// Computed
|
||||
const showModal = computed({
|
||||
get() {
|
||||
return props.visible;
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emit("update:visible", value);
|
||||
emit("update:modelValue", value);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -135,8 +135,8 @@
|
|||
variant="elevated"
|
||||
:loading="isUpdating"
|
||||
>
|
||||
<v-icon left>mdi-check</v-icon>
|
||||
Mark as Completed
|
||||
<v-icon left>mdi-file-edit</v-icon>
|
||||
Create Notes and Complete
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
|
|
@ -176,7 +176,7 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["update:visible", "close", "meetingUpdated"]);
|
||||
const emit = defineEmits(["update:visible", "close", "meetingUpdated", "completeMeeting"]);
|
||||
|
||||
// Local state
|
||||
const isUpdating = ref(false);
|
||||
|
|
@ -269,34 +269,20 @@ const handleClose = () => {
|
|||
const handleMarkComplete = async () => {
|
||||
if (!props.meeting?.name) return;
|
||||
|
||||
try {
|
||||
isUpdating.value = true;
|
||||
|
||||
await Api.updateBidMeeting(props.meeting.name, {
|
||||
status: "Completed",
|
||||
});
|
||||
|
||||
// Check if meeting has a project template
|
||||
if (!props.meeting.projectTemplate) {
|
||||
notificationStore.addNotification({
|
||||
type: "success",
|
||||
title: "Meeting Completed",
|
||||
message: "The meeting has been marked as completed.",
|
||||
duration: 4000,
|
||||
});
|
||||
|
||||
// Emit event to refresh the calendar
|
||||
emit("meetingUpdated");
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
console.error("Error marking meeting as complete:", error);
|
||||
notificationStore.addNotification({
|
||||
type: "error",
|
||||
title: "Error",
|
||||
message: "Failed to update meeting status.",
|
||||
type: "warning",
|
||||
title: "Missing Project Template",
|
||||
message: "This meeting requires a project template to create notes.",
|
||||
duration: 5000,
|
||||
});
|
||||
} finally {
|
||||
isUpdating.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Open the note form modal
|
||||
emit("completeMeeting", props.meeting);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleCreateEstimate = () => {
|
||||
|
|
|
|||
|
|
@ -129,13 +129,16 @@ import DataTable from "../common/DataTable.vue";
|
|||
import TodoChart from "../common/TodoChart.vue";
|
||||
import { Edit, ChatBubbleQuestion, CreditCard, Hammer } from "@iconoir/vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import Api from "../../api";
|
||||
import { useLoadingStore } from "../../stores/loading";
|
||||
import { usePaginationStore } from "../../stores/pagination";
|
||||
import { useFiltersStore } from "../../stores/filters";
|
||||
import { useCompanyStore } from "../../stores/company.js";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCompanyStore } from "../../stores/company";
|
||||
|
||||
const companyStore = useCompanyStore();
|
||||
const loadingStore = useLoadingStore();
|
||||
const paginationStore = usePaginationStore();
|
||||
const filtersStore = useFiltersStore();
|
||||
|
|
@ -235,7 +238,7 @@ const handleLazyLoad = async (event) => {
|
|||
};
|
||||
|
||||
// Get filters (convert PrimeVue format to API format)
|
||||
const filters = {};
|
||||
const filters = {company: companyStore.currentCompany};
|
||||
if (event.filters) {
|
||||
Object.keys(event.filters).forEach((key) => {
|
||||
if (key !== "global" && event.filters[key] && event.filters[key].value) {
|
||||
|
|
@ -281,6 +284,8 @@ const handleLazyLoad = async (event) => {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const loadChartData = async () => {
|
||||
chartData.value.bids.data = await Api.getIncompleteBidsCount(companyStore.currentCompany);
|
||||
chartData.value.estimates.data = await Api.getUnapprovedEstimatesCount(companyStore.currentCompany);
|
||||
|
|
@ -308,14 +313,21 @@ onMounted(async () => {
|
|||
sortOrder: initialSorting.order || initialPagination.sortOrder,
|
||||
filters: initialFilters,
|
||||
});
|
||||
|
||||
// Chart Data
|
||||
await loadChartData();
|
||||
});
|
||||
|
||||
watch(() => companyStore.currentCompany, async (newCompany, oldCompany) => {
|
||||
await loadChartData();
|
||||
});
|
||||
// watch the company store and refetch data when it changes
|
||||
watch(
|
||||
() => companyStore.currentCompany,
|
||||
async (newCompany, oldCompany) => {
|
||||
console.log("Company changed from", oldCompany, "to", newCompany, "- refetching estimates data.");
|
||||
await handleLazyLoad({
|
||||
page: paginationStore.getTablePagination("estimates").page,
|
||||
rows: paginationStore.getTablePagination("estimates").rows,
|
||||
first: paginationStore.getTablePagination("estimates").first,
|
||||
filters: filtersStore.getTableFilters("estimates"),
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="css">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue