Commit a66780d3 authored by Tobinsk's avatar Tobinsk
Browse files

Update to newer vue, typescript and vue-keycloak version. Adapt code and add...

Update to newer vue, typescript and vue-keycloak version. Adapt code and add some dummy types for vue-keycloak-js
parent 801efc13
......@@ -10,40 +10,40 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@dsb-norge/vue-keycloak-js": "^1.1.2",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.7.0",
"core-js": "^3.6.4",
"@dsb-norge/vue-keycloak-js": "^1.3.1",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.20.1",
"core-js": "^3.8.0",
"fetch-intercept": "^2.3.1",
"register-service-worker": "^1.6.2",
"sinon": "^9.0.2",
"vue": "^2.6.11",
"vue-class-component": "^7.2.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5",
"vuex": "^3.1.2",
"whatwg-fetch": "^3.0.0"
"register-service-worker": "^1.7.1",
"sinon": "^9.2.1",
"vue": "^2.6.12",
"vue-class-component": "^7.2.6",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.4.9",
"vuex": "^3.6.0",
"whatwg-fetch": "^3.5.0"
},
"devDependencies": {
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"@vue/cli-plugin-babel": "^4.2.0",
"@types/jest": "^26.0.16",
"@typescript-eslint/eslint-plugin": "^4.9.0",
"@typescript-eslint/parser": "^4.9.0",
"@vue/cli-plugin-babel": "^4.5.9",
"@vue/cli-plugin-e2e-cypress": "^4.5",
"@vue/cli-plugin-eslint": "^4.2.0",
"@vue/cli-plugin-pwa": "^4.2.0",
"@vue/cli-plugin-router": "^4.2.0",
"@vue/cli-plugin-typescript": "^4.2.0",
"@vue/cli-plugin-unit-jest": "^4.2.0",
"@vue/cli-plugin-vuex": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"@vue/eslint-config-typescript": "^5.0.1",
"@vue/test-utils": "1.0.0-beta.31",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"typescript": "~3.7.5",
"vue-template-compiler": "^2.6.11"
"@vue/cli-plugin-eslint": "^4.5.9",
"@vue/cli-plugin-pwa": "^4.5.9",
"@vue/cli-plugin-router": "^4.5.9",
"@vue/cli-plugin-typescript": "^4.5.9",
"@vue/cli-plugin-unit-jest": "^4.5.9",
"@vue/cli-plugin-vuex": "^4.5.9",
"@vue/cli-service": "^4.5.9",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "1.1.1",
"eslint": "^7.14.0",
"eslint-plugin-vue": "^7.1.0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"typescript": "~4.1.2",
"vue-template-compiler": "^2.6.12"
}
}
declare var vueKeycloakJs: any;
declare module "@dsb-norge/vue-keycloak-js" {
export = vueKeycloakJs;
}
......@@ -5,7 +5,7 @@
:id="`group-field-${id}`"
label="Select field for matching"
:label-for="`field-${id}`">
<b-select :options="fields" v-model="value.field" :id="`field-${id}`" v-on:change="select" @change="change" :disabled="disabled">
<b-select :options="fields" :value="value.field" :id="`field-${id}`" v-on:change="select" :disabled="disabled">
<template v-slot:first>
<b-form-select-option :value="null" disabled>-- Please select a field --</b-form-select-option>
</template>
......@@ -17,11 +17,11 @@
:id="`group-operator-${id}`"
label="Select operator for matching"
:label-for="`operator-${id}`">
<b-select :options="operators" v-model="value.operator" :id="`operator-${id}`" @change="change" :disabled="disabled"> </b-select>
<b-select :options="operators" :value="value.operator" :id="`operator-${id}`" @change="change" :disabled="disabled"> </b-select>
</b-form-group>
</div>
<div class="col-sm-6">
<MatchOptionField :id="id" :type="value.type" v-model="option" @change="change" :disabled="disabled"></MatchOptionField>
<MatchOptionField :id="id" :type="value.type" v-bind:option1.sync="value.option1" v-bind:option2.sync="value.option2" @change="change" :disabled="disabled"></MatchOptionField>
</div>
</div>
</template>
......@@ -115,22 +115,32 @@
* @param value
*/
select(value) {
this.value.type = this.fields.find((f) => f.value === value).type
const type = this.fields.find((f) => f.value === value).type
// set default options of the types. So we do not have leftovers from the previous selection
switch(this.value.type) {
let option;
switch(type) {
case 'string':
this.option = this.defaultString
option = this.defaultString
break
case 'date':
this.option = this.defaultDate
option = this.defaultDate
break
}
},
this.$emit("update:value",{
field: value,
operator: this.value.operator,
option1: option.option1,
option2: option.option2,
type: type,
}
);
},
/**
* bubble changes
*/
change() {
this.$emit("input",
this.$emit("update:value",
{
field: this.value.field,
operator: this.value.operator,
......@@ -153,8 +163,14 @@
}
},
set(option) {
this.value.option1 = option.option1;
this.value.option2 = option.option2;
this.$emit("update:value",{
field: this.value.field,
operator: this.value.operator,
option1: option.option1,
option2: option.option2,
type: this.value.type,
}
)
}
}
}
......
......@@ -33,7 +33,7 @@
</b-row>
<b-row v-for="(field, index) in single.parameters" :key="index">
<div class="col-11">
<MatchField v-model="single.parameters[index]" :disabled="!isNew"/>
<MatchField v-bind:value.sync="single.parameters[index]" :disabled="!isNew"/>
</div>
<div class="col-1 d-flex align-items-center justify-content-end" v-if="isNew">
<b-button @click="removeField(index)">
......
......@@ -3,9 +3,9 @@
<div v-if="type === 'string'">
<b-form-group
:id="`group-option-${id}`"
:label="`Fuzziness ${value.option1}`"
:label="`Fuzziness ${option1}`"
:label-for="`option-${id}`">
<b-form-input :id="`option-${id}`" v-model="value.option1" type="range" min="0" max="5" @change="change" :disabled="disabled"></b-form-input>
<b-form-input :id="`option-${id}`" :value="option1" type="range" min="0" max="5" @change="change1" :disabled="disabled"></b-form-input>
</b-form-group>
</div>
......@@ -15,7 +15,7 @@
:id="`group-precision-${id}`"
label="Select precision for dates"
:label-for="`precision-${id}`">
<b-select :options="precisions" v-model="value.option1" :id="`operator-${id}`" @change="change" v-on:change="resetTolerance" :disabled="disabled">
<b-select :options="precisions" :value="option1" :id="`operator-${id}`" @change="change1" :disabled="disabled">
<template v-slot:first>
<b-form-select-option :value="null" disabled>-- Please select a precision --</b-form-select-option>
</template>
......@@ -26,7 +26,7 @@
:id="`group-tolerance-${id}`"
:label="`Tolerance for dates`"
:label-for="`tolerance-${id}`">
<b-select :options="tolerances" v-model="value.option2" :id="`tolerance-${id}`" @change="change" :disabled="disabled">
<b-select :options="tolerances" :value="option2" :id="`tolerance-${id}`" @change="change2" :disabled="disabled">
<template v-slot:first>
<b-form-select-option :value="null" disabled>-- Please select a tolerance --</b-form-select-option>
</template>
......@@ -48,8 +48,11 @@
type: Number,
default: () => Math.floor(Math.random() * 10000) + 1
},
value: {
type: Object
option1: {
type: String
},
option2: {
type: String
},
disabled: {
type: Boolean,
......@@ -72,21 +75,16 @@
/**
* bubble changes
*/
change() {
this.$emit('input', {
option1: this.value.option1,
option2: this.value.option2,
})
change1(value) {
this.$emit('update:option1', value)
this.$emit('update:option2', null)
},
/**
* Reset the tolerance if the precision change
* bubble changes
*/
resetTolerance() {
this.$emit('input', {
option1: this.value.option1,
option2: null,
})
}
change2(value) {
this.$emit('update:option2', value)
},
},
computed: {
/**
......@@ -94,7 +92,7 @@
* @return {({text: string, value: string}|{text: string, value: string}|{text: string, value: string}|{text: string, value: string}|{text: string, value: string})[]}
*/
tolerances() {
if(this.value.option1 === 'yyyy') {
if(this.option1 === 'yyyy') {
return [
{value: '1y', text: '+-1 year'},
{value: '10y', text: '+-10 years'},
......@@ -102,7 +100,7 @@
{value: '50y', text: '+-50 years'},
{value: '100y', text: '+-100 years'},
]
} else if(this.value.option1 === 'yyyy-MM') {
} else if(this.option1 === 'yyyy-MM') {
return [
{value: '1M', text: '+-1 month'},
{value: '2M', text: '+-2 months'},
......
......@@ -92,15 +92,10 @@
this.remove(proposal);
},
changeProposal(proposal, $event) {
if($event) {
proposal.persons.forEach((p) => {
p.match = true;
})
} else {
proposal.persons.forEach((p) => {
p.match = false;
})
}
proposal.persons.forEach((p) => {
p.match = $event;
});
this.$forceUpdate();
},
}
}
......
......@@ -4,7 +4,6 @@ import './registerServiceWorker';
import router from './router';
import store from './store';
import './plugins/bootstrap';
// @ts-ignore
import VueKeycloakJs from '@dsb-norge/vue-keycloak-js';
import './plugins/fetch-interceptor';
import 'whatwg-fetch';
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment