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

Jump to bottom

Rendu dynamique du formulaire de message #615

Merged
merged 2 commits into from
Apr 13, 2022
Merged

Rendu dynamique du formulaire de message #615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05751fe
Dynamic rendering of message form
christophehenry Apr 11, 2022
d171b7a
Apply suggestion from code review
christophehenry Apr 12, 2022
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
7 changes: 5 additions & 2 deletions aidants_connect_habilitation/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
BooleanField,
CharField,
ChoiceField,
ModelForm,
Textarea,
modelformset_factory,
)
Expand Down Expand Up @@ -388,9 +387,13 @@ def save(
save.alters_data = True


class RequestMessageForm(ModelForm):
class RequestMessageForm(PatchedErrorListForm):
content = CharField(label="Votre message", widget=Textarea(attrs={"rows": 2}))

def __init__(self, **kwargs):
super().__init__(**kwargs)
self.widget_attrs("content", {"data-message-form-target": "textarea"})

class Meta:
model = models.RequestMessage
fields = ["content"]
62 changes: 62 additions & 0 deletions aidants_connect_habilitation/static/js/message_form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
"use strict";

(function () {
// This JS code won't be executed on IE11, so we can write ES6 code
class MessageForm extends Stimulus.Controller {
Copy link
Collaborator Author

@christophehenry christophehenry Apr 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

C'est sympa, quand-même, ES6+. Ça me gonfle vraiment qu'on s'oblige à supporter un navigateur que même son éditeur ne supporte plus.

initialize() {
this.onGoingRequestValue = false;
}

async onSubmit(evt) {
if (this.onGoingRequestValue) {
return;
}

evt.preventDefault();
evt.stopPropagation();

if (!this.formTarget.checkValidity()) {
return;
}

let dest = new URL(this.formTarget.action, location.origin);
dest.searchParams.append("http-api", "true");

this.onGoingRequestValue = true;
christophehenry marked this conversation as resolved.
Show resolved Hide resolved

let response = await fetch(dest.toString(), {
method: this.formTarget.method.toUpperCase(),
body: new FormData(this.formTarget),
}).finally(() => {this.onGoingRequestValue = false});

if (response.ok) {
let html = await response.text();
if (this.hasEmptyElementTarget) {
this.emptyElementTarget.remove();
}

this.messagesListTarget.insertAdjacentHTML("beforeend", html);
this.formTarget.reset();
}
}

onGoingRequestValueChanged(value, _) {
if (value) {
this.submitBtnTarget.setAttribute("disabled", "disabled");
this.textareaTarget.setAttribute("disabled", "disabled");
} else {
this.submitBtnTarget.removeAttribute("disabled");
this.textareaTarget.removeAttribute("disabled");
}
}

static targets = ["form", "emptyElement", "messagesList", "submitBtn", "textarea"]
static values = {"onGoingRequest": Boolean}
}

if (window.fetch) {
window.addEventListener("load", () =>
Stimulus.Application.start().register("message-form", MessageForm)
);
}
})();
23 changes: 23 additions & 0 deletions aidants_connect_habilitation/templates/request_messages/_message_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% comment %}
Context:
{
"message": RequestMessage,
"issuer": Issuer,
}
{% endcomment %}
<li>
<div class="fr-grid-row fr-grid-row--gutters">
{% if message.sender == "AC" %}
<div class="fr-col-4 text-blue">
<strong>"Aidant Connect</strong>
<p class="more-info-messages">{{ message.created_at }}</p>
</div>
{% else %}
<div class="fr-col-4 text-red">
<strong>{{ issuer.first_name }} {{ issuer.last_name }}</strong>
<p class="more-info-messages">{{ message.created_at }}</p>
</div>
{% endif %}
<div class="fr-col-8">{{ message.content|linebreaksbr }}</div>
</div>
</li>
60 changes: 60 additions & 0 deletions aidants_connect_habilitation/templates/request_messages/_messages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
{% comment %}
Context:
{
"messages": List[RequestMessage],
"issuer": Issuer,
"form": RequestMessageForm,
}
{% endcomment %}
<h2>Vos échanges avec Aidants Connect</h2>
<div
class="fr-grid-row fr-grid-row--gutters"
data-controller="message-form"
>
<div class="fr-col-12 fr-col-md-8">
<div class="shadowed">
<div class="messages-list-container">
<ol class="messages-list" data-message-form-target="messagesList">
{% for message in messages.all %}
{% include "request_messages/_message_item.html" with issuer=issuer message=message %}
{% empty %}
<li data-message-form-target="emptyElement">
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-4 text-blue"><strong>Aidants Connect</strong></div>
<div class="fr-col-8">
<p class="more-info-messages"><strong>Notre conversation démarre ici.</strong></p>
<p class="more-info-messages">
Vous retrouverez ici vos échanges par écrit avec l’équipe d’Aidants Connect. Vous pouvez utiliser
l’interface ci-dessous pour envoyer un message,
une remarque ou une demande complémentaire.</p>
<p class="more-info-messages">Nous vous répondrons dans les meilleurs délais.</p>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<div class="message-form-container">
<form method="post" data-message-form-target="form">
{% csrf_token %}
<div class="fr-grid-row fr-grid-row--gutters">
<label class="fr-col-4" for="{{ form.content.id_for_label }}">Votre message</label>
<div class="fr-col-6">
{{ form.content }}
</div>
<div class="fr-col-2">
<button
type="submit"
class="button primary"
data-action="message-form#onSubmit"
data-message-form-target="submitBtn"
>
Envoyer
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
65 changes: 8 additions & 57 deletions aidants_connect_habilitation/templates/view_organisation_request.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends 'layouts/main-habilitation.html' %}
{% load static form_extras %}
{% load static form_extras ac_common %}

