Use modal for mission show (#394)

assets/js/_planning-missions.js

@@ -12,7 +12,7 @@ function setSlotMisssion(mission, $slot) {
 
   missionsText += $('<span class="badge badge-secondary">').text(mission.type ? mission.type.name : 'mission')[0].outerHTML;
   missionsText += ' ';
-  missionsText += $(`<button type="button" class="btn btn-link" data-toggle="modal" data-target="#modal-mission" data-mission-id="${mission.id}">`).text(mission.name)[0].outerHTML;
+  missionsText += $(`<button type="button" class="btn btn-link" data-toggle="modal" data-target="#modal-ajax" data-mission-id="${mission.id}">`).text(mission.name)[0].outerHTML;
 
   $slot.addClass('mission').data('mission-text', missionsText);
 }
@@ -137,48 +137,42 @@ export function fetchMissions() {
   });
 }
 
-export function initMissionsEvents() {
-  $('#modal-mission')
+export function initMissionsPlanningEvents() {
+  $('#modal-add-mission')
     .on('show.bs.modal', function (event) {
       const $modal = $(this);
       const $link = $(event.relatedTarget);
-      const missionId = $link.data('mission-id');
+      const url = $link.data('href');
 
-      displayMissionModal($modal, missionId);
+      displayAjaxModal($modal, url);
     })
     .on('hidden.bs.modal', function () {
       const $modal = $(this);
       $modal.find('.loading').show();
       $modal.find('.content').html('');
     });
 
-  $('#modal-add-mission')
+  $(document).on('click', '.mission-choose', function () {
+    addUserToMission($(this).data('href'));
+  });
+}
+
+export function initMissionsEvents() {
+  $('#modal-ajax')
     .on('show.bs.modal', function (event) {
       const $modal = $(this);
       const $link = $(event.relatedTarget);
-      const url = $link.data('href');
+      const missionId = $link.data('mission-id');
 
-      displayAjaxModal($modal, url);
+      if (!missionId) {
+        return;
+      }
+
+      displayMissionModal($modal, missionId);
     })
     .on('hidden.bs.modal', function () {
       const $modal = $(this);
       $modal.find('.loading').show();
       $modal.find('.content').html('');
     });
-
-  $(document).on('click', '.mission-choose', function () {
-    addUserToMission($(this).data('href'));
-  });
-
-  // Allow modals stacking
-  $(document).on('show.bs.modal', '.modal', function () {
-    const zIndex = 1040 + 10 * $('.modal:visible').length;
-    $(this).css('z-index', zIndex);
-    setTimeout(function () {
-      $('.modal-backdrop')
-        .not('.modal-stack')
-        .css('z-index', zIndex - 1)
-        .addClass('modal-stack');
-    });
-  });
 }

assets/js/app.js

@@ -6,6 +6,8 @@ import '../css/planning.scss';
 import '../css/availability-table.scss';
 import './_delete-item-modal';
 
+import { initMissionsEvents } from './_planning-missions';
+
 const $ = require('jquery');
 require('util');
 require('popper.js');
@@ -22,3 +24,19 @@ $.fn.selectpicker.Constructor.DEFAULTS.doneButtonText = 'Fermer';
 $.fn.selectpicker.Constructor.DEFAULTS.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 
 browserUpdate({ required: { e: -2, f: -2, o: -2, s: -2, c: -10 }, insecure: true, unsupported: true, api: 2020.04 });
+
+$(document).ready(function () {
+  // Allow modals stacking
+  $(document).on('show.bs.modal', '.modal', function () {
+    const zIndex = 1040 + 10 * $('.modal:visible').length;
+    $(this).css('z-index', zIndex);
+    setTimeout(function () {
+      $('.modal-backdrop')
+        .not('.modal-stack')
+        .css('z-index', zIndex - 1)
+        .addClass('modal-stack');
+    });
+  });
+
+  initMissionsEvents();
+});

assets/js/availability-form.js

@@ -1,5 +1,5 @@
 import { addPopovers } from './_planning';
-import { fetchMissions, initMissionsEvents } from './_planning-missions';
+import { fetchMissions } from './_planning-missions';
 
 const $ = require('jquery');
 
@@ -58,6 +58,5 @@ $(document).ready(function () {
   });
 
   addPopovers($table);
-  initMissionsEvents();
   fetchMissions();
 });

assets/js/planning.js

@@ -1,7 +1,7 @@
 import { initDatesRange } from './_helpers';
-import { fetchMissions, initMissionsEvents } from './_planning-missions';
 import { addPopovers } from './_planning';
 import { initUpdateEvents } from './_planning-update';
+import { fetchMissions, initMissionsPlanningEvents } from './_planning-missions';
 
 const $ = require('jquery');
 
