lesson 116: add an error dialog

2021-02-06 cmp-adv-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-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue

@@ -1,6 +1,36 @@
 <template>
     <div>
         <h2>Manage Goals</h2>
-        <input type="text" />
+        <input type="text" ref="goal" />
+        <button @click="setGoal">Set Goal</button>
+        <error-alert v-if="inputIsInvalid">
+            <h2>Input may not be empty</h2>
+            <button @click="resetErrorDialog">Ok</button>
+        </error-alert>
     </div>
 </template>
+<script>
+import ErrorAlert from "./ErrorAlert";
+
+export default {
+    components: {
+        ErrorAlert,
+    },
+    data() {
+        return {
+            inputIsInvalid: false,
+        };
+    },
+    methods: {
+        setGoal() {
+            const enteredValue = this.$refs.goal.value;
+            if (enteredValue === "") {
+                this.inputIsInvalid = true;
+            }
+        },
+        resetErrorDialog() {
+            this.inputIsInvalid = false;
+        },
+    },
+};
+</script>