update calendar

assets/js/components/Calendar.vue

@@ -11,12 +11,12 @@
                             <div class="row">
                                 <div class="col-6">
                                     <select class="form-control mr-2" v-model="month">
-                                        <option v-for="value, key in months" v-bind:value="key">{{ value }}</option>
+                                        <option v-for="value, key in months" v-bind:value="key" v-html="value"></option>
                                     </select>
                                 </div>
                                 <div class="col-6">
                                     <select class="form-control ml-2" v-model="year">
-                                        <option v-for="value, key in years" v-bind:value="key">{{ value }}</option>
+                                        <option v-for="value in years" v-bind:value="value" v-html="value"></option>
                                     </select>
                                 </div>
                             </div>
@@ -26,7 +26,7 @@
                         <div class="pr-2">
                             <label for="projects">Intervenant⋅e⋅s</label>
                             <select class="form-control" v-model="selectedSpeakers" id="speakers" multiple>
-                                <option v-for="item in speakers" v-bind:value="item.id">{{ item.name }}</option>
+                                <option v-for="item in speakers" v-bind:value="item.id" v-html="item.name"></option>
                             </select>
                         </div>
                     </div>
@@ -34,18 +34,22 @@
                         <div>
                             <label for="projects">Projets</label>
                             <select class="form-control" v-model="selectedProjects" id="projects" multiple>
-                                <option v-for="item in projects" v-bind:value="item.id">{{ item.label }}</option>
+                                <option v-for="item in projects" v-bind:value="item.id" v-html="item.label"></option>
                             </select>
                         </div>
                     </div>
+
+                    <div v-if="message" class="col-md-12 mt-4">
+                        <div class="alert alert-info" v-html="message"></div>
+                    </div>
                 </div>
             </div>
         </details>
 
         <div class="row" v-if="weeks.length > 0">
             <div class="col-md-12">
-                <table class="table table-bordered mt-3">
+                <table class="table table-bordered mt-3" v-if="!loading">
-                    <Week v-for="week, key in weeks" v-bind:key="key" v-bind:week="week" />
+                    <Week v-for="week, key in weeks" :key="key" v-bind:week="week" />
                 </table>
             </div>
         </div>
@@ -80,6 +84,8 @@ export default {
   },
   data () {
     return {
+      loading: true,
+      message: null,
       projects: [],
       speakers: [],
       month: new Date().getMonth() + 1,
@@ -107,6 +113,28 @@ export default {
   methods: {
     refresh () {
       const that = this
+      this.loading = true
+      this.message = null
+
+      if (!this.month) {
+        this.message = 'Il faut sélectionner le mois.'
+        return
+      }
+
+      if (!this.year) {
+        this.message = 'Il faut sélectionner l\'année.'
+        return
+      }
+
+      if (!this.selectedProjects.length) {
+        this.message = 'Il faut sélectionner au moins un projet.'
+        return
+      }
+
+      if (!this.selectedSpeakers.length) {
+        this.message = 'Il faut sélectionner au moins un⋅e intervenant⋅e.'
+        return
+      }
 
       axios.get(Routing.generate('admin_calendar_month', {
         month: this.month,
@@ -116,6 +144,7 @@ export default {
       }))
         .then((response) => {
           that.weeks = chunk(response.data, 7)
+          that.loading = false
         })
     }
   },

assets/js/components/Week.vue

@@ -2,8 +2,7 @@
     <fragment>
         <thead class="thead-light">
             <tr>
-                <th v-for="item in week" v-bind:class="{'text-right': true, 'text-muted': !item.currentMonth}">
+                <th v-for="item in week" v-bind:class="{'text-right': true, 'text-muted': !item.currentMonth}" v-html="item.day">
-                    {{ item.day }}
                 </th>
             </tr>
         </thead>
@@ -14,9 +13,10 @@
                         <summary>
                             <span class="font-weight-bold">
                                 <span class="text-muted">
-                                    [{{ event.startAt }}]
+                                    [<span v-html="event.startAt"></span>]
                                 </span>
-                                {{ event.summary }}
+
+                                <span v-html="event.summary"></span>
                             </span>
                         </summary>
 
@@ -24,11 +24,11 @@
 
                         <div class="mt-3">
                             <a v-bind:href="route('admin_speaker_show', {entity: speaker.id})" v-for="speaker in event.speakers" v-bind:class="['d-block mr-1 mt-1 btn btn-xs', 'btn-' + speaker.color].join(' ')">
-                                {{ speaker.name }}
+                                <span v-html="speaker.name"></span>
                             </a>
 
                             <a v-bind:href="route('admin_project_show', {entity: project.id})" v-for="project in event.projects" class="d-block mr-1 mt-1 btn btn-xs border btn-light">
-                                {{ project.label }}
+                                <span v-html="project.label"></span>
                             </a>
                         </div>
                     </details>
@@ -70,13 +70,12 @@ export default {
     }
   },
   methods: {
+    getGlobalKey () {
+      return ++this.globalKey
+    },
     route (route, params) {
       return Routing.generate(route, params)
     }
-  },
-  data () {
-    return {
-    }
   }
 }
 </script>