redesign event blueprint

site/blueprints/pages/event.yml

@@ -10,28 +10,50 @@ tabs:
           keyInfosHeadline:
             type: headline
             label: Infos clés
-          date:
-            type: text
+          startDate:
+            label: Date de début
+            type: date
             icon: calendar
-            width: 1/4
-            placeholder: 2-5 oct. 2024
+            display: DD/MM/YYYY
+            width: 1/5
+            when:
+              isMapadoEvent: false
+          mapadoKeyInfos:
+            label: Événement connecté à Mapado
+            type: info
+            text: Les données de dates et de durée sont récupérées de [Mapado](https://desk.mapado.com/).
+            width: 2/4
+            when:
+              isMapadoEvent: true
+          endDate:
+            label: Date de fin
+            type: date
+            icon: calendar
+            display: DD/MM/YYYY
+            width: 1/5
+            when:
+              isMapadoEvent: false
           duration:
             label: Durée
             type: text
             icon: clock
-            width: 1/4
+            width: 1/5
             placeholder: 1h20
+            when:
+              isMapadoEvent: false
           public:
             type: text
             icon: users
-            width: 1/4
+            width: 1/5
             placeholder: dès 8 ans
           place:
             label: Lieu
             type: text
             icon: pin
-            width: 1/4
+            width: 1/5
             placeholder: NTB
+          line:
+            type: line
       - width: 1/1
         fields:
           presentationHeadline:
@@ -83,10 +105,33 @@ tabs:
     label: Réglages
     icon: cog
     fields:
+      isMapadoEvent:
+        label: Connecter à Mapado
+        type: toggle
+        default: false
+        width: 1/4
+      mapadoInfo:
+        label: Pourquoi faire ?
+        type: info
+        text: |
+          Permet de récupérer depuis [Mapado](https://desk.mapado.com/) les infos suivantes :
+            - date de début
+            - date de fin
+            - durée
+            - séances et leurs informations (date, places restantes)
+
+        width: 2/4
+      whiteSpace:
+        type: gap
+        width: 1/4
       mapadoId:
         label: Identifiant Mapado
         type: number
         width: 1/4
+        when:
+          isMapadoEvent: true
       mapadoButton:
         type: mapado-check
-        width: 1/2
+        width: 3/4
+        when:
+          isMapadoEvent: true

site/plugins/mapado-check/src/components/MapadoCheckButton.vue

@@ -53,6 +53,7 @@ function formatDateString(inputString) {
 function connect() {
   icon.value = "loader";
   theme.value = "yellow";
+
   const myHeaders = new Headers();
   myHeaders.append("Authorization", "Bearer " + mapadoToken);
 

site/snippets/calendar-strip.php

@@ -2,6 +2,8 @@
   class="calendar-strip"
   x-data="{
     monthNumb: dayjs().month(),
+    token: '<?= $site->mapadoToken() ?>',
+    contractId: '<?= $site->mapadoContractId() ?>',
 
     get monthName() {
       return dayjs().month(this.monthNumb).format('MMMM');
@@ -11,11 +13,13 @@
       return getDaysInMonth(this.monthNumb, dayjs().year())
     }
   }"
+
+  x-init="getEvents(monthNumb)"
 >
   <div class="calendar-strip__selector">
-    <button class="prev-month" @click="monthNumb--">←</button>
+    <button class="prev-month" @click="monthNumb--" :disabled="monthNumb === -4 ? true : false">←</button>
     <span x-text="monthName"></span>
-    <button class="next-month" @click="monthNumb++">→</button>
+    <button class="next-month" @click="monthNumb++" :disabled="monthNumb === 7 ? true : false">→</button>
   </div>
   <ul class="calendar-strip__days">
     <template x-for="(day, index) in days">