Skip to content
Snippets Groups Projects
Verified Commit 439b60da authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: Introduce enhanced select component and archive issue 322

Summary of changes
- Added a new multiselect component in closed issue 316 for better user interface and interaction.
- Renamed issue 322 from open to closed, with changes reflecting updated URL for fetching data.
- Modified the mock data structure in issue 322 to use an array for dataset and cleaned it up by removing unnecessary fields.
- Improved the select component's data handling logic in `select.mjs` to manage selections more effectively.

- The addition of the multiselect component aims to expand functionality and improve user experience.
- Archiving issue 322 means we can now better manage our issue tracker by distinguishing resolved issues.
- The update in dataset structure ensures consistency and ease of use in data manipulation, while the removal of clutter helps maintain clarity.
- Adjusting the `select.mjs` logic for fetching the appropriate selections improves the performance and reliability of our form handling.
parent f348c611
No related branches found
No related tags found
No related merge requests found
...@@ -15,6 +15,27 @@ ...@@ -15,6 +15,27 @@
</ul> </ul>
<main> <main>
<h2>Select (multiselect)</h2>
<monster-select
data-monster-option-type="checkbox"
data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper"
data-monster-option-mapping-total="sys.total"
data-monster-option-filter-defaultvalue=""
value="2000"
data-monster-option-mapping-selector="dataset.*"
data-monster-option-remoteinfo-url="/issue-316.json?total"
data-monster-option-lookup-url="/issue-316.json?total"
data-monster-option-filter-defaultoptionsurl="/issue-316.json?default=true"
data-monster-option-url="/issue-316.json?q={filter}"
data-monster-option-mapping-labeltemplate="${name}"
data-monster-option-mapping-valuetemplate="${id}">
</monster-select>
<h2>Select (no url)</h2> <h2>Select (no url)</h2>
......
...@@ -24,12 +24,11 @@ ...@@ -24,12 +24,11 @@
data-monster-option-features-emptyValueIfNoOptions="true" data-monster-option-features-emptyValueIfNoOptions="true"
value="0" value="0"
data-monster-option-type="radio" data-monster-option-type="radio"
data-monster-option-filter-mode="remote" data-monster-option-filter-mode="remote"
data-monster-option-filter-position="popper" data-monster-option-filter-position="popper"
data-monster-option-url="/issue-316.json?q={filter}" data-monster-option-url="/issue-322.json?q={filter}"
data-monster-option-lookup-url="/api/commerce/item/{filter}" data-monster-option-lookup-url="/api/commerce/item/{filter}"
data-monster-option-mapping-selector="dataset.*" data-monster-option-mapping-selector="dataset.*"
data-monster-option-mapping-labeltemplate="${name} (${iid})" data-monster-option-mapping-labeltemplate="${name} (${iid})"
......
File moved
const json = const json =
`{ `{
"dataset": { "dataset": [
"a25c3d99-e94b-43b9-c38f-0b20f5f645e2": { {
"iid": 502, "iid": 502,
"name": "Versand", "name": "Versand",
"masterNameLocale": [], "masterNameLocale": [],
...@@ -9,234 +9,60 @@ const json = ...@@ -9,234 +9,60 @@ const json =
"masterSKU": "", "masterSKU": "",
"masterNotice": "", "masterNotice": "",
"masterDescription": "", "masterDescription": "",
"masterRootitemIID": 0, "masterRootitemIID": 0
"masterRootitemCombine": "0",
"masterProductfamily1": "",
"masterProductfamily2": "",
"masterProductfamilyCombinde": "1",
"masterFollowingIID": "",
"active": false,
"variants": {
"__UNIQUE__": ""
}, },
"variantsData": [
{ {
"decription": "", "iid": 503,
"number": "", "name": "Versand",
"text": { "masterNameLocale": [],
"de": "", "masterNumber": "Versand",
"en": "" "masterSKU": "",
"masterNotice": "",
"masterDescription": "",
"masterRootitemIID": 0
}, },
"hide": false, {
"properties": null "iid": 504,
} "name": "Versand",
], "masterNameLocale": [],
"packingUnits": [], "masterNumber": "Versand",
"salesAddon": 0, "masterSKU": "",
"salesSetIID": "a:0:{}", "masterNotice": "",
"salesChannel": [], "masterDescription": "",
"salesStart": null, "masterRootitemIID": 0
"salesEnd": null,
"salesType": 30,
"salesCountry": [
0
],
"salesCountryMode": 0,
"salesAnnouncementOrderGroupGID": [
0
],
"salesAnnouncementOrderFlag": "0",
"salesAnnouncementOrderFrom": null,
"salesAnnouncementOrderTo": null,
"salesAnnouncementPriceFlag": "0",
"salesAnnouncementOrderTimegroupFlag": "0",
"salesPosition": 0,
"salesCompaniesRestriction": [],
"salesCompaniesAssignment": 0,
"salesCompaniesNoExport": "0",
"salesCompaniesShopFlag": "0",
"salesGroup": 100,
"salesQuantityRestriction": "",
"salesQuantityRestrictAmountPerOrder": 0,
"salesAffiliatesRestriction": [
0
],
"salesDisabledpayment": [],
"catalogingKeywords": [],
"catalogingDepartmentDID1": 0,
"catalogingDepartmentDID2": 0,
"catalogingBrandBID1": 0,
"catalogingBrandBID2": 0,
"catalogingGender": "",
"catalogingCategoryCID1": 0,
"catalogingCategoryCID2": 0,
"catalogingCategoryCID3": 0,
"catalogingCategoryCID4": [],
"catalogingCollectionCLID1": 0,
"catalogingCollectionCLID2": [
0
],
"catalogingAssignmentAAID1": 0,
"catalogingAssignmentABID2": [],
"catalogingAssignmentACID3": [],
"catalogingRasterRID1": 0,
"catalogingRasterRID2": [],
"catalogingImagesource": "",
"catalogingAudienceAUID1": 0,
"catalogingAudienceAUID2": [],
"catalogingSeasonSAID": 0,
"catalogingStyleSID1": 0,
"catalogingStyleSID2": 0,
"catalogingStyleSID3": 0,
"catalogingStyleSID4": [],
"specificationCOID1": 0,
"specificationCOID2": 0,
"specificationCOID3": 0,
"specificationCOID4": [],
"specificationWidth": 0,
"specificationWidthNormalizationFactor": null,
"specificationWidthViewNormalizationFactor": null,
"specificationHeight": 0,
"specificationHeightNormalizationFactor": null,
"specificationHeightViewNormalizationFactor": null,
"specificationDepth": 0,
"specificationDepthNormalizationFactor": null,
"specificationDepthViewNormalizationFactor": null,
"specificationWeight": 0,
"specificationWeightNormalizationFactor": null,
"specificationWeightViewNormalizationFactor": null,
"specificationWeightNet": 0,
"specificationWeightNetNormalizationFactor": null,
"specificationWeightNetViewNormalizationFactor": null,
"specificationMaterial": "a:1:{s:2:\\"de\\";s:0:\\"\\";}",
"specificationVolume": 0,
"specificationVolumeNormalizationFactor": null,
"specificationVolumeViewNormalizationFactor": null,
"specificationMaterialMAID": 0,
"specificationBasepriceReference": 0,
"sourcingPceControlSerialnumber": "0",
"sourcingPceControlChargenumber": "0",
"sourcingStockInventoryObligation": "0",
"sourcingDistributor1UID": 0,
"sourcingDistributor1Name": "",
"sourcingDistributor1Deliverytime": "0",
"sourcingDistributor1Number": "0",
"sourcingDistributor1DeliverytimeUnit": 0,
"sourcingDistributor1OrderPlugin": "",
"sourcingDistributor1ErpID": "",
"sourcingDistributor1ErpName": "",
"sourcingDistributor1ErpNumber": "",
"sourcingDistributor2UID": 0,
"sourcingDistributor2Name": "",
"sourcingDistributor2Deliverytime": "0",
"sourcingDistributor2Number": "0",
"sourcingDistributor2DeliverytimeUnit": 0,
"sourcingDistributor2OrderPlugin": "",
"sourcingDistributor2ErpID": "",
"sourcingDistributor2ErpName": "",
"sourcingDistributor2ErpNumber": "",
"sourcingDistributor3UID": 0,
"sourcingDistributor3Name": "",
"sourcingDistributor3Deliverytime": "",
"sourcingDistributor3Number": "",
"sourcingDistributor3DeliverytimeUnit": 0,
"sourcingDistributor3OrderPlugin": "",
"sourcingDistributor3ErpID": "",
"sourcingDistributor3ErpName": "",
"sourcingDistributor3ErpNumber": "",
"sourcingStockFlag": 16,
"sourcingStockMinCount": 0,
"sourcingStockEstimatedBalance": 0,
"shippingIncoterms": "",
"shippingNotOnPicklist": "0",
"shippingStoretype": 0,
"shippingHideOnDocument": "0",
"shippingPackaging": [],
"shippingPrePackagingUnit": 0,
"shippingPreventFromCosts": "0",
"manufacturerUID": 0,
"manufacturerName": "",
"manufacturerItemUrl": "",
"manufacturerColor": "",
"manufacturerOriginCountry": "",
"orderPreorder": 0,
"financesVat": {
"de": 0,
"gb": 0,
"fr": 0,
"at": 0,
"ch": 0,
"be": 0,
"cz": 0,
"gr": 0,
"hr": 0,
"it": 0,
"lu": 0,
"mc": 0,
"nl": 0,
"sk": 0,
"us": 0,
"sv": 0
}, },
"financesTaxcode": { {
"de": "", "iid": 505,
"gb": "", "name": "Versand",
"fr": "", "masterNameLocale": [],
"at": "", "masterNumber": "Versand",
"ch": "", "masterSKU": "",
"be": "", "masterNotice": "",
"cz": "", "masterDescription": "",
"gr": "", "masterRootitemIID": 0
"hr": "",
"it": "",
"lu": "",
"mc": "",
"nl": "",
"sk": "",
"us": "",
"sv": ""
}, },
"financesBought": 0, {
"financesDiscountable": 0, "iid": 506,
"financesRevenueInland": "", "name": "Versand",
"financesRevenueAbroad": "", "masterNameLocale": [],
"financesRevenueEU": "", "masterNumber": "Versand",
"financesRevenueEUID": "", "masterSKU": "",
"financesCostInland": "", "masterNotice": "",
"financesCostAbroad": "", "masterDescription": "",
"financesCostEU": "", "masterRootitemIID": 0
"financesCostEUID": "",
"financesCustomsTariffNumber": "",
"financesCustomsTariffDescription1": "",
"financesCustomsTariffDescription2": "",
"sourcingStockEdiDeactivateSKUCheck": "",
"marketingAlsobought": "",
"marketingCommendation1": "",
"marketingCommendation2": "",
"marketingCommendation3": "",
"marketingCommendation4": "",
"marketingCommendation5": "",
"marketingCommendation6": "",
"marketingFlag": 0,
"marketingExtraUrl1": "",
"marketingExtraUrl2": "",
"marketingExtraPage": "",
"salesAnnouncementRestrictionGroupGID": "0",
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2025-04-10T07:12:53",
"erpCreation": null,
"archived": true,
"localStrings": {
"salesType": "Systemintern",
"salesGroup": "Versandkosten"
}, },
"property": { {
"dataset": [] "iid": 507,
} "name": "Versand",
"masterNameLocale": [],
"masterNumber": "Versand",
"masterSKU": "",
"masterNotice": "",
"masterDescription": "",
"masterRootitemIID": 0
} }
},
],
"sys": { "sys": {
"pagination": { "pagination": {
"total": 1, "total": 1,
...@@ -269,19 +95,6 @@ export default [ ...@@ -269,19 +95,6 @@ export default [
res.end(json) res.end(json)
}, 10); }, 10);
}, },
},
{
url: '/issue-322',
method: 'post',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 400
setTimeout(function() {
res.end(json400Error)
}, 10);
},
} }
......
...@@ -2438,6 +2438,9 @@ function gatherState() { ...@@ -2438,6 +2438,9 @@ function gatherState() {
throw new Error("no shadow-root is defined"); throw new Error("no shadow-root is defined");
} }
let filteredSelection=[];
if (type === "radio") {
const selection = []; const selection = [];
const elements = this.shadowRoot.querySelectorAll( const elements = this.shadowRoot.querySelectorAll(
`input[type=${type}]:checked`, `input[type=${type}]:checked`,
...@@ -2450,8 +2453,27 @@ function gatherState() { ...@@ -2450,8 +2453,27 @@ function gatherState() {
}); });
} }
filteredSelection = selection;
} else {
const selection = [...this.getOption("selection", [])];
const allElements = this.shadowRoot.querySelectorAll(`input[type=${type}]`);
const checkedElements = this.shadowRoot.querySelectorAll(`input[type=${type}]:checked`);
const currentInputValues = new Set(Array.from(allElements).map(el => el.value));
filteredSelection = selection.filter(sel => !currentInputValues.has(sel.value));
for (const input of checkedElements) {
filteredSelection.push({
label: getSelectionLabel.call(this, input.value),
value: input.value,
});
}
}
setSelection setSelection
.call(this, selection) .call(this, filteredSelection)
.then(() => { .then(() => {
}) })
.catch((e) => { .catch((e) => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment