AnMi: Added setup method to the components

learningequality · Oct 4, 2023 · b108426 · b108426
1 parent bbecf85
commit b108426
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue b/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
@@ -39,7 +39,6 @@
   import { mapState } from 'vuex';
   import pickBy from 'lodash/pickBy';
   import debounce from 'lodash/debounce';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import UserTable from 'kolibri.coreVue.components.UserTable';
@@ -54,7 +53,7 @@
       UserTable,
       FilterTextbox,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       pageType: {
         type: String,

diff --git a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
@@ -219,6 +219,10 @@
       KDateRange,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+      return { windowIsLarge, windowIsSmall };
+    },
     data() {
       return {
         showLearnMoreSummaryModal: false,
@@ -249,8 +253,7 @@
         return this.$route.name === PageNames.DATA_EXPORT_PAGE;
       },
       windowSizeStyle() {
-        const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
-        if (windowIsMedium || windowIsSmall) {
+        if (this.windowIsMedium || this.windowIsSmall) {
           return 'section-buttons-flex';
         }
         return {};

diff --git a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
@@ -213,7 +213,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import { createTranslator } from 'kolibri.utils.i18n';
 
   import camelCase from 'lodash/camelCase';
@@ -273,7 +273,11 @@
       ChangePinModal,
       RemovePinModal,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     data() {
       return {
         showModal: false,

diff --git a/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue b/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
@@ -24,14 +24,19 @@
 
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+
 
   export default {
     name: 'IdentifierTextbox',
     components: {
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     props: {
       value: {
         type: String,