Image Scheduling: Error when closing Select Media form while creating…

… an image schedule relates to xibosignage/xibo#3517 - When closing the second modal without saving, the previous modal will also be closed
xibosignage · Oct 10, 2024 · 7c8e8b9 · 7c8e8b9
1 parent 4ee5f4e
commit 7c8e8b9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/ui/src/core/xibo-cms.js b/ui/src/core/xibo-cms.js
@@ -1321,9 +1321,9 @@ function XiboInitialise(scope, options) {
 
                     if (!response.data[0]?.hasFullScreenLayout) {
                         if (eventTypeId == 7) {
-                            $form.find('#fullScreenControl_media').click();
+                            $form.find('#fullScreenControl_media').trigger('autoOpen');
                         } else if (eventTypeId == 8) {
-                            $form.find('#fullScreenControl_playlist').click();
+                            $form.find('#fullScreenControl_playlist').trigger('autoOpen');
                         }
                     }
                 }, (xhr) => {
@@ -1332,15 +1332,17 @@ function XiboInitialise(scope, options) {
         }
     })
 
-    $(scope + ' .full-screen-layout-form').click(function() {
+    $(scope + ' .full-screen-layout-form').on('click autoOpen', function(ev) {
         if ($('#full-screen-schedule-modal').length != 0) {
             $('#full-screen-schedule-modal').remove();
         }
 
-        let eventTypeId = $(this).closest('form').find('#eventTypeId').val()
-        let mediaId = $(this).closest('form').find('#fullScreen-mediaId').val();
-        let playlistId = $(this).closest('form').find('#fullScreen-playlistId').val();
-        let readOnlySelect = $(this).data('readonly');
+        let $target = $(ev.currentTarget);
+        let $mainModal = $target.parents(scope);
+        let eventTypeId = $target.closest('form').find('#eventTypeId').val()
+        let mediaId = $target.closest('form').find('#fullScreen-mediaId').val();
+        let playlistId = $target.closest('form').find('#fullScreen-playlistId').val();
+        let readOnlySelect = $target.data('readonly');
 
         if ($('#full-screen-schedule-modal').length === 0) {
             // compile full screen schedule modal template
@@ -1354,6 +1356,14 @@ function XiboInitialise(scope, options) {
             $('body').append(fullScreenSchedule(config));
             const $modal = $('#full-screen-schedule-modal');
 
+            // If form was opened automatically
+            // close background modal if we close this one
+            if(ev.type === 'autoOpen') {
+                $modal.find('button.close').on('click', function() {
+                    $mainModal.modal('hide');
+                });
+            }
+
             $modal
               .on('show.bs.modal', function() {
                   $('.no-full-screen-layout').addClass('d-none')
@@ -1434,6 +1444,13 @@ function XiboInitialise(scope, options) {
 
                   $(this).data('bs.modal', null);
               });
+
+            // Open modal programmatically
+            $modal.modal({
+                backdrop: 'static',
+                keyboard: false,
+                show: true,
+            });
         }
     })
 

diff --git a/views/forms.twig b/views/forms.twig
@@ -383,8 +383,8 @@
                 <input type="hidden" id="fullScreen-{{ name }}Id" value="{{ idValue }}"/>
                 <div class="input-group-append input-group-addon">
                     <button class="btn btn-outline-secondary full-screen-layout-form" type="button"
-                            data-toggle="modal" data-target="#full-screen-schedule-modal" id="fullScreenControl_{{ name }}"
-                            data-no-layout="{% trans "Choose" %}" data-has-layout="{% trans "Change" %}" data-readonly="{{ readonly }}">
+                        id="fullScreenControl_{{ name }}"
+                        data-no-layout="{% trans "Choose" %}" data-has-layout="{% trans "Change" %}" data-readonly="{{ readonly }}">
                         {% if idValue %}{% trans "Change" %}{% else %}{% trans "Choose" %}{% endif %}
                     </button>
                 </div>