fix: disable clicking if no template is chosen (#153)

* fix: disable clicking if no template is chosen

* fix: disable test checkbox if no template & fallback to README if no code file

Author: ydcjeff

src/components/FormCheckbox.vue

@@ -6,6 +6,7 @@
           type="checkbox"
           :id="checkboxId"
           :required="required"
+          :disabled="noTemplate"
           v-model="checked"
           @change.prevent="saveChecked"
         />
@@ -18,7 +19,7 @@
 
 <script>
 import { ref, toRefs, computed } from 'vue'
-import { saveConfig } from '../store.js'
+import { saveConfig, store } from '../store.js'
 
 export default {
   props: {
@@ -42,6 +43,7 @@ export default {
     const saveChecked = () => saveConfig(saveKey.value, checked.value)
     const checkboxId = computed(() => saveKey.value + '-checkbox')
     const isRequired = computed(() => (required.value ? '*' : ''))
+    const noTemplate = computed(() => !store.config.template)
 
     return {
       label,
@@ -50,7 +52,8 @@ export default {
       checked,
       saveChecked,
       checkboxId,
-      isRequired
+      isRequired,
+      noTemplate
     }
   }
 }

src/components/PaneLeft.vue

@@ -4,8 +4,8 @@
       v-for="tab in tabs"
       :key="tab"
       class="left-pane-tab"
-      :class="{ active: currentTab === tab }"
-      @click="currentTab = tab"
+      :class="{ active: currentTab === tab, disable: !hasTemplate }"
+      @click="switchTab(tab)"
     >
       {{ tab }}
     </div>
@@ -25,20 +25,36 @@ import TabHandlers from './TabHandlers.vue'
 import TabLoggers from './TabLoggers.vue'
 import Message from './Message.vue'
 import { computed, ref } from 'vue'
-import { msg } from '../store.js'
+import { msg, store } from '../store.js'
 
 export default {
   components: { TabTemplates, TabTraining, TabLoggers, TabHandlers, Message },
   setup() {
     const currentTab = ref('Templates')
-    const tabs = ref(['Templates', 'Training', 'Handlers', 'Loggers'])
+    const tabs = ['Templates', 'Training', 'Handlers', 'Loggers']
 
     // computed properties
     const currentTabComponent = computed(() => {
       return 'tab-' + currentTab.value.toLowerCase()
     })
 
-    return { currentTab, tabs, currentTabComponent, msg }
+    const switchTab = (tab) => {
+      if (store.config.template) {
+        currentTab.value = tab
+      }
+    }
+    const hasTemplate = computed(() => {
+      return store.config.template
+    })
+
+    return {
+      currentTab,
+      tabs,
+      currentTabComponent,
+      msg,
+      switchTab,
+      hasTemplate
+    }
   }
 }
 </script>
@@ -69,6 +85,12 @@ export default {
   padding: 0.4rem 0.8rem;
   border-bottom: 3px solid transparent;
 }
+.disable {
+  cursor: not-allowed;
+}
+.active {
+  cursor: pointer;
+}
 .left-pane-tab:hover,
 .active {
   color: var(--c-brand-red);

src/components/PaneRight.vue

@@ -12,7 +12,7 @@
         {{ tab }}
       </div>
     </div>
-    <div class="right-pane-contexts" v-if="store.code[currentTab]">
+    <div class="right-pane-contexts" v-if="currentCode()">
       <KeepAlive>
         <CodeBlock :lang="getLang" :code="formattedCode()" />
       </KeepAlive>
@@ -59,7 +59,22 @@ export default {
     }
     const getLang = computed(() => currentTab.value.split('.')[1])
     const formattedCode = () => store.code[currentTab.value].trim()
-    return { store, currentTab, tabs, getLang, getFileType, formattedCode }
+    const currentCode = () => {
+      const code = store.code[currentTab.value]
+      if (code) {
+        return code
+      }
+      currentTab.value = 'README.md'
+      return store.code[currentTab.value]
+    }
+    return {
+      currentCode,
+      currentTab,
+      tabs,
+      getLang,
+      getFileType,
+      formattedCode
+    }
   }
 }
 </script>