lesson 133: add my solution for an error dialog

2021-02-08 prj-cmp-01-starting-setup/src/components/ErrorAlert.vue

@@ -0,0 +1,18 @@
+<template>
+    <dialog open>
+        <slot></slot>
+    </dialog>
+</template>
+
+<style scoped>
+dialog {
+    margin: 0;
+    position: fixed;
+    top: 20vh;
+    left: 30%;
+    width: 40%;
+    background-color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    padding: 1rem;
+}
+</style>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/AddResource.vue

@@ -23,19 +23,41 @@
       </div>
     </form>
   </base-card>
+  <teleport to="body">
+    <error-alert v-if="inputIsInvalid">
+      <h2>Input may not be empty</h2>
+      <button @click="resetErrorDialog">Ok</button>
+    </error-alert>
+  </teleport>
 </template>
 
 <script>
+import ErrorAlert from '../ErrorAlert';
 export default {
+  components: {
+    ErrorAlert
+  },
   inject: ['storeNewResource'],
   data() {
     return {
       title: '',
       description: '',
-      link: ''
+      link: '',
+      inputIsInvalid: false
     };
   },
   methods: {
+    validateInput(resource) {
+      if (!resource.title || !resource.description || !resource.link) {
+        this.inputIsInvalid = true;
+        return false;
+      } else {
+        return true;
+      }
+    },
+    resetErrorDialog() {
+      this.inputIsInvalid = false;
+    },
     returnNewResource() {
       const resource = {
         id: new Date().toISOString(),
@@ -43,7 +65,9 @@ export default {
         description: this.description,
         link: this.link
       };
-      this.storeNewResource(resource);
+      if (this.validateInput(resource)) {
+        this.storeNewResource(resource);
+      }
     }
   }
 };