Added Modal support

Lothindir · Jun 21, 2019 · 2b00b04 · 2b00b04
1 parent 07f8a5e
commit 2b00b04
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/src/views/Planification.vue b/src/views/Planification.vue
@@ -19,6 +19,7 @@
                       editable="true"
                       selectable="true"
                       droppable="true"
+                      event-limit="true"
                       v-on:select="selectionChanged"
                       v-on:dateClick="dateChanged"
                       :slot-label-format="slotLabelFormat"
@@ -30,7 +31,9 @@
                       :views="{
                         weekTimeGridView
                         }"
+                      class="z-10"
         />
+        <AddEventModal ref="addEventModal" v-show="showModal" v-on:close="showModal = false"></AddEventModal>
     </div>
 </template>
 
@@ -41,16 +44,19 @@
     import dayGridPlugin from '@fullcalendar/daygrid';
     import timeGridPlugin from '@fullcalendar/timegrid';
     import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
-    import frLocale from '../assets/js/cm-fr'
+    import frLocale from '../assets/js/cm-fr';
+    import AddEventModal from "../components/AddEventModal";
 
     const { ipcRenderer } = require('electron');
 
+
     export default {
         name: 'home',
         directives: {
             resize
         },
         components: {
+            AddEventModal,
             FullCalendar
         },
         data() {
@@ -72,7 +78,7 @@
                 customButtons: {
                     addEventButton: {
                         text: "Nouvelle activité",
-                        click: this.newEvent
+                        click: this.showModalDialog
                     }
                 },
                 selectionInfo: null,
@@ -139,13 +145,26 @@
             /* Stores the current selected dateTime */
             dateChanged: function(dateInfo) {
                 this.selectionInfo = null;
-                this.newEvent({
+                this.showModalDialog({
                     start: dateInfo.date,
                     title: 'New event',
                     color: 'red',
                     allDay: dateInfo.allDay
                 });
             },
+            showModalDialog: function(eventInfo){
+                this.showModal = true;
+                this.$refs.addEventModal.$once('submit', () => {
+                    console.log('Modal submitted data');
+                    this.showModal = false;
+                    this.newEvent(eventInfo);
+                });
+            },
+            clearModalDialog: function(){
+                this.showModal = false;
+                this.selectionInfo = null;
+                this.selectedDate = null;
+            },
             /* Creates a new event from the selection data */
             newEvent: function (eventInfo) {
                 let event = {};