Merge branch '27-update-vue' into 'master'

Resolve "Update vue"

Closes #27

See merge request !21

package.json

@@ -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"
   }
 }

src/@types/@dsb-norge/vue-keycloak-js.d.ts

+declare var vueKeycloakJs: any;
+
+declare module "@dsb-norge/vue-keycloak-js" {
+    export = vueKeycloakJs;
+}

src/components/MatchField.vue

@@ -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,
+              }
+          )
         }
       }
     }

src/components/MatchForm.vue

@@ -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)">

src/components/MatchOptionField.vue

@@ -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'},

src/components/ProposalList.vue

@@ -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();
       },
     }
   }

src/main.ts

@@ -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';