feat: Changed Stepper, Prompt from Vue 2 to Vue 3 (moja-global#305)

* feat: changed stepper, prompt from vue 2 to vue 3 * feat: added emits * feat: fixing lint errors
Janvi-Thakkar · Jun 19, 2022 · 0151538 · 0151538
1 parent 2e35c76
commit 0151538
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 30 deletions.
diff --git a/flint.ui/src/components/Prompts/ConfirmConfig.vue b/flint.ui/src/components/Prompts/ConfirmConfig.vue
@@ -126,13 +126,18 @@ export default {
       required: true
     }
   },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    startApicalls() {
-      this.$emit('close')
-      this.$emit('startApicalls')
+  emits: ['close', 'startApicalls'],
+  setup(props, { emit }) {
+    function close() {
+      emit('close')
+    }
+    function startApicalls() {
+      emit('close')
+      emit('startApicalls')
+    }
+    return {
+      close,
+      startApicalls
     }
   }
 }

diff --git a/flint.ui/src/components/Prompts/ConfirmRun.vue b/flint.ui/src/components/Prompts/ConfirmRun.vue
@@ -126,13 +126,18 @@ export default {
       required: true
     }
   },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    startApicalls() {
-      this.$emit('close')
-      this.$emit('startApicalls')
+  emits: ['close', 'startApicalls'],
+  setup(props, { emit }) {
+    function close() {
+      emit('close')
+    }
+    function startApicalls() {
+      emit('close')
+      emit('startApicalls')
+    }
+    return {
+      close,
+      startApicalls
     }
   }
 }

diff --git a/flint.ui/src/components/Stepper/StepperGCBM.vue b/flint.ui/src/components/Stepper/StepperGCBM.vue
@@ -9,45 +9,47 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 export default {
   props: {
     initial: {
       type: Number,
       default: 0
     }
   },
-  data() {
-    return {
-      current: this.initial
-    }
-  },
-
-  methods: {
-    onChange(current) {
+  setup(props) {
+    const current = ref(props.initial)
+    const router = useRouter()
+    function onChange(current) {
       switch (current) {
         case 0:
           // New Simulation
-          this.$router.push({
+          router.push({
             name: 'gcbmdashboard',
             params: { current }
           })
           break
         case 1:
           // Upload Dataset
-          this.$router.push({
+          router.push({
             name: 'gcbmupload',
             params: { current }
           })
           break
         case 2:
           // Run | Status | Download
-          this.$router.push({
+          router.push({
             name: 'gcbmrun',
             params: { current }
           })
           break
       }
     }
+    return {
+      current,
+      onChange
+    }
   }
 }
 </script>

diff --git a/flint.ui/src/components/Stepper/StepperPoint.vue b/flint.ui/src/components/Stepper/StepperPoint.vue
@@ -10,10 +10,13 @@
 
 <script>
 export default {
-  methods: {
-    finalPool() {
+  setup() {
+    function finalPool() {
       this.$root.$refs.finalPoolValues()
     }
+    return {
+      finalPool
+    }
   }
 }
 </script>
diff --git a/flint.ui/src/components/Stepper/StepperRothc.vue b/flint.ui/src/components/Stepper/StepperRothc.vue
@@ -21,12 +21,17 @@
 </template>
 
 <script>
+import { useStore } from 'vuex'
 export default {
-  methods: {
-    apiRoute_rothc() {
+  setup() {
+    const store = useStore()
+    function apiRoute_rothc() {
       // sending the new rothc config
       console.log('ROTHC route invoked with new configs')
-      this.$store.dispatch('send_rothcConfig', { root: true })
+      store.dispatch('send_rothcConfig', { root: true })
+    }
+    return {
+      apiRoute_rothc
     }
   }
 }