commit | author | age
|
2c19b5
|
1 |
<template> |
23ff5f
|
2 |
<base-dialog v-if="inputIsInvalid" title="Invalid Input" @close="confirmError"> |
CM |
3 |
<template #default> |
|
4 |
<p>Sfortunatamente un input รจ invalido</p> |
|
5 |
<p>Controlla che tutti gli input contengano qualche carattere valido.</p> |
|
6 |
</template> |
|
7 |
<template #action> |
|
8 |
<base-button @click="confirmError">Okay</base-button> |
|
9 |
</template> |
|
10 |
</base-dialog> |
c39477
|
11 |
<base-card> |
1b68fe
|
12 |
<form @submit.prevent="submitData"> |
c39477
|
13 |
<div class="form-control"> |
CM |
14 |
<label for="title">Title</label> |
1b68fe
|
15 |
<input id="title" name="title" type="text" ref="titleInput" /> |
c39477
|
16 |
</div> |
CM |
17 |
<div class="form-control"> |
|
18 |
<label for="description">Description</label> |
1b68fe
|
19 |
<textarea |
CM |
20 |
id="description" |
|
21 |
name="description" |
|
22 |
type="text" |
|
23 |
rows="3" |
|
24 |
ref="descInput" |
|
25 |
></textarea> |
c39477
|
26 |
</div> |
CM |
27 |
<div class="form-control"> |
|
28 |
<label for="link">Link</label> |
1b68fe
|
29 |
<input id="link" name="link" type="url" ref="linkInput" /> |
c39477
|
30 |
</div> |
CM |
31 |
<div> |
|
32 |
<base-button type="submit">Add Resource</base-button> |
|
33 |
</div> |
|
34 |
</form> |
|
35 |
</base-card> |
2c19b5
|
36 |
</template> |
CM |
37 |
|
c39477
|
38 |
<script> |
1b68fe
|
39 |
export default { |
CM |
40 |
inject: ['addResource'], |
23ff5f
|
41 |
data() { |
CM |
42 |
return { |
|
43 |
inputIsInvalid: false, |
|
44 |
}; |
|
45 |
}, |
1b68fe
|
46 |
methods: { |
CM |
47 |
submitData() { |
|
48 |
const enteredTitle = this.$refs.titleInput.value; |
|
49 |
const enteredDescription = this.$refs.descInput.value; |
|
50 |
const enteredUrl = this.$refs.linkInput.value; |
|
51 |
|
23ff5f
|
52 |
if ( |
CM |
53 |
enteredTitle.trim() === '' || |
203c2c
|
54 |
enteredDescription.trim() === '' || |
CM |
55 |
enteredUrl.trim() === '' |
23ff5f
|
56 |
) { |
CM |
57 |
this.inputIsInvalid = true; |
|
58 |
return; |
|
59 |
} |
|
60 |
|
1b68fe
|
61 |
this.addResource(enteredTitle, enteredDescription, enteredUrl); |
CM |
62 |
}, |
23ff5f
|
63 |
confirmError() { |
CM |
64 |
this.inputIsInvalid = false; |
|
65 |
}, |
1b68fe
|
66 |
}, |
CM |
67 |
}; |
c39477
|
68 |
</script> |
2c19b5
|
69 |
|
c39477
|
70 |
<style scoped> |
CM |
71 |
label { |
|
72 |
font-weight: bold; |
|
73 |
display: block; |
|
74 |
margin-bottom: 0.5rem; |
|
75 |
} |
|
76 |
|
|
77 |
input, |
|
78 |
textarea { |
|
79 |
display: block; |
|
80 |
width: 100%; |
|
81 |
font: inherit; |
|
82 |
padding: 0.15rem; |
|
83 |
border: 1px solid #ccc; |
|
84 |
} |
|
85 |
|
|
86 |
input:focus, |
|
87 |
textarea:focus { |
|
88 |
outline: none; |
|
89 |
border-color: #3a0061; |
|
90 |
background-color: #f7ebff; |
|
91 |
} |
|
92 |
|
|
93 |
.form-control { |
|
94 |
margin: 1rem 0; |
|
95 |
} |
|
96 |
</style> |