initial commit
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
@page
|
||||
@{
|
||||
ViewData["Title"] = "Sales Order List";
|
||||
}
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="grid-container">
|
||||
<div ref="mainGridRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" ref="mainModalRef" id="MainModal" aria-hidden="true" tabindex="-1" data-bs-focus="false" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ state.mainTitle }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" v-model="state.id" id="Id" name="Id" />
|
||||
<form id="MainForm">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Main Info</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="OrderDate">Order Date</label>
|
||||
<input ref="orderDateRef" />
|
||||
<label class="text-danger">{{ state.errors.orderDate }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="Number">Number</label>
|
||||
<input ref="numberRef" v-model="state.number" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="CustomerId">Customer</label>
|
||||
<div ref="customerIdRef"></div>
|
||||
<label class="text-danger">{{ state.errors.customerId }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="TaxId">Tax</label>
|
||||
<div ref="taxIdRef"></div>
|
||||
<label class="text-danger">{{ state.errors.taxId }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="OrderStatus">Order Status</label>
|
||||
<div ref="orderStatusRef"></div>
|
||||
<label class="text-danger">{{ state.errors.orderStatus }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-12">
|
||||
<label for="Description">Description</label>
|
||||
<textarea class="form-control" rows="3" v-model="state.description"></textarea>
|
||||
<label class="text-danger">{{ state.errors.description }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="ComplexDiv" :style="{ display: state.showComplexDiv ? 'block' : 'none' }">
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Sales Order Item</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="grid-container">
|
||||
<div ref="secondaryGridRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header text-white">
|
||||
<h5 class="mb-0">Payment Summary</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex justify-content-between py-2 border-bottom">
|
||||
<span class="fw-bold">Subtotal</span>
|
||||
<span id="SubTotalAmount">{{ state.subTotalAmount }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between py-2 border-bottom">
|
||||
<span class="fw-bold">Tax</span>
|
||||
<span id="TaxAmount">{{ state.taxAmount }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between py-2">
|
||||
<span class="fw-bold">Total Amount</span>
|
||||
<span id="TotalAmount" class="fw-bold text-success">{{ state.totalAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button"
|
||||
id="MainSaveButton"
|
||||
class="btn"
|
||||
v-bind:class="state.deleteMode ? 'btn-danger' : 'btn-primary'"
|
||||
v-on:click="handler.handleSubmit"
|
||||
v-bind:disabled="state.isSubmitting">
|
||||
<span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
|
||||
<span v-if="!state.isSubmitting">{{ state.deleteMode ? 'Delete' : 'Save' }}</span>
|
||||
<span v-else>{{ state.deleteMode ? 'Deleting...' : 'Saving...' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section scripts {
|
||||
<script src="~/FrontEnd/Pages/SalesOrders/SalesOrderList.cshtml.js"></script>
|
||||
}
|
||||
@@ -0,0 +1,988 @@
|
||||
const App = {
|
||||
setup() {
|
||||
const state = Vue.reactive({
|
||||
mainData: [],
|
||||
deleteMode: false,
|
||||
customerListLookupData: [],
|
||||
taxListLookupData: [],
|
||||
salesOrderStatusListLookupData: [],
|
||||
secondaryData: [],
|
||||
productListLookupData: [],
|
||||
mainTitle: null,
|
||||
id: '',
|
||||
number: '',
|
||||
orderDate: '',
|
||||
description: '',
|
||||
customerId: null,
|
||||
taxId: null,
|
||||
orderStatus: null,
|
||||
errors: {
|
||||
orderDate: '',
|
||||
customerId: '',
|
||||
taxId: '',
|
||||
orderStatus: '',
|
||||
description: ''
|
||||
},
|
||||
showComplexDiv: false,
|
||||
isSubmitting: false,
|
||||
subTotalAmount: '0.00',
|
||||
taxAmount: '0.00',
|
||||
totalAmount: '0.00'
|
||||
});
|
||||
|
||||
const mainGridRef = Vue.ref(null);
|
||||
const mainModalRef = Vue.ref(null);
|
||||
const orderDateRef = Vue.ref(null);
|
||||
const numberRef = Vue.ref(null);
|
||||
const customerIdRef = Vue.ref(null);
|
||||
const taxIdRef = Vue.ref(null);
|
||||
const orderStatusRef = Vue.ref(null);
|
||||
const secondaryGridRef = Vue.ref(null);
|
||||
|
||||
const validateForm = function () {
|
||||
state.errors.orderDate = '';
|
||||
state.errors.customerId = '';
|
||||
state.errors.taxId = '';
|
||||
state.errors.orderStatus = '';
|
||||
|
||||
let isValid = true;
|
||||
|
||||
if (!state.orderDate) {
|
||||
state.errors.orderDate = 'Order date is required.';
|
||||
isValid = false;
|
||||
}
|
||||
if (!state.customerId) {
|
||||
state.errors.customerId = 'Customer is required.';
|
||||
isValid = false;
|
||||
}
|
||||
if (!state.taxId) {
|
||||
state.errors.taxId = 'Tax is required.';
|
||||
isValid = false;
|
||||
}
|
||||
if (!state.orderStatus) {
|
||||
state.errors.orderStatus = 'Order status is required.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const resetFormState = () => {
|
||||
state.id = '';
|
||||
state.number = '';
|
||||
state.orderDate = '';
|
||||
state.description = '';
|
||||
state.customerId = null;
|
||||
state.taxId = null;
|
||||
state.orderStatus = null;
|
||||
state.errors = {
|
||||
orderDate: '',
|
||||
customerId: '',
|
||||
taxId: '',
|
||||
orderStatus: '',
|
||||
description: ''
|
||||
};
|
||||
state.secondaryData = [];
|
||||
state.subTotalAmount = '0.00';
|
||||
state.taxAmount = '0.00';
|
||||
state.totalAmount = '0.00';
|
||||
state.showComplexDiv = false;
|
||||
};
|
||||
|
||||
const services = {
|
||||
getMainData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/SalesOrder/GetSalesOrderList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
createMainData: async (orderDate, description, orderStatus, taxId, customerId, createdById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/SalesOrder/CreateSalesOrder', {
|
||||
orderDate, description, orderStatus, taxId, customerId, createdById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateMainData: async (id, orderDate, description, orderStatus, taxId, customerId, updatedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/SalesOrder/UpdateSalesOrder', {
|
||||
id, orderDate, description, orderStatus, taxId, customerId, updatedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
deleteMainData: async (id, deletedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/SalesOrder/DeleteSalesOrder', {
|
||||
id, deletedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getCustomerListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Customer/GetCustomerList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getTaxListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Tax/GetTaxList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getSalesOrderStatusListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/SalesOrder/GetSalesOrderStatusList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getSecondaryData: async (salesOrderId) => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/SalesOrderItem/GetSalesOrderItemBySalesOrderIdList?salesOrderId=' + salesOrderId, {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
createSecondaryData: async (unitPrice, quantity, summary, productId, salesOrderId, createdById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/SalesOrderItem/CreateSalesOrderItem', {
|
||||
unitPrice, quantity, summary, productId, salesOrderId, createdById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateSecondaryData: async (id, unitPrice, quantity, summary, productId, salesOrderId, updatedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/SalesOrderItem/UpdateSalesOrderItem', {
|
||||
id, unitPrice, quantity, summary, productId, salesOrderId, updatedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
deleteSecondaryData: async (id, deletedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/SalesOrderItem/DeleteSalesOrderItem', {
|
||||
id, deletedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getProductListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Product/GetProductList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const methods = {
|
||||
populateCustomerListLookupData: async () => {
|
||||
const response = await services.getCustomerListLookupData();
|
||||
state.customerListLookupData = response?.data?.content?.data;
|
||||
},
|
||||
populateTaxListLookupData: async () => {
|
||||
const response = await services.getTaxListLookupData();
|
||||
state.taxListLookupData = response?.data?.content?.data;
|
||||
},
|
||||
populateSalesOrderStatusListLookupData: async () => {
|
||||
const response = await services.getSalesOrderStatusListLookupData();
|
||||
state.salesOrderStatusListLookupData = response?.data?.content?.data;
|
||||
},
|
||||
populateMainData: async () => {
|
||||
const response = await services.getMainData();
|
||||
state.mainData = response?.data?.content?.data.map(item => ({
|
||||
...item,
|
||||
orderDate: new Date(item.orderDate),
|
||||
createdAtUtc: new Date(item.createdAtUtc)
|
||||
}));
|
||||
},
|
||||
populateSecondaryData: async (salesOrderId) => {
|
||||
try {
|
||||
const response = await services.getSecondaryData(salesOrderId);
|
||||
state.secondaryData = response?.data?.content?.data.map(item => ({
|
||||
...item,
|
||||
createdAtUtc: new Date(item.createdAtUtc)
|
||||
}));
|
||||
methods.refreshPaymentSummary(salesOrderId);
|
||||
} catch (error) {
|
||||
state.secondaryData = [];
|
||||
}
|
||||
},
|
||||
populateProductListLookupData: async () => {
|
||||
const response = await services.getProductListLookupData();
|
||||
state.productListLookupData = response?.data?.content?.data;
|
||||
},
|
||||
refreshPaymentSummary: async (id) => {
|
||||
const record = state.mainData.find(item => item.id === id);
|
||||
if (record) {
|
||||
state.subTotalAmount = NumberFormatManager.formatToLocale(record.beforeTaxAmount ?? 0);
|
||||
state.taxAmount = NumberFormatManager.formatToLocale(record.taxAmount ?? 0);
|
||||
state.totalAmount = NumberFormatManager.formatToLocale(record.afterTaxAmount ?? 0);
|
||||
}
|
||||
},
|
||||
handleFormSubmit: async () => {
|
||||
state.isSubmitting = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
if (!validateForm()) {
|
||||
state.isSubmitting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = state.id === ''
|
||||
? await services.createMainData(state.orderDate, state.description, state.orderStatus, state.taxId, state.customerId, StorageManager.getUserId())
|
||||
: state.deleteMode
|
||||
? await services.deleteMainData(state.id, StorageManager.getUserId())
|
||||
: await services.updateMainData(state.id, state.orderDate, state.description, state.orderStatus, state.taxId, state.customerId, StorageManager.getUserId());
|
||||
|
||||
if (response.data.code === 200) {
|
||||
await methods.populateMainData();
|
||||
mainGrid.refresh();
|
||||
|
||||
if (!state.deleteMode) {
|
||||
state.mainTitle = 'Edit Sales Order';
|
||||
state.id = response?.data?.content?.data.id ?? '';
|
||||
state.number = response?.data?.content?.data.number ?? '';
|
||||
state.orderDate = response?.data?.content?.data.orderDate ? new Date(response.data.content.data.orderDate) : null;
|
||||
state.description = response?.data?.content?.data.description ?? '';
|
||||
state.customerId = response?.data?.content?.data.customerId ?? '';
|
||||
state.taxId = response?.data?.content?.data.taxId ?? '';
|
||||
taxListLookup.trackingChange = true;
|
||||
state.orderStatus = String(response?.data?.content?.data.orderStatus ?? '');
|
||||
state.showComplexDiv = true;
|
||||
|
||||
await methods.refreshPaymentSummary(state.id);
|
||||
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
timer: 1000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Delete Successful',
|
||||
text: 'Form will be closed...',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
setTimeout(() => {
|
||||
mainModal.obj.hide();
|
||||
resetFormState();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: state.deleteMode ? 'Delete Failed' : 'Save Failed',
|
||||
text: response.data.message ?? 'Please check your data.',
|
||||
confirmButtonText: 'Try Again'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'An Error Occurred',
|
||||
text: error.response?.data?.message ?? 'Please try again.',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
} finally {
|
||||
state.isSubmitting = false;
|
||||
}
|
||||
},
|
||||
onMainModalHidden: () => {
|
||||
state.errors.orderDate = '';
|
||||
state.errors.customerId = '';
|
||||
state.errors.taxId = '';
|
||||
state.errors.orderStatus = '';
|
||||
taxListLookup.trackingChange = false;
|
||||
}
|
||||
};
|
||||
|
||||
const customerListLookup = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
if (state.customerListLookupData && Array.isArray(state.customerListLookupData)) {
|
||||
customerListLookup.obj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.customerListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
placeholder: 'Select a Customer',
|
||||
filterBarPlaceholder: 'Search',
|
||||
sortOrder: 'Ascending',
|
||||
allowFiltering: true,
|
||||
filtering: (e) => {
|
||||
e.preventDefaultAction = true;
|
||||
let query = new ej.data.Query();
|
||||
if (e.text !== '') {
|
||||
query = query.where('name', 'startsWith', e.text, true);
|
||||
}
|
||||
e.updateData(state.customerListLookupData, query);
|
||||
},
|
||||
change: (e) => {
|
||||
state.customerId = e.value;
|
||||
}
|
||||
});
|
||||
customerListLookup.obj.appendTo(customerIdRef.value);
|
||||
}
|
||||
},
|
||||
refresh: () => {
|
||||
if (customerListLookup.obj) {
|
||||
customerListLookup.obj.value = state.customerId;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const taxListLookup = {
|
||||
obj: null,
|
||||
trackingChange: false,
|
||||
create: () => {
|
||||
if (state.taxListLookupData && Array.isArray(state.taxListLookupData)) {
|
||||
taxListLookup.obj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.taxListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
placeholder: 'Select a Tax',
|
||||
change: async (e) => {
|
||||
state.taxId = e.value;
|
||||
if (e.isInteracted && taxListLookup.trackingChange) {
|
||||
await methods.handleFormSubmit();
|
||||
}
|
||||
}
|
||||
});
|
||||
taxListLookup.obj.appendTo(taxIdRef.value);
|
||||
}
|
||||
},
|
||||
refresh: () => {
|
||||
if (taxListLookup.obj) {
|
||||
taxListLookup.obj.value = state.taxId;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const salesOrderStatusListLookup = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
if (state.salesOrderStatusListLookupData && Array.isArray(state.salesOrderStatusListLookupData)) {
|
||||
salesOrderStatusListLookup.obj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.salesOrderStatusListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
placeholder: 'Select an Order Status',
|
||||
change: (e) => {
|
||||
state.orderStatus = e.value;
|
||||
}
|
||||
});
|
||||
salesOrderStatusListLookup.obj.appendTo(orderStatusRef.value);
|
||||
}
|
||||
},
|
||||
refresh: () => {
|
||||
if (salesOrderStatusListLookup.obj) {
|
||||
salesOrderStatusListLookup.obj.value = state.orderStatus;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const orderDatePicker = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
orderDatePicker.obj = new ej.calendars.DatePicker({
|
||||
format: 'yyyy-MM-dd',
|
||||
value: state.orderDate ? new Date(state.orderDate) : null,
|
||||
change: (e) => {
|
||||
state.orderDate = DateFormatManager.preserveClientDate(e.value);
|
||||
}
|
||||
});
|
||||
orderDatePicker.obj.appendTo(orderDateRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (orderDatePicker.obj) {
|
||||
orderDatePicker.obj.value = state.orderDate ? new Date(state.orderDate) : null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const numberText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
numberText.obj = new ej.inputs.TextBox({
|
||||
placeholder: '[auto]',
|
||||
readonly: true
|
||||
});
|
||||
numberText.obj.appendTo(numberRef.value);
|
||||
}
|
||||
};
|
||||
|
||||
Vue.watch(
|
||||
() => state.orderDate,
|
||||
(newVal, oldVal) => {
|
||||
orderDatePicker.refresh();
|
||||
state.errors.orderDate = '';
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.customerId,
|
||||
(newVal, oldVal) => {
|
||||
customerListLookup.refresh();
|
||||
state.errors.customerId = '';
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.taxId,
|
||||
(newVal, oldVal) => {
|
||||
taxListLookup.refresh();
|
||||
state.errors.taxId = '';
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.orderStatus,
|
||||
(newVal, oldVal) => {
|
||||
salesOrderStatusListLookup.refresh();
|
||||
state.errors.orderStatus = '';
|
||||
}
|
||||
);
|
||||
|
||||
const mainGrid = {
|
||||
obj: null,
|
||||
create: async (dataSource) => {
|
||||
mainGrid.obj = new ej.grids.Grid({
|
||||
height: '240px',
|
||||
dataSource: dataSource,
|
||||
allowFiltering: true,
|
||||
allowSorting: true,
|
||||
allowSelection: true,
|
||||
allowGrouping: true,
|
||||
groupSettings: { columns: ['customerName'] },
|
||||
allowTextWrap: true,
|
||||
allowResizing: true,
|
||||
allowPaging: true,
|
||||
allowExcelExport: true,
|
||||
filterSettings: { type: 'CheckBox' },
|
||||
sortSettings: { columns: [{ field: 'createdAtUtc', direction: 'Descending' }] },
|
||||
pageSettings: { currentPage: 1, pageSize: 50, pageSizes: ["10", "20", "50", "100", "200", "All"] },
|
||||
selectionSettings: { persistSelection: true, type: 'Single' },
|
||||
autoFit: true,
|
||||
showColumnMenu: true,
|
||||
gridLines: 'Horizontal',
|
||||
columns: [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
field: 'id', isPrimaryKey: true, headerText: 'Id', visible: false
|
||||
},
|
||||
{ field: 'number', headerText: 'Number', width: 150, minWidth: 150 },
|
||||
{ field: 'orderDate', headerText: 'SO Date', width: 150, format: 'yyyy-MM-dd' },
|
||||
{ field: 'customerName', headerText: 'Customer', width: 200, minWidth: 200 },
|
||||
{ field: 'orderStatusName', headerText: 'Status', width: 150, minWidth: 150 },
|
||||
{ field: 'taxName', headerText: 'Tax', width: 150, minWidth: 150 },
|
||||
{ field: 'afterTaxAmount', headerText: 'Total Amount', width: 150, minWidth: 150, format: 'N2' },
|
||||
{ field: 'createdAtUtc', headerText: 'Created At UTC', width: 150, format: 'yyyy-MM-dd HH:mm' }
|
||||
],
|
||||
toolbar: [
|
||||
'ExcelExport', 'Search',
|
||||
{ type: 'Separator' },
|
||||
{ text: 'Add', tooltipText: 'Add', prefixIcon: 'e-add', id: 'AddCustom' },
|
||||
{ text: 'Edit', tooltipText: 'Edit', prefixIcon: 'e-edit', id: 'EditCustom' },
|
||||
{ text: 'Delete', tooltipText: 'Delete', prefixIcon: 'e-delete', id: 'DeleteCustom' },
|
||||
{ type: 'Separator' },
|
||||
{ text: 'Print PDF', tooltipText: 'Print PDF', id: 'PrintPDFCustom' },
|
||||
],
|
||||
beforeDataBound: () => { },
|
||||
dataBound: function () {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'PrintPDFCustom'], false);
|
||||
mainGrid.obj.autoFitColumns(['number', 'orderDate', 'customerName', 'orderStatusName', 'taxName', 'afterTaxAmount', 'createdAtUtc']);
|
||||
},
|
||||
excelExportComplete: () => { },
|
||||
rowSelected: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length == 1) {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'PrintPDFCustom'], true);
|
||||
} else {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'PrintPDFCustom'], false);
|
||||
}
|
||||
},
|
||||
rowDeselected: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length == 1) {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'PrintPDFCustom'], true);
|
||||
} else {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'PrintPDFCustom'], false);
|
||||
}
|
||||
},
|
||||
rowSelecting: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
mainGrid.obj.clearSelection();
|
||||
}
|
||||
},
|
||||
toolbarClick: async (args) => {
|
||||
if (args.item.id === 'MainGrid_excelexport') {
|
||||
mainGrid.obj.excelExport();
|
||||
}
|
||||
|
||||
if (args.item.id === 'AddCustom') {
|
||||
state.deleteMode = false;
|
||||
state.mainTitle = 'Add Sales Order';
|
||||
resetFormState();
|
||||
state.secondaryData = [];
|
||||
secondaryGrid.refresh();
|
||||
state.showComplexDiv = false;
|
||||
mainModal.obj.show();
|
||||
}
|
||||
|
||||
if (args.item.id === 'EditCustom') {
|
||||
state.deleteMode = false;
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
state.mainTitle = 'Edit Sales Order';
|
||||
state.id = selectedRecord.id ?? '';
|
||||
state.number = selectedRecord.number ?? '';
|
||||
state.orderDate = selectedRecord.orderDate ? new Date(selectedRecord.orderDate) : null;
|
||||
state.description = selectedRecord.description ?? '';
|
||||
state.customerId = selectedRecord.customerId ?? '';
|
||||
state.taxId = selectedRecord.taxId ?? '';
|
||||
taxListLookup.trackingChange = true;
|
||||
state.orderStatus = String(selectedRecord.orderStatus ?? '');
|
||||
state.showComplexDiv = true;
|
||||
|
||||
await methods.populateSecondaryData(selectedRecord.id);
|
||||
secondaryGrid.refresh();
|
||||
|
||||
mainModal.obj.show();
|
||||
}
|
||||
}
|
||||
|
||||
if (args.item.id === 'DeleteCustom') {
|
||||
state.deleteMode = true;
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
state.mainTitle = 'Delete Sales Order?';
|
||||
state.id = selectedRecord.id ?? '';
|
||||
state.number = selectedRecord.number ?? '';
|
||||
state.orderDate = selectedRecord.orderDate ? new Date(selectedRecord.orderDate) : null;
|
||||
state.description = selectedRecord.description ?? '';
|
||||
state.customerId = selectedRecord.customerId ?? '';
|
||||
state.taxId = selectedRecord.taxId ?? '';
|
||||
state.orderStatus = String(selectedRecord.orderStatus ?? '');
|
||||
state.showComplexDiv = false;
|
||||
|
||||
await methods.populateSecondaryData(selectedRecord.id);
|
||||
secondaryGrid.refresh();
|
||||
|
||||
mainModal.obj.show();
|
||||
}
|
||||
}
|
||||
|
||||
if (args.item.id === 'PrintPDFCustom') {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
window.open('/SalesOrders/SalesOrderPdf?id=' + (selectedRecord.id ?? ''), '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mainGrid.obj.appendTo(mainGridRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
mainGrid.obj.setProperties({ dataSource: state.mainData });
|
||||
}
|
||||
};
|
||||
|
||||
const secondaryGrid = {
|
||||
obj: null,
|
||||
create: async (dataSource) => {
|
||||
secondaryGrid.obj = new ej.grids.Grid({
|
||||
height: 400,
|
||||
dataSource: dataSource,
|
||||
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true, mode: 'Normal', allowEditOnDblClick: true },
|
||||
allowFiltering: false,
|
||||
allowSorting: true,
|
||||
allowSelection: true,
|
||||
allowGrouping: false,
|
||||
allowTextWrap: true,
|
||||
allowResizing: true,
|
||||
allowPaging: false,
|
||||
allowExcelExport: true,
|
||||
filterSettings: { type: 'CheckBox' },
|
||||
sortSettings: { columns: [{ field: 'productName', direction: 'Descending' }] },
|
||||
pageSettings: { currentPage: 1, pageSize: 50, pageSizes: ["10", "20", "50", "100", "200", "All"] },
|
||||
selectionSettings: { persistSelection: true, type: 'Single' },
|
||||
autoFit: false,
|
||||
showColumnMenu: false,
|
||||
gridLines: 'Horizontal',
|
||||
columns: [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
field: 'id', isPrimaryKey: true, headerText: 'Id', visible: false
|
||||
},
|
||||
{
|
||||
field: 'productId',
|
||||
headerText: 'Product',
|
||||
width: 250,
|
||||
validationRules: { required: true },
|
||||
disableHtmlEncode: false,
|
||||
valueAccessor: (field, data, column) => {
|
||||
const product = state.productListLookupData.find(item => item.id === data[field]);
|
||||
return product ? `${product.name}` : '';
|
||||
},
|
||||
editType: 'dropdownedit',
|
||||
edit: {
|
||||
create: () => {
|
||||
let productElem = document.createElement('input');
|
||||
return productElem;
|
||||
},
|
||||
read: () => {
|
||||
return productObj.value;
|
||||
},
|
||||
destroy: () => {
|
||||
productObj.destroy();
|
||||
},
|
||||
write: (args) => {
|
||||
productObj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.productListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
value: args.rowData.productId,
|
||||
change: (e) => {
|
||||
const selectedProduct = state.productListLookupData.find(item => item.id === e.value);
|
||||
if (selectedProduct) {
|
||||
args.rowData.productId = selectedProduct.id;
|
||||
if (numberObj) {
|
||||
numberObj.value = selectedProduct.number;
|
||||
}
|
||||
if (priceObj) {
|
||||
priceObj.value = selectedProduct.unitPrice;
|
||||
}
|
||||
if (summaryObj) {
|
||||
summaryObj.value = selectedProduct.description;
|
||||
}
|
||||
if (quantityObj) {
|
||||
quantityObj.value = 1;
|
||||
const total = selectedProduct.unitPrice * quantityObj.value;
|
||||
if (totalObj) {
|
||||
totalObj.value = total;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: 'Select a Product',
|
||||
floatLabelType: 'Never'
|
||||
});
|
||||
productObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'unitPrice',
|
||||
headerText: 'Unit Price',
|
||||
width: 200, validationRules: { required: true }, type: 'number', format: 'N2', textAlign: 'Right',
|
||||
edit: {
|
||||
create: () => {
|
||||
let priceElem = document.createElement('input');
|
||||
return priceElem;
|
||||
},
|
||||
read: () => {
|
||||
return priceObj.value;
|
||||
},
|
||||
destroy: () => {
|
||||
priceObj.destroy();
|
||||
},
|
||||
write: (args) => {
|
||||
priceObj = new ej.inputs.NumericTextBox({
|
||||
value: args.rowData.unitPrice ?? 0,
|
||||
change: (e) => {
|
||||
if (quantityObj && totalObj) {
|
||||
const total = e.value * quantityObj.value;
|
||||
totalObj.value = total;
|
||||
}
|
||||
}
|
||||
});
|
||||
priceObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'quantity',
|
||||
headerText: 'Quantity',
|
||||
width: 200,
|
||||
validationRules: {
|
||||
required: true,
|
||||
custom: [(args) => {
|
||||
return args['value'] > 0;
|
||||
}, 'Must be a positive number and not zero']
|
||||
},
|
||||
type: 'number', format: 'N2', textAlign: 'Right',
|
||||
edit: {
|
||||
create: () => {
|
||||
let quantityElem = document.createElement('input');
|
||||
return quantityElem;
|
||||
},
|
||||
read: () => {
|
||||
return quantityObj.value;
|
||||
},
|
||||
destroy: () => {
|
||||
quantityObj.destroy();
|
||||
},
|
||||
write: (args) => {
|
||||
quantityObj = new ej.inputs.NumericTextBox({
|
||||
value: args.rowData.quantity ?? 0,
|
||||
change: (e) => {
|
||||
if (priceObj && totalObj) {
|
||||
const total = e.value * priceObj.value;
|
||||
totalObj.value = total;
|
||||
}
|
||||
}
|
||||
});
|
||||
quantityObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'total',
|
||||
headerText: 'Total',
|
||||
width: 200, validationRules: { required: false }, type: 'number', format: 'N2', textAlign: 'Right',
|
||||
edit: {
|
||||
create: () => {
|
||||
let totalElem = document.createElement('input');
|
||||
return totalElem;
|
||||
},
|
||||
read: () => {
|
||||
return totalObj.value;
|
||||
},
|
||||
destroy: () => {
|
||||
totalObj.destroy();
|
||||
},
|
||||
write: (args) => {
|
||||
totalObj = new ej.inputs.NumericTextBox({
|
||||
value: args.rowData.total ?? 0,
|
||||
readonly: true
|
||||
});
|
||||
totalObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'productNumber',
|
||||
headerText: 'Product Number',
|
||||
allowEditing: false,
|
||||
width: 180,
|
||||
edit: {
|
||||
create: () => {
|
||||
let numberElem = document.createElement('input');
|
||||
return numberElem;
|
||||
},
|
||||
read: () => {
|
||||
return numberObj.value;
|
||||
},
|
||||
destroy: () => {
|
||||
numberObj.destroy();
|
||||
},
|
||||
write: (args) => {
|
||||
numberObj = new ej.inputs.TextBox();
|
||||
numberObj.value = args.rowData.productNumber;
|
||||
numberObj.readonly = true;
|
||||
numberObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'summary',
|
||||
headerText: 'Summary',
|
||||
width: 200,
|
||||
edit: {
|
||||
create: () => {
|
||||
let summaryElem = document.createElement('input');
|
||||
return summaryElem;
|
||||
},
|
||||
read: () => {
|
||||
return summaryObj.value;
|
||||
},
|
||||
destroy: () => {
|
||||
summaryObj.destroy();
|
||||
},
|
||||
write: (args) => {
|
||||
summaryObj = new ej.inputs.TextBox();
|
||||
summaryObj.value = args.rowData.summary;
|
||||
summaryObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
toolbar: [
|
||||
'ExcelExport',
|
||||
{ type: 'Separator' },
|
||||
'Add', 'Edit', 'Delete', 'Update', 'Cancel',
|
||||
],
|
||||
beforeDataBound: () => { },
|
||||
dataBound: function () { },
|
||||
excelExportComplete: () => { },
|
||||
rowSelected: () => {
|
||||
if (secondaryGrid.obj.getSelectedRecords().length == 1) {
|
||||
secondaryGrid.obj.toolbarModule.enableItems(['Edit'], true);
|
||||
} else {
|
||||
secondaryGrid.obj.toolbarModule.enableItems(['Edit'], false);
|
||||
}
|
||||
},
|
||||
rowDeselected: () => {
|
||||
if (secondaryGrid.obj.getSelectedRecords().length == 1) {
|
||||
secondaryGrid.obj.toolbarModule.enableItems(['Edit'], true);
|
||||
} else {
|
||||
secondaryGrid.obj.toolbarModule.enableItems(['Edit'], false);
|
||||
}
|
||||
},
|
||||
rowSelecting: () => {
|
||||
if (secondaryGrid.obj.getSelectedRecords().length) {
|
||||
secondaryGrid.obj.clearSelection();
|
||||
}
|
||||
},
|
||||
toolbarClick: (args) => {
|
||||
if (args.item.id === 'SecondaryGrid_excelexport') {
|
||||
secondaryGrid.obj.excelExport();
|
||||
}
|
||||
},
|
||||
actionComplete: async (args) => {
|
||||
if (args.requestType === 'save' && args.action === 'add') {
|
||||
const salesOrderId = state.id;
|
||||
const userId = StorageManager.getUserId();
|
||||
const data = args.data;
|
||||
|
||||
await services.createSecondaryData(data?.unitPrice, data?.quantity, data?.summary, data?.productId, salesOrderId, userId);
|
||||
await methods.populateSecondaryData(salesOrderId);
|
||||
secondaryGrid.refresh();
|
||||
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
}
|
||||
if (args.requestType === 'save' && args.action === 'edit') {
|
||||
const salesOrderId = state.id;
|
||||
const userId = StorageManager.getUserId();
|
||||
const data = args.data;
|
||||
|
||||
await services.updateSecondaryData(data?.id, data?.unitPrice, data?.quantity, data?.summary, data?.productId, salesOrderId, userId);
|
||||
await methods.populateSecondaryData(salesOrderId);
|
||||
secondaryGrid.refresh();
|
||||
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
}
|
||||
if (args.requestType === 'delete') {
|
||||
const salesOrderId = state.id;
|
||||
const userId = StorageManager.getUserId();
|
||||
const data = args.data[0];
|
||||
|
||||
await services.deleteSecondaryData(data?.id, userId);
|
||||
await methods.populateSecondaryData(salesOrderId);
|
||||
secondaryGrid.refresh();
|
||||
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Delete Successful',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
}
|
||||
|
||||
await methods.populateMainData();
|
||||
mainGrid.refresh();
|
||||
await methods.refreshPaymentSummary(state.id);
|
||||
}
|
||||
});
|
||||
secondaryGrid.obj.appendTo(secondaryGridRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
secondaryGrid.obj.setProperties({ dataSource: state.secondaryData });
|
||||
}
|
||||
};
|
||||
|
||||
const mainModal = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
mainModal.obj = new bootstrap.Modal(mainModalRef.value, {
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Vue.onMounted(async () => {
|
||||
try {
|
||||
await SecurityManager.authorizePage(['SalesOrders']);
|
||||
await SecurityManager.validateToken();
|
||||
|
||||
await methods.populateMainData();
|
||||
await mainGrid.create(state.mainData);
|
||||
|
||||
mainModal.create();
|
||||
mainModalRef.value?.addEventListener('hidden.bs.modal', methods.onMainModalHidden);
|
||||
await methods.populateCustomerListLookupData();
|
||||
customerListLookup.create();
|
||||
await methods.populateTaxListLookupData();
|
||||
taxListLookup.create();
|
||||
await methods.populateSalesOrderStatusListLookupData();
|
||||
salesOrderStatusListLookup.create();
|
||||
orderDatePicker.create();
|
||||
numberText.create();
|
||||
await methods.populateProductListLookupData();
|
||||
await secondaryGrid.create(state.secondaryData);
|
||||
} catch (e) {
|
||||
console.error('page init error:', e);
|
||||
} finally {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Vue.onUnmounted(() => {
|
||||
mainModalRef.value?.removeEventListener('hidden.bs.modal', methods.onMainModalHidden);
|
||||
});
|
||||
|
||||
return {
|
||||
mainGridRef,
|
||||
mainModalRef,
|
||||
orderDateRef,
|
||||
numberRef,
|
||||
customerIdRef,
|
||||
taxIdRef,
|
||||
orderStatusRef,
|
||||
secondaryGridRef,
|
||||
state,
|
||||
methods,
|
||||
handler: {
|
||||
handleSubmit: methods.handleFormSubmit
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
@@ -0,0 +1,241 @@
|
||||
@page
|
||||
@{
|
||||
ViewData["Title"] = "Sales Order PDF";
|
||||
}
|
||||
|
||||
<div id="app" class="row">
|
||||
<div class="col-12">
|
||||
<div class="print-indicator" v-cloak>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<button id="download-pdf" class="btn btn-danger d-flex align-items-center" v-on:click="handler.downloadPDF" v-bind:disabled="state.isDownloading">
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" v-if="state.isDownloading"></span>
|
||||
<span class="button-text" v-if="!state.isDownloading">
|
||||
<i class="bi bi-file-earmark-pdf-fill me-2"></i> Download PDF
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="content" class="print-area">
|
||||
<div class="company-info">
|
||||
<h2>{{ state.company.name }}</h2>
|
||||
<p>{{ state.companyAddress }}</p>
|
||||
<p>Email: {{ state.company.emailAddress }} | Phone: {{ state.company.phoneNumber }}</p>
|
||||
</div>
|
||||
|
||||
<h1>Sales Order</h1>
|
||||
|
||||
<div class="info-container">
|
||||
<table class="details-table">
|
||||
<tr>
|
||||
<th colspan="2">Customer Information</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Name:</strong></td>
|
||||
<td>{{ state.customer.name }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Address:</strong></td>
|
||||
<td>{{ state.customerAddress }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Email:</strong></td>
|
||||
<td>{{ state.customer.emailAddress }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Phone:</strong></td>
|
||||
<td>{{ state.customer.phoneNumber }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="details-table">
|
||||
<tr>
|
||||
<th colspan="2">Order Information</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Order Number:</strong></td>
|
||||
<td>{{ state.orderNumber }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Order Date:</strong></td>
|
||||
<td>{{ state.orderDate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Currency:</strong></td>
|
||||
<td>{{ state.orderCurrency }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>_</strong></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table class="product-table" border="1" style="width: 100%; border-collapse: collapse;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product Number</th>
|
||||
<th>Product Name</th>
|
||||
<th>Unit Price</th>
|
||||
<th>Quantity</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in state.items" :key="item.productNumber">
|
||||
<td>{{ item?.product?.number }}</td>
|
||||
<td>{{ item?.product?.name }}</td>
|
||||
<td>{{ item?.unitPrice }}</td>
|
||||
<td>{{ item?.quantity }}</td>
|
||||
<td>{{ item?.total }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="payment-summary">
|
||||
<div class="column"></div>
|
||||
<div class="column">
|
||||
<table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
|
||||
<tr>
|
||||
<td style="font-weight: bold;">Subtotal:</td>
|
||||
<td style="text-align: right;">{{ state.subTotal }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight: bold;">Tax:</td>
|
||||
<td style="text-align: right;">{{ state.tax }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight: bold; font-size: 1.2em;">Total Amount:</td>
|
||||
<td style="text-align: right; font-weight: bold; font-size: 1.2em; color: #2c3e50;">
|
||||
{{ state.totalAmount }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSS -->
|
||||
<style>
|
||||
.print-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.print-area {
|
||||
width: 210mm;
|
||||
padding: 10mm;
|
||||
background-color: white;
|
||||
border: 1px dashed #cccccc;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#download-pdf {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.company-info {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.company-info h2 {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.company-info p {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.details-table {
|
||||
flex: 1;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.details-table th, .details-table td {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.details-table th {
|
||||
background-color: #f2f2f2;
|
||||
text-align: left;
|
||||
height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.product-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-table th, .product-table td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.product-table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.payment-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.payment-summary .column {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.payment-summary p {
|
||||
margin: 5px 0;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section scripts {
|
||||
<script src="~/FrontEnd/Pages/SalesOrders/SalesOrderPdf.cshtml.js"></script>
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
const App = {
|
||||
setup() {
|
||||
const state = Vue.reactive({
|
||||
company: {
|
||||
name: '',
|
||||
emailAddress: '',
|
||||
phoneNumber: '',
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
country: ''
|
||||
},
|
||||
companyAddress: '',
|
||||
customer: {
|
||||
name: '',
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
country: '',
|
||||
emailAddress: '',
|
||||
phoneNumber: ''
|
||||
},
|
||||
customerAddress: '',
|
||||
orderNumber: '',
|
||||
orderDate: '',
|
||||
orderCurrency: '',
|
||||
subTotal: '',
|
||||
tax: '',
|
||||
totalAmount: '',
|
||||
items: [],
|
||||
isDownloading: false
|
||||
});
|
||||
|
||||
const services = {
|
||||
getPDFData: async (id) => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/SalesOrder/GetSalesOrderSingle?id=' + id, {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const methods = {
|
||||
populatePDFData: async (id) => {
|
||||
const response = await services.getPDFData(id);
|
||||
const pdfData = response?.data?.content?.data || {};
|
||||
state.items = pdfData.salesOrderItemList || [];
|
||||
state.customer = pdfData.customer || {};
|
||||
state.orderNumber = pdfData.number || '';
|
||||
state.orderDate = DateFormatManager.formatToLocale(pdfData.orderDate) || '';
|
||||
state.orderCurrency = StorageManager.getCompany()?.currency || '';
|
||||
state.subTotal = NumberFormatManager.formatToLocale(pdfData.beforeTaxAmount) || '';
|
||||
state.tax = NumberFormatManager.formatToLocale(pdfData.taxAmount) || '';
|
||||
state.totalAmount = NumberFormatManager.formatToLocale(pdfData.afterTaxAmount) || '';
|
||||
methods.bindPDFControls();
|
||||
},
|
||||
|
||||
bindPDFControls: () => {
|
||||
const company = StorageManager.getCompany() || state.company;
|
||||
state.company = {
|
||||
name: company.name,
|
||||
emailAddress: company.emailAddress,
|
||||
phoneNumber: company.phoneNumber,
|
||||
street: company.street,
|
||||
city: company.city,
|
||||
state: company.state,
|
||||
zipCode: company.zipCode,
|
||||
country: company.country
|
||||
};
|
||||
state.companyAddress = [
|
||||
company.street,
|
||||
company.city,
|
||||
company.state,
|
||||
company.zipCode,
|
||||
company.country
|
||||
].filter(Boolean).join(', ');
|
||||
|
||||
state.customerAddress = [
|
||||
state.customer.street,
|
||||
state.customer.city,
|
||||
state.customer.state,
|
||||
state.customer.zipCode,
|
||||
state.customer.country
|
||||
].filter(Boolean).join(', ');
|
||||
}
|
||||
};
|
||||
|
||||
const handler = {
|
||||
downloadPDF: async () => {
|
||||
state.isDownloading = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
try {
|
||||
const { jsPDF } = window.jspdf;
|
||||
const doc = new jsPDF('p', 'mm', 'a4');
|
||||
const content = document.getElementById('content');
|
||||
|
||||
await html2canvas(content, {
|
||||
scale: 2,
|
||||
useCORS: true
|
||||
}).then(canvas => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const imgWidth = 210;
|
||||
const pageHeight = 297;
|
||||
const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
||||
let position = 0;
|
||||
|
||||
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
|
||||
doc.save(`sales-order-${state.orderNumber || 'unknown'}.pdf`);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error generating PDF:', error);
|
||||
} finally {
|
||||
state.isDownloading = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Vue.onMounted(async () => {
|
||||
try {
|
||||
await SecurityManager.authorizePage(['SalesOrders']);
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var id = urlParams.get('id');
|
||||
await methods.populatePDFData(id ?? '');
|
||||
} catch (e) {
|
||||
console.error('page init error:', e);
|
||||
} finally {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
state,
|
||||
handler,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
Reference in New Issue
Block a user