Merge pull request #9 from monsieurbiz/feature/improvements

Corrections and list view possibility

assets/css/app.scss

@@ -0,0 +1,18 @@
+//
+// Main
+// --------------------------------------------------------------------------
+
+@charset "UTF-8";
+
+.fc-list-event-graphic, .fc-list-event-title {
+    display: none !important;
+}
+
+.fc-list-event-time {
+    cursor: pointer !important;
+}
+
+.fc .fc-list-event:hover td  {
+    background: none !important;
+    font-weight: bold;
+}

assets/js/app.js

@@ -1,18 +1,19 @@
-import { Calendar } from "@fullcalendar/core";
-import timeGridPlugin from "@fullcalendar/timegrid";
+import { Calendar } from '@fullcalendar/core';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
 import allLocales from "@fullcalendar/core/locales-all";
 import momentTimezonePlugin from '@fullcalendar/moment-timezone';
 
-import "@fullcalendar/timegrid/main.css";
-
 global.MonsieurBizShippingSlotManager = class {
   constructor(
     shippingMethodInputs,
     nextStepButtons,
     calendarContainers,
     fullCalendarConfig,
-    slotStyle,
-    selectedSlotStyle,
+    gridSlotStyle,
+    selectedGridSlotStyle,
+    listSlotStyle,
+    selectedListSlotStyle,
     initUrl,
     listSlotsUrl,
     saveSlotUrl,
@@ -23,8 +24,10 @@ global.MonsieurBizShippingSlotManager = class {
     this.nextStepButtons = nextStepButtons;
     this.calendarContainers = calendarContainers;
     this.fullCalendarConfig = fullCalendarConfig;
-    this.slotStyle = slotStyle;
-    this.selectedSlotStyle = selectedSlotStyle;
+    this.gridSlotStyle = gridSlotStyle;
+    this.selectedGridSlotStyle = selectedGridSlotStyle;
+    this.listSlotStyle = listSlotStyle;
+    this.selectedListSlotStyle = selectedListSlotStyle;
     this.initUrl = initUrl;
     this.listSlotsUrl = listSlotsUrl;
     this.saveSlotUrl = saveSlotUrl;
@@ -144,7 +147,7 @@ global.MonsieurBizShippingSlotManager = class {
     req.open("post", this.saveSlotUrl, true);
     req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
     let data = new FormData();
-    data.append("slot", JSON.stringify(slot));
+    data.append("event", JSON.stringify(slot.event));
     data.append("shippingMethod", shippingMethodInput.value);
     data.append("shipmentIndex", shippingMethodInput.getAttribute("tabIndex"));
     req.send(data);
@@ -179,17 +182,35 @@ global.MonsieurBizShippingSlotManager = class {
   }
 
   applySlotStyle(slot) {
-    slot.el.querySelector(".fc-event-main").style.color =
-      this.slotStyle.textColor;
-    slot.el.style.borderColor = this.slotStyle.borderColor;
-    slot.el.style.backgroundColor = this.slotStyle.backgroundColor;
+    if (slot.el.querySelector(".fc-event-main") !== null) {
+      // Timegrid view
+      slot.el.querySelector(".fc-event-main").style.color =
+        this.gridSlotStyle.textColor;
+      slot.el.style.borderColor = this.gridSlotStyle.borderColor;
+      slot.el.style.backgroundColor = this.gridSlotStyle.backgroundColor;
+    } else if (slot.el.querySelector(".fc-list-event-time") !== null) {
+      // List view
+      slot.el.querySelector(".fc-list-event-time").style.color =
+        this.listSlotStyle.textColor;
+      slot.el.style.borderColor = this.listSlotStyle.borderColor;
+      slot.el.style.backgroundColor = this.listSlotStyle.backgroundColor;
+    }
   }
 
   applySelectedSlotStyle(slot) {
-    slot.el.querySelector(".fc-event-main").style.color =
-      this.selectedSlotStyle.textColor;
-    slot.el.style.borderColor = this.selectedSlotStyle.borderColor;
-    slot.el.style.backgroundColor = this.selectedSlotStyle.backgroundColor;
+    if (slot.el.querySelector(".fc-event-main") !== null) {
+      // Timegrid view
+      slot.el.querySelector(".fc-event-main").style.color =
+        this.selectedGridSlotStyle.textColor;
+      slot.el.style.borderColor = this.selectedGridSlotStyle.borderColor;
+      slot.el.style.backgroundColor = this.selectedGridSlotStyle.backgroundColor;
+    } else if (slot.el.querySelector(".fc-list-event-time") !== null) {
+      // List view
+      slot.el.querySelector(".fc-list-event-time").style.color =
+        this.selectedListSlotStyle.textColor;
+      slot.el.style.borderColor = this.selectedListSlotStyle.borderColor;
+      slot.el.style.backgroundColor = this.selectedListSlotStyle.backgroundColor;
+    }
   }
 
   hideSlot(slot) {
@@ -204,7 +225,7 @@ global.MonsieurBizShippingSlotManager = class {
       Object.assign(
         {
           timeZone: timezone,
-          plugins: [timeGridPlugin, momentTimezonePlugin],
+          plugins: [timeGridPlugin, listPlugin, momentTimezonePlugin],
           locales: allLocales,
           initialView: "timeGridWeek",
           contentHeight: "auto",
@@ -215,9 +236,9 @@ global.MonsieurBizShippingSlotManager = class {
             right: "timeGridWeek,timeGridDay",
           },
           events: events,
-          eventTextColor: this.slotStyle.textColor,
-          eventBackgroundColor: this.slotStyle.backgroundColor,
-          eventBorderColor: this.slotStyle.borderColor,
+          eventTextColor: this.gridSlotStyle.textColor,
+          eventBackgroundColor: this.gridSlotStyle.backgroundColor,
+          eventBorderColor: this.gridSlotStyle.borderColor,
           eventClick: function (info) {
             // Apply slot selected display
             shippingSlotManager.applySelectedSlotStyle(info);
@@ -247,6 +268,8 @@ global.MonsieurBizShippingSlotManager = class {
               shippingSlotManager.applySelectedSlotStyle(info);
               shippingSlotManager.previousSlot = info;
               shippingSlotManager.enableButtons();
+            } else {
+              shippingSlotManager.applySlotStyle(info);
             }
           },
           datesSet(dateInfo) {

package.json

@@ -20,14 +20,18 @@
   "devDependencies": {
     "@symfony/webpack-encore": "^0.28.1",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "moment-timezone-data-webpack-plugin": "^1.3.0"
+    "moment-timezone-data-webpack-plugin": "^1.3.0",
+    "autoprefixer": "^9.7.3",
+    "node-sass": "^4.13.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.3.1"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.7.0",
-    "@fullcalendar/list": "^5.7.0",
+    "@fullcalendar/core": "^5.9.0",
+    "@fullcalendar/list": "^5.9.0",
     "@fullcalendar/moment-timezone": "^5.9.0",
-    "@fullcalendar/rrule": "^5.7.0",
-    "@fullcalendar/timegrid": "^5.7.0",
+    "@fullcalendar/rrule": "^5.9.0",
+    "@fullcalendar/timegrid": "^5.9.0",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.31"
   }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      cascade: false
+    }
+  }
+}

src/Controller/SlotController.php

@@ -88,8 +88,8 @@ public function saveAction(Request $request): Response
             throw $this->createNotFoundException('Shipment index not defined');
         }
 
-        $slotElement = json_decode($request->get('slot', '{}'), true);
-        if (!($startDate = $slotElement['event']['start'] ?? false)) {
+        $event = json_decode($request->get('event', '{}'), true);
+        if (!($startDate = $event['start'] ?? false)) {
             throw $this->createNotFoundException('Start date not defined');
         }
 
@@ -103,7 +103,7 @@ public function saveAction(Request $request): Response
             throw $this->createNotFoundException($e->getMessage());
         }
 
-        return new JsonResponse($slotElement);
+        return new JsonResponse($event);
     }
 
     public function resetAction(Request $request): Response

src/Form/Type/ShippingSlotConfigChoiceType.php

@@ -39,9 +39,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
     public function configureOptions(OptionsResolver $resolver): void
     {
         $resolver->setDefaults([
-            'choices' => function(): array {
-                return $this->shippingSlotConfigRepository->findAll();
-            },
+            'choices' => $this->shippingSlotConfigRepository->findAll(),
             'choice_value' => 'id',
             'choice_label' => 'name',
             'empty_data' => '',

src/Resources/public/entrypoints.json

@@ -2,11 +2,16 @@
   "entrypoints": {
     "shipping-slot-js": {
       "css": [
-        "/public/shipping-slot-js.css"
+        "/public/css/shipping-slot-js.css"
       ],
       "js": [
         "/public/js/shipping-slot-js.js"
       ]
+    },
+    "shipping-slot-css": {
+      "css": [
+        "/public/css/shipping-slot-css.css"
+      ]
     }
   }
 }

src/Resources/public/manifest.json

@@ -1,4 +1,5 @@
 {
-  "public/shipping-slot-js.css": "/public/shipping-slot-js.css",
+  "public/shipping-slot-css.css": "/public/css/shipping-slot-css.css",
+  "public/shipping-slot-js.css": "/public/css/shipping-slot-js.css",
   "public/shipping-slot-js.js": "/public/js/shipping-slot-js.js"
 }

src/Resources/views/Shop/_styles.html.twig

@@ -1 +1,2 @@
-{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusshippingslotplugin/shipping-slot-js.css'} %}
+{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusshippingslotplugin/css/shipping-slot-js.css'} %}
+{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusshippingslotplugin/css/shipping-slot-css.css'} %}

src/Resources/views/Shop/app.html.twig

@@ -5,12 +5,22 @@
         let shippingMethodInputs = document.querySelectorAll('input[type="radio"][name*="sylius_checkout_select_shipping"]');
         let nextStepButtons = document.querySelectorAll('form[name="sylius_checkout_select_shipping"] button#next-step');
         let calendarContainers = document.querySelectorAll('.monsieurbiz_shipping_slot_calendar');
-        let slotStyle = {
+        let gridSlotStyle = {
             textColor: '#ffffff',
             borderColor: '#3788d8',
             backgroundColor: '#3788d8',
         };
-        let selectedSlotStyle = {
+        let selectedGridSlotStyle = {
+            textColor: '#3788d8',
+            borderColor: '#3788d8',
+            backgroundColor: '#ffffff',
+        };
+        let listSlotStyle = {
+            textColor: '#ffffff',
+            borderColor: '#3788d8',
+            backgroundColor: '#3788d8',
+        };
+        let selectedListSlotStyle = {
             textColor: '#3788d8',
             borderColor: '#3788d8',
             backgroundColor: '#ffffff',
@@ -29,8 +39,10 @@
                 nextStepButtons,
                 calendarContainers,
                 fullCalendarConfig,
-                slotStyle,
-                selectedSlotStyle,
+                gridSlotStyle,
+                selectedGridSlotStyle,
+                listSlotStyle,
+                selectedListSlotStyle,
                 '{{ url("monsieurbiz_shippingslot_checkout_init", {"code": "__CODE__"})|e('js') }}',
                 '{{ url("monsieurbiz_shippingslot_checkout_listslots", {"code": "__CODE__", "fromDate": "__FROM__", "toDate": "__TO__"})|e('js') }}',
                 '{{ url("monsieurbiz_shippingslot_checkout_saveslot")|e('js') }}',

webpack.config.js

@@ -8,15 +8,22 @@ Encore
 
     // entries
     .addEntry('shipping-slot-js', './assets/js/app.js')
+    .addStyleEntry('shipping-slot-css', './assets/css/app.scss')
 
     // configuration
     .disableSingleRuntimeChunk()
     .cleanupOutputBeforeBuild()
     .enableSourceMaps(!Encore.isProduction())
 
+    // enables Sass/SCSS support
+    .enableSassLoader()
+    // enables PostCSS support
+    .enablePostCssLoader()
+
     // organise files
     .configureFilenames({
-        js: 'js/[name].js'
+        js: 'js/[name].js',
+        css: 'css/[name].css',
     })
 ;