Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Collaborateurs): Correction du rattachement des collaborateurs sur certains navigateurs #1655

Merged
merged 1 commit into from
Feb 10, 2025
Merged

fix(Collaborateurs): Correction du rattachement des collaborateurs sur certains navigateurs #1655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 31 additions & 50 deletions lemarche/static/js/siae_user_modals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,33 @@
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('siae_user_request_confirm_modal').addEventListener('dsfr.disclose', (event) => {
// Button that triggered the modal
var button = event.explicitOriginalTarget;
var siaeSlug = button.dataset["siaeSlug"];
var initiatorFullName = button.dataset["initiatorFullName"];
var siaeUserRequestId = button.dataset["siaeUserRequestId"];
document.addEventListener('alpine:init', function () {
Alpine.data('siaeUserModals', () => ({
siaeSlug: null,
SebastienReuiller marked this conversation as resolved.
Show resolved Hide resolved
id: null,
fullName: null,

// Update the modal's content
// - siae user full name
// - edit the form action url
var modal = document.querySelector('#siae_user_request_confirm_modal');
modal.querySelector('#initiator-full-name-to-replace').textContent = initiatorFullName;
var modalForm = modal.querySelector('form');
var formActionUrl = modalForm.getAttribute('action');
modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-user-request-id-to-replace', siaeUserRequestId));
});

document.getElementById('siae_user_request_cancel_modal').addEventListener('dsfr.disclose', (event) => {
// Button that triggered the modal
var button = event.explicitOriginalTarget;
var siaeSlug = button.dataset["siaeSlug"];
var initiatorFullName = button.dataset["initiatorFullName"];
var siaeUserRequestId = button.dataset["siaeUserRequestId"];

// Update the modal's content
// - siae user full name
// - edit the form action url
var modal = document.querySelector('#siae_user_request_cancel_modal');
modal.querySelector('#initiator-full-name-to-replace').textContent = initiatorFullName;
var modalForm = modal.querySelector('form');
var formActionUrl = modalForm.getAttribute('action');
modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-user-request-id-to-replace', siaeUserRequestId));
});

document.getElementById('siae_user_delete_modal').addEventListener('dsfr.disclose', (event) => {
// Button that triggered the modal
var button = event.explicitOriginalTarget;
var siaeSlug = button.dataset["siaeSlug"];
var userFullName = button.dataset["userFullName"];
var siaeUserId = button.dataset["siaeUserId"];

// Update the modal's content
// - siae user full name
// - edit the form action url
var modal = document.querySelector('#siae_user_delete_modal');
modal.querySelector('#user-full-name-to-replace').textContent = userFullName;
var modalForm = modal.querySelector('form');
var formActionUrl = modalForm.getAttribute('action');
modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-user-id-to-replace', siaeUserId));
});
initOptions(siaeSlug, fullName, id) {
this.siaeSlug = siaeSlug;
this.fullName = fullName;
this.id = id;
},
openModal(modalID, replaceIdSelector) {
// Update the modal's content
// - edit the form action url
// - open the modal
let modal = document.querySelector(`#${modalID}`);
let modalForm = modal.querySelector('form');
let formActionUrl = modalForm.getAttribute('data-action');
modal.querySelector('#full-name-to-replace').textContent = this.fullName;
SebastienReuiller marked this conversation as resolved.
Show resolved Hide resolved
modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', this.siaeSlug).replace(replaceIdSelector, this.id));
Dismissed Show dismissed Hide dismissed
dsfr(modal).modal.disclose();
},
confirmUserRequest() {
this.openModal('siae_user_request_confirm_modal', 'siae-user-request-id-to-replace');
},
cancelUserRequest() {
this.openModal('siae_user_request_cancel_modal', 'siae-user-request-id-to-replace');
},
deleteUser() {
this.openModal('siae_user_delete_modal', 'siae-user-id-to-replace');
}
}));
});
37 changes: 22 additions & 15 deletions lemarche/templates/dashboard/siae_users.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ <h1>Mes collaborateurs</h1>
</div>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-lg-8">
<!-- Hidden buttons needed to load modals mecanics -->
<button data-fr-opened="false"
aria-controls="siae_user_request_confirm_modal"
class="fr-hidden"></button>
<button data-fr-opened="false"
aria-controls="siae_user_request_cancel_modal"
class="fr-hidden"></button>
<button data-fr-opened="false"
aria-controls="siae_user_delete_modal"
class="fr-hidden"></button>
{% if siae.siaeuserrequest_set.pending.count %}
<div class="fr-grid-row fr-mb-1w">
<div class="fr-col">
Expand Down Expand Up @@ -56,22 +66,18 @@ <h3 class="fr-card__title fr-icon-user-fill">{{ siaeuserrequest.initiator.full_n
<ul class="fr-btns-group--right fr-btns-group fr-btns-group--inline fr-btns-group--inline-reverse">
<li>
<button class="fr-btn fr-icon-checkbox-circle-line"
data-fr-opened="false"
aria-controls="siae_user_request_confirm_modal"
data-siae-slug="{{ siae.slug }}"
data-initiator-full-name="{{ siaeuserrequest.initiator.full_name }}"
data-siae-user-request-id="{{ siaeuserrequest.id }}"
x-data="siaeUserModals"
x-init="initOptions('{{ siae.slug }}', '{{ siaeuserrequest.initiator.full_name|escapejs }}', {{ siaeuserrequest.id }})"
@click="confirmUserRequest"
title="Confirmer la demande">
Confirmer la demande
</button>
</li>
<li>
<button class="fr-btn fr-btn--secondary fr-icon-close-circle-line"
data-fr-opened="false"
aria-controls="siae_user_request_cancel_modal"
data-siae-slug="{{ siae.slug }}"
data-initiator-full-name="{{ siaeuserrequest.initiator.full_name }}"
data-siae-user-request-id="{{ siaeuserrequest.id }}"
x-data="siaeUserModals"
x-init="initOptions('{{ siae.slug }}', '{{ siaeuserrequest.initiator.full_name|escapejs }}', {{ siaeuserrequest.id }})"
@click="cancelUserRequest"
title="Refuser la demande">Refuser la demande</button>
</li>
</ul>
Expand Down Expand Up @@ -103,11 +109,9 @@ <h3 class="fr-card__title fr-icon-user-fill">{{ siaeuser.user.full_name }}</h3>
<ul class="fr-btns-group--right fr-btns-group fr-btns-group--inline">
<li>
<button class="fr-btn fr-btn--secondary delete-bin-line"
data-fr-opened="false"
aria-controls="siae_user_delete_modal"
data-siae-slug="{{ siae.slug }}"
data-user-full-name="{{ siaeuser.user.full_name }}"
data-siae-user-id="{{ siaeuser.id }}"
x-data="siaeUserModals"
x-init="initOptions('{{ siae.slug }}', '{{ siaeuser.user.full_name|escapejs }}', {{ siaeuser.id }})"
@click="deleteUser"
title="Supprimer le collaborateur">
Supprimer le collaborateur
</button>
Expand Down Expand Up @@ -139,5 +143,8 @@ <h3 class="fr-callout__title fr-text--sm">
{% include "siaes/_siae_user_delete_modal.html" %}
{% endblock modals %}
{% block extra_js %}
<script type="text/javascript"
src="{% static 'vendor/[email protected]'%}"
defer></script>
<script type="text/javascript" src="{% static 'js/siae_user_modals.js' %}"></script>
{% endblock extra_js %}
28 changes: 15 additions & 13 deletions lemarche/templates/siaes/_siae_user_delete_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<dialog aria-labelledby="siae_user_delete_modal-title" id="siae_user_delete_modal" class="fr-modal" role="dialog">
<dialog aria-labelledby="siae_user_delete_modal-title"
id="siae_user_delete_modal"
class="fr-modal"
role="dialog">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
Expand All @@ -7,22 +10,21 @@
<button class="fr-btn--close fr-btn" aria-controls="siae_user_delete_modal">Fermer</button>
</div>
<div class="fr-modal__content">
<h3 id="siae_user_delete_modal-title" class="fr-modal__title">
Supprimer le collaborateur
</h3>
<p><strong id="user-full-name-to-replace"></strong> ne sera plus rattaché à cette structure.</p>
<h3 id="siae_user_delete_modal-title" class="fr-modal__title">Supprimer le collaborateur</h3>
<p>
<strong id="full-name-to-replace"></strong> ne sera plus rattaché à cette structure.
</p>
</div>
<div class="fr-modal__footer">
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<form method="post" action="{% url 'dashboard_siaes:siae_user_delete' 'siae-slug-to-replace' 'siae-user-id-to-replace' %}">
{% csrf_token %}
<button class="fr-btn fr-btn--icon-left" type="submit">
Confirmer
</button>
<form method="post"
data-action="{% url 'dashboard_siaes:siae_user_delete' 'siae-slug-to-replace' 'siae-user-id-to-replace' %}">
{% csrf_token %}
<button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
</form>
<button class="fr-btn fr-btn--icon-left fr-btn--secondary" aria-controls="siae_user_request_confirm_modal" aria-label="Fermer">
Annuler
</button>
<button class="fr-btn fr-btn--icon-left fr-btn--secondary"
aria-controls="siae_user_delete_modal"
aria-label="Fermer">Annuler</button>
</div>
</div>
</div>
Expand Down
31 changes: 17 additions & 14 deletions lemarche/templates/siaes/_siae_user_request_cancel_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
<dialog aria-labelledby="siae_user_request_cancel_modal-title" id="siae_user_request_cancel_modal" class="fr-modal" role="dialog">
<dialog aria-labelledby="siae_user_request_cancel_modal-title"
id="siae_user_request_cancel_modal"
class="fr-modal"
role="dialog">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="siae_user_request_cancel_modal">Fermer</button>
<button class="fr-btn--close fr-btn"
aria-controls="siae_user_request_cancel_modal">Fermer</button>
</div>
<div class="fr-modal__content">
<h3 id="siae_user_request_cancel_modal-title" class="fr-modal__title">
Refuser la demande
</h3>
<p>Souhaitez vous refuser <span id="initiator-full-name-to-replace"></span> comme collaborateur sur votre structure ?</p>
<h3 id="siae_user_request_cancel_modal-title" class="fr-modal__title">Refuser la demande</h3>
<p>
Souhaitez vous refuser <span id="full-name-to-replace"></span> comme collaborateur sur votre structure ?
</p>
</div>
<div class="fr-modal__footer">
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<form method="post" action="{% url 'dashboard_siaes:siae_user_request_cancel' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
{% csrf_token %}
<button class="fr-btn fr-btn--icon-left" type="submit">
Confirmer
</button>
<form method="post"
data-action="{% url 'dashboard_siaes:siae_user_request_cancel' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
{% csrf_token %}
<button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
</form>
<button class="fr-btn fr-btn--icon-left fr-btn--secondary" aria-controls="siae_user_request_cancel_modal" aria-label="Fermer">
Annuler
</button>
<button class="fr-btn fr-btn--icon-left fr-btn--secondary"
aria-controls="siae_user_request_cancel_modal"
aria-label="Fermer">Annuler</button>
</div>
</div>
</div>
Expand Down
31 changes: 17 additions & 14 deletions lemarche/templates/siaes/_siae_user_request_confirm_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
<dialog aria-labelledby="siae_user_request_confirm_modal-title" id="siae_user_request_confirm_modal" class="fr-modal" role="dialog">
<dialog aria-labelledby="siae_user_request_confirm_modal-title"
id="siae_user_request_confirm_modal"
class="fr-modal"
role="dialog">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="siae_user_request_confirm_modal">Fermer</button>
<button class="fr-btn--close fr-btn"
aria-controls="siae_user_request_confirm_modal">Fermer</button>
</div>
<div class="fr-modal__content">
<h3 id="siae_user_request_confirm_modal-title" class="fr-modal__title">
Accepter la demande
</h3>
<p><span id="initiator-full-name-to-replace"></span> pourra accéder à votre structure et modifier le contenu de sa fiche commerciale.</p>
<h3 id="siae_user_request_confirm_modal-title" class="fr-modal__title">Accepter la demande</h3>
<p>
<span id="full-name-to-replace"></span> pourra accéder à votre structure et modifier le contenu de sa fiche commerciale.
</p>
</div>
<div class="fr-modal__footer">
<div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<form method="post" action="{% url 'dashboard_siaes:siae_user_request_confirm' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
{% csrf_token %}
<button class="fr-btn fr-btn--icon-left" type="submit">
Confirmer
</button>
<form method="post"
data-action="{% url 'dashboard_siaes:siae_user_request_confirm' 'siae-slug-to-replace' 'siae-user-request-id-to-replace' %}">
{% csrf_token %}
<button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
</form>
<button class="fr-btn fr-btn--icon-left fr-btn--secondary" aria-controls="siae_user_request_confirm_modal" aria-label="Fermer">
Annuler
</button>
<button class="fr-btn fr-btn--icon-left fr-btn--secondary"
aria-controls="siae_user_request_confirm_modal"
aria-label="Fermer">Annuler</button>
</div>
</div>
</div>
Expand Down