239 lines
11 KiB
JavaScript
239 lines
11 KiB
JavaScript
function createOpportunitiesTable({
|
|
tableSorting,
|
|
ACCOUNT_DETAIL_URL,
|
|
OPPORTUNITIES_COLUMNS,
|
|
OPPORTUNITIES_TABLE_ID,
|
|
OPPORTUNITY_DETAIL_URL,
|
|
createCloudConsumptionButton,
|
|
createInstallBaseButton,
|
|
createServiceRequestsButton,
|
|
createOrganizationChartButton,
|
|
createCopyOpportunityButton,
|
|
createDetailLink,
|
|
createProductsCountButton,
|
|
createProductsRampBadge,
|
|
createProjectionIndicator,
|
|
createCrmServiceRequestBadge,
|
|
closeCrmSrPopover,
|
|
createWorkloadActionsBadge,
|
|
createProductsDetailRow,
|
|
createStageBadge,
|
|
createStatusBadge,
|
|
displayOpportunityValue,
|
|
getNestedValue,
|
|
getSortedOpportunities,
|
|
opportunitiesTableState,
|
|
productsContentState,
|
|
renderCustomerFilter,
|
|
renderOwnerFilter,
|
|
renderActivityFilters,
|
|
renderStageDashboard,
|
|
renderCalendar,
|
|
resetCustomerFilter,
|
|
resetOwnerFilter,
|
|
environment
|
|
}) {
|
|
const { document } = environment;
|
|
function setOpportunitiesTableState(nextState) {
|
|
if (nextState.status === "ready" && Array.isArray(nextState.items)) {
|
|
resetCustomerFilter(nextState.items);
|
|
resetOwnerFilter(nextState.items);
|
|
}
|
|
|
|
opportunitiesTableState.opportunitiesTableState = {
|
|
...opportunitiesTableState.opportunitiesTableState,
|
|
...nextState,
|
|
sortKey: tableSorting.read("overview", OPPORTUNITIES_COLUMNS).key,
|
|
sortDirection: tableSorting.read("overview", OPPORTUNITIES_COLUMNS).direction
|
|
};
|
|
renderOpportunitiesTable();
|
|
renderCustomerFilter();
|
|
renderOwnerFilter();
|
|
}
|
|
|
|
function renderOpportunitiesTable() {
|
|
renderActivityFilters();
|
|
const table = document.getElementById(OPPORTUNITIES_TABLE_ID);
|
|
|
|
if (!table) {
|
|
return;
|
|
}
|
|
|
|
closeCrmSrPopover();
|
|
table.textContent = "";
|
|
table.setAttribute("data-opportunities-layout", "inline-actions");
|
|
table.setAttribute("aria-busy", opportunitiesTableState.opportunitiesTableState.status === "loading" ? "true" : "false");
|
|
|
|
const caption = document.createElement("caption");
|
|
caption.className = "opportunities-extension-visually-hidden";
|
|
caption.textContent = opportunitiesTableState.opportunitiesTableState.status === "loading" ? "Loading opportunities..." : "Opportunities";
|
|
|
|
const tableHead = document.createElement("thead");
|
|
const headerRow = document.createElement("tr");
|
|
|
|
OPPORTUNITIES_COLUMNS.forEach((column) => {
|
|
const header = document.createElement("th");
|
|
const isSorted = opportunitiesTableState.opportunitiesTableState.sortKey === column.key;
|
|
header.scope = "col";
|
|
header.setAttribute("data-column", column.key);
|
|
if (column.key === "revenue") header.setAttribute("data-align", "money");
|
|
|
|
if (column.sortable === false) {
|
|
const label = document.createElement("span");
|
|
label.className = "opportunities-extension-table-header-label";
|
|
label.textContent = column.label;
|
|
header.append(label);
|
|
} else {
|
|
header.setAttribute("aria-sort", isSorted ? opportunitiesTableState.opportunitiesTableState.sortDirection : "none");
|
|
|
|
const sortButton = document.createElement("button");
|
|
sortButton.type = "button";
|
|
sortButton.disabled = opportunitiesTableState.opportunitiesTableState.status === "loading";
|
|
sortButton.className = "opportunities-extension-sort-button";
|
|
sortButton.setAttribute("data-sort-direction", isSorted ? opportunitiesTableState.opportunitiesTableState.sortDirection : "none");
|
|
sortButton.setAttribute("aria-label", `Sort by ${column.label}${isSorted ? `, ${opportunitiesTableState.opportunitiesTableState.sortDirection}` : ""}`);
|
|
const sortLabel = document.createElement("span");
|
|
sortLabel.className = "opportunities-extension-sort-label";
|
|
sortLabel.textContent = column.label;
|
|
sortButton.append(sortLabel);
|
|
sortButton.addEventListener("click", () => sortOpportunitiesBy(column.key));
|
|
header.append(sortButton);
|
|
}
|
|
|
|
headerRow.append(header);
|
|
});
|
|
|
|
tableHead.append(headerRow);
|
|
|
|
const tableBody = document.createElement("tbody");
|
|
const items = getSortedOpportunities();
|
|
renderStageDashboard(items, opportunitiesTableState.opportunitiesTableState.items.length);
|
|
renderCalendar?.(items, opportunitiesTableState.opportunitiesTableState);
|
|
|
|
if (opportunitiesTableState.opportunitiesTableState.status === "loading") {
|
|
for (let index = 0; index < 8; index++) {
|
|
const row = document.createElement("tr");
|
|
row.className = "opportunities-extension-table-skeleton-row";
|
|
row.setAttribute("aria-hidden", "true");
|
|
OPPORTUNITIES_COLUMNS.forEach(column => {
|
|
const cell = document.createElement("td");
|
|
cell.setAttribute("data-column", column.key);
|
|
if (column.key === "revenue") cell.setAttribute("data-align", "money");
|
|
const bar = document.createElement("span");
|
|
bar.className = "opportunities-extension-account-plans-skeleton-bar opportunities-extension-table-skeleton-text";
|
|
cell.append(bar);
|
|
if (column.key === "name" || column.key === "customer") {
|
|
const actions = document.createElement("span");
|
|
actions.className = "opportunities-extension-cell-actions";
|
|
for (let action = 0; action < 4; action++) {
|
|
const badge = document.createElement("span");
|
|
badge.className = "opportunities-extension-account-plans-skeleton-bar opportunities-extension-table-skeleton-badge";
|
|
actions.append(badge);
|
|
}
|
|
cell.append(actions);
|
|
}
|
|
row.append(cell);
|
|
});
|
|
tableBody.append(row);
|
|
}
|
|
} else if (opportunitiesTableState.opportunitiesTableState.status === "error" || opportunitiesTableState.opportunitiesTableState.status === "empty" || (opportunitiesTableState.opportunitiesTableState.status === "ready" && items.length === 0)) {
|
|
const row = document.createElement("tr");
|
|
const cell = document.createElement("td");
|
|
cell.className = "opportunities-extension-table-status";
|
|
cell.colSpan = OPPORTUNITIES_COLUMNS.length;
|
|
cell.textContent = opportunitiesTableState.opportunitiesTableState.message || "No opportunities found.";
|
|
row.append(cell);
|
|
tableBody.append(row);
|
|
} else {
|
|
items.forEach((item) => {
|
|
const row = document.createElement("tr");
|
|
|
|
OPPORTUNITIES_COLUMNS.forEach((column) => {
|
|
const cell = document.createElement("td");
|
|
cell.setAttribute("data-column", column.key);
|
|
if (column.key === "revenue") cell.setAttribute("data-align", "money");
|
|
|
|
if (column.key === "stage") {
|
|
cell.append(createStageBadge(column.display(item)));
|
|
} else if (column.key === "status") {
|
|
cell.append(createStatusBadge(column.display(item)));
|
|
} else if (column.key === "name" || column.key === "optyNumber") {
|
|
const opportunityLink = createDetailLink(
|
|
column.display(item),
|
|
item.OptyNumber ? `${OPPORTUNITY_DETAIL_URL}${encodeURIComponent(item.OptyNumber)}` : ""
|
|
);
|
|
|
|
if (column.key === "name") {
|
|
const nameCellContent = document.createElement("span");
|
|
nameCellContent.className = "opportunities-extension-cell-content";
|
|
const productActions = document.createElement("span");
|
|
productActions.className = "opportunities-extension-cell-actions";
|
|
const productsResult = item.OptyNumber && productsContentState.opptyProductsByNumber.get(String(item.OptyNumber));
|
|
if (productsResult) {
|
|
productActions.append(createProductsCountButton(item.OptyNumber, productsResult));
|
|
const rampBadge = createProductsRampBadge(productsResult, item);
|
|
if (rampBadge) productActions.append(rampBadge);
|
|
}
|
|
const projectionIndicator = createProjectionIndicator(productsResult, item,
|
|
productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber)));
|
|
if (projectionIndicator) productActions.append(projectionIndicator);
|
|
const srBadge = createCrmServiceRequestBadge(item.OptyNumber);
|
|
if (srBadge) productActions.append(srBadge);
|
|
const actionsBadge = createWorkloadActionsBadge(item.OptyNumber);
|
|
if (actionsBadge) productActions.append(actionsBadge);
|
|
nameCellContent.append(opportunityLink, productActions);
|
|
cell.append(nameCellContent);
|
|
} else if (column.key === "optyNumber" && item.OptyNumber) {
|
|
const opportunityCellContent = document.createElement("span");
|
|
opportunityCellContent.className = "opportunities-extension-opty-number-content";
|
|
opportunityCellContent.append(opportunityLink, createCopyOpportunityButton(item.OptyNumber));
|
|
cell.append(opportunityCellContent);
|
|
} else {
|
|
cell.append(opportunityLink);
|
|
}
|
|
} else if (column.key === "customer") {
|
|
const customerCellContent = document.createElement("span");
|
|
customerCellContent.className = "opportunities-extension-cell-content";
|
|
const customerLink = createDetailLink(
|
|
column.display(item),
|
|
getNestedValue(item, ["CustomerAccount", "PartyId"])
|
|
? `${ACCOUNT_DETAIL_URL}${encodeURIComponent(getNestedValue(item, ["CustomerAccount", "PartyId"]))}`
|
|
: ""
|
|
);
|
|
const customerActions = document.createElement("span");
|
|
customerActions.className = "opportunities-extension-cell-actions";
|
|
customerActions.append(createCloudConsumptionButton(item), createInstallBaseButton(item), createServiceRequestsButton(item), createOrganizationChartButton(item));
|
|
customerCellContent.append(customerLink, customerActions);
|
|
cell.append(customerCellContent);
|
|
} else {
|
|
cell.textContent = displayOpportunityValue(column, item);
|
|
}
|
|
|
|
row.append(cell);
|
|
});
|
|
|
|
tableBody.append(row);
|
|
|
|
if (item.OptyNumber && productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))) {
|
|
tableBody.append(createProductsDetailRow(item));
|
|
}
|
|
});
|
|
}
|
|
|
|
table.append(caption, tableHead, tableBody);
|
|
}
|
|
|
|
function sortOpportunitiesBy(key) {
|
|
if (!OPPORTUNITIES_COLUMNS.some(column => column.key === key && column.sortable !== false)) return;
|
|
const isSameColumn = opportunitiesTableState.opportunitiesTableState.sortKey === key;
|
|
opportunitiesTableState.opportunitiesTableState.sortKey = key;
|
|
opportunitiesTableState.opportunitiesTableState.sortDirection = isSameColumn && opportunitiesTableState.opportunitiesTableState.sortDirection === "ascending"
|
|
? "descending"
|
|
: "ascending";
|
|
tableSorting.save("overview", { key, direction: opportunitiesTableState.opportunitiesTableState.sortDirection });
|
|
renderOpportunitiesTable();
|
|
}
|
|
|
|
return { setOpportunitiesTableState, renderOpportunitiesTable, sortOpportunitiesBy };
|
|
}
|