From 05751feeb0ad6041c3ea5e5d59faef016b85443e Mon Sep 17 00:00:00 2001 From: Christophe Henry Date: Mon, 11 Apr 2022 17:34:31 +0200 Subject: [PATCH] Dynamic rendering of message form --- .../static/js/message_form.js | 55 ++++++++++++++++ .../request_messages/_message_item.html | 23 +++++++ .../templates/request_messages/_messages.html | 59 +++++++++++++++++ .../templates/view_organisation_request.html | 65 +++---------------- aidants_connect_habilitation/views.py | 16 +++++ 5 files changed, 161 insertions(+), 57 deletions(-) create mode 100644 aidants_connect_habilitation/static/js/message_form.js create mode 100644 aidants_connect_habilitation/templates/request_messages/_message_item.html create mode 100644 aidants_connect_habilitation/templates/request_messages/_messages.html diff --git a/aidants_connect_habilitation/static/js/message_form.js b/aidants_connect_habilitation/static/js/message_form.js new file mode 100644 index 000000000..2d16274be --- /dev/null +++ b/aidants_connect_habilitation/static/js/message_form.js @@ -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) + ); + } +})(); diff --git a/aidants_connect_habilitation/templates/request_messages/_message_item.html b/aidants_connect_habilitation/templates/request_messages/_message_item.html new file mode 100644 index 000000000..7b0114a5e --- /dev/null +++ b/aidants_connect_habilitation/templates/request_messages/_message_item.html @@ -0,0 +1,23 @@ +{% comment %} +Context: +{ + "message": RequestMessage, + "issuer": Issuer, +} +{% endcomment %} +
  • +
    + {% if message.sender == "AC" %} +
    + "Aidant Connect +

    {{ message.created_at }}

    +
    + {% else %} +
    + {{ issuer.first_name }} {{ issuer.last_name }} +

    {{ message.created_at }}

    +
    + {% endif %} +
    {{ message.content|linebreaksbr }}
    +
    +
    • diff --git a/aidants_connect_habilitation/templates/request_messages/_messages.html b/aidants_connect_habilitation/templates/request_messages/_messages.html new file mode 100644 index 000000000..e8fc47eff --- /dev/null +++ b/aidants_connect_habilitation/templates/request_messages/_messages.html @@ -0,0 +1,59 @@ +{% comment %} +Context: +{ + "messages": List[RequestMessage], + "issuer": Issuer, + "form": RequestMessageForm, +} +{% endcomment %} +

    Vos échanges avec Aidants Connect

    +
    +
    +
    +
    +
      + {% for message in messages.all %} + {% include "request_messages/_message_item.html" with issuer=issuer message=message %} + {% empty %} +
    1. +
      +
      Aidants Connect
      +
      +

      Notre conversation démarre ici.

      +

      + 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.

      +

      Nous vous répondrons dans les meilleurs délais.

      +
      +
      +
      2. + {% endfor %} +
    +
    +
    +
    + {% csrf_token %} +
    + +
    + {{ form.content }} +
    +
    + +
    +
    +
    +
    +
    +
    +
    diff --git a/aidants_connect_habilitation/templates/view_organisation_request.html b/aidants_connect_habilitation/templates/view_organisation_request.html index 5b72d2c43..133cbad4c 100644 --- a/aidants_connect_habilitation/templates/view_organisation_request.html +++ b/aidants_connect_habilitation/templates/view_organisation_request.html @@ -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 }} @@ -17,62 +17,7 @@

    Votre demande


    {% include "edito/_aide_etats_demandes_habilitation.html" with status=organisation.status %}

    -

    Vos échanges avec Aidants Connect

    -
    -
    -
    -
    -
      - {% for message in organisation.messages.all %} -
    1. -
      - {% if message.sender == "AC" %} -
      Aidants Connect -

      {{ message.created_at }}

      -
      - {% else %} -
      - {{ organisation.issuer.first_name }} {{ organisation.issuer.last_name }} -

      {{ message.created_at }}

      -
      - {% endif %} -
      {{ message.content|linebreaksbr }}
      -
      -
      2. - {% empty %} -
    2. -
      -
      Aidants Connect
      -
      -

      Notre conversation démarre ici.

      -

      - 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.

      -

      Nous vous répondrons dans les meilleurs délais.

      -
      -
      -
      3. - {% endfor %} -
    -
    -
    -
    - {% csrf_token %} -
    - -
    - {{ form.content }} -
    -
    - -
    -
    -
    -
    -
    -
    -
    + {% include "request_messages/_messages.html" with issuer=organisation.issuer messages=organisation.messages form=form %}

    Rappel de votre saisie

    {% include "_display_org_request.html" with organisation=organisation show_all_buttons=False %} @@ -85,3 +30,9 @@

    Rappel de votre saisie

    {# fr-container #} {% endblock %} + + +{% block extrajs %} + {% stimulusjs %} + +{% endblock %} diff --git a/aidants_connect_habilitation/views.py b/aidants_connect_habilitation/views.py index 6b1d79fff..c526f6545 100644 --- a/aidants_connect_habilitation/views.py +++ b/aidants_connect_habilitation/views.py @@ -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), @@ -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)