initial commit
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
@page
|
||||
@{
|
||||
ViewData["Title"] = "My Company";
|
||||
}
|
||||
|
||||
<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" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<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 mb-0">
|
||||
<!-- Main Info -->
|
||||
<div class="col-md-12">
|
||||
<div class="card mb-3">
|
||||
<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="Name">Name</label>
|
||||
<input ref="nameRef" v-model="state.name" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.name }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="Currency">Currency</label>
|
||||
<input ref="currencyRef" v-model="state.currency" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.currency }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-12">
|
||||
<label for="Description">Description</label>
|
||||
<textarea ref="descriptionRef" v-model="state.description" class="form-control" rows="3"></textarea>
|
||||
<label class="text-danger">{{ state.errors.description }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-0">
|
||||
<!-- Address -->
|
||||
<div class="col-md-12">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5>Address</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="Street">Street</label>
|
||||
<input ref="streetRef" v-model="state.street" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.street }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="City">City</label>
|
||||
<input ref="cityRef" v-model="state.city" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.city }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="State">State</label>
|
||||
<input ref="stateRef" v-model="state.state" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.state }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="ZipCode">Zip Code</label>
|
||||
<input ref="zipCodeRef" v-model="state.zipCode" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.zipCode }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="Country">Country</label>
|
||||
<input ref="countryRef" v-model="state.country" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.country }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-0">
|
||||
<!-- Communication -->
|
||||
<div class="col-md-12">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5>Communication</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="PhoneNumber">Phone Number</label>
|
||||
<input ref="phoneNumberRef" v-model="state.phoneNumber" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.phoneNumber }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="FaxNumber">Fax Number</label>
|
||||
<input ref="faxNumberRef" v-model="state.faxNumber" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.faxNumber }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<label for="EmailAddress">Email Address</label>
|
||||
<input ref="emailAddressRef" v-model="state.emailAddress" type="email" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.emailAddress }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="Website">Website</label>
|
||||
<input ref="websiteRef" v-model="state.website" type="url" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.website }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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/Companies/MyCompany.cshtml.js"></script>
|
||||
}
|
||||
@@ -0,0 +1,596 @@
|
||||
const App = {
|
||||
setup() {
|
||||
const state = Vue.reactive({
|
||||
mainData: [],
|
||||
deleteMode: false,
|
||||
mainTitle: 'Edit Company',
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
currency: '',
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
country: '',
|
||||
phoneNumber: '',
|
||||
faxNumber: '',
|
||||
emailAddress: '',
|
||||
website: '',
|
||||
errors: {
|
||||
name: '',
|
||||
currency: '',
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
phoneNumber: '',
|
||||
emailAddress: ''
|
||||
},
|
||||
isSubmitting: false
|
||||
});
|
||||
|
||||
const mainGridRef = Vue.ref(null);
|
||||
const mainModalRef = Vue.ref(null);
|
||||
const nameRef = Vue.ref(null);
|
||||
const currencyRef = Vue.ref(null);
|
||||
const streetRef = Vue.ref(null);
|
||||
const cityRef = Vue.ref(null);
|
||||
const stateRef = Vue.ref(null);
|
||||
const zipCodeRef = Vue.ref(null);
|
||||
const countryRef = Vue.ref(null);
|
||||
const phoneNumberRef = Vue.ref(null);
|
||||
const faxNumberRef = Vue.ref(null);
|
||||
const emailAddressRef = Vue.ref(null);
|
||||
const websiteRef = Vue.ref(null);
|
||||
|
||||
const services = {
|
||||
getMainData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Company/GetCompanyList', {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateMainData: async (
|
||||
id, name, description, currency, street, city, state, zipCode, country,
|
||||
phoneNumber, faxNumber, emailAddress, website, updatedById
|
||||
) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/Company/UpdateCompany', {
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
currency,
|
||||
street,
|
||||
city,
|
||||
state,
|
||||
zipCode,
|
||||
country,
|
||||
phoneNumber,
|
||||
faxNumber,
|
||||
emailAddress,
|
||||
website,
|
||||
updatedById
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
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: 'name', headerText: 'Name', width: 150, minWidth: 150 },
|
||||
{ field: 'currency', headerText: 'Currency', width: 150, minWidth: 150 },
|
||||
{ field: 'street', headerText: 'Street', width: 150, minWidth: 150 },
|
||||
{ field: 'phoneNumber', headerText: 'Phone#', width: 150, minWidth: 150 },
|
||||
{ field: 'emailAddress', headerText: 'Email', width: 150, minWidth: 150 },
|
||||
{ field: 'createdAtUtc', headerText: 'Created At UTC', width: 150, format: 'yyyy-MM-dd HH:mm' }
|
||||
],
|
||||
toolbar: [
|
||||
'ExcelExport', 'Search',
|
||||
{ type: 'Separator' },
|
||||
{ text: 'Edit', tooltipText: 'Edit', prefixIcon: 'e-edit', id: 'EditCustom' },
|
||||
{ type: 'Separator' },
|
||||
],
|
||||
beforeDataBound: () => { },
|
||||
dataBound: function () {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom'], false);
|
||||
mainGrid.obj.autoFitColumns(['name', 'currency', 'street', 'phoneNumber', 'emailAddress', 'createdAtUtc']);
|
||||
},
|
||||
excelExportComplete: () => { },
|
||||
rowSelected: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length === 1) {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom'], true);
|
||||
} else {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom'], false);
|
||||
}
|
||||
},
|
||||
rowDeselected: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length === 1) {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom'], true);
|
||||
} else {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom'], false);
|
||||
}
|
||||
},
|
||||
rowSelecting: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
mainGrid.obj.clearSelection();
|
||||
}
|
||||
},
|
||||
toolbarClick: (args) => {
|
||||
if (args.item.id === 'MainGrid_excelexport') {
|
||||
mainGrid.obj.excelExport();
|
||||
}
|
||||
|
||||
if (args.item.id === 'EditCustom') {
|
||||
state.deleteMode = false;
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
state.id = selectedRecord.id ?? '';
|
||||
state.name = selectedRecord.name ?? '';
|
||||
state.description = selectedRecord.description ?? '';
|
||||
state.currency = selectedRecord.currency ?? '';
|
||||
state.street = selectedRecord.street ?? '';
|
||||
state.city = selectedRecord.city ?? '';
|
||||
state.state = selectedRecord.state ?? '';
|
||||
state.zipCode = selectedRecord.zipCode ?? '';
|
||||
state.country = selectedRecord.country ?? '';
|
||||
state.phoneNumber = selectedRecord.phoneNumber ?? '';
|
||||
state.faxNumber = selectedRecord.faxNumber ?? '';
|
||||
state.emailAddress = selectedRecord.emailAddress ?? '';
|
||||
state.website = selectedRecord.website ?? '';
|
||||
mainModal.obj.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mainGrid.obj.appendTo(mainGridRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
mainGrid.obj.setProperties({ dataSource: state.mainData });
|
||||
}
|
||||
};
|
||||
|
||||
const methods = {
|
||||
populateMainData: async () => {
|
||||
const response = await services.getMainData();
|
||||
const formattedData = response?.data?.content?.data.map(item => ({
|
||||
...item,
|
||||
createdAtUtc: new Date(item.createdAtUtc)
|
||||
}));
|
||||
state.mainData = formattedData;
|
||||
},
|
||||
};
|
||||
|
||||
const mainModal = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
mainModal.obj = new bootstrap.Modal(mainModalRef.value, {
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const nameText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
nameText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Name',
|
||||
});
|
||||
nameText.obj.appendTo(nameRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (nameText.obj) {
|
||||
nameText.obj.value = state.name;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const currencyText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
currencyText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Currency',
|
||||
});
|
||||
currencyText.obj.appendTo(currencyRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (currencyText.obj) {
|
||||
currencyText.obj.value = state.currency;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const streetText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
streetText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Street',
|
||||
});
|
||||
streetText.obj.appendTo(streetRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (streetText.obj) {
|
||||
streetText.obj.value = state.street;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cityText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
cityText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter City',
|
||||
});
|
||||
cityText.obj.appendTo(cityRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (cityText.obj) {
|
||||
cityText.obj.value = state.city;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const stateText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
stateText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter State',
|
||||
});
|
||||
stateText.obj.appendTo(stateRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (stateText.obj) {
|
||||
stateText.obj.value = state.state;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const zipCodeText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
zipCodeText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Zip Code',
|
||||
});
|
||||
zipCodeText.obj.appendTo(zipCodeRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (zipCodeText.obj) {
|
||||
zipCodeText.obj.value = state.zipCode;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const countryText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
countryText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Country',
|
||||
});
|
||||
countryText.obj.appendTo(countryRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (countryText.obj) {
|
||||
countryText.obj.value = state.country;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const phoneNumberText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
phoneNumberText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Phone Number',
|
||||
});
|
||||
phoneNumberText.obj.appendTo(phoneNumberRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (phoneNumberText.obj) {
|
||||
phoneNumberText.obj.value = state.phoneNumber;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const faxNumberText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
faxNumberText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Fax Number',
|
||||
});
|
||||
faxNumberText.obj.appendTo(faxNumberRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (faxNumberText.obj) {
|
||||
faxNumberText.obj.value = state.faxNumber;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const emailAddressText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
emailAddressText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Email Address',
|
||||
});
|
||||
emailAddressText.obj.appendTo(emailAddressRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (emailAddressText.obj) {
|
||||
emailAddressText.obj.value = state.emailAddress;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const websiteText = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
websiteText.obj = new ej.inputs.TextBox({
|
||||
placeholder: 'Enter Website',
|
||||
});
|
||||
websiteText.obj.appendTo(websiteRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
if (websiteText.obj) {
|
||||
websiteText.obj.value = state.website;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Vue.watch(
|
||||
() => state.name,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.name = '';
|
||||
nameText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.currency,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.currency = '';
|
||||
currencyText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.street,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.street = '';
|
||||
streetText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.city,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.city = '';
|
||||
cityText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.state,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.state = '';
|
||||
stateText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.zipCode,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.zipCode = '';
|
||||
zipCodeText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.country,
|
||||
(newVal, oldVal) => {
|
||||
countryText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.phoneNumber,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.phoneNumber = '';
|
||||
phoneNumberText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.faxNumber,
|
||||
(newVal, oldVal) => {
|
||||
faxNumberText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.emailAddress,
|
||||
(newVal, oldVal) => {
|
||||
state.errors.emailAddress = '';
|
||||
emailAddressText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
Vue.watch(
|
||||
() => state.website,
|
||||
(newVal, oldVal) => {
|
||||
websiteText.refresh();
|
||||
}
|
||||
);
|
||||
|
||||
const handler = {
|
||||
handleSubmit: async function () {
|
||||
try {
|
||||
state.isSubmitting = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
// Validation
|
||||
let isValid = true;
|
||||
Object.keys(state.errors).forEach(field => {
|
||||
state.errors[field] = '';
|
||||
if (!state[field] && ['name', 'currency', 'street', 'city', 'state', 'zipCode', 'phoneNumber', 'emailAddress'].includes(field)) {
|
||||
state.errors[field] = `${field.charAt(0).toUpperCase() + field.slice(1)} is required.`;
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
const response = await services.updateMainData(
|
||||
state.id,
|
||||
state.name,
|
||||
state.description,
|
||||
state.currency,
|
||||
state.street,
|
||||
state.city,
|
||||
state.state,
|
||||
state.zipCode,
|
||||
state.country,
|
||||
state.phoneNumber,
|
||||
state.faxNumber,
|
||||
state.emailAddress,
|
||||
state.website,
|
||||
StorageManager.getUserId()
|
||||
);
|
||||
|
||||
if (response.data.code === 200) {
|
||||
await methods.populateMainData();
|
||||
mainGrid.refresh();
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: state.deleteMode ? 'Delete Successful' : 'Save Successful',
|
||||
text: 'Page will be refreshed...',
|
||||
timer: 1000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
mainModal.obj.hide();
|
||||
location.reload();
|
||||
}, 1000);
|
||||
|
||||
} 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(['Companies']);
|
||||
await SecurityManager.validateToken();
|
||||
await methods.populateMainData();
|
||||
await mainGrid.create(state.mainData);
|
||||
|
||||
nameText.create();
|
||||
currencyText.create();
|
||||
streetText.create();
|
||||
cityText.create();
|
||||
stateText.create();
|
||||
zipCodeText.create();
|
||||
countryText.create();
|
||||
phoneNumberText.create();
|
||||
faxNumberText.create();
|
||||
emailAddressText.create();
|
||||
websiteText.create();
|
||||
|
||||
mainModal.create();
|
||||
|
||||
mainModalRef.value.addEventListener('hidden.bs.modal', () => {
|
||||
Object.keys(state).forEach(key => {
|
||||
if (typeof state[key] === 'string') {
|
||||
state[key] = '';
|
||||
}
|
||||
});
|
||||
state.errors = {
|
||||
name: '',
|
||||
currency: '',
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
phoneNumber: '',
|
||||
emailAddress: ''
|
||||
};
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('page init error:', e);
|
||||
} finally {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Vue.onUnmounted(() => {
|
||||
mainModalRef.value?.removeEventListener('hidden.bs.modal', () => { });
|
||||
});
|
||||
|
||||
return {
|
||||
state,
|
||||
mainGridRef,
|
||||
mainModalRef,
|
||||
nameRef,
|
||||
currencyRef,
|
||||
streetRef,
|
||||
cityRef,
|
||||
stateRef,
|
||||
zipCodeRef,
|
||||
countryRef,
|
||||
phoneNumberRef,
|
||||
faxNumberRef,
|
||||
emailAddressRef,
|
||||
websiteRef,
|
||||
handler
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
Reference in New Issue
Block a user