fix(calendar): stack member history modal on top of team daily modal
This commit is contained in:
parent
41898f211f
commit
2c207fcfbb
2 changed files with 124 additions and 88 deletions
|
|
@ -5221,6 +5221,11 @@ function openMemberHistoryModal(memberId) {
|
||||||
if (spinner) spinner.classList.remove('d-none');
|
if (spinner) spinner.classList.remove('d-none');
|
||||||
if (content) content.classList.add('d-none');
|
if (content) content.classList.add('d-none');
|
||||||
|
|
||||||
|
const teamModalEl = document.getElementById('teamDailyMembersModal');
|
||||||
|
if (teamModalEl && teamModalEl.classList.contains('show')) {
|
||||||
|
modalEl.style.zIndex = '1070';
|
||||||
|
}
|
||||||
|
|
||||||
modal.show();
|
modal.show();
|
||||||
|
|
||||||
fetch(`/interventions/calendar/member/${memberId}/history/`, {
|
fetch(`/interventions/calendar/member/${memberId}/history/`, {
|
||||||
|
|
@ -5622,7 +5627,30 @@ document.addEventListener('click', function(e) {
|
||||||
|
|
||||||
const _memberHistoryModalEl = document.getElementById('memberHistoryModal');
|
const _memberHistoryModalEl = document.getElementById('memberHistoryModal');
|
||||||
if (_memberHistoryModalEl) {
|
if (_memberHistoryModalEl) {
|
||||||
|
function ensureHistoryModalOnTop() {
|
||||||
|
const teamModalEl = document.getElementById('teamDailyMembersModal');
|
||||||
|
if (teamModalEl && teamModalEl.classList.contains('show')) {
|
||||||
|
_memberHistoryModalEl.style.zIndex = '1070';
|
||||||
|
const backdrops = document.querySelectorAll('.modal-backdrop');
|
||||||
|
if (backdrops.length > 1) {
|
||||||
|
backdrops[backdrops.length - 1].classList.add('member-history-backdrop');
|
||||||
|
backdrops[backdrops.length - 1].style.zIndex = '1065';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_memberHistoryModalEl.addEventListener('show.bs.modal', function () {
|
||||||
|
ensureHistoryModalOnTop();
|
||||||
|
setTimeout(ensureHistoryModalOnTop, 0);
|
||||||
|
setTimeout(ensureHistoryModalOnTop, 50);
|
||||||
|
});
|
||||||
|
|
||||||
|
_memberHistoryModalEl.addEventListener('shown.bs.modal', function () {
|
||||||
|
ensureHistoryModalOnTop();
|
||||||
|
});
|
||||||
|
|
||||||
_memberHistoryModalEl.addEventListener('hidden.bs.modal', function () {
|
_memberHistoryModalEl.addEventListener('hidden.bs.modal', function () {
|
||||||
|
_memberHistoryModalEl.style.zIndex = '';
|
||||||
const teamModalEl = document.getElementById('teamDailyMembersModal');
|
const teamModalEl = document.getElementById('teamDailyMembersModal');
|
||||||
if (teamModalEl && teamModalEl.classList.contains('show')) {
|
if (teamModalEl && teamModalEl.classList.contains('show')) {
|
||||||
document.body.classList.add('modal-open');
|
document.body.classList.add('modal-open');
|
||||||
|
|
|
||||||
|
|
@ -234,6 +234,14 @@
|
||||||
border-color: #6c757d !important;
|
border-color: #6c757d !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ensure member history modal displays on top of other modals */
|
||||||
|
#memberHistoryModal {
|
||||||
|
z-index: 1070 !important;
|
||||||
|
}
|
||||||
|
.modal-backdrop.member-history-backdrop {
|
||||||
|
z-index: 1065 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock head %}
|
{% endblock head %}
|
||||||
|
|
||||||
|
|
@ -650,6 +658,93 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Bootstrap pour la modification de l'équipe pour un jour donné -->
|
||||||
|
<div class="modal fade" id="teamDailyMembersModal" tabindex="-1" aria-labelledby="teamDailyMembersModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title d-flex align-items-center gap-2" id="teamDailyMembersModalLabel">
|
||||||
|
<i class="bi bi-people-fill text-primary"></i>
|
||||||
|
<span id="team-daily-modal-title">{% translate "Composition de l'équipe" %}</span>
|
||||||
|
</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div id="team-daily-modal-spinner" class="text-center py-4">
|
||||||
|
<div class="spinner-border text-primary" role="status">
|
||||||
|
<span class="visually-hidden">{% translate "Chargement..." %}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="team-daily-modal-content" class="d-none">
|
||||||
|
<!-- En-tête d'information -->
|
||||||
|
<div class="d-flex align-items-center justify-content-between p-2 mb-3 bg-light rounded border">
|
||||||
|
<div>
|
||||||
|
<span class="fw-bold text-dark fs-6" id="team-daily-modal-team-name"></span>
|
||||||
|
<span class="badge bg-secondary-subtle text-secondary border ms-2" id="team-daily-modal-company"></span>
|
||||||
|
</div>
|
||||||
|
<div class="text-muted small fw-semibold" id="team-daily-modal-date-display"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Alertes lecture seule -->
|
||||||
|
<div class="alert alert-warning py-2 small d-none" id="team-daily-past-alert">
|
||||||
|
<i class="bi bi-exclamation-triangle-fill me-1"></i>
|
||||||
|
{% translate "Cette date est passée. La composition de l'équipe ne peut plus être modifiée." %}
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info py-2 small d-none" id="team-daily-readonly-alert">
|
||||||
|
<i class="bi bi-info-circle-fill me-1"></i>
|
||||||
|
{% translate "Vous n'avez pas les droits de modification sur cette équipe." %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feedback messages -->
|
||||||
|
<div class="alert alert-danger py-2 small d-none" id="team-daily-error-alert"></div>
|
||||||
|
<div class="alert alert-success py-2 small d-none" id="team-daily-success-alert"></div>
|
||||||
|
|
||||||
|
<!-- Liste des membres actuels -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<h6 class="fw-semibold text-secondary mb-2 d-flex align-items-center gap-2">
|
||||||
|
<i class="bi bi-person-check-fill text-success"></i>
|
||||||
|
{% translate "Membres de l'équipe pour ce jour" %}
|
||||||
|
<span class="badge bg-secondary rounded-pill ms-1" id="team-daily-members-count">0</span>
|
||||||
|
</h6>
|
||||||
|
<div id="team-daily-members-list" class="list-group list-group-flush border rounded">
|
||||||
|
<!-- Injecté par JS -->
|
||||||
|
</div>
|
||||||
|
<div id="team-daily-empty-members" class="text-center text-muted py-3 border rounded bg-light d-none">
|
||||||
|
<i class="bi bi-people fs-4 d-block mb-1 text-secondary"></i>
|
||||||
|
{% translate "Aucun membre affecté à cette équipe ce jour-là." %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Formulaire d'ajout de membre -->
|
||||||
|
<div id="team-daily-add-section" class="card border bg-light-subtle d-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<h6 class="fw-semibold text-dark mb-2">
|
||||||
|
<i class="bi bi-person-plus-fill text-primary me-1"></i>
|
||||||
|
{% translate "Ajouter un membre pour ce jour" %}
|
||||||
|
</h6>
|
||||||
|
<div class="row g-2 align-items-center">
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<select class="form-select form-select-sm" id="team-daily-candidate-select">
|
||||||
|
<option value="">{% translate "Sélectionner un membre..." %}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 d-grid">
|
||||||
|
<button type="button" class="btn btn-sm btn-primary" id="btn-team-daily-add-member">
|
||||||
|
<i class="bi bi-plus-lg me-1"></i>{% translate "Ajouter" %}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Modal Bootstrap pour l'historique d'un membre -->
|
<!-- Modal Bootstrap pour l'historique d'un membre -->
|
||||||
<div class="modal fade" id="memberHistoryModal" tabindex="-1" aria-labelledby="memberHistoryModalLabel" aria-hidden="true">
|
<div class="modal fade" id="memberHistoryModal" tabindex="-1" aria-labelledby="memberHistoryModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||||
|
|
@ -745,93 +840,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal Bootstrap pour la modification de l'équipe pour un jour donné -->
|
|
||||||
<div class="modal fade" id="teamDailyMembersModal" tabindex="-1" aria-labelledby="teamDailyMembersModalLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title d-flex align-items-center gap-2" id="teamDailyMembersModalLabel">
|
|
||||||
<i class="bi bi-people-fill text-primary"></i>
|
|
||||||
<span id="team-daily-modal-title">{% translate "Composition de l'équipe" %}</span>
|
|
||||||
</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div id="team-daily-modal-spinner" class="text-center py-4">
|
|
||||||
<div class="spinner-border text-primary" role="status">
|
|
||||||
<span class="visually-hidden">{% translate "Chargement..." %}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="team-daily-modal-content" class="d-none">
|
|
||||||
<!-- En-tête d'information -->
|
|
||||||
<div class="d-flex align-items-center justify-content-between p-2 mb-3 bg-light rounded border">
|
|
||||||
<div>
|
|
||||||
<span class="fw-bold text-dark fs-6" id="team-daily-modal-team-name"></span>
|
|
||||||
<span class="badge bg-secondary-subtle text-secondary border ms-2" id="team-daily-modal-company"></span>
|
|
||||||
</div>
|
|
||||||
<div class="text-muted small fw-semibold" id="team-daily-modal-date-display"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Alertes lecture seule -->
|
|
||||||
<div class="alert alert-warning py-2 small d-none" id="team-daily-past-alert">
|
|
||||||
<i class="bi bi-exclamation-triangle-fill me-1"></i>
|
|
||||||
{% translate "Cette date est passée. La composition de l'équipe ne peut plus être modifiée." %}
|
|
||||||
</div>
|
|
||||||
<div class="alert alert-info py-2 small d-none" id="team-daily-readonly-alert">
|
|
||||||
<i class="bi bi-info-circle-fill me-1"></i>
|
|
||||||
{% translate "Vous n'avez pas les droits de modification sur cette équipe." %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Feedback messages -->
|
|
||||||
<div class="alert alert-danger py-2 small d-none" id="team-daily-error-alert"></div>
|
|
||||||
<div class="alert alert-success py-2 small d-none" id="team-daily-success-alert"></div>
|
|
||||||
|
|
||||||
<!-- Liste des membres actuels -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<h6 class="fw-semibold text-secondary mb-2 d-flex align-items-center gap-2">
|
|
||||||
<i class="bi bi-person-check-fill text-success"></i>
|
|
||||||
{% translate "Membres de l'équipe pour ce jour" %}
|
|
||||||
<span class="badge bg-secondary rounded-pill ms-1" id="team-daily-members-count">0</span>
|
|
||||||
</h6>
|
|
||||||
<div id="team-daily-members-list" class="list-group list-group-flush border rounded">
|
|
||||||
<!-- Injecté par JS -->
|
|
||||||
</div>
|
|
||||||
<div id="team-daily-empty-members" class="text-center text-muted py-3 border rounded bg-light d-none">
|
|
||||||
<i class="bi bi-people fs-4 d-block mb-1 text-secondary"></i>
|
|
||||||
{% translate "Aucun membre affecté à cette équipe ce jour-là." %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Formulaire d'ajout de membre -->
|
|
||||||
<div id="team-daily-add-section" class="card border bg-light-subtle d-none">
|
|
||||||
<div class="card-body p-3">
|
|
||||||
<h6 class="fw-semibold text-dark mb-2">
|
|
||||||
<i class="bi bi-person-plus-fill text-primary me-1"></i>
|
|
||||||
{% translate "Ajouter un membre pour ce jour" %}
|
|
||||||
</h6>
|
|
||||||
<div class="row g-2 align-items-center">
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<select class="form-select form-select-sm" id="team-daily-candidate-select">
|
|
||||||
<option value="">{% translate "Sélectionner un membre..." %}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4 d-grid">
|
|
||||||
<button type="button" class="btn btn-sm btn-primary" id="btn-team-daily-add-member">
|
|
||||||
<i class="bi bi-plus-lg me-1"></i>{% translate "Ajouter" %}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endblock content%}
|
{% endblock content%}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue