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
Branches
Tags
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"; ...@@ -264,9 +264,8 @@ const FILTER_POSITION_INLINE = "inline";
/** /**
* A select control that can be used to select o * 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/280.html
* @issue @issue https://localhost.alvine.dev:8444/development/issues/closed/287.html
* *
* @fragments /fragments/components/form/select/ * @fragments /fragments/components/form/select/
* *
...@@ -337,10 +336,23 @@ class Select extends CustomControl { ...@@ -337,10 +336,23 @@ class Select extends CustomControl {
* @fires monster-selected this event is fired when the selection is set * @fires monster-selected this event is fired when the selection is set
*/ */
set value(value) { 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); const result = convertValueToSelection.call(this, value);
setSelection setSelection
.call(this, result.selection) .call(this, result.selection)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -399,7 +411,7 @@ class Select extends CustomControl { ...@@ -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.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 {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 {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 {Object} formatter
* @property {function|undefined} formatter.selection format selection label * @property {function|undefined} formatter.selection format selection label
*/ */
...@@ -422,7 +434,7 @@ class Select extends CustomControl { ...@@ -422,7 +434,7 @@ class Select extends CustomControl {
closeOnSelect: false, closeOnSelect: false,
emptyValueIfNoOptions: false, emptyValueIfNoOptions: false,
storeFetchedData: false, storeFetchedData: false,
useStrictValueComparison: false, useStrictValueComparison: false
}, },
url: null, url: null,
lookup: { lookup: {
...@@ -461,9 +473,9 @@ class Select extends CustomControl { ...@@ -461,9 +473,9 @@ class Select extends CustomControl {
selector: "*", selector: "*",
labelTemplate: "", labelTemplate: "",
valueTemplate: "", valueTemplate: "",
filter: null, filter: null
ignoreValues: ["0", 0, undefined, null],
}, },
ignoreValues: [undefined, null, ""],
formatter: { formatter: {
selection: buildSelectionLabel, selection: buildSelectionLabel,
}, },
...@@ -536,7 +548,8 @@ class Select extends CustomControl { ...@@ -536,7 +548,8 @@ class Select extends CustomControl {
lastValue = n; lastValue = n;
setSelection setSelection
.call(self, n) .call(self, n)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addErrorAttribute(self, e); addErrorAttribute(self, e);
}); });
...@@ -727,7 +740,8 @@ class Select extends CustomControl { ...@@ -727,7 +740,8 @@ class Select extends CustomControl {
setTimeout(() => { setTimeout(() => {
setSelection setSelection
.call(this, this.getOption("selection")) .call(this, this.getOption("selection"))
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -1367,7 +1381,8 @@ function getDefaultTranslation() { ...@@ -1367,7 +1381,8 @@ function getDefaultTranslation() {
try { try {
const doc = getDocumentTranslations(); const doc = getDocumentTranslations();
translation.locale = doc.locale; translation.locale = doc.locale;
} catch (e) {} } catch (e) {
}
return translation; return translation;
} }
...@@ -1987,7 +2002,8 @@ function gatherState() { ...@@ -1987,7 +2002,8 @@ function gatherState() {
setSelection setSelection
.call(this, selection) .call(this, selection)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -2016,7 +2032,8 @@ function clearSelection() { ...@@ -2016,7 +2032,8 @@ function clearSelection() {
setSelection setSelection
.call(this, []) .call(this, [])
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addErrorAttribute(this, e); addErrorAttribute(this, e);
}); });
...@@ -2224,11 +2241,12 @@ function convertSelectionToValue(selection) { ...@@ -2224,11 +2241,12 @@ function convertSelectionToValue(selection) {
/** /**
* @private * @private
* @param {array} selection * @param {array|string} selection
* @return {Promise} * @return {Promise}
* @throws {Error} no shadow-root is defined * @throws {Error} no shadow-root is defined
*/ */
function setSelection(selection) { function setSelection(selection) {
if (isString(selection) || isInteger(selection)) { if (isString(selection) || isInteger(selection)) {
const result = convertValueToSelection.call(this, selection); const result = convertValueToSelection.call(this, selection);
selection = result?.selection; selection = result?.selection;
...@@ -2237,19 +2255,41 @@ function setSelection(selection) { ...@@ -2237,19 +2255,41 @@ function setSelection(selection) {
} }
validateArray(selection); validateArray(selection);
let ignoreValues = this.getOption("ignoreValues", []);
if(!isArray(ignoreValues)) {
ignoreValues = [];
}
let resultSelection = [];
for (let i = 0; i < selection.length; i++) { 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); let l = getSelectionLabel.call(this, selection[i].value);
if (l === selection[i].value) { if (l === selection[i].value) {
l = selection[i].label; l = selection[i].label;
} }
selection[i] = {
resultSelection.push({
label: l, label: l,
value: selection[i].value, value: selection[i].value,
}; })
} }
selection = resultSelection;
this.setOption("selection", selection); this.setOption("selection", selection);
checkOptionState.call(this); checkOptionState.call(this);
setSummaryAndControlText.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