refactor(bootstrap 5): date field types, textareas and some fixes (em…

…s-project#772)
theus77 · Feb 20, 2024 · 5429efe · 5429efe
1 parent e31c86d
commit 5429efe
Show file tree

Hide file tree

Showing 32 changed files with 432 additions and 398 deletions.
diff --git a/EMS/admin-ui-bundle/_to_be_ref/js/core.js b/EMS/admin-ui-bundle/_to_be_ref/js/core.js
@@ -1,6 +1,5 @@
 window.ems_wysiwyg_type_filters = JSON.parse(document.querySelector("BODY").getAttribute('data-wysiwyg-type-filters'));
 
-require('admin-lte/plugins/timepicker/bootstrap-timepicker');
 require('chart.js');
 require('fastclick');
 require('flot');
@@ -11,12 +10,8 @@ require('jquery-sparkline');
 require('moment');
 require('pace');
 require('raphael');
-require('select2/dist/js/select2.full');
 require('slimscroll');
-require('bootstrap-datepicker');
-require('daterangepicker');
 require('fullcalendar');
-require('jquery-match-height');
 
 //Fix issue CK editor in bootstrap model
 //https://ckeditor.com/old/forums/Support/Issue-with-Twitter-Bootstrap#comment-127719
@@ -31,5 +26,3 @@ $.fn.modal.Constructor.prototype.enforceFocus = function() {
     })
 };
 
-require('./initEms');
-
diff --git a/EMS/admin-ui-bundle/_to_be_ref/js/editRevisionEventListeners.js b/EMS/admin-ui-bundle/_to_be_ref/js/editRevisionEventListeners.js
@@ -1,57 +1,4 @@
-import EmsListeners from "./EmsListeners";
-import {CKEditorConfig} from "./CKEditorConfig";
-
-let ckconfig = false;
-
 function editRevisionEventListeners(target, onChangeCallback = null){
-    new EmsListeners(target.get(0), onChangeCallback);
-
-    if (false === ckconfig) {
-        ckconfig = new CKEditorConfig().getConfig()
-    }
-
-    target.find('.remove-content-button').on('click', function(e) {
-        // prevent the link from creating a "#" on the URL
-        e.preventDefault();
-
-        const panel = $(this).closest('.collection-item-panel');
-        panel.find('input._ems_internal_deleted').val('deleted');
-        panel.hide();
-
-        if (onChangeCallback) {
-            onChangeCallback();
-        }
-    });
-
-    target.find('.add-content-button').on('click', function(e) {
-        // prevent the link from creating a "#" on the URL
-        e.preventDefault();
-
-        const panel = $(this).closest('.collection-panel');
-        const index = panel.data('index');
-        const prototype = panel.data('prototype');
-        const prototypeName = new RegExp(panel.data('prototype-name'), "g");
-        const prototypeLabel = new RegExp(panel.data('prototype-label'), "g");
-
-        // Replace '__label__name__$fieldId__' in the prototype's HTML to
-        // Replace '__name__$fieldId__' in the prototype's HTML to
-        // instead be a number based on how many items we have
-        const newForm = $(prototype.replace(prototypeLabel, (index+1)).replace(prototypeName, index));
-        // increase the index with one for the next item
-        panel.data('index', (index + 1));
-
-        editRevisionEventListeners(newForm);
-
-        panel.children('.panel-body').children('.collection-panel-container').append(newForm);
-
-        if (onChangeCallback) {
-            onChangeCallback();
-        }
-    });
-
-    target.find('.ems-sortable > div').sortable({
-        handle: ".ems-handle"
-    });
 
     target.find(".ckeditor_ems").each(function(){
 
@@ -177,65 +124,6 @@ function editRevisionEventListeners(target, onChangeCallback = null){
             });
         }
     });
