From 0ff501d4aa28b64a11a3d9a6101e3f997a9e9795 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 18:29:08 +0100
Subject: [PATCH] teleport per spostare il dialog in una posizione consona nel DOM
---
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue | 96 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 96 insertions(+), 0 deletions(-)
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
new file mode 100644
index 0000000..e57d5db
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue
@@ -0,0 +1,96 @@
+<template>
+ <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">
+ <label for="title">Title</label>
+ <input id="title" name="title" type="text" ref="titleInput" />
+ </div>
+ <div class="form-control">
+ <label for="description">Description</label>
+ <textarea
+ id="description"
+ name="description"
+ type="text"
+ rows="3"
+ ref="descInput"
+ ></textarea>
+ </div>
+ <div class="form-control">
+ <label for="link">Link</label>
+ <input id="link" name="link" type="url" ref="linkInput" />
+ </div>
+ <div>
+ <base-button type="submit">Add Resource</base-button>
+ </div>
+ </form>
+ </base-card>
+</template>
+
+<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>
+
+<style scoped>
+label {
+ font-weight: bold;
+ display: block;
+ margin-bottom: 0.5rem;
+}
+
+input,
+textarea {
+ display: block;
+ width: 100%;
+ font: inherit;
+ padding: 0.15rem;
+ border: 1px solid #ccc;
+}
+
+input:focus,
+textarea:focus {
+ outline: none;
+ border-color: #3a0061;
+ background-color: #f7ebff;
+}
+
+.form-control {
+ margin: 1rem 0;
+}
+</style>
--
Gitblit v1.8.0