Added v-model directive on inputs

Lothindir · Jun 28, 2019 · be05100 · be05100
1 parent 45859c8
commit be05100
Showing 1 changed file with 24 additions and 10 deletions.
diff --git a/src/components/AddEventModal.vue b/src/components/AddEventModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal class="z-20" v-on:close="close" v-on:submit="submit">
+    <Modal class="z-20" v-on:close="close">
         <template v-slot:title>
             <h1>Ajouter une activité</h1>
         </template>
@@ -10,21 +10,21 @@
                     <label class="form-label" for="grid-first-name">
                         Titre
                     </label>
-                    <input class="form-input" id="grid-first-name" type="text" placeholder="SC 3.2 - Jeux d'eau">
+                    <input class="form-input" id="grid-first-name" type="text" placeholder="SC 3.2 - Jeux d'eau" v-model="event.title">
                 </div>
                 <div class="w-full md:w-1/2 px-3">
                     <label class="form-label" for="grid-last-name">
                         Durée
                     </label>
-                    <input class="form-input" id="grid-last-name" type="time" value="01:00">
+                    <input class="form-input" id="grid-last-name" type="time" value="01:00" v-model="event.duration">
                 </div>
             </div>
             <div class="flex flex-wrap -mx-3 mb-6">
                 <div class="w-full px-3">
                     <label class="form-label" for="eventType">
                         Type d'activité
                     </label>
-                    <Multiselect class="border border-gray-400 rounded text-gray-700" id="eventType" v-model="eventType" :options="eventTypes" :searchable="true" placeholder="Choisir un type d'activité">
+                    <Multiselect class="border border-gray-400 rounded text-gray-700" id="eventType" v-model="event.eventType" :options="eventTypes" :searchable="true" placeholder="Choisir un type d'activité">
                     </Multiselect>
                 </div>
             </div>
@@ -33,7 +33,7 @@
                     <label class="form-label" for="resp">
                         Responsable(s)
                     </label>
-                    <Multiselect class="border border-gray-400 rounded text-gray-700" id="resp" v-model="eventManagers" :options="chiefs" :multiple="true" :searchable="false" track-by="fullName" label="code"
+                    <Multiselect class="border border-gray-400 rounded text-gray-700" id="resp" v-model="event.eventManagers" :options="chiefs" :multiple="true" :searchable="false" track-by="fullName" label="code"
                                  placeholder="Choisir au moins un responsable">
                         <template slot="option" slot-scope="{option}">{{ option.fullName }}</template>
                     </Multiselect>
@@ -42,7 +42,7 @@
         </template>
 
         <template v-slot:footer>
-            //TODO Add Button
+            <button class="form-button mx-auto w-1/2" v-on:click="addEvent">Ajouter</button>
         </template>
     </Modal>
 </template>
@@ -61,8 +61,12 @@
         },
         data() {
           return {
-              eventManagers: [],
-              eventType: null,
+              event: {
+                  title: '',
+                  duration: null,
+                  eventManagers: [],
+                  eventType: null,
+              },
               chiefs: [
                   { code: 'FM', fullName: 'Francesco Monti'},
                   { code: 'KM', fullName: 'Katja Mosimann' },
@@ -83,8 +87,10 @@
             close: function () {
                 this.$emit('close');
             },
-            submit: function () {
-                this.$emit('submit');
+            addEvent: function () {
+                if(this.event.title !== '' && this.eventduration !== null && this.event.eventManagers.length > 0 && this.event.eventType !== null) {
+                    this.$emit('submit', this.event);
+                }
             }
         }
     }
@@ -106,5 +112,13 @@
     .form-label {
         @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
     }
+
+    .form-button {
+        @apply shadow-lg pt-3 pb-3 mt-4 text-white bg-green-600 rounded;
+    }
+
+    .form-button:hover {
+        @apply bg-green-400;
+    }
 </style>