-
-    target.find(".timepicker").each(function(){
-
-        const settings = {
-            showMeridian: 	$( this ).data('show-meridian'),
-            explicitMode: 	$( this ).data('explicit-mode'),
-            minuteStep: 	$( this ).data('minute-step'),
-            disableMousewheel: true,
-            defaultTime: false
-        };
-
-        $( this ).unbind( "change" );
-
-        if ($(this).not('.ignore-ems-update')) {
-            if (onChangeCallback) {
-                $( this ).timepicker(settings).on('changeTime.timepicker', onChangeCallback);
-            }
-        } else {
-            $( this ).timepicker(settings);
-        }
-    });
-
-
-    target.find('.datepicker').each(function( ) {
-
-        $(this).unbind('change');
-        const params = {
-            format: $(this).attr('data-date-format'),
-            todayBtn: true,
-            weekStart: $(this).attr('data-week-start'),
-            daysOfWeekHighlighted: $(this).attr('data-days-of-week-highlighted'),
-            daysOfWeekDisabled: $(this).attr('data-days-of-week-disabled'),
-            todayHighlight: $(this).attr('data-today-highlight')
-        };
-
-        if($(this).attr('data-multidate') && $(this).attr('data-multidate') !== 'false'){
-            params.multidate = true;
-        }
-
-        $(this).datepicker(params);
-
-        if (onChangeCallback) {
-            $(this).not(".ignore-ems-update").on('dp.change', onChangeCallback);
-        }
-    });
-
-    target.find('.ems_daterangepicker').each(function( ) {
-
-        const options = $(this).data('display-option');
-        $(this).unbind('change');
-
-        if ($(this).not('.ignore-ems-update')) {
-            if (onChangeCallback) {
-                $(this).daterangepicker(options, function() { onChangeCallback(); });
-            }
-        } else {
-            $(this).daterangepicker(options);
-        }
-    });
 }
 
 export {editRevisionEventListeners};
diff --git a/EMS/admin-ui-bundle/_to_be_ref/js/initEms.js b/EMS/admin-ui-bundle/_to_be_ref/js/initEms.js
diff --git a/EMS/admin-ui-bundle/assets/css/core/components/form.scss b/EMS/admin-ui-bundle/assets/css/core/components/form.scss
@@ -0,0 +1,7 @@
+form {
+  div.has-error {
+    border-color: var(--bs-form-invalid-border-color);
+    border-style: solid;
+    border-width: 1px;
+  }
+}
diff --git a/EMS/admin-ui-bundle/assets/js/core/components/modal.js b/EMS/admin-ui-bundle/assets/js/core/components/modal.js
@@ -1,18 +1,44 @@
 'use strict'
+import $ from 'jquery'
 import queryString from '../helpers/queryString'
-import { Modal as BSModal } from 'bootstrap'
+import ajaxModal from '../../../js/core/helpers/ajaxModal'
 
 export default class Modal {
   constructor () {
     this.autoOpenModal()
+    this.closeModalNotification()
+    this.intAjaxModalLinks()
   }
 
   autoOpenModal () {
     const queryStringObject = queryString()
     if (queryStringObject.open) {
       const modalElement = document.getElementById(`content_type_structure_fieldType${queryStringObject.open}`)
-      const modal = BSModal.getOrCreateInstance(modalElement)
+      const modal = window.bootstrap.Modal.getOrCreateInstance(modalElement)
       modal.show()
     }
   }
+
+  closeModalNotification () {
+    $('#modal-notification-close-button').on('click', function () {
+      $('#modal-notifications .modal-body').empty()
+      $('#modal-notifications').modal('hide')
+    })
+  }
+
+  intAjaxModalLinks () {
+    const ajaxModalLinks = document.querySelectorAll('a[data-ajax-modal-url]');
+    [].forEach.call(ajaxModalLinks, function (link) {
+      link.onclick = (event) => {
+        ajaxModal.load({
+          url: event.target.dataset.ajaxModalUrl,
+          size: event.target.dataset.ajaxModalSize
+        }, (json) => {
+          if (Object.prototype.hasOwnProperty.call(json, 'success') && json.success === true) {
+            location.reload()
+          }
+        })
+      }
+    })
+  }
 }
