From e49882c732b60d932cfdc09b618b26889ed09959 Mon Sep 17 00:00:00 2001
From: ydcjeff <32727188+ydcjeff@users.noreply.github.com>
Date: Sat, 15 May 2021 20:44:44 +0630
Subject: [PATCH 1/2] 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.
---
 src/components/CodeBlock.vue |  4 +++
 src/components/Message.vue   | 67 ++++++++++++++++++++++++++++++++++++
 src/components/NavBar.vue    | 24 ++++++++-----
 src/components/PaneLeft.vue  |  7 ++--
 src/store.js                 |  7 ++++
 5 files changed, 99 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Message.vue

diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index a34fc105..eaed2b35 100644
--- a/src/components/CodeBlock.vue
+++ b/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)
       }
diff --git a/src/components/Message.vue b/src/components/Message.vue
new file mode 100644
index 00000000..6a6f5adc
--- /dev/null
+++ b/src/components/Message.vue
@@ -0,0 +1,67 @@
+<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>
+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>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index e1571819..2f2eaa40 100644
--- a/src/components/NavBar.vue
+++ b/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 to have. Please choose 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 }
diff --git a/src/components/PaneLeft.vue b/src/components/PaneLeft.vue
index 652d3759..b823f934 100644
--- a/src/components/PaneLeft.vue
+++ b/src/components/PaneLeft.vue
@@ -15,6 +15,7 @@
       <component :is="currentTabComponent"></component>
     </KeepAlive>
   </div>
+  <Message :message="msg.content" :color="msg.color" />
 </template>
 
 <script>
@@ -22,10 +23,12 @@ 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>
diff --git a/src/store.js b/src/store.js
index de03a2c9..a943ba3f 100644
--- a/src/store.js
+++ b/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

From b3f0e46d2bc3272ebc8a913bf8f3890703103ef0 Mon Sep 17 00:00:00 2001
From: ydcjeff <32727188+ydcjeff@users.noreply.github.com>
Date: Sat, 15 May 2021 20:49:36 +0630
Subject: [PATCH 2/2] chore: correct messages and add reference

---
 src/components/Message.vue | 2 ++
 src/components/NavBar.vue  | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Message.vue b/src/components/Message.vue
index 6a6f5adc..41124902 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -9,6 +9,8 @@
 </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'
 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 2f2eaa40..22ff0996 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -103,7 +103,7 @@ export default {
       if (store.code && Object.keys(store.code).length) {
         if (!store.config.output_dir) {
           msg.showMsg = true
-          msg.content = `Output directory is required to have. Please choose in Loggers tab.`
+          msg.content = `Output directory is required. Please input in Loggers tab.`
         } else {
           for (const filename in store.code) {
             zip.file(filename, store.code[filename])