Skip to content

Commit

Permalink
adapt siae activities list and delete modal to dsfr
Browse files Browse the repository at this point in the history
  • Loading branch information
@SebastienReuiller
SebastienReuiller committed Oct 2, 2024
1 parent 06bce66 commit 55ee22a
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 87 deletions.
45 changes: 26 additions & 19 deletions lemarche/static/js/siae_activity_delete.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,30 @@
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;
}
let formActionUrl = modalForm.getAttribute('data-action');
modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', this.siaeSlug).replace('siae-activity-id-to-replace', this.siaeActivityId));

// 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;
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
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
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 %}
81 changes: 42 additions & 39 deletions lemarche/templates/siaes/_siae_activity_card.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,46 @@
{% load static siae_sectors_display %}
<div class="bg-white d-block rounded-lg shadow-lg fr-p-3 mb-3">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-lg-8">
<p class="h4 lh-sm">{{ activity.sector_group }}</p>
<ul>
{% siae_sectors_display activity display_max=6 output_format='li' %}
</ul>
<p class="mb-0">
<i class="ri-briefcase-4-line mr-1"></i>
<span class="sr-only">Type(s) de prestation :</span>
<span>{{ activity.presta_type_display }}</span>
</p>
<p class="mb-0">
<i class="ri-map-2-line"></i>
<span class="sr-only">Intervient sur : {{ siae.geo_range_pretty_title }}</span>
<span>{{ siae.geo_range_pretty_display }}</span>
</p>
</div>
{% if not hide_actions %}
<div class="fr-col-12 fr-col-lg-4 text-right">
<a href="{% url 'dashboard_siaes:siae_edit_activities_edit' activity.siae.slug activity.id %}"
id="siae-activity-edit-btn"
class="btn"
title="Modifier l'activité">
<i class="ri-pencil-fill ri-xl"></i>
</a>
<a href="#"
id="siae-activity-delete-modal-btn"
class="btn"
data-toggle="modal"
data-target="#siae_activity_delete_modal"
data-siae-id="{{ activity.siae.id }}"
data-siae-slug="{{ activity.siae.slug }}"
data-siae-activity-id="{{ activity.id }}"
data-siae-activity-name-display="{{ activity.sector_group }}"
title="Supprimer l'activité">
<i class="ri-delete-bin-line ri-xl"></i>
</a>
<div class="fr-card fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-lg-10">
<h4>{{ activity.sector_group }}</h4>
<ul class="fr-my-4v">
{% siae_sectors_display activity display_max=6 output_format='li' %}
</ul>
<p>
<span class="fr-icon-briefcase-line" aria-hidden="true"></span>
<span class="fr-sr-only ">Type(s) de prestation :</span>
<span>{{ activity.presta_type_display }}</span>
</p>
<p>
<span class="fr-icon-map-pin-2-line" aria-hidden="true"></span>
<span class="fr-sr-only">Intervient sur :</span>{{ activity.geo_range_pretty_title }}
<span class="fr-icon-road-map-line fr-ml-2w" aria-hidden="true"></span>
<span>{{ activity.geo_range_pretty_display }}</span>
</p>
</div>
<div class="fr-col-12 fr-col-lg-2">
<ul class="fr-btns-group fr-btns-group--inline-sm lemarche--align-right">
<li>
<a href="{% url 'dashboard_siaes:siae_edit_activities_edit' activity.siae.slug activity.id %}"
id="siae-activity-edit-btn"
class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-icon-pencil-fill"
title="Modifier l'activité">Modifier l'activité</a>
</li>
<li>
<button id="siae-activity-delete-modal-btn"
class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-icon-delete-line"
x-data="activityItem"
x-init="initOptions('{{ activity.siae.slug }}','{{ activity.id }}','{{ activity.sector_group|escapejs }}')"
@click="remove"
title="Supprimer l'activité">
<i class="ri-delete-bin-line ri-xl"></i>
</button>
</li>
</ul>
</div>
</div>
{% endif %}
</div>
</div>
</div>

0 comments on commit 55ee22a

Please sign in to comment.