diff --git a/EMS/admin-ui-bundle/assets/js/core/components/notifications.js b/EMS/admin-ui-bundle/assets/js/core/components/notifications.js
@@ -1,8 +1,11 @@
-import { Toast, Modal } from 'bootstrap'
-
 class Notifications {
   constructor () {
     this.counter = 0
+    const toasts = document.querySelectorAll('.toast')
+    for (let i = 0; i < toasts.length; ++i) {
+      const toast = new window.bootstrap.Toast(toasts[i])
+      toast.show()
+    }
   }
 
   startActivity () {
@@ -75,7 +78,7 @@ class Notifications {
     const toaster = document.getElementById('toaster')
     toaster.insertAdjacentElement('beforeend', div)
 
-    const toast = new Toast(div, {
+    const toast = new window.bootstrap.Toast(div, {
       animation: true,
       autohide: autoHide,
       delay: 5000
@@ -85,7 +88,7 @@ class Notifications {
 
   outOfSync () {
     const outOfSync = document.getElementById('data-out-of-sync')
-    const modal = new Modal(outOfSync, {
+    const modal = new window.bootstrap.Modal(outOfSync, {
       keyboard: false,
       backdrop: 'static'
     })

diff --git a/EMS/admin-ui-bundle/assets/js/core/core.js b/EMS/admin-ui-bundle/assets/js/core/core.js
@@ -1,7 +1,7 @@
 import Button from './plugins/button'
 import Choice from './plugins/choice'
 import CodeEditor from './plugins/codeEditor'
-import CollapsibleCollection from './plugins/collapsibleCollection'
+import Collection from './plugins/Collection'
 import Datatable from './plugins/datatable'
 import Datetime from './plugins/datetime'
 import File from './plugins/file'
@@ -14,6 +14,7 @@ import JsonMenuNested from './plugins/jsonMenuNested'
 import MediaLibrary from './plugins/mediaLibrary'
 import NestedSortable from './plugins/nestedSortable'
 import ObjectPicker from './plugins/objectPicker'
+import SearchForm from './plugins/searchForm'
 import Select from './plugins/select'
 import SortableList from './plugins/sortableList'
 import SymfonyCollection from './plugins/symfonyCollection'
@@ -36,7 +37,7 @@ class Core {
       new Button(),
       new Choice(),
       new CodeEditor(),
-      new CollapsibleCollection(),
+      new Collection(),
       new Datatable(),
       new Datetime(),
       new File(),
@@ -49,14 +50,15 @@ class Core {
       new MediaLibrary(),
       new NestedSortable(),
       new ObjectPicker(),
+      new SearchForm(),
       new Select(),
       new SortableList(),
       new SymfonyCollection(),
       new Text(),
       new Tooltip(),
       new WYSIWYG()
     ]
-    document.addEventListener(EMS_ADDED_DOM_EVENT, (event) => this.load(event.target))
+    document.addEventListener(EMS_ADDED_DOM_EVENT, (event) => this.load(event.detail.target))
     this.coreReady()
   }
 

diff --git a/EMS/admin-ui-bundle/assets/js/core/events/addedDomEvent.js b/EMS/admin-ui-bundle/assets/js/core/events/addedDomEvent.js
@@ -1,7 +1,11 @@
 export const EMS_ADDED_DOM_EVENT = 'emsAddedDomEvent'
 export class AddedDomEvent {
   constructor (target) {
-    this._event = new CustomEvent(EMS_ADDED_DOM_EVENT, { target })
+    this._event = new CustomEvent(EMS_ADDED_DOM_EVENT, {
+      detail: {
+        target
+      }
+    })
     this._target = target
   }
 

diff --git a/EMS/admin-ui-bundle/assets/js/core/helpers/ajaxModal.js b/EMS/admin-ui-bundle/assets/js/core/helpers/ajaxModal.js
@@ -1,13 +1,12 @@
 import $ from 'jquery'
 import { AddedDomEvent } from '../events/addedDomEvent'
 import { tooltipDataLinks } from './tooltip'
-import { Modal } from 'bootstrap'
 
 class AjaxModal {
   constructor (selector) {
     this.selector = selector
     this.$modal = $(selector)
-    this.bsModal = new Modal(document.querySelector(selector))
+    this.bsModal = new window.bootstrap.Modal(document.querySelector(selector))
 
     this.modal = document.querySelector(this.selector)
     if (this.modal) {