pporto/opportunities-extension
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Added a badge to display the monthly ramp

Browse Source
This commit is contained in:
Paulo Porto
2026-09-23 23:24:31 -03:00
parent 3ef0d2aafd
commit b92d75f558
11 changed files with 229 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/content/application.js
View File

@@ -204,6 +204,7 @@ function createContentApplication(overrides = {}) {
createCopyOpportunityButton: (...args) => opportunitiesLinks.createCopyOpportunityButton(...args),
createDetailLink: (...args) => opportunitiesLinks.createDetailLink(...args),
createProductsCountButton: (...args) => productsDetails.createProductsCountButton(...args),
createProductsRampBadge: (...args) => productsDetails.createProductsRampBadge(...args),
createProductsDetailRow: (...args) => productsDetails.createProductsDetailRow(...args),
createStageBadge: (...args) => opportunitiesLinks.createStageBadge(...args),
createStatusBadge: (...args) => opportunitiesLinks.createStatusBadge(...args),

35
src/features/opportunities/styles.css
View File

@@ -92,6 +92,41 @@
outline-offset: 2px;
}
.opportunities-extension-products-ramp {
display: inline-block;
min-width: 0;
max-width: 100%;
padding: 0 6px;
border: 1px solid #bba5cf;
border-radius: 8px;
background: #f0e8f7;
color: #63358a;
font-size: 10px;
font-weight: 600;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-products-ramp {
background: #43334f;
color: #ead5fc;
border-color: #9372ac;
}
.opportunities-extension-products-ramp[data-missing="true"] {
background: #fde8e7;
color: #9f201b;
border-color: #c74640;
}
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-products-ramp[data-missing="true"] {
background: #542824;
color: #ffd9d5;
border-color: #ef938b;
}
.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {
display: grid;
grid-template-columns: minmax(0, 1fr) 12px;

7
src/features/opportunities/table.js
View File

@@ -9,6 +9,7 @@ function createOpportunitiesTable({
createCopyOpportunityButton,
createDetailLink,
createProductsCountButton,
createProductsRampBadge,
createProductsDetailRow,
createStageBadge,
createStatusBadge,
@@ -128,7 +129,11 @@ function createOpportunitiesTable({
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));
if (productsResult) {
productActions.append(createProductsCountButton(item.OptyNumber, productsResult));
const rampBadge = createProductsRampBadge(productsResult);
if (rampBadge) productActions.append(rampBadge);
}
nameCellContent.append(opportunityLink, productActions);
cell.append(nameCellContent);
} else if (column.key === "optyNumber" && item.OptyNumber) {

20
src/features/products/details.js
View File

@@ -8,6 +8,21 @@ function createProductsDetails({
environment
}) {
const { document } = environment;
function createProductsRampBadge(productsResult) {
const values = (Array.isArray(productsResult.items) ? productsResult.items : [])
.map(item => item && item.RampMonths_c)
.map(value => value === null || value === undefined || String(value).trim() === "" ? "N/D" : String(value).trim())
.filter((value, index, items) => value !== "N/D" || items.indexOf(value) === index);
if (!values.length) return null;
const badge = document.createElement("span");
badge.className = "opportunities-extension-products-ramp";
badge.setAttribute("data-missing", String(values.includes("N/D")));
badge.textContent = `RM ${values.join(",")}`;
badge.title = `Ramp Months: ${values.join(", ")}`;
badge.setAttribute("aria-label", badge.title);
return badge;
}
function createProductsCountButton(optyNumber, productsResult) {
const normalizedOptyNumber = String(optyNumber);
const button = document.createElement("button");
@@ -88,7 +103,8 @@ function createProductsDetails({
{ label: "Win Probability", value: (item) => formatProductWinProbability(item.WinProb) },
{ label: "Close date", value: (item) => formatOracleResponseDate(item.EffectiveDate) || "-" },
{ label: "Consumption Start", value: (item) => formatOracleResponseDate(item.ConsumptionStartDate_c) || "-" },
{ label: "Ramp Months", value: (item) => formatProductNumber(item.RampMonths_c) }
{ label: "Ramp Months", value: (item) => item.RampMonths_c === null || item.RampMonths_c === undefined || String(item.RampMonths_c).trim() === ""
? "N/D" : formatProductNumber(item.RampMonths_c) }
];
const head = document.createElement("thead");
@@ -148,5 +164,5 @@ function createProductsDetails({
return Number.isFinite(number) ? `${number}%` : "-";
}
return { createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
return { createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
}