Expose vue composition api through apiSpec (kolibri.lib.vueCompositionApi), so it is available to all SPAs

kolibri/core/assets/src/core-app/apiSpec.js

@@ -19,6 +19,7 @@ import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMi
 import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
 import scriptLoader from 'kolibri-design-system/lib/utils/scriptLoader';
 import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton'; // temp hack
+import * as vueCompositionApi from '@vue/composition-api';
 import logging from '../logging';
 import conditionalPromise from '../conditionalPromise';
 import * as apiResource from '../api-resource';
@@ -116,6 +117,7 @@ export default {
     logging,
     vue,
     vuex,
+    vueCompositionApi,
     conditionalPromise,
     apiResource,
   },

kolibri/core/assets/src/views/sync/SelectAddressModalGroup/SelectAddressForm.vue

@@ -116,7 +116,7 @@
 
 <script>
 
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'kolibri.lib.vueCompositionApi';
   import { useLocalStorage } from '@vueuse/core';
   import find from 'lodash/find';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';

kolibri/core/assets/src/views/sync/SelectAddressModalGroup/useDynamicAddresses.js

@@ -4,7 +4,7 @@ import {
   onBeforeMount,
   onBeforeUnmount,
   getCurrentInstance,
-} from '@vue/composition-api';
+} from 'kolibri.lib.vueCompositionApi';
 import { get, set, useIntervalFn } from '@vueuse/core';
 import { fetchDynamicAddresses } from './api';
 

kolibri/core/assets/src/views/sync/SelectAddressModalGroup/useSavedAddresses.js

@@ -1,4 +1,4 @@
-import { ref, computed, onBeforeMount } from '@vue/composition-api';
+import { ref, computed, onBeforeMount } from 'kolibri.lib.vueCompositionApi';
 import { get, set, and } from '@vueuse/core';
 import { deleteAddress, fetchStaticAddresses } from './api';
 

kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue

@@ -74,6 +74,7 @@
 
 <script>
 
+  import { ref } from 'kolibri.lib.vueCompositionApi';
   import { mapState, mapActions } from 'vuex';
   import orderBy from 'lodash/orderBy';
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
@@ -97,11 +98,16 @@
       DeleteGroupModal,
     },
     mixins: [commonCoach, commonCoreStrings],
