From 23ff5f831a8ebe05a6e4a4884fdff25824706aac Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 17:35:45 +0100
Subject: [PATCH] add modal dialog

---
 10 - course project/xno-prj-cmp-01-starting-setup/src/main.js                                      |    2 +
 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue |   27 +++++++++++++
 10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue                 |   86 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 114 insertions(+), 1 deletions(-)

diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue
new file mode 100644
index 0000000..c63603d
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue
@@ -0,0 +1,86 @@
+<template>
+  <div @click="$emit('close')"></div>
+  <dialog open>
+    <header>
+      <slot name="header">
+        <h2>{{ title }}</h2>
+      </slot>
+    </header>
+    <section>
+      <slot></slot>
+    </section>
+    <menu>
+      <slot name="action">
+        <base-button @click="$emit('close')"></base-button>
+      </slot>
+    </menu>
+  </dialog>
+</template>
+
+<script>
+export default {
+  //   props: ['title'],
+  props: {
+    title: {
+      type: String,
+      required: false,
+    },
+  },
+  emits: ['close'],
+};
+</script>
+
+<style scoped>
+div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+  z-index: 10;
+}
+
+dialog {
+  position: fixed;
+  top: 20vh;
+  left: 10%;
+  width: 80%;
+  z-index: 100;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+header {
+  background-color: #3a0061;
+  color: white;
+  width: 100%;
+  padding: 1rem;
+}
+
+header h2 {
+  margin: 0;
+}
+
+section {
+  padding: 1rem;
+}
+
+menu {
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  dialog {
+    left: calc(50% - 20rem);
+    width: 40rem;
+  }
+}
+</style>
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue
index be52373..5ddea32 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue
@@ -1,5 +1,13 @@
 <template>
-  <h2>Add Resource</h2>
+  <base-dialog v-if="inputIsInvalid" title="Invalid Input" @close="confirmError">
+    <template #default>
+      <p>Sfortunatamente un input è invalido</p>
+      <p>Controlla che tutti gli input contengano qualche carattere valido.</p>
+    </template>
+    <template #action>
+      <base-button @click="confirmError">Okay</base-button>
+    </template>
+  </base-dialog>
   <base-card>
     <form @submit.prevent="submitData">
       <div class="form-control">
@@ -30,14 +38,31 @@
 <script>
 export default {
   inject: ['addResource'],
+  data() {
+    return {
+      inputIsInvalid: false,
+    };
+  },
   methods: {
     submitData() {
       const enteredTitle = this.$refs.titleInput.value;
       const enteredDescription = this.$refs.descInput.value;
       const enteredUrl = this.$refs.linkInput.value;
 
+      if (
+        enteredTitle.trim() === '' ||
+        enteredDescription.trim() ||
+        enteredUrl.trim()
+      ) {
+        this.inputIsInvalid = true;
+        return;
+      }
+
       this.addResource(enteredTitle, enteredDescription, enteredUrl);
     },
+    confirmError() {
+      this.inputIsInvalid = false;
+    },
   },
 };
 </script>
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js b/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
index f398b1d..bc89692 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
@@ -3,11 +3,13 @@
 import App from './App.vue';
 import BaseCard from './components/UI/BaseCard.vue';
 import BaseButton from './components/UI/BaseButton.vue';
+import BaseDialog from './components/UI/BaseDialog.vue';
 
 const app = createApp(App);
 
 app.component('base-card', BaseCard);
 app.component('base-button', BaseButton);
+app.component('base-dialog', BaseDialog);
 
 app.mount('#app');
 

--
Gitblit v1.8.0