Skip to content

Commit

Permalink
Dynamic rendering of message form
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophehenry
christophehenry committed Apr 11, 2022
1 parent aef8bdc commit 05751fe
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 57 deletions.
55 changes: 55 additions & 0 deletions aidants_connect_habilitation/static/js/message_form.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
"use strict";

(function () {
// This JS code won't be executed on IE11, so we can write ES6 code
class MessageForm extends Stimulus.Controller {
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");
let formData = new FormData(this.formTarget);

this.onGoingRequestValue = true;

let response = await fetch(dest.toString(), {
method: this.formTarget.method.toUpperCase(),
body: formData,
}).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();
}
}

static targets = ["form", "emptyElement", "messagesList"]
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
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>
59 changes: 59 additions & 0 deletions aidants_connect_habilitation/templates/request_messages/_messages.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{% 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"
>
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
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 %}
16 changes: 16 additions & 0 deletions aidants_connect_habilitation/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,10 @@ class ReadonlyRequestView(LateStageRequestView, FormView):
template_name = "view_organisation_request.html"
form_class = RequestMessageForm

@property
def step(self) -> HabilitationFormStep:
return HabilitationFormStep.SUMMARY

def get_context_data(self, **kwargs):
return {
**super().get_context_data(**kwargs),
Expand All @@ -388,4 +392,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)

0 comments on commit 05751fe

Please sign in to comment.