-    data() {
+    setup() {
+      const selectedGroup = ref({
+        name: '',
+        id: '',
+      });
+
       return {
-        selectedGroup: {
-          name: '',
-          id: '',
+        selectedGroup,
+        setSelectedGroup(name, id) {
+          selectedGroup.value = { name, id };
         },
       };
     },
@@ -129,17 +135,11 @@
         this.displayModal(GroupModals.CREATE_GROUP);
       },
       openRenameGroupModal(groupName, groupId) {
-        this.selectedGroup = {
-          name: groupName,
-          id: groupId,
-        };
+        this.setSelectedGroup(groupName, groupId);
         this.displayModal(GroupModals.RENAME_GROUP);
       },
       openDeleteGroupModal(groupName, groupId) {
-        this.selectedGroup = {
-          name: groupName,
-          id: groupId,
-        };
+        this.setSelectedGroup(groupName, groupId);
         this.displayModal(GroupModals.DELETE_GROUP);
       },
       handleSuccessCreateGroup() {

kolibri/plugins/device/assets/src/views/DeviceIndex.vue

@@ -30,8 +30,10 @@
 
 <script>
 
+  import { getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
+  import { useIntervalFn } from '@vueuse/core';
   import omit from 'lodash/omit';
-  import { mapState, mapGetters, mapActions } from 'vuex';
+  import { mapState, mapGetters } from 'vuex';
   import CoreBase from 'kolibri.coreVue.components.CoreBase';
   import { ContentWizardPages, PageNames } from '../constants';
   import DeviceTopNav from './DeviceTopNav';
@@ -46,6 +48,25 @@
       PostSetupModalGroup,
       DeviceTopNav,
     },
+    setup() {
+      const polling = useIntervalFn(() => {
+        $store.dispatch('manageContent/refreshTaskList');
+      }, 1000);
+      const $store = getCurrentInstance().proxy.$store;
+      function startTaskPolling() {
+        if ($store.getters.canManageContent) {
+          polling.start();
+        }
+      }
+      function stopTaskPolling() {
+        polling.stop();
+      }
+
+      return {
+        stopTaskPolling,
+        startTaskPolling,
+      };
+    },
     computed: {
       ...mapGetters(['canManageContent', 'isSuperuser']),
       ...mapState({ welcomeModalVisibleState: 'welcomeModalVisible' }),
@@ -169,21 +190,10 @@
       this.stopTaskPolling();
     },
     methods: {
-      ...mapActions('manageContent', ['refreshTaskList']),
       hideWelcomeModal() {
         window.sessionStorage.setItem(welcomeDimissalKey, true);
         this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
       },
-      startTaskPolling() {
-        if (!this.intervalId && this.canManageContent) {
-          this.intervalId = setInterval(this.refreshTaskList, 1000);
-        }
-      },
-      stopTaskPolling() {
-        if (this.intervalId) {
-          this.intervalId = clearInterval(this.intervalId);
-        }
-      },
     },
     $trs: {
       deviceManagementTitle: 'Device',

kolibri/plugins/facility/assets/src/modules/classManagement/actions.js

@@ -19,18 +19,3 @@ export function createClass(store, name) {
     }
   );
 }
-
-/**
- * Do a DELETE to delete the class.
- * @param {string or Integer} id
- */
-export function deleteClass(store, id) {
-  return ClassroomResource.deleteModel({ id }).then(
-    () => {
-      store.commit('DELETE_CLASS', id);
-    },
-    error => {
-      store.dispatch('handleApiError', error, { root: true });
-    }
-  );
-}

kolibri/plugins/facility/assets/src/modules/classManagement/index.js

@@ -1,5 +1,5 @@
 import { displayModal, SET_BUSY, SET_ERROR, SET_MODAL } from '../shared';
-import { createClass, deleteClass } from './actions';
+import { createClass } from './actions';
 
 function defaultState() {
   return {
@@ -32,7 +32,6 @@ export default {
   },
   actions: {
     createClass,
-    deleteClass,
     displayModal,
   },
 };

kolibri/plugins/facility/assets/src/views/ManageClassPage/ClassDeleteModal.vue

@@ -7,7 +7,7 @@
     @submit="classDelete"
     @cancel="$emit('cancel')"
   >
-    <p>{{ $tr('confirmation', { classname: classname }) }}</p>
+    <p>{{ $tr('confirmation', { classname: className }) }}</p>
     <p>{{ $tr('description') }}</p>
     <p>{{ coreString('cannotUndoActionWarning') }}</p>
   </KModal>
@@ -17,24 +17,31 @@
 
 <script>
 
+  import { readonly } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useDeleteClass from './useDeleteClass';
 
   export default {
     name: 'ClassDeleteModal',
     mixins: [commonCoreStrings],
+    setup(props) {
+      const { deleteSelectedClassModel } = useDeleteClass(props.classToDelete);
+      const { name } = props.classToDelete;
+      return {
+        className: readonly(name),
+        deleteSelectedClassModel,
+      };
+    },
     props: {
-      classname: {
-        type: String,
-        required: true,
-      },
-      classid: {
-        type: String,
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      classToDelete: {
+        type: Object,
         required: true,
       },
     },
     methods: {
       classDelete() {
-        this.$store.dispatch('classManagement/deleteClass', this.classid).then(() => {
+        this.deleteSelectedClassModel().then(() => {
           this.$emit('success');
           this.showSnackbarNotification('classDeleted');
         });

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

@@ -82,7 +82,7 @@
               <KButton
                 appearance="flat-button"
                 :text="$tr('deleteClass')"
-                @click="openDeleteClassModal(classroom)"
+                @click="selectClassToDelete(classroom)"
               />
             </td>
           </tr>
@@ -95,10 +95,9 @@
     </p>
 
     <ClassDeleteModal
-      v-if="modalShown === Modals.DELETE_CLASS"
-      :classid="classForDeletion.id"
-      :classname="classForDeletion.name"
-      @cancel="closeModal"
+      v-if="Boolean(classToDelete)"
+      :classToDelete="classToDelete"
+      @cancel="clearClassToDelete"
       @success="handleDeleteSuccess()"
     />
     <ClassCreateModal
@@ -123,6 +122,7 @@
   import { Modals } from '../../constants';
   import ClassCreateModal from './ClassCreateModal';
   import ClassDeleteModal from './ClassDeleteModal';
+  import useDeleteClass from './useDeleteClass';
 
   export default {
     name: 'ManageClassPage',
@@ -137,8 +137,13 @@
       ClassDeleteModal,
     },
     mixins: [commonCoreStrings],
-    data() {
-      return { classForDeletion: null };
+    setup() {
+      const { classToDelete, selectClassToDelete, clearClassToDelete } = useDeleteClass();
+      return {
+        classToDelete,
+        selectClassToDelete,
+        clearClassToDelete,
+      };
     },
     computed: {
       ...mapState('classManagement', ['modalShown', 'classes']),
@@ -161,8 +166,7 @@
         this.refreshCoreFacilities();
       },
       handleDeleteSuccess() {
-        this.closeModal();
-        this.classForDeletion = null;
+        this.clearClassToDelete();
         this.refreshCoreFacilities();
       },
       refreshCoreFacilities() {
@@ -205,10 +209,6 @@
         link.params.id = classId;
         return link;
       },
-      openDeleteClassModal(classModel) {
-        this.classForDeletion = classModel;
-        this.displayModal(Modals.DELETE_CLASS);
-      },
     },
     $trs: {
       adminClassPageSubheader: 'View and manage your classes',

kolibri/plugins/facility/assets/src/views/ManageClassPage/useDeleteClass.js

@@ -0,0 +1,43 @@
+import { ref, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
+import { set } from '@vueuse/core';
+import { ClassroomResource } from 'kolibri.resources';
+
+// Usable that manages the state for "Delete Class" workflow
+export default function useDeleteClass(classroomProp) {
+  const $store = getCurrentInstance().proxy.$store;
+  const classToDelete = ref(null);
+
+  if (classroomProp) {
+    set(classToDelete, classroomProp);
+  }
+
+  function selectClassToDelete(selectedClassroom) {
+    set(classToDelete, selectedClassroom);
+  }
+
+  function clearClassToDelete() {
+    set(classToDelete, null);
+  }
+
+  function deleteSelectedClassModel(deleteId = classToDelete.value.id) {
+    if (!deleteId) {
+      return Promise.reject('No classId was provided');
+    }
+
+    return ClassroomResource.deleteModel({ id: deleteId }).then(
+      () => {
+        $store.commit('classManagement/DELETE_CLASS', deleteId);
+      },
+      error => {
+        $store.dispatch('handleApiError', error);
+      }
+    );
+  }
+
+  return {
+    classToDelete,
+    deleteSelectedClassModel,
+    selectClassToDelete,
+    clearClassToDelete,
+  };
+}