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

feat(select): new ignoreValues feature #287

parent 96c999b7
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
development/issues/closed/287.html 0 → 100644
+ 42
− 0
View file @ cb4f0097
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The null values should be deinable in the select #287</title>
<script src="./287.mjs" type="module"></script>
</head>
<body>
<h1>The null values should be deinable in the select #287</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/287">Issue #287</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-datasource-rest id="ds224" data-monster-option-read-url="/issue-287.json"
data-monster-option-write-url="/issue-287"
data-monster-option-write-acceptedstatus="400::200"
data-monster-option-features-autoinit="true">
</monster-datasource-rest>
<monster-form data-monster-option-datasource-selector="#ds224" data-monster-option-mapping-data=""
data-monster-option-features-mutationobserver="false">
<div data-monster-replace="path:data | tojson"></div>
<monster-select data-monster-attributes="value path:data.integer"
data-monster-option-type="checkbox"
data-monster-bind="path:data.integer"
data-monster-bind-type="int[]"
>
<div data-monster-value="1">label-1</div>
<div data-monster-value="2">label-2</div>
<div data-monster-value="3">label-3</div>
</monster-select>
</monster-form>
</main>
</body>
</html>
development/issues/closed/287.mjs 0 → 100644
+ 21
− 0
View file @ cb4f0097
/**
* @file development/issues/open/287.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/287
* @description The null values should be deinable in the select
* @issue 287
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/form/select.mjs";
import "../../../source/components/form/field-set.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/form.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/datatable/datasource/rest.mjs";
development/mock/issue-287.js 0 → 100644
+ 70
− 0
View file @ cb4f0097
const json =
`[
{
"id": 1000,
"name": "name 1",
"integer": 2,
"float": 1.1,
"boolean": true
}
]`;
// check if json is valid
JSON.parse(json)
const json400Error=`[
{
"sys": {
"type": "Error",
"message": "Invalid request"
}
}
]`
// check if json is valid
JSON.parse(json400Error)
const json200Error=`[
{
"sys": {
"type": "Error",
"message": "Invalid request"
}
}
]`
JSON.parse(json200Error)
const requestDelay = 100
export default [
{
url: '/issue-287.json',
method: 'get',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 200
setTimeout(function() {
res.end(json)
}, requestDelay);
},
},
{
url: '/issue-287',
method: 'post',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 400
setTimeout(function() {
res.end(json400Error)
}, requestDelay);
}
}
];
\ No newline at end of file
source/components/form/select.mjs
+ 2197
− 2157
View file @ cb4f0097
......@@ -264,9 +264,8 @@ const FILTER_POSITION_INLINE = "inline";
/**
* A select control that can be used to select o
*
* ne or more options from a list.
*
* @issue @issue https://localhost.alvine.dev:8444/development/issues/closed/280.html
* @issue @issue https://localhost.alvine.dev:8444/development/issues/closed/287.html
*
* @fragments /fragments/components/form/select/
*
......@@ -337,10 +336,23 @@ class Select extends CustomControl {
* @fires monster-selected this event is fired when the selection is set
*/
set value(value) {
let ignoreValues = this.getOption("ignoreValues", []);
if(!isArray(ignoreValues)){
ignoreValues = [];
}
for (const v of ignoreValues) {
if (value === v) {
return;
}
}
const result = convertValueToSelection.call(this, value);
setSelection
.call(this, result.selection)
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -399,7 +411,7 @@ class Select extends CustomControl {
* @property {String} mapping.labelTemplate template with the label placeholders in the form ${name}, where name is the key (**)
* @property {String} mapping.valueTemplate template with the value placeholders in the form ${name}, where name is the key
* @property {function|undefined} mapping.filter Filtering of values via a function
* @property {Array} mapping.ignoreValues Ignore values by importing
* @property {Array} ignoreValues Ignore values in the selection and value
* @property {Object} formatter
* @property {function|undefined} formatter.selection format selection label
*/
......@@ -422,7 +434,7 @@ class Select extends CustomControl {
closeOnSelect: false,
emptyValueIfNoOptions: false,
storeFetchedData: false,
useStrictValueComparison: false,
useStrictValueComparison: false
},
url: null,
lookup: {
......@@ -461,9 +473,9 @@ class Select extends CustomControl {
selector: "*",
labelTemplate: "",
valueTemplate: "",
filter: null,
ignoreValues: ["0", 0, undefined, null],
filter: null
},
ignoreValues: [undefined, null, ""],
formatter: {
selection: buildSelectionLabel,
},
......@@ -536,7 +548,8 @@ class Select extends CustomControl {
lastValue = n;
setSelection
.call(self, n)
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(self, e);
});
......@@ -727,7 +740,8 @@ class Select extends CustomControl {
setTimeout(() => {
setSelection
.call(this, this.getOption("selection"))
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -1367,7 +1381,8 @@ function getDefaultTranslation() {
try {
const doc = getDocumentTranslations();
translation.locale = doc.locale;
} catch (e) {}
} catch (e) {
}
return translation;
}
......@@ -1987,7 +2002,8 @@ function gatherState() {
setSelection
.call(this, selection)
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -2016,7 +2032,8 @@ function clearSelection() {
setSelection
.call(this, [])
.then(() => {})
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
......@@ -2224,11 +2241,12 @@ function convertSelectionToValue(selection) {
/**
* @private
* @param {array} selection
* @param {array|string} selection
* @return {Promise}
* @throws {Error} no shadow-root is defined
*/
function setSelection(selection) {
if (isString(selection) || isInteger(selection)) {
const result = convertValueToSelection.call(this, selection);
selection = result?.selection;
......@@ -2237,19 +2255,41 @@ function setSelection(selection) {
}
validateArray(selection);
let ignoreValues = this.getOption("ignoreValues", []);
if(!isArray(ignoreValues)) {
ignoreValues = [];
}
let resultSelection = [];
for (let i = 0; i < selection.length; i++) {
let ignore = false;
for (const v of ignoreValues) {
if (selection[i].value === v) {
ignore = true
break;
}
}
if (ignore) {
continue;
}
let l = getSelectionLabel.call(this, selection[i].value);
if (l === selection[i].value) {
l = selection[i].label;
}
selection[i] = {
resultSelection.push({
label: l,
value: selection[i].value,
};
})
}
selection = resultSelection;
this.setOption("selection", selection);
checkOptionState.call(this);
setSummaryAndControlText.call(this);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment