1525 lines
70 KiB
JavaScript
Vendored
1525 lines
70 KiB
JavaScript
Vendored
const App = {
|
|
setup() {
|
|
const state = Vue.reactive({
|
|
mainData: [],
|
|
deleteMode: false,
|
|
salesTeamListLookupData: [],
|
|
campaignListLookupData: [],
|
|
pipelineStageListLookupData: [],
|
|
closingStatusListLookupData: [],
|
|
contactData: [],
|
|
activityData: [],
|
|
mainTitle: null,
|
|
manageContactTitle: 'Manage Contact',
|
|
manageActivityTitle: 'Manage Activity',
|
|
id: '',
|
|
number: '',
|
|
salesTeamId: null,
|
|
title: '',
|
|
description: '',
|
|
companyName: '',
|
|
companyDescription: '',
|
|
companyAddressStreet: '',
|
|
companyAddressCity: '',
|
|
companyAddressState: '',
|
|
companyAddressZipCode: '',
|
|
companyAddressCountry: '',
|
|
companyPhoneNumber: '',
|
|
companyFaxNumber: '',
|
|
companyEmail: '',
|
|
companyWebsite: '',
|
|
companyWhatsApp: '',
|
|
companyLinkedIn: '',
|
|
companyFacebook: '',
|
|
companyInstagram: '',
|
|
companyTwitter: '',
|
|
dateProspecting: null,
|
|
dateClosingEstimation: null,
|
|
dateClosingActual: null,
|
|
amountTargeted: null,
|
|
amountClosed: null,
|
|
budgetScore: null,
|
|
authorityScore: null,
|
|
needScore: null,
|
|
timelineScore: null,
|
|
pipelineStage: null,
|
|
closingStatus: null,
|
|
closingNote: '',
|
|
campaignId: null,
|
|
errors: {
|
|
salesTeamId: '',
|
|
title: '',
|
|
companyName: '',
|
|
companyAddressStreet: '',
|
|
companyAddressCity: '',
|
|
companyAddressState: '',
|
|
companyPhoneNumber: '',
|
|
companyEmail: '',
|
|
dateProspecting: '',
|
|
dateClosingEstimation: '',
|
|
amountTargeted: '',
|
|
amountClosed: '',
|
|
budgetScore: '',
|
|
authorityScore: '',
|
|
needScore: '',
|
|
timelineScore: '',
|
|
pipelineStage: '',
|
|
campaignId: ''
|
|
},
|
|
isSubmitting: false
|
|
});
|
|
|
|
const mainGridRef = Vue.ref(null);
|
|
const mainModalRef = Vue.ref(null);
|
|
const manageContactModalRef = Vue.ref(null);
|
|
const manageActivityModalRef = Vue.ref(null);
|
|
const contactsGridRef = Vue.ref(null);
|
|
const activitiesGridRef = Vue.ref(null);
|
|
const titleRef = Vue.ref(null);
|
|
const numberRef = Vue.ref(null);
|
|
const companyNameRef = Vue.ref(null);
|
|
const companyAddressStreetRef = Vue.ref(null);
|
|
const companyAddressCityRef = Vue.ref(null);
|
|
const companyAddressStateRef = Vue.ref(null);
|
|
const companyAddressZipCodeRef = Vue.ref(null);
|
|
const companyAddressCountryRef = Vue.ref(null);
|
|
const companyPhoneNumberRef = Vue.ref(null);
|
|
const companyFaxNumberRef = Vue.ref(null);
|
|
const companyEmailRef = Vue.ref(null);
|
|
const companyWebsiteRef = Vue.ref(null);
|
|
const companyWhatsAppRef = Vue.ref(null);
|
|
const companyLinkedInRef = Vue.ref(null);
|
|
const companyFacebookRef = Vue.ref(null);
|
|
const companyInstagramRef = Vue.ref(null);
|
|
const companyTwitterRef = Vue.ref(null);
|
|
const dateProspectingRef = Vue.ref(null);
|
|
const dateClosingEstimationRef = Vue.ref(null);
|
|
const dateClosingActualRef = Vue.ref(null);
|
|
const amountTargetedRef = Vue.ref(null);
|
|
const amountClosedRef = Vue.ref(null);
|
|
const budgetScoreRef = Vue.ref(null);
|
|
const authorityScoreRef = Vue.ref(null);
|
|
const needScoreRef = Vue.ref(null);
|
|
const timelineScoreRef = Vue.ref(null);
|
|
const pipelineStageRef = Vue.ref(null);
|
|
const closingStatusRef = Vue.ref(null);
|
|
const campaignIdRef = Vue.ref(null);
|
|
const salesTeamIdRef = Vue.ref(null);
|
|
|
|
const services = {
|
|
getMainData: async () => {
|
|
const response = await AxiosManager.get('/Lead/GetLeadList', {});
|
|
return response;
|
|
},
|
|
createMainData: async (salesTeamId, title, description, companyName, companyDescription, companyAddressStreet, companyAddressCity, companyAddressState, companyAddressZipCode, companyAddressCountry, companyPhoneNumber, companyFaxNumber, companyEmail, companyWebsite, companyWhatsApp, companyLinkedIn, companyFacebook, companyInstagram, companyTwitter, dateProspecting, dateClosingEstimation, dateClosingActual, amountTargeted, amountClosed, budgetScore, authorityScore, needScore, timelineScore, pipelineStage, closingStatus, closingNote, campaignId, createdById) => {
|
|
const response = await AxiosManager.post('/Lead/CreateLead', {
|
|
salesTeamId, title, description, companyName, companyDescription, companyAddressStreet, companyAddressCity, companyAddressState, companyAddressZipCode, companyAddressCountry, companyPhoneNumber, companyFaxNumber, companyEmail, companyWebsite, companyWhatsApp, companyLinkedIn, companyFacebook, companyInstagram, companyTwitter, dateProspecting, dateClosingEstimation, dateClosingActual, amountTargeted, amountClosed, budgetScore, authorityScore, needScore, timelineScore, pipelineStage, closingStatus, closingNote, campaignId, createdById
|
|
});
|
|
return response;
|
|
},
|
|
updateMainData: async (id, salesTeamId, title, description, companyName, companyDescription, companyAddressStreet, companyAddressCity, companyAddressState, companyAddressZipCode, companyAddressCountry, companyPhoneNumber, companyFaxNumber, companyEmail, companyWebsite, companyWhatsApp, companyLinkedIn, companyFacebook, companyInstagram, companyTwitter, dateProspecting, dateClosingEstimation, dateClosingActual, amountTargeted, amountClosed, budgetScore, authorityScore, needScore, timelineScore, pipelineStage, closingStatus, closingNote, campaignId, updatedById) => {
|
|
const response = await AxiosManager.post('/Lead/UpdateLead', {
|
|
id, salesTeamId, title, description, companyName, companyDescription, companyAddressStreet, companyAddressCity, companyAddressState, companyAddressZipCode, companyAddressCountry, companyPhoneNumber, companyFaxNumber, companyEmail, companyWebsite, companyWhatsApp, companyLinkedIn, companyFacebook, companyInstagram, companyTwitter, dateProspecting, dateClosingEstimation, dateClosingActual, amountTargeted, amountClosed, budgetScore, authorityScore, needScore, timelineScore, pipelineStage, closingStatus, closingNote, campaignId, updatedById
|
|
});
|
|
return response;
|
|
},
|
|
deleteMainData: async (id, deletedById) => {
|
|
const response = await AxiosManager.post('/Lead/DeleteLead', {
|
|
id, deletedById
|
|
});
|
|
return response;
|
|
},
|
|
getSalesTeamListLookupData: async () => {
|
|
try {
|
|
const response = await AxiosManager.get('/SalesTeam/GetSalesTeamList', {});
|
|
return response;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
},
|
|
getCampaignListLookupData: async () => {
|
|
const response = await AxiosManager.get('/Campaign/GetCampaignList', {});
|
|
return response;
|
|
},
|
|
getPipelineStageListLookupData: async () => {
|
|
const response = await AxiosManager.get('/Lead/GetPipelineStageList', {});
|
|
return response;
|
|
},
|
|
getClosingStatusListLookupData: async () => {
|
|
const response = await AxiosManager.get('/Lead/GetClosingStatusList', {});
|
|
return response;
|
|
},
|
|
getLeadContacts: async (leadId) => {
|
|
const response = await AxiosManager.get(`/LeadContact/GetLeadContactByLeadIdList?leadId=${leadId}`, {});
|
|
return response;
|
|
},
|
|
getLeadActivities: async (leadId) => {
|
|
const response = await AxiosManager.get(`/LeadActivity/GetLeadActivityByLeadIdList?leadId=${leadId}`, {});
|
|
return response;
|
|
},
|
|
};
|
|
|
|
const methods = {
|
|
populateSalesTeamListLookupData: async () => {
|
|
const response = await services.getSalesTeamListLookupData();
|
|
state.salesTeamListLookupData = response?.data?.content?.data;
|
|
},
|
|
populateCampaignListLookupData: async () => {
|
|
const response = await services.getCampaignListLookupData();
|
|
state.campaignListLookupData = response?.data?.content?.data;
|
|
},
|
|
populatePipelineStageListLookupData: async () => {
|
|
const response = await services.getPipelineStageListLookupData();
|
|
state.pipelineStageListLookupData = response?.data?.content?.data;
|
|
},
|
|
populateClosingStatusListLookupData: async () => {
|
|
const response = await services.getClosingStatusListLookupData();
|
|
state.closingStatusListLookupData = response?.data?.content?.data;
|
|
},
|
|
populateMainData: async () => {
|
|
const response = await services.getMainData();
|
|
state.mainData = response?.data?.content?.data.map(item => ({
|
|
...item,
|
|
dateProspecting: item.dateProspecting ? new Date(item.dateProspecting) : null,
|
|
dateClosingEstimation: item.dateClosingEstimation ? new Date(item.dateClosingEstimation) : null,
|
|
dateClosingActual: item.dateClosingActual ? new Date(item.dateClosingActual) : null,
|
|
createdAtUtc: new Date(item.createdAtUtc)
|
|
}));
|
|
},
|
|
populateLeadContacts: async (leadId) => {
|
|
const response = await services.getLeadContacts(leadId);
|
|
state.contactData = response?.data?.content?.data.map(item => ({
|
|
...item,
|
|
createdAtUtc: new Date(item.createdAtUtc)
|
|
}));
|
|
},
|
|
populateLeadActivities: async (leadId) => {
|
|
const response = await services.getLeadActivities(leadId);
|
|
state.activityData = response?.data?.content?.data.map(item => ({
|
|
...item,
|
|
fromDate: new Date(item.fromDate),
|
|
toDate: new Date(item.toDate),
|
|
createdAtUtc: new Date(item.createdAtUtc)
|
|
}));
|
|
}
|
|
};
|
|
|
|
const campaignListLookup = {
|
|
obj: null,
|
|
create: () => {
|
|
if (state.campaignListLookupData && Array.isArray(state.campaignListLookupData)) {
|
|
campaignListLookup.obj = new ej.dropdowns.DropDownList({
|
|
dataSource: state.campaignListLookupData,
|
|
fields: { value: 'id', text: 'title' },
|
|
placeholder: 'Select a Campaign',
|
|
change: (e) => {
|
|
state.campaignId = e.value;
|
|
}
|
|
});
|
|
campaignListLookup.obj.appendTo(campaignIdRef.value);
|
|
}
|
|
},
|
|
refresh: () => {
|
|
if (campaignListLookup.obj) {
|
|
campaignListLookup.obj.value = state.campaignId;
|
|
}
|
|
}
|
|
};
|
|
|
|
const pipelineStageListLookup = {
|
|
obj: null,
|
|
create: () => {
|
|
if (state.pipelineStageListLookupData && Array.isArray(state.pipelineStageListLookupData)) {
|
|
pipelineStageListLookup.obj = new ej.dropdowns.DropDownList({
|
|
dataSource: state.pipelineStageListLookupData,
|
|
fields: { value: 'id', text: 'name' },
|
|
placeholder: 'Select a Pipeline Stage',
|
|
change: (e) => {
|
|
state.pipelineStage = e.value;
|
|
}
|
|
});
|
|
pipelineStageListLookup.obj.appendTo(pipelineStageRef.value);
|
|
}
|
|
},
|
|
refresh: () => {
|
|
if (pipelineStageListLookup.obj) {
|
|
pipelineStageListLookup.obj.value = state.pipelineStage;
|
|
}
|
|
}
|
|
};
|
|
|
|
const closingStatusListLookup = {
|
|
obj: null,
|
|
create: () => {
|
|
if (state.closingStatusListLookupData && Array.isArray(state.closingStatusListLookupData)) {
|
|
closingStatusListLookup.obj = new ej.dropdowns.DropDownList({
|
|
dataSource: state.closingStatusListLookupData,
|
|
fields: { value: 'id', text: 'name' },
|
|
placeholder: 'Select a Closing Status',
|
|
change: (e) => {
|
|
state.closingStatus = e.value;
|
|
}
|
|
});
|
|
closingStatusListLookup.obj.appendTo(closingStatusRef.value);
|
|
}
|
|
},
|
|
refresh: () => {
|
|
if (closingStatusListLookup.obj) {
|
|
closingStatusListLookup.obj.value = state.closingStatus;
|
|
}
|
|
}
|
|
};
|
|
|
|
const titleText = {
|
|
obj: null,
|
|
create: () => {
|
|
titleText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Title'
|
|
});
|
|
titleText.obj.appendTo(titleRef.value);
|
|
}
|
|
};
|
|
|
|
const numberText = {
|
|
obj: null,
|
|
create: () => {
|
|
numberText.obj = new ej.inputs.TextBox({
|
|
placeholder: '[auto]',
|
|
readonly: true
|
|
});
|
|
numberText.obj.appendTo(numberRef.value);
|
|
}
|
|
};
|
|
|
|
const companyNameText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyNameText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Company Name'
|
|
});
|
|
companyNameText.obj.appendTo(companyNameRef.value);
|
|
}
|
|
};
|
|
|
|
const companyAddressStreetText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyAddressStreetText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Street'
|
|
});
|
|
companyAddressStreetText.obj.appendTo(companyAddressStreetRef.value);
|
|
}
|
|
};
|
|
|
|
const companyAddressCityText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyAddressCityText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter City'
|
|
});
|
|
companyAddressCityText.obj.appendTo(companyAddressCityRef.value);
|
|
}
|
|
};
|
|
|
|
const companyAddressStateText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyAddressStateText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter State'
|
|
});
|
|
companyAddressStateText.obj.appendTo(companyAddressStateRef.value);
|
|
}
|
|
};
|
|
|
|
const companyAddressZipCodeText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyAddressZipCodeText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Zip Code'
|
|
});
|
|
companyAddressZipCodeText.obj.appendTo(companyAddressZipCodeRef.value);
|
|
}
|
|
};
|
|
|
|
const companyAddressCountryText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyAddressCountryText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Country'
|
|
});
|
|
companyAddressCountryText.obj.appendTo(companyAddressCountryRef.value);
|
|
}
|
|
};
|
|
|
|
const companyPhoneNumberText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyPhoneNumberText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Phone Number'
|
|
});
|
|
companyPhoneNumberText.obj.appendTo(companyPhoneNumberRef.value);
|
|
}
|
|
};
|
|
|
|
const companyFaxNumberText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyFaxNumberText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Fax Number'
|
|
});
|
|
companyFaxNumberText.obj.appendTo(companyFaxNumberRef.value);
|
|
}
|
|
};
|
|
|
|
const companyEmailText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyEmailText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Email'
|
|
});
|
|
companyEmailText.obj.appendTo(companyEmailRef.value);
|
|
}
|
|
};
|
|
|
|
const companyWebsiteText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyWebsiteText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Website'
|
|
});
|
|
companyWebsiteText.obj.appendTo(companyWebsiteRef.value);
|
|
}
|
|
};
|
|
|
|
const companyWhatsAppText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyWhatsAppText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter WhatsApp'
|
|
});
|
|
companyWhatsAppText.obj.appendTo(companyWhatsAppRef.value);
|
|
}
|
|
};
|
|
|
|
const companyLinkedInText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyLinkedInText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter LinkedIn'
|
|
});
|
|
companyLinkedInText.obj.appendTo(companyLinkedInRef.value);
|
|
}
|
|
};
|
|
|
|
const companyFacebookText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyFacebookText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Facebook'
|
|
});
|
|
companyFacebookText.obj.appendTo(companyFacebookRef.value);
|
|
}
|
|
};
|
|
|
|
const companyInstagramText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyInstagramText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Instagram'
|
|
});
|
|
companyInstagramText.obj.appendTo(companyInstagramRef.value);
|
|
}
|
|
};
|
|
|
|
const companyTwitterText = {
|
|
obj: null,
|
|
create: () => {
|
|
companyTwitterText.obj = new ej.inputs.TextBox({
|
|
placeholder: 'Enter Twitter'
|
|
});
|
|
companyTwitterText.obj.appendTo(companyTwitterRef.value);
|
|
}
|
|
};
|
|
|
|
const dateProspectingDatePicker = {
|
|
obj: null,
|
|
create: () => {
|
|
dateProspectingDatePicker.obj = new ej.calendars.DatePicker({
|
|
format: 'yyyy-MM-dd',
|
|
value: state.dateProspecting,
|
|
change: (e) => {
|
|
state.dateProspecting = DateFormatManager.preserveClientDate(e.value);
|
|
}
|
|
});
|
|
dateProspectingDatePicker.obj.appendTo(dateProspectingRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (dateProspectingDatePicker.obj) {
|
|
dateProspectingDatePicker.obj.value = state.dateProspecting ? new Date(state.dateProspecting) : null;
|
|
}
|
|
}
|
|
};
|
|
|
|
const dateClosingEstimationDatePicker = {
|
|
obj: null,
|
|
create: () => {
|
|
dateClosingEstimationDatePicker.obj = new ej.calendars.DatePicker({
|
|
format: 'yyyy-MM-dd',
|
|
value: state.dateClosingEstimation,
|
|
change: (e) => {
|
|
state.dateClosingEstimation = DateFormatManager.preserveClientDate(e.value);
|
|
}
|
|
});
|
|
dateClosingEstimationDatePicker.obj.appendTo(dateClosingEstimationRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (dateClosingEstimationDatePicker.obj) {
|
|
dateClosingEstimationDatePicker.obj.value = state.dateClosingEstimation ? new Date(state.dateClosingEstimation) : null;
|
|
}
|
|
}
|
|
};
|
|
|
|
const dateClosingActualDatePicker = {
|
|
obj: null,
|
|
create: () => {
|
|
dateClosingActualDatePicker.obj = new ej.calendars.DatePicker({
|
|
format: 'yyyy-MM-dd',
|
|
value: state.dateClosingActual,
|
|
change: (e) => {
|
|
state.dateClosingActual = DateFormatManager.preserveClientDate(e.value);
|
|
}
|
|
});
|
|
dateClosingActualDatePicker.obj.appendTo(dateClosingActualRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (dateClosingActualDatePicker.obj) {
|
|
dateClosingActualDatePicker.obj.value = state.dateClosingActual ? new Date(state.dateClosingActual) : null;
|
|
}
|
|
}
|
|
};
|
|
|
|
const amountTargetedNumeric = {
|
|
obj: null,
|
|
create: () => {
|
|
amountTargetedNumeric.obj = new ej.inputs.NumericTextBox({
|
|
placeholder: 'Enter Target Amount',
|
|
format: 'n2',
|
|
min: 0,
|
|
});
|
|
amountTargetedNumeric.obj.appendTo(amountTargetedRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (amountTargetedNumeric.obj) {
|
|
amountTargetedNumeric.obj.value = parseFloat(state.amountTargeted) || 0;
|
|
}
|
|
}
|
|
};
|
|
|
|
const amountClosedNumeric = {
|
|
obj: null,
|
|
create: () => {
|
|
amountClosedNumeric.obj = new ej.inputs.NumericTextBox({
|
|
placeholder: 'Enter Closed Amount',
|
|
format: 'n2',
|
|
min: 0,
|
|
});
|
|
amountClosedNumeric.obj.appendTo(amountClosedRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (amountClosedNumeric.obj) {
|
|
amountClosedNumeric.obj.value = parseFloat(state.amountClosed) || 0;
|
|
}
|
|
}
|
|
};
|
|
|
|
const budgetScoreNumeric = {
|
|
obj: null,
|
|
create: () => {
|
|
budgetScoreNumeric.obj = new ej.inputs.NumericTextBox({
|
|
placeholder: 'Budget Score',
|
|
format: 'n2',
|
|
min: 0,
|
|
max: 100,
|
|
step: 0.01,
|
|
});
|
|
budgetScoreNumeric.obj.appendTo(budgetScoreRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (budgetScoreNumeric.obj) {
|
|
budgetScoreNumeric.obj.value = parseFloat(state.budgetScore);
|
|
}
|
|
}
|
|
};
|
|
|
|
const authorityScoreNumeric = {
|
|
obj: null,
|
|
create: () => {
|
|
authorityScoreNumeric.obj = new ej.inputs.NumericTextBox({
|
|
placeholder: 'Authority Score',
|
|
format: 'n2',
|
|
min: 0,
|
|
max: 100,
|
|
step: 0.01,
|
|
});
|
|
authorityScoreNumeric.obj.appendTo(authorityScoreRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (authorityScoreNumeric.obj) {
|
|
authorityScoreNumeric.obj.value = parseFloat(state.authorityScore);
|
|
}
|
|
}
|
|
};
|
|
|
|
const needScoreNumeric = {
|
|
obj: null,
|
|
create: () => {
|
|
needScoreNumeric.obj = new ej.inputs.NumericTextBox({
|
|
placeholder: 'Need Score',
|
|
format: 'n2',
|
|
min: 0,
|
|
max: 100,
|
|
step: 0.01,
|
|
});
|
|
needScoreNumeric.obj.appendTo(needScoreRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (needScoreNumeric.obj) {
|
|
needScoreNumeric.obj.value = parseFloat(state.needScore);
|
|
}
|
|
}
|
|
};
|
|
|
|
const timelineScoreNumeric = {
|
|
obj: null,
|
|
create: () => {
|
|
timelineScoreNumeric.obj = new ej.inputs.NumericTextBox({
|
|
placeholder: 'Timeline Score',
|
|
format: 'n2',
|
|
min: 0,
|
|
max: 100,
|
|
step: 0.01,
|
|
});
|
|
timelineScoreNumeric.obj.appendTo(timelineScoreRef.value);
|
|
},
|
|
refresh: () => {
|
|
if (timelineScoreNumeric.obj) {
|
|
timelineScoreNumeric.obj.value = parseFloat(state.timelineScore);
|
|
}
|
|
}
|
|
};
|
|
|
|
const salesTeamListLookup = {
|
|
obj: null,
|
|
create: () => {
|
|
if (state.salesTeamListLookupData && Array.isArray(state.salesTeamListLookupData)) {
|
|
salesTeamListLookup.obj = new ej.dropdowns.DropDownList({
|
|
dataSource: state.salesTeamListLookupData,
|
|
fields: { value: 'id', text: 'name' },
|
|
placeholder: 'Select a Sales Team',
|
|
change: (e) => {
|
|
state.salesTeamId = e.value;
|
|
}
|
|
});
|
|
salesTeamListLookup.obj.appendTo(salesTeamIdRef.value);
|
|
} else {
|
|
console.error('Sales Team list lookup data is not available or invalid.');
|
|
}
|
|
},
|
|
refresh: () => {
|
|
if (salesTeamListLookup.obj) {
|
|
salesTeamListLookup.obj.value = state.salesTeamId;
|
|
}
|
|
},
|
|
};
|
|
|
|
Vue.watch(
|
|
() => state.salesTeamId,
|
|
(newVal, oldVal) => {
|
|
salesTeamListLookup.refresh();
|
|
state.errors.salesTeamId = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.title,
|
|
(newVal, oldVal) => {
|
|
state.errors.title = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.companyName,
|
|
(newVal, oldVal) => {
|
|
state.errors.companyName = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.companyAddressStreet,
|
|
(newVal, oldVal) => {
|
|
state.errors.companyAddressStreet = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.companyAddressCity,
|
|
(newVal, oldVal) => {
|
|
state.errors.companyAddressCity = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.companyAddressState,
|
|
(newVal, oldVal) => {
|
|
state.errors.companyAddressState = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.companyPhoneNumber,
|
|
(newVal, oldVal) => {
|
|
state.errors.companyPhoneNumber = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.companyEmail,
|
|
(newVal, oldVal) => {
|
|
state.errors.companyEmail = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.dateProspecting,
|
|
(newVal, oldVal) => {
|
|
dateProspectingDatePicker.refresh();
|
|
state.errors.dateProspecting = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.dateClosingEstimation,
|
|
(newVal, oldVal) => {
|
|
dateClosingEstimationDatePicker.refresh();
|
|
state.errors.dateClosingEstimation = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.dateClosingActual,
|
|
(newVal, oldVal) => {
|
|
dateClosingActualDatePicker.refresh();
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.amountTargeted,
|
|
(newVal, oldVal) => {
|
|
amountTargetedNumeric.refresh();
|
|
state.errors.amountTargeted = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.amountClosed,
|
|
(newVal, oldVal) => {
|
|
amountClosedNumeric.refresh();
|
|
state.errors.amountClosed = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.budgetScore,
|
|
(newVal, oldVal) => {
|
|
budgetScoreNumeric.refresh();
|
|
state.errors.budgetScore = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.authorityScore,
|
|
(newVal, oldVal) => {
|
|
authorityScoreNumeric.refresh();
|
|
state.errors.authorityScore = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.needScore,
|
|
(newVal, oldVal) => {
|
|
needScoreNumeric.refresh();
|
|
state.errors.needScore = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.timelineScore,
|
|
(newVal, oldVal) => {
|
|
timelineScoreNumeric.refresh();
|
|
state.errors.timelineScore = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.pipelineStage,
|
|
(newVal, oldVal) => {
|
|
pipelineStageListLookup.refresh();
|
|
state.errors.pipelineStage = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.closingStatus,
|
|
(newVal, oldVal) => {
|
|
closingStatusListLookup.refresh();
|
|
state.errors.closingStatus = '';
|
|
}
|
|
);
|
|
|
|
Vue.watch(
|
|
() => state.campaignId,
|
|
(newVal, oldVal) => {
|
|
campaignListLookup.refresh();
|
|
state.errors.campaignId = '';
|
|
}
|
|
);
|
|
|
|
const resetFormState = () => {
|
|
state.id = '';
|
|
state.number = '';
|
|
state.title = '';
|
|
state.salesTeamId = null;
|
|
state.description = '';
|
|
state.companyName = '';
|
|
state.companyDescription = '';
|
|
state.companyAddressStreet = '';
|
|
state.companyAddressCity = '';
|
|
state.companyAddressState = '';
|
|
state.companyAddressZipCode = '';
|
|
state.companyAddressCountry = '';
|
|
state.companyPhoneNumber = '';
|
|
state.companyFaxNumber = '';
|
|
state.companyEmail = '';
|
|
state.companyWebsite = '';
|
|
state.companyWhatsApp = '';
|
|
state.companyLinkedIn = '';
|
|
state.companyFacebook = '';
|
|
state.companyInstagram = '';
|
|
state.companyTwitter = '';
|
|
state.dateProspecting = null;
|
|
state.dateClosingEstimation = null;
|
|
state.dateClosingActual = null;
|
|
state.amountTargeted = null;
|
|
state.amountClosed = null;
|
|
state.budgetScore = null;
|
|
state.authorityScore = null;
|
|
state.needScore = null;
|
|
state.timelineScore = null;
|
|
state.pipelineStage = null;
|
|
state.closingStatus = null;
|
|
state.closingNote = '';
|
|
state.campaignId = null;
|
|
state.errors = {
|
|
title: '',
|
|
salesTeamId: '',
|
|
companyName: '',
|
|
companyAddressStreet: '',
|
|
companyAddressCity: '',
|
|
companyAddressState: '',
|
|
companyPhoneNumber: '',
|
|
companyEmail: '',
|
|
dateProspecting: '',
|
|
dateClosingEstimation: '',
|
|
amountTargeted: '',
|
|
amountClosed: '',
|
|
budgetScore: '',
|
|
authorityScore: '',
|
|
needScore: '',
|
|
timelineScore: '',
|
|
pipelineStage: '',
|
|
campaignId: ''
|
|
};
|
|
};
|
|
|
|
const validateForm = function () {
|
|
state.errors.title = '';
|
|
state.errors.salesTeamId = '';
|
|
state.errors.companyName = '';
|
|
state.errors.companyAddressStreet = '';
|
|
state.errors.companyAddressCity = '';
|
|
state.errors.companyAddressState = '';
|
|
state.errors.companyPhoneNumber = '';
|
|
state.errors.companyEmail = '';
|
|
state.errors.dateProspecting = '';
|
|
state.errors.dateClosingEstimation = '';
|
|
state.errors.amountTargeted = '';
|
|
state.errors.amountClosed = '';
|
|
state.errors.budgetScore = '';
|
|
state.errors.authorityScore = '';
|
|
state.errors.needScore = '';
|
|
state.errors.timelineScore = '';
|
|
state.errors.pipelineStage = '';
|
|
state.errors.campaignId = '';
|
|
|
|
let isValid = true;
|
|
|
|
if (!state.title) {
|
|
state.errors.title = 'Title is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.companyName) {
|
|
state.errors.companyName = 'Company Name is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.companyAddressStreet) {
|
|
state.errors.companyAddressStreet = 'Street is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.companyAddressCity) {
|
|
state.errors.companyAddressCity = 'City is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.companyAddressState) {
|
|
state.errors.companyAddressState = 'State is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.companyPhoneNumber) {
|
|
state.errors.companyPhoneNumber = 'Phone Number is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.companyEmail) {
|
|
state.errors.companyEmail = 'Email is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.dateProspecting) {
|
|
state.errors.dateProspecting = 'Prospecting Date is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.dateClosingEstimation) {
|
|
state.errors.dateClosingEstimation = 'Estimated Closing Date is required.';
|
|
isValid = false;
|
|
}
|
|
if (state.amountTargeted === null || state.amountTargeted === '' || isNaN(state.amountTargeted)) {
|
|
state.errors.amountTargeted = 'Targeted Amount is required.';
|
|
isValid = false;
|
|
}
|
|
if (state.amountClosed === null || state.amountClosed === '' || isNaN(state.amountClosed)) {
|
|
state.errors.amountClosed = 'Closed Amount is required.';
|
|
isValid = false;
|
|
}
|
|
if (state.budgetScore === null || state.budgetScore === '' || isNaN(state.budgetScore)) {
|
|
state.errors.budgetScore = 'Budget Score is required.';
|
|
isValid = false;
|
|
}
|
|
if (state.authorityScore === null || state.authorityScore === '' || isNaN(state.authorityScore)) {
|
|
state.errors.authorityScore = 'Authority Score is required.';
|
|
isValid = false;
|
|
}
|
|
if (state.needScore === null || state.needScore === '' || isNaN(state.needScore)) {
|
|
state.errors.needScore = 'Need Score is required.';
|
|
isValid = false;
|
|
}
|
|
if (state.timelineScore === null || state.timelineScore === '' || isNaN(state.timelineScore)) {
|
|
state.errors.timelineScore = 'Timeline Score is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.pipelineStage) {
|
|
state.errors.pipelineStage = 'Pipeline Stage is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.campaignId) {
|
|
state.errors.campaignId = 'Campaign is required.';
|
|
isValid = false;
|
|
}
|
|
if (!state.salesTeamId) {
|
|
state.errors.salesTeamId = 'Sales team is required.';
|
|
isValid = false;
|
|
}
|
|
|
|
return isValid;
|
|
};
|
|
|
|
const handler = {
|
|
handleSubmit: async () => {
|
|
|
|
|
|
try {
|
|
|
|
state.isSubmitting = true;
|
|
await new Promise(resolve => setTimeout(resolve, 200));
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
const response = state.id === ''
|
|
? await services.createMainData(state.salesTeamId, state.title, state.description, state.companyName, state.companyDescription, state.companyAddressStreet, state.companyAddressCity, state.companyAddressState, state.companyAddressZipCode, state.companyAddressCountry, state.companyPhoneNumber, state.companyFaxNumber, state.companyEmail, state.companyWebsite, state.companyWhatsApp, state.companyLinkedIn, state.companyFacebook, state.companyInstagram, state.companyTwitter, state.dateProspecting, state.dateClosingEstimation, state.dateClosingActual, state.amountTargeted, state.amountClosed, state.budgetScore, state.authorityScore, state.needScore, state.timelineScore, state.pipelineStage, state.closingStatus, state.closingNote, state.campaignId, StorageManager.getUserId())
|
|
: state.deleteMode
|
|
? await services.deleteMainData(state.id, StorageManager.getUserId())
|
|
: await services.updateMainData(state.id, state.salesTeamId, state.title, state.description, state.companyName, state.companyDescription, state.companyAddressStreet, state.companyAddressCity, state.companyAddressState, state.companyAddressZipCode, state.companyAddressCountry, state.companyPhoneNumber, state.companyFaxNumber, state.companyEmail, state.companyWebsite, state.companyWhatsApp, state.companyLinkedIn, state.companyFacebook, state.companyInstagram, state.companyTwitter, state.dateProspecting, state.dateClosingEstimation, state.dateClosingActual, state.amountTargeted, state.amountClosed, state.budgetScore, state.authorityScore, state.needScore, state.timelineScore, state.pipelineStage, state.closingStatus, state.closingNote, state.campaignId, StorageManager.getUserId());
|
|
|
|
if (response.data.code === 200) {
|
|
await methods.populateMainData();
|
|
mainGrid.refresh();
|
|
|
|
if (!state.deleteMode) {
|
|
state.mainTitle = 'Edit Lead';
|
|
state.id = response?.data?.content?.data.id ?? '';
|
|
state.number = response?.data?.content?.data.number ?? '';
|
|
state.title = response?.data?.content?.data.title ?? '';
|
|
state.description = response?.data?.content?.data.description ?? '';
|
|
state.companyName = response?.data?.content?.data.companyName ?? '';
|
|
state.companyDescription = response?.data?.content?.data.companyDescription ?? '';
|
|
state.companyAddressStreet = response?.data?.content?.data.companyAddressStreet ?? '';
|
|
state.companyAddressCity = response?.data?.content?.data.companyAddressCity ?? '';
|
|
state.companyAddressState = response?.data?.content?.data.companyAddressState ?? '';
|
|
state.companyAddressZipCode = response?.data?.content?.data.companyAddressZipCode ?? '';
|
|
state.companyAddressCountry = response?.data?.content?.data.companyAddressCountry ?? '';
|
|
state.companyPhoneNumber = response?.data?.content?.data.companyPhoneNumber ?? '';
|
|
state.companyFaxNumber = response?.data?.content?.data.companyFaxNumber ?? '';
|
|
state.companyEmail = response?.data?.content?.data.companyEmail ?? '';
|
|
state.companyWebsite = response?.data?.content?.data.companyWebsite ?? '';
|
|
state.companyWhatsApp = response?.data?.content?.data.companyWhatsApp ?? '';
|
|
state.companyLinkedIn = response?.data?.content?.data.companyLinkedIn ?? '';
|
|
state.companyFacebook = response?.data?.content?.data.companyFacebook ?? '';
|
|
state.companyInstagram = response?.data?.content?.data.companyInstagram ?? '';
|
|
state.companyTwitter = response?.data?.content?.data.companyTwitter ?? '';
|
|
state.dateProspecting = response?.data?.content?.data.dateProspecting ? new Date(response.data.content.data.dateProspecting) : null;
|
|
state.dateClosingEstimation = response?.data?.content?.data.dateClosingEstimation ? new Date(response.data.content.data.dateClosingEstimation) : null;
|
|
state.dateClosingActual = response?.data?.content?.data.dateClosingActual ? new Date(response.data.content.data.dateClosingActual) : null;
|
|
state.amountTargeted = response?.data?.content?.data.amountTargeted ?? '';
|
|
state.amountClosed = response?.data?.content?.data.amountClosed ?? '';
|
|
state.budgetScore = response?.data?.content?.data.budgetScore ?? '';
|
|
state.authorityScore = response?.data?.content?.data.authorityScore ?? '';
|
|
state.needScore = response?.data?.content?.data.needScore ?? '';
|
|
state.timelineScore = response?.data?.content?.data.timelineScore ?? '';
|
|
state.pipelineStage = String(response?.data?.content?.data.pipelineStage ?? '');
|
|
state.closingStatus = String(response?.data?.content?.data.closingStatus ?? '');
|
|
state.closingNote = response?.data?.content?.data.closingNote ?? '';
|
|
state.campaignId = response?.data?.content?.data.campaignId ?? '';
|
|
state.salesTeamId = response?.data?.content?.data.salesTeamId ?? null;
|
|
|
|
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;
|
|
}
|
|
}
|
|
};
|
|
|
|
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: ['campaign.number'] },
|
|
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 },
|
|
{ field: 'title', headerText: 'Title', width: 200 },
|
|
{ field: 'salesTeamName', headerText: 'Sales Team', width: 200 },
|
|
{ field: 'companyName', headerText: 'Company Name', width: 200 },
|
|
{ field: 'companyAddressStreet', headerText: 'Street', width: 200 },
|
|
{ field: 'companyAddressCity', headerText: 'City', width: 150 },
|
|
{ field: 'companyAddressState', headerText: 'State', width: 150 },
|
|
{ field: 'companyPhoneNumber', headerText: 'Phone', width: 150 },
|
|
{ field: 'companyEmail', headerText: 'Email', width: 200 },
|
|
{ field: 'dateProspecting', headerText: 'Prospecting Date', width: 150, format: 'yyyy-MM-dd' },
|
|
{ field: 'dateClosingEstimation', headerText: 'Estimated Closing', width: 150, format: 'yyyy-MM-dd' },
|
|
{ field: 'amountTargeted', headerText: 'Targeted Amount', width: 150, format: 'N2' },
|
|
{ field: 'amountClosed', headerText: 'Closed Amount', width: 150, format: 'N2' },
|
|
{ field: 'pipelineStageName', headerText: 'Pipeline Stage', width: 150 },
|
|
{ field: 'closingStatusName', headerText: 'Closing Status', width: 150 },
|
|
{ field: 'campaign.number', headerText: 'Campaign', width: 200 },
|
|
{ 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: 'Contact', tooltipText: ' Contact', id: 'ManageContactCustom' },
|
|
{ text: 'Activity', tooltipText: 'Manage Activity', id: 'ManageActivityCustom' }
|
|
],
|
|
beforeDataBound: () => { },
|
|
dataBound: function () {
|
|
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'ManageContactCustom', 'ManageActivityCustom'], false);
|
|
mainGrid.obj.autoFitColumns(['number', 'title', 'salesTeamName', 'companyName', 'companyAddressStreet', 'companyAddressCity', 'companyAddressState', 'companyPhoneNumber', 'companyEmail', 'dateProspecting', 'dateClosingEstimation', 'amountTargeted', 'amountClosed', 'pipelineStageName', 'campaign.number', 'createdAtUtc']);
|
|
},
|
|
excelExportComplete: () => { },
|
|
rowSelected: () => {
|
|
if (mainGrid.obj.getSelectedRecords().length == 1) {
|
|
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'ManageContactCustom', 'ManageActivityCustom'], true);
|
|
} else {
|
|
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'ManageContactCustom', 'ManageActivityCustom'], false);
|
|
}
|
|
},
|
|
rowDeselected: () => {
|
|
if (mainGrid.obj.getSelectedRecords().length == 1) {
|
|
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'ManageContactCustom', 'ManageActivityCustom'], true);
|
|
} else {
|
|
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'DeleteCustom', 'ManageContactCustom', 'ManageActivityCustom'], 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 Lead';
|
|
resetFormState();
|
|
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 Lead';
|
|
state.id = selectedRecord.id ?? '';
|
|
state.number = selectedRecord.number ?? '';
|
|
state.title = selectedRecord.title ?? '';
|
|
state.description = selectedRecord.description ?? '';
|
|
state.companyName = selectedRecord.companyName ?? '';
|
|
state.companyDescription = selectedRecord.companyDescription ?? '';
|
|
state.companyAddressStreet = selectedRecord.companyAddressStreet ?? '';
|
|
state.companyAddressCity = selectedRecord.companyAddressCity ?? '';
|
|
state.companyAddressState = selectedRecord.companyAddressState ?? '';
|
|
state.companyAddressZipCode = selectedRecord.companyAddressZipCode ?? '';
|
|
state.companyAddressCountry = selectedRecord.companyAddressCountry ?? '';
|
|
state.companyPhoneNumber = selectedRecord.companyPhoneNumber ?? '';
|
|
state.companyFaxNumber = selectedRecord.companyFaxNumber ?? '';
|
|
state.companyEmail = selectedRecord.companyEmail ?? '';
|
|
state.companyWebsite = selectedRecord.companyWebsite ?? '';
|
|
state.companyWhatsApp = selectedRecord.companyWhatsApp ?? '';
|
|
state.companyLinkedIn = selectedRecord.companyLinkedIn ?? '';
|
|
state.companyFacebook = selectedRecord.companyFacebook ?? '';
|
|
state.companyInstagram = selectedRecord.companyInstagram ?? '';
|
|
state.companyTwitter = selectedRecord.companyTwitter ?? '';
|
|
state.dateProspecting = selectedRecord.dateProspecting ? new Date(selectedRecord.dateProspecting) : null;
|
|
state.dateClosingEstimation = selectedRecord.dateClosingEstimation ? new Date(selectedRecord.dateClosingEstimation) : null;
|
|
state.dateClosingActual = selectedRecord.dateClosingActual ? new Date(selectedRecord.dateClosingActual) : null;
|
|
state.amountTargeted = selectedRecord.amountTargeted ?? '';
|
|
state.amountClosed = selectedRecord.amountClosed ?? '';
|
|
state.budgetScore = selectedRecord.budgetScore ?? '';
|
|
state.authorityScore = selectedRecord.authorityScore ?? '';
|
|
state.needScore = selectedRecord.needScore ?? '';
|
|
state.timelineScore = selectedRecord.timelineScore ?? '';
|
|
state.pipelineStage = String(selectedRecord.pipelineStage ?? '');
|
|
state.closingStatus = String(selectedRecord.closingStatus ?? '');
|
|
state.closingNote = selectedRecord.closingNote ?? '';
|
|
state.campaignId = selectedRecord.campaignId ?? '';
|
|
state.salesTeamId = selectedRecord.salesTeamId ?? '';
|
|
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 Lead?';
|
|
state.id = selectedRecord.id ?? '';
|
|
state.number = selectedRecord.number ?? '';
|
|
state.title = selectedRecord.title ?? '';
|
|
state.description = selectedRecord.description ?? '';
|
|
state.companyName = selectedRecord.companyName ?? '';
|
|
state.companyDescription = selectedRecord.companyDescription ?? '';
|
|
state.companyAddressStreet = selectedRecord.companyAddressStreet ?? '';
|
|
state.companyAddressCity = selectedRecord.companyAddressCity ?? '';
|
|
state.companyAddressState = selectedRecord.companyAddressState ?? '';
|
|
state.companyAddressZipCode = selectedRecord.companyAddressZipCode ?? '';
|
|
state.companyAddressCountry = selectedRecord.companyAddressCountry ?? '';
|
|
state.companyPhoneNumber = selectedRecord.companyPhoneNumber ?? '';
|
|
state.companyFaxNumber = selectedRecord.companyFaxNumber ?? '';
|
|
state.companyEmail = selectedRecord.companyEmail ?? '';
|
|
state.companyWebsite = selectedRecord.companyWebsite ?? '';
|
|
state.companyWhatsApp = selectedRecord.companyWhatsApp ?? '';
|
|
state.companyLinkedIn = selectedRecord.companyLinkedIn ?? '';
|
|
state.companyFacebook = selectedRecord.companyFacebook ?? '';
|
|
state.companyInstagram = selectedRecord.companyInstagram ?? '';
|
|
state.companyTwitter = selectedRecord.companyTwitter ?? '';
|
|
state.dateProspecting = selectedRecord.dateProspecting ? new Date(selectedRecord.dateProspecting) : null;
|
|
state.dateClosingEstimation = selectedRecord.dateClosingEstimation ? new Date(selectedRecord.dateClosingEstimation) : null;
|
|
state.dateClosingActual = selectedRecord.dateClosingActual ? new Date(selectedRecord.dateClosingActual) : null;
|
|
state.amountTargeted = selectedRecord.amountTargeted ?? '';
|
|
state.amountClosed = selectedRecord.amountClosed ?? '';
|
|
state.budgetScore = selectedRecord.budgetScore ?? '';
|
|
state.authorityScore = selectedRecord.authorityScore ?? '';
|
|
state.needScore = selectedRecord.needScore ?? '';
|
|
state.timelineScore = selectedRecord.timelineScore ?? '';
|
|
state.pipelineStage = String(selectedRecord.pipelineStage ?? '');
|
|
state.closingStatus = String(selectedRecord.closingStatus ?? '');
|
|
state.closingNote = selectedRecord.closingNote ?? '';
|
|
state.campaignId = selectedRecord.campaignId ?? '';
|
|
state.salesTeamId = selectedRecord.salesTeamId ?? '';
|
|
mainModal.obj.show();
|
|
}
|
|
}
|
|
|
|
if (args.item.id === 'ManageContactCustom') {
|
|
if (mainGrid.obj.getSelectedRecords().length) {
|
|
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
|
state.id = selectedRecord.id ?? '';
|
|
state.manageContactTitle = 'Contact';
|
|
await methods.populateLeadContacts(state.id);
|
|
contactsGrid.refresh();
|
|
manageContactModal.obj.show();
|
|
}
|
|
}
|
|
|
|
if (args.item.id === 'ManageActivityCustom') {
|
|
if (mainGrid.obj.getSelectedRecords().length) {
|
|
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
|
state.id = selectedRecord.id ?? '';
|
|
state.manageActivityTitle = 'Activity';
|
|
await methods.populateLeadActivities(state.id);
|
|
activitiesGrid.refresh();
|
|
manageActivityModal.obj.show();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
mainGrid.obj.appendTo(mainGridRef.value);
|
|
},
|
|
refresh: () => {
|
|
mainGrid.obj.setProperties({ dataSource: state.mainData });
|
|
}
|
|
};
|
|
|
|
const mainModal = {
|
|
obj: null,
|
|
create: () => {
|
|
mainModal.obj = new bootstrap.Modal(mainModalRef.value, {
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
}
|
|
};
|
|
|
|
const manageContactModal = {
|
|
obj: null,
|
|
create: () => {
|
|
manageContactModal.obj = new bootstrap.Modal(manageContactModalRef.value, {
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
}
|
|
};
|
|
|
|
const manageActivityModal = {
|
|
obj: null,
|
|
create: () => {
|
|
manageActivityModal.obj = new bootstrap.Modal(manageActivityModalRef.value, {
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
}
|
|
};
|
|
|
|
const contactsGrid = {
|
|
obj: null,
|
|
create: async (dataSource) => {
|
|
contactsGrid.obj = new ej.grids.Grid({
|
|
height: 200,
|
|
dataSource: dataSource,
|
|
allowFiltering: false,
|
|
allowSorting: true,
|
|
allowSelection: true,
|
|
allowGrouping: false,
|
|
allowTextWrap: true,
|
|
allowResizing: true,
|
|
allowPaging: true,
|
|
allowExcelExport: true,
|
|
editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false, showDeleteConfirmDialog: true, mode: 'Normal', allowEditOnDblClick: true },
|
|
filterSettings: { type: 'CheckBox' },
|
|
sortSettings: { columns: [{ field: 'fullName', 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: 'fullName', headerText: 'Full Name', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'addressStreet', headerText: 'Street', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'addressCity', headerText: 'City', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'addressState', headerText: 'State', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'mobileNumber', headerText: 'Mobile#', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'email', headerText: 'Email', width: 200, minWidth: 200, validationRules: { required: true } }
|
|
],
|
|
toolbar: [
|
|
'ExcelExport'
|
|
],
|
|
beforeDataBound: () => { },
|
|
dataBound: function () {
|
|
contactsGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], false);
|
|
contactsGrid.obj.autoFitColumns(['fullName', 'addressStreet', 'addressCity', 'addressState', 'mobileNumber', 'email']);
|
|
},
|
|
excelExportComplete: () => { },
|
|
rowSelected: () => {
|
|
if (contactsGrid.obj.getSelectedRecords().length == 1) {
|
|
contactsGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], true);
|
|
} else {
|
|
contactsGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], false);
|
|
}
|
|
},
|
|
rowDeselected: () => {
|
|
if (contactsGrid.obj.getSelectedRecords().length == 1) {
|
|
contactsGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], true);
|
|
} else {
|
|
contactsGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], false);
|
|
}
|
|
},
|
|
rowSelecting: () => {
|
|
if (contactsGrid.obj.getSelectedRecords().length) {
|
|
contactsGrid.obj.clearSelection();
|
|
}
|
|
},
|
|
actionComplete: async (args) => {
|
|
}
|
|
});
|
|
contactsGrid.obj.appendTo(contactsGridRef.value);
|
|
},
|
|
refresh: () => {
|
|
contactsGrid.obj.setProperties({ dataSource: state.contactData });
|
|
}
|
|
};
|
|
|
|
const activitiesGrid = {
|
|
obj: null,
|
|
create: async (dataSource) => {
|
|
activitiesGrid.obj = new ej.grids.Grid({
|
|
height: 200,
|
|
dataSource: dataSource,
|
|
allowFiltering: false,
|
|
allowSorting: true,
|
|
allowSelection: true,
|
|
allowGrouping: false,
|
|
allowTextWrap: true,
|
|
allowResizing: true,
|
|
allowPaging: true,
|
|
allowExcelExport: true,
|
|
editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false, showDeleteConfirmDialog: true, mode: 'Normal', allowEditOnDblClick: true },
|
|
filterSettings: { type: 'CheckBox' },
|
|
sortSettings: { columns: [{ field: 'fromDate', 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: 'typeName', headerText: 'Activity', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'number', headerText: 'Number', width: 200, minWidth: 200, validationRules: { required: true } },
|
|
{ field: 'fromDate', headerText: 'From', width: 150, format: 'yyyy-MM-dd' },
|
|
{ field: 'toDate', headerText: 'To', width: 150, format: 'yyyy-MM-dd' },
|
|
{ field: 'summary', headerText: 'Summary', width: 300, minWidth: 300, validationRules: { required: true } },
|
|
],
|
|
toolbar: [
|
|
'ExcelExport'
|
|
],
|
|
beforeDataBound: () => { },
|
|
dataBound: function () {
|
|
activitiesGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], false);
|
|
activitiesGrid.obj.autoFitColumns(['typeName', 'number', 'fromDate', 'toDate', 'summary']);
|
|
},
|
|
excelExportComplete: () => { },
|
|
rowSelected: () => {
|
|
if (activitiesGrid.obj.getSelectedRecords().length == 1) {
|
|
activitiesGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], true);
|
|
} else {
|
|
activitiesGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], false);
|
|
}
|
|
},
|
|
rowDeselected: () => {
|
|
if (activitiesGrid.obj.getSelectedRecords().length == 1) {
|
|
activitiesGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], true);
|
|
} else {
|
|
activitiesGrid.obj.toolbarModule.enableItems(['Edit', 'Delete'], false);
|
|
}
|
|
},
|
|
rowSelecting: () => {
|
|
if (activitiesGrid.obj.getSelectedRecords().length) {
|
|
activitiesGrid.obj.clearSelection();
|
|
}
|
|
},
|
|
actionComplete: async (args) => {
|
|
}
|
|
});
|
|
activitiesGrid.obj.appendTo(activitiesGridRef.value);
|
|
},
|
|
refresh: () => {
|
|
activitiesGrid.obj.setProperties({ dataSource: state.activityData });
|
|
}
|
|
};
|
|
|
|
Vue.onMounted(async () => {
|
|
|
|
|
|
try {
|
|
|
|
await SecurityManager.authorizePage(['Leads']);
|
|
await SecurityManager.validateToken();
|
|
|
|
await methods.populateMainData();
|
|
await mainGrid.create(state.mainData);
|
|
await methods.populateCampaignListLookupData();
|
|
campaignListLookup.create();
|
|
await methods.populateSalesTeamListLookupData();
|
|
salesTeamListLookup.create();
|
|
await methods.populatePipelineStageListLookupData();
|
|
pipelineStageListLookup.create();
|
|
await methods.populateClosingStatusListLookupData();
|
|
closingStatusListLookup.create();
|
|
titleText.create();
|
|
numberText.create();
|
|
companyNameText.create();
|
|
companyAddressStreetText.create();
|
|
companyAddressCityText.create();
|
|
companyAddressStateText.create();
|
|
companyAddressZipCodeText.create();
|
|
companyAddressCountryText.create();
|
|
companyPhoneNumberText.create();
|
|
companyFaxNumberText.create();
|
|
companyEmailText.create();
|
|
companyWebsiteText.create();
|
|
companyWhatsAppText.create();
|
|
companyLinkedInText.create();
|
|
companyFacebookText.create();
|
|
companyInstagramText.create();
|
|
companyTwitterText.create();
|
|
dateProspectingDatePicker.create();
|
|
dateClosingEstimationDatePicker.create();
|
|
dateClosingActualDatePicker.create();
|
|
amountTargetedNumeric.create();
|
|
amountClosedNumeric.create();
|
|
budgetScoreNumeric.create();
|
|
authorityScoreNumeric.create();
|
|
needScoreNumeric.create();
|
|
timelineScoreNumeric.create();
|
|
mainModal.create();
|
|
manageContactModal.create();
|
|
manageActivityModal.create();
|
|
contactsGrid.create([]);
|
|
activitiesGrid.create([]);
|
|
|
|
} catch (e) {
|
|
console.error('page init error:', e);
|
|
} finally {
|
|
hideSpinnerAndShowContent();
|
|
}
|
|
});
|
|
|
|
return {
|
|
mainGridRef,
|
|
mainModalRef,
|
|
manageContactModalRef,
|
|
manageActivityModalRef,
|
|
contactsGridRef,
|
|
activitiesGridRef,
|
|
titleRef,
|
|
salesTeamIdRef,
|
|
numberRef,
|
|
companyNameRef,
|
|
companyAddressStreetRef,
|
|
companyAddressCityRef,
|
|
companyAddressStateRef,
|
|
companyAddressZipCodeRef,
|
|
companyAddressCountryRef,
|
|
companyPhoneNumberRef,
|
|
companyFaxNumberRef,
|
|
companyEmailRef,
|
|
companyWebsiteRef,
|
|
companyWhatsAppRef,
|
|
companyLinkedInRef,
|
|
companyFacebookRef,
|
|
companyInstagramRef,
|
|
companyTwitterRef,
|
|
dateProspectingRef,
|
|
dateClosingEstimationRef,
|
|
dateClosingActualRef,
|
|
amountTargetedRef,
|
|
amountClosedRef,
|
|
budgetScoreRef,
|
|
authorityScoreRef,
|
|
needScoreRef,
|
|
timelineScoreRef,
|
|
pipelineStageRef,
|
|
closingStatusRef,
|
|
campaignIdRef,
|
|
state,
|
|
handler
|
|
};
|
|
}
|
|
};
|
|
|
|
Vue.createApp(App).mount('#app'); |