initial commit
This commit is contained in:
@@ -0,0 +1,893 @@
|
||||
const App = {
|
||||
setup() {
|
||||
const state = Vue.reactive({
|
||||
mainData: [],
|
||||
deleteMode: false,
|
||||
warehouseFromListLookupData: [],
|
||||
warehouseToListLookupData: [],
|
||||
transferOutStatusListLookupData: [],
|
||||
secondaryData: [],
|
||||
productListLookupData: [],
|
||||
mainTitle: null,
|
||||
id: '',
|
||||
number: '',
|
||||
transferReleaseDate: '',
|
||||
description: '',
|
||||
warehouseFromId: null,
|
||||
warehouseToId: null,
|
||||
status: null,
|
||||
errors: {
|
||||
transferReleaseDate: '',
|
||||
warehouseFromId: '',
|
||||
warehouseToId: '',
|
||||
status: '',
|
||||
description: ''
|
||||
},
|
||||
showComplexDiv: false,
|
||||
isSubmitting: false,
|
||||
totalMovementFormatted: '0.00'
|
||||
});
|
||||
|
||||
const mainGridRef = Vue.ref(null);
|
||||
const mainModalRef = Vue.ref(null);
|
||||
const secondaryGridRef = Vue.ref(null);
|
||||
const transferReleaseDateRef = Vue.ref(null);
|
||||
const warehouseFromIdRef = Vue.ref(null);
|
||||
const warehouseToIdRef = Vue.ref(null);
|
||||
const statusRef = Vue.ref(null);
|
||||
const numberRef = Vue.ref(null);
|
||||
|
||||
const validateForm = function () {
|
||||
state.errors.transferReleaseDate = '';
|
||||
state.errors.warehouseFromId = '';
|
||||
state.errors.warehouseToId = '';
|
||||
state.errors.status = '';
|
||||
|
||||
let isValid = true;
|
||||
|
||||
if (!state.transferReleaseDate) {
|
||||
state.errors.transferReleaseDate = 'Release date is required.';
|
||||
isValid = false;
|
||||
}
|
||||
if (!state.warehouseFromId) {
|
||||
state.errors.warehouseFromId = 'Warehouse From is required.';
|
||||
isValid = false;
|
||||
}
|
||||
if (!state.warehouseToId) {
|
||||
state.errors.warehouseToId = 'Warehouse To is required.';
|
||||
isValid = false;
|
||||
}
|
||||
if (!state.status) {
|
||||
state.errors.status = 'Status is required.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const resetFormState = () => {
|
||||
state.id = '';
|
||||
state.number = '';
|
||||
state.transferReleaseDate = '';
|
||||
state.description = '';
|
||||
state.warehouseFromId = null;
|
||||
state.warehouseToId = null;
|
||||
state.status = null;
|
||||
state.errors = {
|
||||
transferReleaseDate: '',
|
||||
warehouseFromId: '',
|
||||
warehouseToId: '',
|
||||
status: '',
|
||||
description: ''
|
||||
};
|
||||
state.secondaryData = [];
|
||||
};
|
||||
|
||||
const transferReleaseDatePicker = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
transferReleaseDatePicker.obj = new ej.calendars.DatePicker({
|
||||
placeholder: 'Select Date',
|
||||
format: 'yyyy-MM-dd',
|
||||
value: state.transferReleaseDate ? new Date(state.transferReleaseDate) : null,
|
||||
change: (e) => {
|
||||
state.transferReleaseDate = e.value;
|
||||
}
|
||||
});
|
||||
transferReleaseDatePicker.obj.appendTo(transferReleaseDateRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (transferReleaseDatePicker.obj) {
|
||||
transferReleaseDatePicker.obj.value = state.transferReleaseDate ? new Date(state.transferReleaseDate) : null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Vue.watch(
|
||||
() => state.transferReleaseDate,
|
||||
(newVal, oldVal) => {
|
||||
transferReleaseDatePicker.refresh();
|
||||
state.errors.transferReleaseDate = '';
|
||||
}
|
||||
);
|
||||
|
||||
const numberText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
numberText.obj = new ej.inputs.TextBox({
|
||||
placeholder: '[auto]',
|
||||
});
|
||||
numberText.obj.appendTo(numberRef.value);
|
||||
}
|
||||
};
|
||||
|
||||
const warehouseFromListLookup = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
if (state.warehouseFromListLookupData && Array.isArray(state.warehouseFromListLookupData)) {
|
||||
warehouseFromListLookup.obj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.warehouseFromListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
placeholder: 'Select Warehouse From',
|
||||
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.warehouseFromListLookupData, query);
|
||||
},
|
||||
change: (e) => {
|
||||
state.warehouseFromId = e.value;
|
||||
}
|
||||
});
|
||||
warehouseFromListLookup.obj.appendTo(warehouseFromIdRef.value);
|
||||
}
|
||||
},
|
||||
refresh: () => {
|
||||
if (warehouseFromListLookup.obj) {
|
||||
warehouseFromListLookup.obj.value = state.warehouseFromId
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Vue.watch(
|
||||
() => state.warehouseFromId,
|
||||
(newVal, oldVal) => {
|
||||
warehouseFromListLookup.refresh();
|
||||
state.errors.warehouseFromId = '';
|
||||
}
|
||||
);
|
||||
|
||||
const warehouseToListLookup = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
if (state.warehouseToListLookupData && Array.isArray(state.warehouseToListLookupData)) {
|
||||
warehouseToListLookup.obj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.warehouseToListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
placeholder: 'Select Warehouse To',
|
||||
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.warehouseToListLookupData, query);
|
||||
},
|
||||
change: (e) => {
|
||||
state.warehouseToId = e.value;
|
||||
}
|
||||
});
|
||||
warehouseToListLookup.obj.appendTo(warehouseToIdRef.value);
|
||||
}
|
||||
},
|
||||
refresh: () => {
|
||||
if (warehouseToListLookup.obj) {
|
||||
warehouseToListLookup.obj.value = state.warehouseToId
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Vue.watch(
|
||||
() => state.warehouseToId,
|
||||
(newVal, oldVal) => {
|
||||
warehouseToListLookup.refresh();
|
||||
state.errors.warehouseToId = '';
|
||||
}
|
||||
);
|
||||
|
||||
const transferOutStatusListLookup = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
if (state.transferOutStatusListLookupData && Array.isArray(state.transferOutStatusListLookupData)) {
|
||||
transferOutStatusListLookup.obj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.transferOutStatusListLookupData,
|
||||
fields: { value: 'id', text: 'name' },
|
||||
placeholder: 'Select Status',
|
||||
allowFiltering: false,
|
||||
change: (e) => {
|
||||
state.status = e.value;
|
||||
}
|
||||
});
|
||||
transferOutStatusListLookup.obj.appendTo(statusRef.value);
|
||||
}
|
||||
},
|
||||
refresh: () => {
|
||||
if (transferOutStatusListLookup.obj) {
|
||||
transferOutStatusListLookup.obj.value = state.status
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Vue.watch(
|
||||
() => state.status,
|
||||
(newVal, oldVal) => {
|
||||
transferOutStatusListLookup.refresh();
|
||||
state.errors.status = '';
|
||||
}
|
||||
);
|
||||
|
||||
const services = {
|
||||
getMainData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/TransferOut/GetTransferOutList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
createMainData: async (transferReleaseDate, description, status, warehouseFromId, warehouseToId, createdById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/TransferOut/CreateTransferOut', {
|
||||
transferReleaseDate, description, status, warehouseFromId, warehouseToId, createdById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateMainData: async (id, transferReleaseDate, description, status, warehouseFromId, warehouseToId, updatedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/TransferOut/UpdateTransferOut', {
|
||||
id, transferReleaseDate, description, status, warehouseFromId, warehouseToId, updatedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
deleteMainData: async (id, deletedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/TransferOut/DeleteTransferOut', {
|
||||
id, deletedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getWarehouseFromListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Warehouse/GetWarehouseList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getWarehouseToListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Warehouse/GetWarehouseList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getTransferOutStatusListLookupData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/TransferOut/GetTransferOutStatusList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getSecondaryData: async (moduleId) => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/InventoryTransaction/TransferOutGetInvenTransList?moduleId=' + moduleId, {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
createSecondaryData: async (moduleId, productId, movement, createdById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/InventoryTransaction/TransferOutCreateInvenTrans', {
|
||||
moduleId, productId, movement, createdById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateSecondaryData: async (id, productId, movement, updatedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/InventoryTransaction/TransferOutUpdateInvenTrans', {
|
||||
id, productId, movement, updatedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
deleteSecondaryData: async (id, deletedById) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/InventoryTransaction/TransferOutDeleteInvenTrans', {
|
||||
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 = {
|
||||
populateMainData: async () => {
|
||||
const response = await services.getMainData();
|
||||
state.mainData = response?.data?.content?.data.map(item => ({
|
||||
...item,
|
||||
transferReleaseDate: new Date(item.transferReleaseDate),
|
||||
createdAtUtc: new Date(item.createdAtUtc)
|
||||
}));
|
||||
},
|
||||
populateWarehouseFromListLookupData: async () => {
|
||||
const response = await services.getWarehouseFromListLookupData();
|
||||
state.warehouseFromListLookupData = response?.data?.content?.data.filter(warehouse => warehouse.systemWarehouse === false) || [];
|
||||
},
|
||||
populateWarehouseToListLookupData: async () => {
|
||||
const response = await services.getWarehouseToListLookupData();
|
||||
state.warehouseToListLookupData = response?.data?.content?.data.filter(warehouse => warehouse.systemWarehouse === false) || [];
|
||||
},
|
||||
populateTransferOutStatusListLookupData: async () => {
|
||||
const response = await services.getTransferOutStatusListLookupData();
|
||||
state.transferOutStatusListLookupData = response?.data?.content?.data;
|
||||
},
|
||||
populateProductListLookupData: async () => {
|
||||
const response = await services.getProductListLookupData();
|
||||
state.productListLookupData = response?.data?.content?.data
|
||||
.filter(product => product.physical === true)
|
||||
.map(product => ({
|
||||
...product,
|
||||
numberName: `${product.number} - ${product.name}`
|
||||
})) || [];
|
||||
},
|
||||
populateSecondaryData: async (transferOutId) => {
|
||||
try {
|
||||
const response = await services.getSecondaryData(transferOutId);
|
||||
state.secondaryData = response?.data?.content?.data.map(item => ({
|
||||
...item,
|
||||
createdAtUtc: new Date(item.createdAtUtc)
|
||||
}));
|
||||
methods.refreshSummary();
|
||||
} catch (error) {
|
||||
state.secondaryData = [];
|
||||
}
|
||||
},
|
||||
refreshSummary: () => {
|
||||
const totalMovement = state.secondaryData.reduce((sum, record) => sum + (record.movement ?? 0), 0);
|
||||
state.totalMovementFormatted = NumberFormatManager.formatToLocale(totalMovement);
|
||||
},
|
||||
onMainModalHidden: () => {
|
||||
state.errors.transferReleaseDate = '';
|
||||
state.errors.warehouseFromId = '';
|
||||
state.errors.warehouseToId = '';
|
||||
state.errors.status = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handler = {
|
||||
handleSubmit: async function () {
|
||||
try {
|
||||
state.isSubmitting = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const response = state.id === ''
|
||||
? await services.createMainData(state.transferReleaseDate, state.description, state.status, state.warehouseFromId, state.warehouseToId, StorageManager.getUserId())
|
||||
: state.deleteMode
|
||||
? await services.deleteMainData(state.id, StorageManager.getUserId())
|
||||
: await services.updateMainData(state.id, state.transferReleaseDate, state.description, state.status, state.warehouseFromId, state.warehouseToId, StorageManager.getUserId());
|
||||
|
||||
if (response.data.code === 200) {
|
||||
await methods.populateMainData();
|
||||
mainGrid.refresh();
|
||||
|
||||
if (!state.deleteMode) {
|
||||
state.mainTitle = 'Edit Transfer Out';
|
||||
state.id = response?.data?.content?.data.id ?? '';
|
||||
state.number = response?.data?.content?.data.number ?? '';
|
||||
await methods.populateSecondaryData(state.id);
|
||||
secondaryGrid.refresh();
|
||||
state.showComplexDiv = true;
|
||||
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
timer: 2000,
|
||||
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;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Vue.onMounted(async () => {
|
||||
try {
|
||||
await SecurityManager.authorizePage(['TransferOuts']);
|
||||
await SecurityManager.validateToken();
|
||||
|
||||
await methods.populateMainData();
|
||||
await mainGrid.create(state.mainData);
|
||||
|
||||
mainModal.create();
|
||||
mainModalRef.value?.addEventListener('hidden.bs.modal', methods.onMainModalHidden);
|
||||
await methods.populateWarehouseFromListLookupData();
|
||||
await methods.populateWarehouseToListLookupData();
|
||||
await methods.populateTransferOutStatusListLookupData();
|
||||
numberText.create();
|
||||
transferReleaseDatePicker.create();
|
||||
warehouseFromListLookup.create();
|
||||
warehouseToListLookup.create();
|
||||
transferOutStatusListLookup.create();
|
||||
|
||||
await secondaryGrid.create(state.secondaryData);
|
||||
await methods.populateProductListLookupData();
|
||||
|
||||
} catch (e) {
|
||||
console.error('page init error:', e);
|
||||
} finally {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Vue.onUnmounted(() => {
|
||||
mainModalRef.value?.removeEventListener('hidden.bs.modal', methods.onMainModalHidden);
|
||||
});
|
||||
|
||||
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,
|
||||
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: 'transferReleaseDate', headerText: 'Release Date', width: 150, format: 'yyyy-MM-dd' },
|
||||
{ field: 'warehouseFromName', headerText: 'Warehouse From', width: 150, minWidth: 150 },
|
||||
{ field: 'warehouseToName', headerText: 'Warehouse To', width: 150, minWidth: 150 },
|
||||
{ field: 'statusName', headerText: 'Status', width: 150, minWidth: 150 },
|
||||
{ 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', 'transferReleaseDate', 'warehouseFromName', 'warehouseToName', 'statusName', '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 Transfer Out';
|
||||
resetFormState();
|
||||
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 Transfer Out';
|
||||
state.id = selectedRecord.id ?? '';
|
||||
state.number = selectedRecord.number ?? '';
|
||||
state.transferReleaseDate = selectedRecord.transferReleaseDate ? new Date(selectedRecord.transferReleaseDate) : null;
|
||||
state.description = selectedRecord.description ?? '';
|
||||
state.warehouseFromId = selectedRecord.warehouseFromId ?? '';
|
||||
state.warehouseToId = selectedRecord.warehouseToId ?? '';
|
||||
state.status = String(selectedRecord.status ?? '');
|
||||
await methods.populateSecondaryData(selectedRecord.id);
|
||||
secondaryGrid.refresh();
|
||||
state.showComplexDiv = true;
|
||||
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 Transfer Out?';
|
||||
state.id = selectedRecord.id ?? '';
|
||||
state.number = selectedRecord.number ?? '';
|
||||
state.transferReleaseDate = selectedRecord.transferReleaseDate ? new Date(selectedRecord.transferReleaseDate) : null;
|
||||
state.description = selectedRecord.description ?? '';
|
||||
state.warehouseFromId = selectedRecord.warehouseFromId ?? '';
|
||||
state.warehouseToId = selectedRecord.warehouseToId ?? '';
|
||||
state.status = String(selectedRecord.status ?? '');
|
||||
await methods.populateSecondaryData(selectedRecord.id);
|
||||
secondaryGrid.refresh();
|
||||
state.showComplexDiv = false;
|
||||
mainModal.obj.show();
|
||||
}
|
||||
}
|
||||
|
||||
if (args.item.id === 'PrintPDFCustom') {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
window.open('/TransferOuts/TransferOutPdf?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.numberName}` : '';
|
||||
},
|
||||
editType: 'dropdownedit',
|
||||
edit: {
|
||||
create: () => {
|
||||
const productElem = document.createElement('input');
|
||||
return productElem;
|
||||
},
|
||||
read: () => {
|
||||
return productObj.value;
|
||||
},
|
||||
destroy: function () {
|
||||
productObj.destroy();
|
||||
},
|
||||
write: function (args) {
|
||||
productObj = new ej.dropdowns.DropDownList({
|
||||
dataSource: state.productListLookupData,
|
||||
fields: { value: 'id', text: 'numberName' },
|
||||
value: args.rowData.productId,
|
||||
change: function (e) {
|
||||
if (movementObj) {
|
||||
movementObj.value = 1;
|
||||
}
|
||||
},
|
||||
placeholder: 'Select a Product',
|
||||
floatLabelType: 'Never'
|
||||
});
|
||||
productObj.appendTo(args.element);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'movement',
|
||||
headerText: 'Movement',
|
||||
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: () => {
|
||||
const movementElem = document.createElement('input');
|
||||
return movementElem;
|
||||
},
|
||||
read: () => {
|
||||
return movementObj.value;
|
||||
},
|
||||
destroy: function () {
|
||||
movementObj.destroy();
|
||||
},
|
||||
write: function (args) {
|
||||
movementObj = new ej.inputs.NumericTextBox({
|
||||
value: args.rowData.movement ?? 0,
|
||||
});
|
||||
movementObj.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') {
|
||||
try {
|
||||
const response = await services.createSecondaryData(state.id, args.data.productId, args.data.movement, StorageManager.getUserId());
|
||||
await methods.populateSecondaryData(state.id);
|
||||
secondaryGrid.refresh();
|
||||
if (response.data.code === 200) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: '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'
|
||||
});
|
||||
}
|
||||
}
|
||||
if (args.requestType === 'save' && args.action === 'edit') {
|
||||
try {
|
||||
const response = await services.updateSecondaryData(args.data.id, args.data.productId, args.data.movement, StorageManager.getUserId());
|
||||
await methods.populateSecondaryData(state.id);
|
||||
secondaryGrid.refresh();
|
||||
if (response.data.code === 200) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Update Successful',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Update 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'
|
||||
});
|
||||
}
|
||||
}
|
||||
if (args.requestType === 'delete') {
|
||||
try {
|
||||
const response = await services.deleteSecondaryData(args.data[0].id, StorageManager.getUserId());
|
||||
await methods.populateSecondaryData(state.id);
|
||||
secondaryGrid.refresh();
|
||||
if (response.data.code === 200) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Delete Successful',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Delete 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'
|
||||
});
|
||||
}
|
||||
}
|
||||
methods.refreshSummary();
|
||||
}
|
||||
});
|
||||
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
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
mainGridRef,
|
||||
mainModalRef,
|
||||
secondaryGridRef,
|
||||
numberRef,
|
||||
transferReleaseDateRef,
|
||||
warehouseFromIdRef,
|
||||
warehouseToIdRef,
|
||||
statusRef,
|
||||
state,
|
||||
handler,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
Reference in New Issue
Block a user