@@ -56,7 +56,7 @@ $(document).ready(function () {
   addPopovers($planning);
 
   initUpdateEvents();
-  initMissionsEvents();
+  initMissionsPlanningEvents();
   fetchMissions();
 
   $('#hideUsers').on('change', hideUselessFilters);

templates/availability/_mission_modal.html.twig

@@ -1,4 +1,4 @@
-<div class="modal fade" id="modal-mission" tabindex="-1" role="dialog">
+<div class="modal fade" id="modal-ajax" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">

templates/availability/_table.html.twig

@@ -88,8 +88,6 @@
     <li><span class="availability-legend locked"></span> <em>{{ 'organization.asset.locked'|trans }}</em></li>
 </ul>
 
-{% include 'availability/_mission_modal.html.twig' %}
-
 <div class="modal fade" id="modal-confirm" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">

templates/organization/base.html.twig

@@ -68,6 +68,7 @@
         {% include '_footer.html.twig' %}
 
         {% include 'organization/_delete_modal.html.twig' %}
+        {% include 'availability/_mission_modal.html.twig' %}
 
         {% block javascripts %}
             {{ encore_entry_script_tags('app') }}

templates/organization/mission/_list.html.twig

@@ -55,9 +55,7 @@
                     {% endif %}
 
                     {% if modalLinks is not defined or modalLinks %}
-                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modal-mission" data-mission-id="{{ mission.id }}">{{ 'action.show' | trans }}</button>
-                    {% else %}
-                        <a class="btn btn-primary" href="{{ path('app_organization_mission_show', {'id': mission.id}) }}">{{ 'action.show' | trans }}</a>
+                        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modal-ajax" data-mission-id="{{ mission.id }}">{{ 'action.show' | trans }}</button>
                     {% endif %}
 
                     {% if showActions is not defined or showActions %}

templates/organization/mission/_list_full.html.twig

@@ -22,7 +22,7 @@
             <tr class="table-primary">
                 <td>
                     <span class="badge badge-secondary">{{ mission.type.name | default('') }}</span>
-                    <a href="{{ path('app_organization_mission_show', {'id': mission.id}) }}">{{ mission.name }}</a>
+                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#modal-ajax" data-mission-id="{{ mission.id }}">{{ mission.name }}</button>
                 </td>
                 <td>
                     {{ missionMacro.missionDates(mission, 'date') }}

templates/organization/planning/_availabilities_users.html.twig

@@ -31,17 +31,19 @@
     <td class="item-data">{{ item.entity.drivingLicence ? 'common.yes' | trans : '-' }}</td>
     <td class="item-data">{{ item.entity.vulnerable ? 'common.yes' | trans : '-' }}</td>
     <td>
-        <button
-            class="btn btn-sm btn-block btn-outline-light engaged trigger-add-mission nowrap"
-            data-toggle="modal"
-            data-target="#modal-add-mission"
-            data-href="{{ path('app_organization_user_add_to_mission_modal', {
-                from: periodCalculator.from | date('Y-m-d\\T00:00:00'),
-                to: periodCalculator.to | date_modify('- 1 minute') | date('Y-m-d\\T00:00:00'),
-                organization: item.entity.organization.id,
-                userToAdd: item.entity.id
-            }) }}"
-            title="{{ 'organization.asset.engage' | trans }}"
-        ><span class="fa fa-plus"></span> {{ 'organization.mission.title' | trans }}</button>
+        {% if displayActions %}
+            <button
+                class="btn btn-sm btn-block btn-outline-light engaged trigger-add-mission nowrap"
+                data-toggle="modal"
+                data-target="#modal-add-mission"
+                data-href="{{ path('app_organization_user_add_to_mission_modal', {
+                    from: periodCalculator.from | date('Y-m-d\\T00:00:00'),
+                    to: periodCalculator.to | date_modify('- 1 minute') | date('Y-m-d\\T00:00:00'),
+                    organization: item.entity.organization.id,
+                    userToAdd: item.entity.id
+                }) }}"
+                title="{{ 'organization.asset.engage' | trans }}"
+            ><span class="fa fa-plus"></span> {{ 'organization.mission.title' | trans }}</button>
+        {% endif %}
     </td>
 {% endblock itemDataDetails %}

templates/organization/planning/_results.html.twig

@@ -76,8 +76,6 @@
 </div>
 {% endcache %}
 
-{% include 'availability/_mission_modal.html.twig' %}
-
 <div class="modal fade" id="modal-update" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">

templates/user/availability.html.twig

@@ -10,4 +10,5 @@
 
 {% block body %}
     {% include 'availability/_table.html.twig' with { availabilityType: 'users', availabilityId: app.user.id } %}
+    {% include 'availability/_mission_modal.html.twig' %}
 {% endblock %}