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

refactor(Activités des structures): Adaptation au DSFR des écrans d'édition des activités des structures #1449

Merged
merged 6 commits into from
Oct 15, 2024
Merged

refactor(Activités des structures): Adaptation au DSFR des écrans d'édition des activités des structures #1449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ea8321f
adapt edit activities to dsfr
SebastienReuiller Oct 2, 2024
2482d24
override multiple input to display group name like django core
SebastienReuiller Oct 2, 2024
06bce66
geo distance is needed if custom geo range is needed
SebastienReuiller Oct 2, 2024
8d07ddf
adapt siae activities list and delete modal to dsfr
SebastienReuiller Oct 2, 2024
e8b3c9c
fix replace siae activity id
chloend Oct 9, 2024
f70d1f7
Fix code scanning alert no. 23: DOM text reinterpreted as HTML
chloend Oct 9, 2024
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
50 changes: 31 additions & 19 deletions lemarche/static/js/siae_activity_delete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
document.addEventListener("DOMContentLoaded", function() {
$('#siae_activity_delete_modal').on('show.bs.modal', function (event) {
// Button that triggered the modal
var button = $(event.relatedTarget);
document.addEventListener('alpine:init', function () {
Alpine.data('activityItem', () => ({
siaeSlug: null,
siaeActivityId: null,
siaeActivityNameDisplay: null,

// Extract info from data-* attributes
var siaeId = button.data('siae-id');
var siaeSlug = button.data('siae-slug');
var siaeActivityId = button.data('siae-activity-id');
var siaeActivityNameDisplay = button.data('siae-activity-name-display');
initOptions(siaeSlug, siaeActivityId, siaeActivityNameDisplay) {
this.siaeSlug = siaeSlug;
this.siaeActivityId = siaeActivityId;
this.siaeActivityNameDisplay = siaeActivityNameDisplay;
},
remove() {
// Update the modal's content
// - siae activity name display
// - edit the form action url
// - open the modal
let modalID = 'siae_activity_delete_modal';
let modal = document.querySelector(`#${modalID}`);
let modalForm = modal.querySelector('form');
if (modal.querySelector('#siae-activity-name-display')) {
modal.querySelector('#siae-activity-name-display').textContent = this.siaeActivityNameDisplay;
}

// Update the modal's content
// - siae name display
// - edit the form action url
var modal = document.querySelector('#siae_activity_delete_modal');
var modalForm = modal.querySelector('form');
if (modal.querySelector('#siae-activity-name-display')) {
modal.querySelector('#siae-activity-name-display').textContent = siaeActivityNameDisplay;
let formActionUrl = new URL(modalForm.getAttribute('data-action'));
formActionUrl.pathname = formActionUrl.pathname
.replace('siae-slug-to-replace', encodeURIComponent(this.siaeSlug))
.replace('siae-activity-id-to-replace', encodeURIComponent(this.siaeActivityId));

modalForm.setAttribute('action', formActionUrl.toString());

const modalDialog = document.getElementById(modalID);
dsfr(modalDialog).modal.disclose();
}
var formActionUrl = modalForm.getAttribute('action');
modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-activity-id-to-replace', siaeActivityId));
});
}));
});
59 changes: 39 additions & 20 deletions lemarche/templates/dashboard/_siae_activity_delete_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,42 @@
<div class="modal fade modal-siae" id="siae_activity_delete_modal" tabindex="-1" role="dialog" aria-modal="true" data-backdrop="static" data-keyboard="false" aria-labelledby="modalTitle">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalTitle">Supprimer</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
<i class="ri-close-line"></i>
</button>
</div>
<form method="POST" action="{% url 'dashboard_siaes:siae_edit_activities_delete' siae.slug|default:'siae-slug-to-replace' activity.id|default:'siae-activity-id-to-replace' %}">
{% csrf_token %}
<div class="modal-body home-content-body">
<p class="font-weight-bold">Voulez-vous supprimer cette activité ?</p>
<i><span id="siae-activity-name-display"></span></i>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-outline-primary" type="button" data-dismiss="modal" aria-label="Fermer">Annuler</button>
<button class="btn btn-sm btn-primary" type="submit">Confirmer</button>
<dialog class="fr-modal"
id="siae_activity_delete_modal"
role="dialog"
aria-modal="true"
data-backdrop="static"
data-keyboard="false"
aria-labelledby="siae_activity_delete_modal_title">
<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_activity_delete_modal">Fermer</button>
</div>
<div class="fr-modal__content">
<h3 id="siae_activity_delete_modal_title" class="fr-modal__title">Supprimer</h3>
<p>
Voulez-vous supprimer l'activité <strong><span id="siae-activity-name-display"></span></strong> ?
</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"
data-action="{% url 'dashboard_siaes:siae_edit_activities_delete' siae.slug|default:'siae-slug-to-replace' activity.id|default:'siae-activity-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_activity_delete_modal"
aria-label="Fermer">Annuler</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</dialog>
<!-- button needed for modal to be triggered -->
<button data-fr-opened="false"
aria-controls="siae_activity_delete_modal"
class="fr-hidden"></button>
19 changes: 10 additions & 9 deletions lemarche/templates/dashboard/siae_edit_activities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
{% extends "dashboard/siae_edit_base.html" %}
{% load static bootstrap4 %}
{% load static %}
{% block content_siae_form %}
<div class="fr-grid-row mb-3">
<div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
<div class="fr-col-lg-8">
<h3>Ajoutez vos secteurs d'activité et recevez des opportunités commerciales ciblées</h3>
</div>
<div class="fr-col-lg-4">
<a href="{% url 'dashboard_siaes:siae_edit_activities_create' siae.slug %}"
id="siae-activities-create-btn"
class="btn btn-primary w-100 btn-ico mt-2">
<i class="ri-add-fill ri-lg mr-2"></i>Ajouter un secteur d'activité
</a>
class="fr-btn fr-fi-add-circle-line fr-btn--icon-right fr-mt-1w">Ajouter un secteur d'activité</a>
</div>
</div>
{% if siae.activities.count %}
<div class="fr-grid-row mb-3 mb-lg-5">
<div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
{% for activity in siae.activities.all %}
<div class="fr-col-12 fr-col-lg-8">{% include "siaes/_siae_activity_card.html" with activity=activity %}</div>
{% endfor %}
</div>
{% endif %}
{% endblock %}
{% endblock content_siae_form %}
{% block modals %}
{% include "dashboard/_siae_activity_delete_modal.html" %}
{% endblock %}
{% endblock modals %}
{% block extra_js %}
<script type="text/javascript"
src="{% static 'vendor/[email protected]'%}"
defer></script>
<script type="text/javascript"
src="{% static 'js/siae_activity_delete.js' %}"></script>
{% endblock %}
{% endblock extra_js %}
Loading
Loading