From dcd02c76938b40d34bede8261707580f2c7ca43a Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Sun, 7 Feb 2021 17:24:21 +0100
Subject: [PATCH] lesson 116: add an error dialog

---
 .../src/components/ErrorAlert.vue             | 18 +++++++++++
 .../src/components/ManageGoals.vue            | 32 ++++++++++++++++++-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 2021-02-06 cmp-adv-01-starting-setup/src/components/ErrorAlert.vue

diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/ErrorAlert.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/ErrorAlert.vue
new file mode 100644
index 0000000..bac831c
--- /dev/null
+++ b/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>
diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue
index 38c4000..c8f8a10 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue	
+++ b/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>