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

Visual enhancements for dark mode, along with search functionality for service requests and installed base

Browse Source
This commit is contained in:
Paulo Porto
2026-09-23 10:56:51 -03:00
parent b4d8d9dbc1
commit 6c5db94aaa
17 changed files with 436 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/features/opportunities/customer-table-search.css Normal file
View File

@@ -0,0 +1,24 @@
.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,
.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {
grid-template-rows: auto auto minmax(0, 1fr);
}
.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }
.opportunities-extension-customer-table-search {
box-sizing: border-box;
width: min(420px, 100%);
min-width: 0;
height: 38px;
padding: 8px 12px;
border: 1px solid #8f8a85;
border-radius: 4px;
background: #fff;
color: #312d2a;
font: inherit;
font-size: 13px;
}
.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }
.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }

24
src/features/opportunities/customer-table-search.js Normal file
View File

@@ -0,0 +1,24 @@
function createCustomerTableSearch({ environment }) {
function createSearch({ label, onSearch, getValues }) {
const input = environment.document.createElement("input");
input.type = "search";
input.className = "opportunities-extension-customer-table-search";
input.placeholder = label;
input.setAttribute("aria-label", label);
input.addEventListener("input", onSearch);
const normalize = value => String(value ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
let index = new WeakMap();
return { input,
reset() { index = new WeakMap(); },
filter(items) {
const terms = normalize(input.value).trim().split(/\s+/).filter(Boolean);
if (!terms.length) return items;
return items.filter(item => {
if (!index.has(item)) index.set(item, getValues(item).map(normalize));
return terms.every(term => index.get(item).some(value => value.includes(term)));
});
}
};
}
return { createSearch };
}