| 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> | |
