Fix change facility workflow

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ChooseAdmin/__tests__/index.spec.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue';
 import { coreStoreFactory } from 'kolibri/store';
 import { shallowMount, mount } from '@vue/test-utils';
 import ChooseAdmin from '../index.vue';
@@ -14,12 +15,10 @@ function makeWrapper({ userId, sourceFacilityUsers } = {}) {
       changeFacilityService: {
         send: sendMachineEvent,
       },
-      state: {
-        value: {
-          userId,
-          sourceFacilityUsers,
-        },
-      },
+      state: computed(() => ({
+        userId,
+        sourceFacilityUsers,
+      })),
     },
   });
 }

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmAccountUsername/__tests__/index.spec.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
 import ConfirmAccountUsername from '../index.vue';
 
@@ -8,11 +9,7 @@ function makeWrapper({ targetFacility } = {}) {
       changeFacilityService: {
         send: sendMachineEvent,
       },
-      state: {
-        value: {
-          targetFacility,
-        },
-      },
+      state: computed(() => ({ targetFacility })),
     },
   });
 }

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmAccountUsername/index.vue

@@ -50,13 +50,13 @@
     inject: ['changeFacilityService', 'state'],
     computed: {
       targetFacility() {
-        return get(this.state, 'value.targetFacility');
+        return get(this.state, 'targetFacility');
       },
       username() {
-        return get(this.state, 'value.username');
+        return get(this.state, 'username');
       },
       usernameExists() {
-        return get(this.state, 'value.accountExists');
+        return get(this.state, 'accountExists');
       },
       isCreateAccountButtonDisabled() {
         return !get(this.targetFacility, 'learner_can_sign_up');

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/ConfirmChangeFacility.vue

@@ -55,10 +55,10 @@
     },
     computed: {
       targetFacility() {
-        return this.state.value.targetFacility;
+        return this.state.targetFacility;
       },
       role() {
-        return this.state.value.role;
+        return this.state.role;
       },
       isCreateAccountDisabled() {
         return !get(this.targetFacility, 'learner_can_sign_up');
@@ -85,7 +85,7 @@
       FacilityUserResource.fetchCollection({
         force: true,
         getParams: {
-          member_of: this.state.value.sourceFacility,
+          member_of: this.state.sourceFacility,
         },
       }).then(users => {
         if (Object.keys(users).length === 1) {

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/CreateAccount/__tests__/index.spec.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line
@@ -15,11 +16,9 @@ function makeWrapper({ targetFacility } = {}) {
       changeFacilityService: {
         send: sendMachineEvent,
       },
-      state: {
-        value: {
-          targetFacility,
-        },
-      },
+      state: computed(() => ({
+        targetFacility,
+      })),
     },
     localVue,
   });

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/CreateAccount/index.vue

@@ -96,11 +96,11 @@
       description() {
         return this.$tr('description', {
           fullName: get(this.session, 'full_name', ''),
-          targetFacility: get(this.state, 'value.targetFacility.name', ''),
+          targetFacility: get(this.state, 'targetFacility.name', ''),
         });
       },
       showPasswordTextbox() {
-        return !get(this.state, 'value.targetFacility.learner_can_login_with_no_password', false);
+        return !get(this.state, 'targetFacility.learner_can_login_with_no_password', false);
       },
       isFormValid() {
         return this.isUsernameValid && (!this.showPasswordTextbox || this.isPasswordValid);

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/CreatePassword.vue

@@ -79,7 +79,7 @@
       description() {
         return this.$tr('description', {
           username: get(this.session, 'username', ''),
-          targetFacility: get(this.state, 'value.targetFacility.name', ''),
+          targetFacility: get(this.state, 'targetFacility.name', ''),
         });
       },
     },
@@ -96,7 +96,7 @@
         this.changeFacilityService.send({
           type: 'CONTINUE',
           value: {
-            username: get(this.state, 'value.targetAccount.username', ''),
+            username: get(this.state, 'targetAccount.username', ''),
             password: this.formData.password,
           },
         });

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/__tests__/ConfirmAccountDetails.spec.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue';
 import { mount, createLocalVue } from '@vue/test-utils';
 import { FacilityUserGender } from 'kolibri/constants';
 import ConfirmAccountDetails from '../ConfirmAccountDetails';
@@ -11,13 +12,11 @@ function makeWrapper({ targetFacility, targetAccount, username } = {}) {
       changeFacilityService: {
         send: sendMachineEvent,
       },
-      state: {
-        value: {
-          targetFacility,
-          targetAccount,
-          username,
-        },
-      },
+      state: computed(() => ({
+        targetFacility,
+        targetAccount,
+        username,
+      })),
     },
     localVue,
   });

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/__tests__/index.spec.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue';
 import { mount, createLocalVue } from '@vue/test-utils';
 import MergeAccountDialog from '../index.vue';
 
@@ -14,14 +15,12 @@ function makeWrapper({ targetFacility, targetAccount, fullname, username } = {})
         send: sendMachineEvent,
         state: { value: 'requireAccountCreds' },
       },
-      state: {
-        value: {
-          targetFacility,
-          targetAccount,
-          fullname,
-          username,
-        },
-      },
+      state: computed(() => ({
+        targetFacility,
+        targetAccount,
+        fullname,
+        username,
+      })),
     },
     localVue,
   });

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeAccountDialog/index.vue