{% block title %}
Aidants Connect — Demande d'habilitation pour {{ organisation.name }}
Expand All @@ -17,62 +17,7 @@ <h2>Votre demande</h2>
<br>
{% include "edito/_aide_etats_demandes_habilitation.html" with status=organisation.status %}
</p>
<h2>Vos échanges avec Aidants Connect</h2>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-8">
<div class="shadowed">
<div class="messages-list-container">
<ol class="messages-list">
{% for message in organisation.messages.all %}
<li>
<div class="fr-grid-row fr-grid-row--gutters">
{% if message.sender == "AC" %}
<div class="fr-col-4 text-blue"><strong>Aidants Connect</strong>
<p class="more-info-messages">{{ message.created_at }}</p>
</div>
{% else %}
<div class="fr-col-4 text-red">
<strong>{{ organisation.issuer.first_name }} {{ organisation.issuer.last_name }}</strong>
<p class="more-info-messages">{{ message.created_at }}</p>
</div>
{% endif %}
<div class="fr-col-8">{{ message.content|linebreaksbr }}</div>
</div>
</li>
{% empty %}
<li>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-4 text-blue"><strong>Aidants Connect</strong></div>
<div class="fr-col-8">
<p class="more-info-messages"><strong>Notre conversation démarre ici.</strong></p>
<p class="more-info-messages">
Vous retrouverez ici vos échanges par écrit avec l’équipe d’Aidants Connect. Vous pouvez utiliser
l’interface ci-dessous pour envoyer un message,
une remarque ou une demande complémentaire.</p>
<p class="more-info-messages">Nous vous répondrons dans les meilleurs délais.</p>
</div>
</div>
</li>
{% endfor %}
</ol>
</div>
<div class="message-form-container">
<form method="post">
{% csrf_token %}
<div class="fr-grid-row fr-grid-row--gutters">
<label class="fr-col-4" for="{{ form.content.id_for_label }}">Votre message</label>
<div class="fr-col-6">
{{ form.content }}
</div>
<div class="fr-col-2">
<button type="submit" class="button primary">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% include "request_messages/_messages.html" with issuer=organisation.issuer messages=organisation.messages form=form %}
<h2>Rappel de votre saisie</h2>
{% include "_display_org_request.html" with organisation=organisation show_all_buttons=False %}

Expand All @@ -85,3 +30,9 @@ <h2>Rappel de votre saisie</h2>

</div>{# fr-container #}
{% endblock %}


{% block extrajs %}
{% stimulusjs %}
<script src="{% static 'js/message_form.js' %}"></script>
{% endblock %}
12 changes: 12 additions & 0 deletions aidants_connect_habilitation/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,4 +388,16 @@ def form_valid(self, form):
message.organisation = self.organisation
message.save()

if self.request.GET.get("http-api", False):
return self.response_class(
request=self.request,
template="request_messages/_message_item.html",
context={
"message": message,
"issuer": self.issuer,
},
using=self.template_engine,
content_type="text/html; charset=utf-8",
)

return super().form_valid(form)