bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

create tempalte functionality

Browse source
This commit is contained in:
Casey 2026-01-02 16:28:57 -06:00
parent cb59dd65ca
commit 97241f14ea
4 changed files with 213 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

82
frontend/src/components/modals/SaveTemplateModal.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<Modal
:visible="visible"
@update:visible="$emit('update:visible', $event)"
@close="$emit('update:visible', false)"
:options="{ showActions: false }"
>
<template #title>Save As Template</template>
<div class="modal-content">
<div class="field-group">
<label for="templateName" class="field-label">Template Name</label>
<InputText id="templateName" v-model="templateData.templateName" fluid />
</div>
<div class="field-group">
<label for="templateDescription" class="field-label">Description</label>
<InputText id="templateDescription" v-model="templateData.description" fluid />
</div>
<div class="confirmation-buttons">
<Button label="Cancel" @click="$emit('update:visible', false)" severity="secondary" />
<Button label="Submit" @click="submit" :disabled="!templateData.templateName" />
</div>
</div>
</Modal>
</template>
<script setup>
import { reactive, watch } from "vue";
import Modal from "../common/Modal.vue";
import InputText from "primevue/inputtext";
import Button from "primevue/button";
const props = defineProps({
visible: {
type: Boolean,
required: true,
},
});
const emit = defineEmits(["update:visible", "save"]);
const templateData = reactive({
templateName: "",
description: "",
});
watch(
() => props.visible,
(newVal) => {
if (newVal) {
templateData.templateName = "";
templateData.description = "";
}
},
);
const submit = () => {
emit("save", { ...templateData });
};
</script>
<style scoped>
.field-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.field-group {
margin-bottom: 1rem;
}
.confirmation-buttons {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 1rem;
}
.modal-content {
padding: 1rem;
}
</style>

85
frontend/src/components/pages/Estimate.vue
View file

@ -60,24 +60,29 @@
</div>
<!-- Template Section -->
<div v-if="isNew" class="template-section">
<label for="template" class="field-label">Template</label>
<Select
v-model="selectedTemplate"
:options="templates"
optionLabel="templateName"
optionValue="templateName"
placeholder="Select a template"
fluid
@change="onTemplateChange"
>
<template #option="slotProps">
<div class="template-option">
<div class="template-name">{{ slotProps.option.templateName }}</div>
<div class="template-desc">{{ slotProps.option.description }}</div>
</div>
</template>
</Select>
<div class="template-section">
<div v-if="isNew">
<label for="template" class="field-label">Template</label>
<Select
v-model="selectedTemplate"
:options="templates"
optionLabel="templateName"
optionValue="name"
placeholder="Select a template"
fluid
@change="onTemplateChange"
>
<template #option="slotProps">
<div class="template-option">
<div class="template-name">{{ slotProps.option.templateName }}</div>
<div class="template-desc">{{ slotProps.option.description }}</div>
</div>
</template>
</Select>
</div>
<div v-else>
<Button label="Save As Template" icon="pi pi-save" @click="openSaveTemplateModal" />
</div>
</div>
<!-- Items Section -->
@ -198,6 +203,13 @@
<Button label="Submit" @click="submitResponse"/>
</Modal>
<!-- Save Template Modal -->
<SaveTemplateModal
:visible="showSaveTemplateModal"
@update:visible="showSaveTemplateModal = $event"
@save="confirmSaveTemplate"
/>
<!-- Address Search Modal -->
<Modal
:visible="showAddressModal"
@ -311,6 +323,7 @@
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Modal from "../common/Modal.vue";
import SaveTemplateModal from "../modals/SaveTemplateModal.vue";
import DataTable from "../common/DataTable.vue";
import DocHistory from "../common/DocHistory.vue";
import InputText from "primevue/inputtext";
@ -362,6 +375,7 @@ const showAddressModal = ref(false);
const showAddItemModal = ref(false);
const showConfirmationModal = ref(false);
const showResponseModal = ref(false);
const showSaveTemplateModal = ref(false);
const addressSearchResults = ref([]);
const itemSearchTerm = ref("");
@ -394,7 +408,7 @@ const fetchTemplates = async () => {
};
const onTemplateChange = () => {
const template = templates.value.find(t => t.templateName === selectedTemplate.value);
const template = templates.value.find(t => t.name === selectedTemplate.value);
if (template && template.items) {
selectedItems.value = template.items.map(item => ({
itemCode: item.itemCode,
@ -414,6 +428,35 @@ const onTemplateChange = () => {
}
};
const openSaveTemplateModal = () => {
showSaveTemplateModal.value = true;
};
const confirmSaveTemplate = async (templateData) => {
try {
const data = {
templateName: templateData.templateName,
description: templateData.description,
company: company.currentCompany,
sourceQuotation: estimate.value.name,
items: selectedItems.value.map(item => ({
itemCode: item.itemCode,
itemName: item.itemName,
description: item.description,
qty: item.qty,
standardRate: item.standardRate,
discountPercentage: item.discountPercentage
}))
};
await Api.createEstimateTemplate(data);
notificationStore.addSuccess("Template saved successfully", "success");
showSaveTemplateModal.value = false;
} catch (error) {
console.error("Error saving template:", error);
notificationStore.addNotification("Failed to save template", "error");
}
};
const searchAddresses = async () => {
const searchTerm = formData.address.trim();
if (!searchTerm) return;
@ -1092,5 +1135,9 @@ onMounted(async () => {
font-size: 0.85rem;
color: #666;
}
.field-group {
margin-bottom: 1rem;
}
</style>
<parameter name="filePath"></parameter>