Added export Typescript checkbox option and successfully changed the state using v-bind

Author: Julia Bakerink

src/layouts/MyLayout.vue

@@ -18,7 +18,7 @@ Description:
         </q-btn>
         <q-toolbar-title> OverVue </q-toolbar-title>
         <label for="typescript" style="margin-right: 10px;"> 
-          <input type="checkbox" name="typescript" id="typescript" />
+          <input type="checkbox" name="typescript" id="typescript" :value="exportAsTypescript" @change="syncTypescriptFlag" />
           Use Typescript
         </label>
         <SlackLoginWindow />
@@ -117,6 +117,7 @@ import OpenProjectComponent from "../components/file_system_interface/OpenProjec
 import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
 import ComponentTab from "../components/home_sidebar_items/ComponentTab/ComponentTab.vue";
 import StoreTab from "../components/home_sidebar_items/StoreTab/StoreTab.vue";
+import { mapState } from "vuex";
 
 export default {
   // Passed down from App.vue
@@ -137,6 +138,11 @@ export default {
     ComponentTab,
     StoreTab,
   },
+  computed: {
+    ...mapState([
+      "exportAsTypescript"
+    ]),
+  },
   methods: {
     undo() {
       // this.$router.app.$children[0].undo();
@@ -146,6 +152,15 @@ export default {
     redo() {
       this.$emit("redo");
     },
+    syncTypescriptFlag(e) {
+      let checkboxValue;
+      if (e.target.value === "off") {
+        checkboxValue = "on"
+      } else {
+        checkboxValue = "off"
+      }
+      this.$store.commit('EXPORT_AS_TYPESCRIPT', checkboxValue);
+    },
   },
 };
 </script>

src/store/mutations.js

@@ -89,6 +89,11 @@ const mutations = {
 
   // *** VUEX *** //////////////////////////////////////////////
 
+
+  [types.EXPORT_AS_TYPESCRIPT]: (state, payload) => {
+    state.exportAsTypescript = payload; 
+  },
+
   [types.CREATE_ACTION]: (state, payload) => {
     state.userActions.push(payload);
     state.userActions.sort();

src/store/state/index.js

@@ -1,6 +1,7 @@
 import icons from './icons'
 import htmlElementMap from './htmlElementMap'
 
+
 const cloneDeep = require('lodash.clonedeep')
 
 const newState = {
@@ -56,7 +57,7 @@ const newState = {
   copyNumber: 0,
   pastedComponent: {},
 
-  exportAsTypescript: false,
+  exportAsTypescript: 'off',
 }
 
 // closured method to ensure we only ever write the default state ONCE

src/store/types.js

@@ -62,6 +62,7 @@ export const UPDATE_COMPONENT_SIZE = 'UPDATE_COMPONENT_SIZE'
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
 export const DELETE_USER_ACTIONS = 'DELETE_USER_ACTIONS'
 export const DELETE_USER_STATE = 'DELETE_USER_STATE'
+export const EXPORT_AS_TYPESCRIPT = 'EXPORT_AS_TYPESCRIPT'
 
 // Actions
 export const addActionSelected = 'addActionSelected'
@@ -123,6 +124,7 @@ export const updateStartingSize = 'updateStartingSize'
 export const deleteUserActions = 'deleteUserActions'
 export const deleteUserState = 'deleteUserState'
 
+
 // inactive mutations
 // export const SET_STATE = 'SET_STATE'
 // export const DELETE_COMPONENT = 'DELETE_COMPONENT'