@@ -78,7 +78,7 @@
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import BottomAppBar from 'kolibri/components/BottomAppBar';
-  import { computed, inject, ref, watch } from 'vue';
+  import { computed, getCurrentInstance, inject, ref, watch } from 'vue';
   import get from 'lodash/get';
   import remoteFacilityUserData from '../../../composables/useRemoteFacility';
   import commonProfileStrings from '../../commonProfileStrings';
@@ -156,9 +156,9 @@
         });
       }
 
+      const component = getCurrentInstance().proxy;
       function handleContinue() {
         const facility = get(state, 'value.targetFacility', {});
-        const component = this;
         remoteFacilityUserData(
           facility.url,
           facility.id,

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/MergeDifferentAccounts/__tests__/index.spec.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue';
 import { mount, createLocalVue } from '@vue/test-utils';
 import MergeDifferentAccounts from '../index.vue';
 import * as useRemoteFacility from '../../../../composables/useRemoteFacility';
@@ -17,14 +18,12 @@ function makeWrapper({ targetFacility, targetAccount, fullname, username } = {})
         send: sendMachineEvent,
         state: { value: 'requireAccountCreds' },
       },
-      state: {
-        value: {
-          targetFacility,
-          targetAccount,
-          fullname,
-          username,
-        },
-      },
+      state: computed(() => ({
+        targetFacility,
+        targetAccount,
+        fullname,
+        username,
+      })),
     },
     localVue,
   });

kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue

@@ -63,7 +63,7 @@
             :primary="true"
             :text="coreString('continueAction')"
             :disabled="selectedFacilityId === ''"
-            @click="to_continue"
+            @click="toContinue"
           />
         </KButtonGroup>
       </slot>
@@ -76,7 +76,7 @@
 <script>
 
   import { useLocalStorage, useMemoize, computedAsync, get } from '@vueuse/core';
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref, watch, inject } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import commonSyncElements from 'kolibri-common/mixins/commonSyncElements';
   import { NetworkLocationResource } from 'kolibri-common/apiResources/NetworkLocationResource';
@@ -230,8 +230,9 @@
         }
       }
 
-      function to_continue() {
-        this.changeFacilityService.send({
+      const changeFacilityService = inject('changeFacilityService');
+      function toContinue() {
+        changeFacilityService.send({
           type: 'CONTINUE',
         });
       }
@@ -248,7 +249,7 @@
         showAddAddressModal,
         facilityDisabled,
         handleAddedAddress,
-        to_continue,
+        toContinue,
       };
     },
     inject: ['changeFacilityService'],