Merge pull request #6630 from ChurchCRM/upgrade-frontend-deps

ChurchCRM · Nov 8, 2023 · 982a9f8 · 982a9f8
2 parents 39fafec + 8933895
commit 982a9f8
Show file tree

Hide file tree

Showing 12 changed files with 601 additions and 758 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -84,7 +84,7 @@ module.exports = function (grunt) {
                         expand: true,
                         filter: 'isFile',
                         flatten: true,
-                        src: ['node_modules/fullcalendar/dist/*'],
+                        src: ['node_modules/fullcalendar/index.global.min.js'],
                         dest: 'src/skin/external/fullcalendar/'
                     },
                     {
@@ -181,7 +181,7 @@ module.exports = function (grunt) {
                         expand: true,
                         filter: 'isFile',
                         flatten: true,
-                        src: ['node_modules/chart.js/dist/Chart.js'],
+                        src: ['node_modules/chart.js/dist/chart.umd.js'],
                         dest: 'src/skin/external/chartjs/'
                     },
                     {
@@ -534,7 +534,7 @@ module.exports = function (grunt) {
                 if (localeConfig.hasOwnProperty("fullCalendarLocale")) {
                     tempLangCode = localeConfig["fullCalendarLocale"];
                 }
-                tempFile = 'node_modules/fullcalendar/dist/locale/'+tempLangCode+'.js';
+                tempFile = 'node_modules/@fullcalendar/core/locales/'+tempLangCode+'.js';
                 var fullCalendar = grunt.file.read(tempFile);
                 jsFileContent = jsFileContent + '\n// Source: ' + tempFile;
                 jsFileContent = jsFileContent + '\n' + "try {"+fullCalendar+"} catch(e) {};\n";

diff --git a/cypress/e2e/ui/events/standard.calendar.spec.js b/cypress/e2e/ui/events/standard.calendar.spec.js
@@ -4,7 +4,7 @@ context("Standard Calendar", () => {
     it("Create New Event", () => {
         let title = "My New Event - " + Cypress._.random(0, 1e6);
         cy.loginStandard("v2/calendar");
-        cy.get(".fc-row:nth-child(1) > .fc-content-skeleton .fc-thu").click();
+        cy.get('tr:nth-child(1) > .fc-day-thu > .fc-daygrid-day-frame').click();
         cy.get(".modal-header > input").click();
         cy.get(".modal-header > input").type(title);
         cy.get("tr:nth-child(2) textarea").type("New adult Service");

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,11 +66,11 @@
         "bootstrap-show-password": "^1.2.1",
         "bootstrap-toggle": "^2.2.2",
         "bootstrap-validator": "^0.11.9",
-        "chart.js": "^2.9.4",
+        "chart.js": "^4.4.0",
         "ckeditor4": "4.23.0",
         "daterangepicker": "^3.1.0",
         "flag-icons": "^6.11.1",
-        "fullcalendar": "3.10.5",
+        "fullcalendar": "^6.1.9",
         "i18n": "^0.15.1",
         "i18next": "^23.6.0",
         "icheck-bootstrap": "^3.0.1",
@@ -82,7 +82,7 @@
         "node-sass": "^9.0.0",
         "pace-js": "^1.2.4",
         "react-bootstrap": "^2.9.0",
-        "react-datepicker": "^2.16.0",
+        "react-datepicker": "^4.21.0",
         "react-select": "^5.7.7",
         "select2": "^4.0.13"
     },
@@ -92,7 +92,6 @@
         "babel-core": "^6.26.3",
         "babel-loader": "^9.1.0",
         "babel-preset-react": "^6.24.1",
-        "cryptiles": "^4.1.3",
         "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
         "grunt-confirm": "^1.0.8",
@@ -105,13 +104,13 @@
         "grunt-http": "^2.3.3",
         "grunt-lineending": "^1.0.0",
         "grunt-sass": "^3.1.0",
-        "i18next-parser": "^8.9.0",
         "i18next-conv": "^14.0.0",
+        "i18next-parser": "^8.9.0",
         "node-sha1": "^1.0.1",
         "prettier": "3.0.3",
         "tar": "^6.1.12",
         "ts-loader": "^9.4.2",
-        "typescript": "^4.9.3",
+        "typescript": "^5.2.2",
         "webpack": "^5.76.0",
         "webpack-cli": "^5.0.0"
     },
@@ -120,4 +119,4 @@
         "cypress": "^13.3.2",
         "grunt-poeditor-gd": "0.2.0"
     }
-}
+}
diff --git a/react/calendar-event-editor.tsx b/react/calendar-event-editor.tsx
@@ -3,16 +3,10 @@ import * as ReactDOM from "react-dom";
 import CRMEvent from "./interfaces/CRMEvent";
 import ExistingEvent from "./components/Events/ExistingEvent";
 declare global {
-  interface Moment {
-    _isAMomentObject: boolean;
-    hasTime(): boolean;
-    format(): string;
-    toDate(): Date;
-  }
   interface Window {
     // Since TypeScript requires a definition for all methods, let's tell it how to handle the javascript objects already in the page
     showEventForm(object): void;
-    showNewEventForm(start: Moment, end: Moment): void;
+    showNewEventForm(info): void;
     CRM: {
       // we need to access this method of CRMJSOM, so let's tell TypeScript how to use it
       refreshAllFullCalendarSources(): void;
@@ -40,7 +34,8 @@ window.showEventForm = function (event) {
   );
 };
 
-window.showNewEventForm = function (start, end) {
+window.showNewEventForm = function (info) {
+  const { start, end } = info;
   const unmount = function () {
     ReactDOM.unmountComponentAtNode(
       document.getElementById("calendar-event-react-app"),
@@ -52,8 +47,8 @@ window.showNewEventForm = function (start, end) {
     <ExistingEvent
       onClose={unmount}
       eventId={0}
-      start={start.toDate()}
-      end={end.toDate()}
+      start={start}
+      end={end}
     />,
     document.getElementById("calendar-event-react-app"),
   );

diff --git a/src/ChurchCRM/dto/FullCalendarEvent.php b/src/ChurchCRM/dto/FullCalendarEvent.php
@@ -7,34 +7,37 @@
 
 class FullCalendarEvent
 {
-  //the properties of this DTO are designed to align with the JSON object
-  //expected by FullCalendar JS: https://fullcalendar.io/docs/event_data/Event_Object/
+    //the properties of this DTO are designed to align with the JSON object
+    //expected by FullCalendar JS: https://fullcalendar.io/docs/event_data/Event_Object/
 
+    public string $title;
+    public string $start; // date-string
+    public ?string $backgroundColor;
+    public ?string $textColor;
+    public ?string $end; // date-string
+    public bool $allDay;
+    public ?string $url;
+    public string $id;
+    public bool $editable;
 
-    public $title;
-    public $start;
-    public $backgroundColor;
-    public $textColor;
-    public $end;
-    public $allDay;
-    public $url;
-    public $id;
-    public $editable;
-
-    public function __construct()
-    {
-        return $this;
-    }
-    public function createFromEvent(Event $CRMEvent, Calendar $CRMCalendar)
+    public static function createFromEvent(Event $CRMEvent, Calendar $CRMCalendar): self
     {
-        $this->title = $CRMEvent->getTitle();
-        $this->start = $CRMEvent->getStart("c");
-        $this->end = $CRMEvent->getEnd("c");
-        $this->allDay =  ( $CRMEvent->getEnd() == null ? true : false);
-        $this->id = $CRMEvent->getId();
-        $this->backgroundColor = "#" . $CRMCalendar->getBackgroundColor();
-        $this->textColor = "#" . $CRMCalendar->getForegroundColor();
-        $this->editable = $CRMEvent->isEditable();
-        $this->url = $CRMEvent->getURL();
+        $fce = new self();
+
+        $fce->title = $CRMEvent->getTitle();
+        $fce->start = $CRMEvent->getStart("c");
+        $fce->end = $CRMEvent->getEnd("c");
+        $fce->allDay =  ( $CRMEvent->getEnd() == null ? true : false);
+        $fce->id = $CRMEvent->getId();
+        $fce->backgroundColor = "#" . $CRMCalendar->getBackgroundColor();
+        $fce->textColor = "#" . $CRMCalendar->getForegroundColor();
+        $fce->editable = $CRMEvent->isEditable();
+
+        $url = $CRMEvent->getURL();
+        if ($url) {
+            $fce->url = $url;
+        }
+
+        return $fce;
     }
 }
diff --git a/src/Include/Footer.php b/src/Include/Footer.php
@@ -71,11 +71,11 @@
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/datatables/vfs_fonts.js"></script>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/datatables/datatables.min.js"></script>
 
-<script src="<?= SystemURLs::getRootPath() ?>/skin/external/chartjs/Chart.js"></script>
+<script src="<?= SystemURLs::getRootPath() ?>/skin/external/chartjs/chart.umd.js"></script>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/select2/select2.full.min.js"></script>
 
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/bootstrap-notify/bootstrap-notify.min.js"></script>
-<script src="<?= SystemURLs::getRootPath() ?>/skin/external/fullcalendar/fullcalendar.min.js"></script>
+<script src="<?= SystemURLs::getRootPath() ?>/skin/external/fullcalendar/index.global.min.js"></script>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/bootbox/bootbox.min.js"></script>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/fastclick/fastclick.js"></script>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/bootstrap-toggle/bootstrap-toggle.js"></script>

diff --git a/src/api/routes/calendar/calendar.php b/src/api/routes/calendar/calendar.php
@@ -119,15 +119,19 @@ function getUserCalendarFullCalendarEvents($request, Response $response, $args)
     if (!$Events) {
         return $response->withStatus(404);
     }
-    return $response->write(json_encode(EventsObjectCollectionToFullCalendar($Events, $calendar), JSON_THROW_ON_ERROR));
+    return $response->write(
+        json_encode(
+            EventsObjectCollectionToFullCalendar($Events, $calendar),
+            JSON_THROW_ON_ERROR
+        )
+    );
 }
 
-function EventsObjectCollectionToFullCalendar(ObjectCollection $Events, Calendar $Calendar)
+function EventsObjectCollectionToFullCalendar(ObjectCollection $events, Calendar $calendar): array
 {
     $formattedEvents = [];
-    foreach ($Events as $event) {
-        $fce = new FullCalendarEvent();
-        $fce->createFromEvent($event, $Calendar);
+    foreach ($events as $event) {
+        $fce = FullCalendarEvent::createFromEvent($event, $calendar);
         array_push($formattedEvents, $fce);
     }
     return $formattedEvents;

diff --git a/src/external/templates/calendar/calendar.php b/src/external/templates/calendar/calendar.php
@@ -8,7 +8,7 @@
 require(SystemURLs::getDocumentRoot() . "/Include/HeaderNotLoggedIn.php");
 ?>
 <script src="<?= SystemURLs::getRootPath() ?>/skin/external/moment/moment-with-locales.min.js"></script>
-<script src="<?= SystemURLs::getRootPath() ?>/skin/external/fullcalendar/fullcalendar.min.js"></script>
+<script src="<?= SystemURLs::getRootPath() ?>/skin/external/fullcalendar/index.global.min.js"></script>
 <div class="register-box" style="width: 100%; margin-top:5px;">
     <div class="register-logo">
       <a href="<?= SystemURLs::getRootPath() ?>/"><?=  ChurchMetaData::getChurchName() ?></a>: <?= $calendarName ?></h1>
@@ -28,23 +28,25 @@
     </div>
 </div>
 <script nonce="<?= SystemURLs::getCSPNonce() ?>">
-window.CRM.fullcalendar =  $('#calendar').fullCalendar({
-    header: {
-      left: 'prev,next today',
-      center: 'title',
-      right: 'month,agendaWeek,agendaDay,listMonth'
-    },
-    height: 600,
-    selectable: false,
-    editable: false,
-    eventStartEditable: false,
-    eventDurationEditable: false,
-    selectHelper: true,
-    locale: window.CRM.lang,
-    eventSources: [
-      '<?= $eventSource ?>'
-    ]
+document.addEventListener('DOMContentLoaded', function() {
+  window.CRM.fullcalendar =  new FullCalendar.Calendar(document.getElementById('calendar'), {
+      header: {
+        start: 'prev,next today',
+        center: 'title',
+        end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+      },
+      height: 600,
+      selectable: false,
+      editable: false,
+      selectMirror: true,
+      locale: window.CRM.lang,
+      eventSources: [
+        '<?= $eventSource ?>'
+      ]
   });
+
+  calendar.render();
+});
 </script>
 
 <?php

diff --git a/src/locale/locales.json b/src/locale/locales.json
@@ -98,8 +98,7 @@
     "languageCode": "en",
     "countryCode": "CA",
     "dataTables": "English",
-    "fullCalendar" : true,
-    "fullCalendarLocale" : "en-ca",
+    "fullCalendar" : false,
     "datePicker": false,
     "select2": false
   },

diff --git a/src/skin/churchcrm.scss b/src/skin/churchcrm.scss
@@ -25,8 +25,6 @@
 @import 'external/jquery.steps/jquery.steps.css';
 @import 'external/jquery-photo-uploader/PhotoUploader.css';
 
-@import 'external/fullcalendar/fullcalendar.min.css';
-@import 'external/fullcalendar/fullcalendar.print.css' print;
 @import 'external/react-datepicker/react-datepicker.min.css';
 @import 'external/flag-icons/css/flag-icons.min.css';