feat: add error and info message box (#121)

* feat: add error/info message box

Show error if template has not been chosen when click download
Show error if there is no value for required configs when click download
Show info after copying code to clipboard.

* chore: correct messages and add reference

Author: ydcjeff

src/components/CodeBlock.vue

@@ -22,6 +22,7 @@ import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-markdown'
 import 'prismjs/themes/prism-tomorrow.css'
 import { computed, ref, toRefs } from 'vue'
+import { msg } from '../store.js'
 
 export default {
   props: {
@@ -57,6 +58,9 @@ export default {
     const copyCode = async () => {
       try {
         await navigator.clipboard.writeText(code.value)
+        msg.color = '#0000ff'
+        msg.showMsg = true
+        msg.content = 'Code has been copied to Clipboard.'
       } catch (e) {
         console.error(e)
       }

src/components/Message.vue

@@ -0,0 +1,69 @@
+<template>
+  <Transition name="fade">
+    <div class="msg-wrapper" v-if="msg.showMsg" @click="msg.showMsg = false">
+      <div class="msg" :style="style">
+        {{ message }}
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+// referenced on
+// https://github.com/vuejs/vue-next/blob/master/packages/sfc-playground/src/Message.vue
+import { computed, toRefs } from 'vue'
+import { msg } from '../store.js'
+
+export default {
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { message, color } = toRefs(props)
+    const style = computed(() => {
+      return {
+        borderColor: color.value,
+        color: color.value,
+        background: color.value + '33'
+      }
+    })
+
+    return { message, color, style, msg }
+  }
+}
+</script>
+
+<style scoped>
+.msg-wrapper {
+  position: fixed;
+  --msg-offset: 1.5rem;
+  bottom: var(--msg-offset);
+  right: var(--msg-offset);
+  left: 0;
+  padding-left: var(--msg-offset);
+  width: inherit;
+}
+.msg {
+  border-radius: 8px;
+  border-width: 2px;
+  border-style: solid;
+  margin-right: var(--msg-offset);
+  padding: 1rem 2rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.25s ease-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(0, 10px);
+}
+</style>

src/components/NavBar.vue

@@ -63,7 +63,7 @@
     >
       <div class="msg-wrapper">
         <div class="msg">
-          <h2>🎉 Your Training Script Generated! 🎉</h2>
+          <h2>🎉 Your Training Script Has Been Generated! 🎉</h2>
           <p>
             Thanks for using Code-Generator! Feel free to reach out to us on
             <a
@@ -83,7 +83,7 @@
 
 <script>
 import { version } from '../../package.json'
-import { store } from '../store'
+import { store, msg } from '../store'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 import IconDiscord from './IconDiscord.vue'
@@ -101,13 +101,21 @@ export default {
 
     const downloadProject = () => {
       if (store.code && Object.keys(store.code).length) {
-        for (const filename in store.code) {
-          zip.file(filename, store.code[filename])
+        if (!store.config.output_dir) {
+          msg.showMsg = true
+          msg.content = `Output directory is required. Please input in Loggers tab.`
+        } else {
+          for (const filename in store.code) {
+            zip.file(filename, store.code[filename])
+          }
+          zip.generateAsync({ type: 'blob' }).then((content) => {
+            saveAs(content, `ignite-${store.config.template}.zip`)
+          })
+          showDownloadMsg.value = true
         }
-        zip.generateAsync({ type: 'blob' }).then((content) => {
-          saveAs(content, `ignite-${store.config.template}.zip`)
-        })
-        showDownloadMsg.value = true
+      } else {
+        msg.showMsg = true
+        msg.content = 'Choose a template to download.'
       }
     }
     return { version, downloadProject, showDownloadMsg, currentCommit }

src/components/PaneLeft.vue

@@ -15,17 +15,20 @@
       <component :is="currentTabComponent"></component>
     </KeepAlive>
   </div>
+  <Message :message="msg.content" :color="msg.color" />
 </template>
 
 <script>
 import TabTemplates from './TabTemplates.vue'
 import TabTraining from './TabTraining.vue'
 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'
 
 export default {
-  components: { TabTemplates, TabTraining, TabLoggers, TabHandlers },
+  components: { TabTemplates, TabTraining, TabLoggers, TabHandlers, Message },
   setup() {
     const currentTab = ref('Templates')
     const tabs = ref(['Templates', 'Training', 'Handlers', 'Loggers'])
@@ -35,7 +38,7 @@ export default {
       return 'tab-' + currentTab.value.toLowerCase()
     })
 
-    return { currentTab, tabs, currentTabComponent }
+    return { currentTab, tabs, currentTabComponent, msg }
   }
 }
 </script>

src/store.js

@@ -27,6 +27,13 @@ const files = {}
 // filename to store user input config during development
 export const __DEV_CONFIG_FILE__ = '__DEV_CONFIG__.json'
 
+// to track message box
+export const msg = reactive({
+  showMsg: false,
+  content: '',
+  color: '#ff0000'
+})
+
 // main reactive object
 // store.code - the final rendered code to be included in archive
 // store.config - the internal config to track user input