Skip to content

Commit e3b88f9

Browse files
Remi-GauRemi-Gau
committed
creates a range item
1 parent 4a1c3be commit e3b88f9

File tree

3 files changed

+176
-0
lines changed

3 files changed

+176
-0
lines changed

‎src/components/InputSelector/InputSelector.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,14 @@
137137
:init="init" v-on:valueChanged="sendData"/>
138138
</div>
139139

140+
<!-- If type is range -->
141+
<div v-else-if="inputType === 'range'">
142+
<RangeInput
143+
:constraints="valueConstraints"
144+
:selected_language="selected_language"
145+
:init="init" v-on:valueChanged="sendData"/>
146+
</div>
147+
140148
<!-- If type is date -->
141149
<div v-else-if="inputType === 'date' || inputType === 'year'">
142150
<DateInput
@@ -232,6 +240,7 @@ import TextInput from '../Inputs/WebTextInput/';
232240
import TextArea from '../Inputs/TextArea/';
233241
import IntegerInput from '../Inputs/WebIntegerInput/';
234242
import FloatInput from '../Inputs/WebFloatInput/';
243+
import RangeInput from '../Inputs/RangeInput/';
235244
import DateInput from '../Inputs/YearInput/';
236245
import DocumentUpload from '../Inputs/DocumentUpload';
237246
import MultiTextInput from '../Inputs/MultiTextInput';
@@ -298,6 +307,7 @@ export default {
298307
EmailInput,
299308
IntegerInput,
300309
FloatInput,
310+
RangeInput,
301311
DateInput,
302312
DocumentUpload,
303313
MultiTextInput,

‎src/components/Inputs/RangeInput/RangeInput.vue‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<div class="RangeInput">
3+
<b-form ref="form" @submit="onSubmit" :novalidate="true">
4+
<b-row>
5+
<b-col lg="4" class="col-4 col-md-4">
6+
<b-form-group>
7+
<b-form-input ref="rangeInput" v-model="input1"
8+
:class="{'is-valid': isValidFloat}">
9+
</b-form-input>
10+
<!-- <div class="invalid-feedback">-->
11+
<!-- {{ $t('invalid-feedback-number')}}-->
12+
<!-- </div>-->
13+
</b-form-group>
14+
</b-col>
15+
<b-col lg="4" class="col-4 col-md-4">
16+
<b-form-group>
17+
<b-form-input ref="rangeInput" v-model="input2"
18+
:class="{'is-valid': isValidFloat}">
19+
</b-form-input>
20+
<!-- <div class="invalid-feedback">-->
21+
<!-- {{ $t('invalid-feedback-number')}}-->
22+
<!-- </div>-->
23+
</b-form-group>
24+
</b-col>
25+
<b-col lg="4" v-if="hasUnit && Array.isArray(options)">
26+
<multiselect v-model="input3"
27+
:options="this.options" :searchable="false" :show-labels="false"
28+
:allowEmpty="false" placeholder="unit">
29+
</multiselect>
30+
</b-col>
31+
<div v-else-if="hasUnit && !Array.isArray(options)">
32+
<p class="singleUnit"> {{ options }}</p>
33+
</div>
34+
</b-row>
35+
<b-btn type="submit">{{ $t('submit-button')}}</b-btn>
36+
</b-form>
37+
</div>
38+
</template>
39+
40+
<style>
41+
.multiselect__tags {
42+
padding: 4px 40px 0 15px!important;
43+
border: 1px solid #ced4da;
44+
max-height: 38px;
45+
min-height: 38px;
46+
}
47+
48+
.multiselect__placeholder {
49+
color: #6c757c;
50+
font-size: 1rem;
51+
}
52+
53+
.multiselect__single {
54+
margin-top: 5px;
55+
}
56+
57+
.singleUnit {
58+
margin-top: 0.5rem;
59+
}
60+
61+
</style>
62+
63+
<script>
64+
import _ from 'lodash';
65+
import Multiselect from 'vue-multiselect';
66+
import 'vue-multiselect/dist/vue-multiselect.min.css';
67+
68+
export default {
69+
name: 'RangeInput',
70+
props: ['constraints', 'init'],
71+
components: {
72+
Multiselect,
73+
},
74+
data() {
75+
return {
76+
input1: '',
77+
input2: '',
78+
input3: '',
79+
};
80+
},
81+
methods: {
82+
onSubmit(e) {
83+
e.preventDefault();
84+
this.$refs.form.className = 'was-validated';
85+
if (this.areValidFloats && this.isValidRange) {
86+
if (this.hasUnit) { // send value + unit
87+
const name = { value1: this.input1, value2:this.input2, unitCode: this.input3};
88+
this.$emit('valueChanged', name);
89+
} else {
90+
const name = { value1: this.input1, value2:this.input2};
91+
this.$emit('valueChanged', name);
92+
}
93+
}
94+
},
95+
isValid() {
96+
// console.log(this.input, Number.isInteger(this.input));
97+
const num = parseFloat(this.input);
98+
if (isNaN(num)) {
99+
return false;
100+
}
101+
return Number.isFinite(num);
102+
},
103+
isValidRange() {
104+
// console.log(this.input, Number.isInteger(this.input));
105+
const num1 = parseFloat(this.input1);
106+
const num2 = parseFloat(this.input2);
107+
if (num2 > num1) {
108+
return true;
109+
} return false;
110+
},
111+
selectedLanguageLabel(unit) {
112+
const activeUnitOption = _.filter(unit['http://www.w3.org/2004/02/skos/core#prefLabel'], u => u['@language'] === this.selected_language);
113+
if (!Array.isArray(activeUnitOption) || !activeUnitOption.length) {
114+
// array does not exist, is not an array, or empty - when selected_language string absent
115+
return unit['http://www.w3.org/2004/02/skos/core#prefLabel'][0]['@value'];
116+
} else {
117+
return activeUnitOption[0]['@value'];
118+
}
119+
}
120+
},
121+
computed: {
122+
areValidFloats() {
123+
if (this.isValid(this.input1) && this.isValid(this.input2)){
124+
return true;
125+
} return false;
126+
},
127+
hasUnit() {
128+
if (this.constraints['http://schema.org/unitCode'] || this.constraints["http://schema.repronim.org/unitOptions"]) {
129+
return true;
130+
} return false;
131+
},
132+
options() {
133+
if (this.constraints['http://schema.org/unitCode']) {
134+
if (this.constraints['http://schema.org/unitCode'].length > 1) {
135+
return _.map(this.constraints['http://schema.org/unitCode'], unit => unit['@value']);
136+
} else if (this.constraints['http://schema.org/unitCode'].length === 1) {
137+
return this.constraints['http://schema.org/unitCode'][0]['@value'];
138+
}
139+
}
140+
else if (this.constraints["http://schema.repronim.org/unitOptions"]) {
141+
if (this.constraints['http://schema.repronim.org/unitOptions'].length > 1) {
142+
return _.map(this.constraints['http://schema.repronim.org/unitOptions'], unit => {
143+
return this.selectedLanguageLabel(unit);
144+
});
145+
} else if (this.constraints['http://schema.repronim.org/unitOptions'].length === 1) {
146+
return this.selectedLanguageLabel(this.constraints['http://schema.repronim.org/unitOptions'][0])
147+
}
148+
} return ''; // no unit present
149+
},
150+
},
151+
mounted() {
152+
if (this.init) {
153+
if (this.hasUnit) {
154+
this.input1 = this.init.value1;
155+
this.input2 = this.init.value2;
156+
this.input3 = this.init.unitCode;
157+
} else {
158+
this.input1 = this.init.value1;
159+
this.input2 = this.init.value2;
160+
}
161+
}
162+
},
163+
};
164+
</script>

‎src/components/Inputs/RangeInput/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// eslint-disable-next-line
2+
export { default } from "./RangeInput.vue";

0 commit comments

Comments
 (0)