From c16c517e97d8c4d0540d89e0c59b4da327ddfc6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 18 Aug 2021 16:25:56 +0200
Subject: [PATCH] [acc course location] allow to locate course from the index
 page

---
 .../person_locate.js                          | 49 +++++++++++++++
 .../_warning_address.html.twig                | 61 +++++++++++++------
 .../views/AccompanyingCourse/index.html.twig  |  5 ++
 .../ChillPersonBundle/chill.webpack.config.js |  1 +
 4 files changed, 97 insertions(+), 19 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/page/accompanying_course_index/person_locate.js

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/page/accompanying_course_index/person_locate.js b/src/Bundle/ChillPersonBundle/Resources/public/page/accompanying_course_index/person_locate.js
new file mode 100644
index 000000000..b634bf146
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/page/accompanying_course_index/person_locate.js
@@ -0,0 +1,49 @@
+const onSubmit = function(e) {
+    e.preventDefault();
+    let
+        form = e.target,
+        formData = new FormData(form),
+        url = form.action,
+        payload = {
+            type: 'accompanying_period',
+            id: Number.parseInt(formData.get('periodId'), 10),
+            personLocation: {
+                type: 'person',
+                id: Number.parseInt(formData.get('personLocation'), 10)
+            }
+        }
+    ;
+
+    console.log('event', e);
+    console.log('form', form);
+    console.log('formData', formData);
+    console.log('url', url);
+    console.log('payload', payload);
+
+    window.fetch(url, {
+        method: 'PATCH',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload),
+    })
+        .then(r => {
+            if (r.ok) {
+                console.log('response ok');
+                window.location.reload();
+            } else {
+                console.err("could not patch accompanying course");
+            }
+        });
+}
+
+window.addEventListener('DOMContentLoaded', function(e) {
+  let forms = document.querySelectorAll('.quickLocationForm');
+
+  console.log(forms);
+
+  forms.forEach(function(form){
+      console.log('form quickLocation found', form);
+      form.addEventListener('submit', onSubmit);
+  })
+});
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_warning_address.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_warning_address.html.twig
index f8e2dad92..490a91b59 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_warning_address.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_warning_address.html.twig
@@ -1,4 +1,20 @@
-{%- set hasPersonLocation = accompanyingCourse.availablePersonLocation|length > 0 -%}
+{%- set countPersonLocation = accompanyingCourse.availablePersonLocation|length -%}
+{%- set hasPersonLocation = countPersonLocation|length > 0 -%}
+{% macro quickLocationForm(accompanyingCourse, person, whichButton) %}
+    <form method="PATCH" action="{{ path('chill_api_single_accompanying_course__entity', {'id': accompanyingCourse.id, '_format': 'json'}) }}" class="quickLocationForm">
+        <input type="hidden" name="personLocation" value="{{ person.id }}" />
+        <input type="hidden" name="periodId" value="{{ accompanyingCourse.id }}" />
+        {% if whichButton == 'string' %}
+        <button type="submit" class="btn btn-chill-pink">
+            <span class="text-light">{{ 'Locate by'|trans }} {{ person|chill_entity_render_string }}</span>
+        </button>
+        {% elseif whichButton == 'icon' %}
+            <button type="submit" class="btn btn-sm btn-secondary">
+                <i class="fa fa-map-marker"></i>
+            </button>
+        {% endif %}
+    </form>
+{% endmacro %}
 <div class="border border-danger">
     <div class="alert alert-danger {% if hasPersonLocation %}alert-with-actions{% endif %} mb-0">
         <div class="message">
@@ -8,31 +24,38 @@
             {% endif %}
         </div>
 
-        {% if hasPersonLocation %}
-        <ul class="record_actions">
-            <li>
-                <button class="btn btn-chill-pink" data-bs-toggle="collapse" href="#locateAtPerson">
-                    <i class="fa fa-fw fa-caret-down"></i><span class="text-light">{{ 'Choose a person to locate by'|trans }}</span>
-                </button>
-            </li>
-        </ul>
+        {% if 1 == countPersonLocation %}
+            <ul class="record_actions">
+                <li>
+                    {{ _self.quickLocationForm(accompanyingCourse, accompanyingCourse.availablePersonLocation.first, 'string') }}
+                </li>
+            </ul>
+        {% elseif 1 < countPersonLocation %}
+            <ul class="record_actions">
+                <li>
+                    <button class="btn btn-chill-pink" data-bs-toggle="collapse" href="#locateAtPerson">
+                        <i class="fa fa-fw fa-caret-down"></i><span class="text-light">{{ 'Choose a person to locate by'|trans }}</span>
+                    </button>
+                </li>
+            </ul>
         {% endif %}
     </div>
 
-    {% if hasPersonLocation %}
-        <div id="locateAtPerson">
-            <form method="GET" action="#">
+    {% if 1 < countPersonLocation %}
+        <div id="locateAtPerson" class="collapse">
                <p>{{ 'Locate by'|trans }}:</p>
 
-               <ul>
+               <div class="flex-table mb-3">
                    {% for p in accompanyingCourse.availablePersonLocation %}
-                       <li>
-                           <input type="radio" name="persons[]" value="{{ p.id }}">
-                           {{ p|chill_entity_render_box }}
-                       </li>
+                       <div class="item-bloc">
+                         {{ p|chill_entity_render_box({
+                          'render': 'bloc', 'addLink': false, 'addInfo': true, 'addAltNames': false, 'customButtons': {
+                                 'replace': _self.quickLocationForm(accompanyingCourse, p, 'icon')
+                             }
+                         }) }}
+                       </div>
                    {% endfor %}
-               </ul>
-            </form>
+               </div>
         </div>
     {% endif %}
 </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 213e2aafb..20d501ed2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -15,6 +15,11 @@
     {% endif %}
 {% endmacro %}
 
+{% block js %}
+{{ parent() }}
+{{ encore_entry_script_tags('page_accompanying_course_index_person_locate') }}
+{% endblock %}
+
 {% block content %}
 <div class="accompanyingcourse-resume">
 
diff --git a/src/Bundle/ChillPersonBundle/chill.webpack.config.js b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
index 7d60e86a3..ecfbe7153 100644
--- a/src/Bundle/ChillPersonBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
@@ -16,4 +16,5 @@ module.exports = function(encore, entries)
 
     encore.addEntry('page_household_edit_metadata', __dirname + '/Resources/public/page/household_edit_metadata/index.js');
     encore.addEntry('page_person', __dirname + '/Resources/public/page/person/index.js');
+    encore.addEntry('page_accompanying_course_index_person_locate', __dirname + '/Resources/public/page/accompanying_course_index/person_locate.js');
 };