Merge remote-tracking branch 'origin/master' into homepage/rewrite

src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js

@@ -0,0 +1,67 @@
+import {createApp} from 'vue';
+import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
+import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+/**
+ *
+ * To start this app, add this container into recordAction passed as argument to
+ *  `ChillPerson/AccompanyingPeriod/_list_item.html.twig`:
+ *
+ *  ```html+twig
+ *  {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', period) %}
+ *  <li>
+ *  <span data-set-referrer-app="data-set-referrer-app" data-set-referrer-accompanying-period-id="{{ period.id }}"></span>
+ *  </li>
+ *  {% endif %}
+ *  ```
+ *
+ *  The app will update the referrer displayed into dedicated span
+ */
+
+document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
+  let
+    periodId = Number.parseInt(el.dataset.setReferrerAccompanyingPeriodId);
+
+  const url = `/api/1.0/person/accompanying-course/${periodId}/referrers-suggested.json`;
+
+  fetchResults(url).then(suggested => {
+
+    const app = createApp({
+      components: {
+        SetReferrer,
+      },
+      template:
+        '<set-referrer :suggested="suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
+      data() {
+        return {
+          periodId, suggested, original: suggested,
+        }
+      },
+      methods: {
+        onReferrerSet(ref) {
+
+          const bloc = document.querySelector(`[data-accompanying-period-id="${this.periodId}"]`);
+          if (bloc === null) {
+            console.error('bloc not found');
+            return;
+          }
+
+          const label = bloc.querySelector('[data-referrer-text]');
+
+          if (label === null) {
+            console.error('label not found');
+            return;
+          }
+
+          label.textContent = ref.text;
+          label.classList.remove('chill-no-data-statement');
+
+          this.suggested = this.original.filter(user => user.id !== ref.id);
+        }
+      }
+    });
+
+    app.mount(el);
+
+  })
+})

src/Bundle/ChillPersonBundle/Resources/public/page/person_resource/showhide-input.js

@@ -0,0 +1,55 @@
+import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
+
+window.addEventListener('DOMContentLoaded', function() {
+    let
+        personContainer = document.querySelector('#person-entity'),
+        entitySelector = document.querySelector('#entity-selector'),
+        freetextContainer = document.querySelector('#freetext-entity'),
+        thirdpartyContainer = document.querySelector('#thirdparty-entity')
+    ;
+    if (null === entitySelector) {
+        return;
+    }
+
+    new ShowHide({
+        debug: false,
+        load_event: null,
+        froms: [entitySelector],
+        container: [personContainer],
+        test: function(froms, event) {
+            for (let container of froms) {
+                return container.querySelector('input[value="person"]').checked;
+            }
+            console.log('we couldnt find the input');
+            return false;
+        },
+    })
+
+    new ShowHide({
+        debug: false,
+        load_event: null,
+        froms: [entitySelector],
+        container: [thirdpartyContainer],
+        test: function(froms, event) {
+            for (let container of froms) {
+                return container.querySelector('input[value="thirdparty"]').checked;
+            }
+            console.log('we couldnt find the input');
+            return false;
+        },
+    })
+
+    new ShowHide({
+        debug: false,
+        load_event: null,
+        froms: [entitySelector],
+        container: [freetextContainer],
+        test: function(froms, event) {
+            for (let container of froms) {
+                return container.querySelector('input[value="freetext"]').checked;
+            }
+            console.log('we couldnt find the input');
+            return false;
+        },
+    })
+});

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -58,7 +58,11 @@ const store = createStore({
       return state.thirdParties.length > 0;
     },
     getTemplatesAvailablesForEvaluation: (state) => (evaluation) => {
-      return state.templatesAvailablesForEvaluation.get(evaluation.id) || [];
+      if (state.templatesAvailablesForEvaluation.has(evaluation.id)) {
+        return state.templatesAvailablesForEvaluation.get(evaluation.id);
+      }
+
+      return [];
     },
     buildPayload(state) {
       return {
@@ -171,7 +175,6 @@ const store = createStore({
       };
       g.id = tmpIndex() -1
       state.goalsPicked.push(g);
-      //console.log('goals picked ids', state.goalsPicked.map(g => g.id))
     },
     removeGoal(state, goal) {
       state.goalsPicked = state.goalsPicked.filter(g => g.id !== goal.id);
@@ -369,7 +372,6 @@ const store = createStore({
 
       return makeFetch('PUT', url, payload)
         .then(data => {
-          console.log('data received', data);
           if (typeof(callback) !== 'undefined') {
             return callback(data);
           } else {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/colors.js

@@ -0,0 +1,6 @@
+export const lightGreen = '#43b29d';
+export const darkGreen = '#368e7e';
+export const lightBrown = '#a2ac80';
+export const darkBrown = '#929d69';
+export const lightBlue = '#8d9dab';
+export const darkBlue = '#718596';

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js

@@ -2,6 +2,7 @@ import { createStore } from 'vuex'
 import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api'
 import { getHouseholdLabel, getHouseholdWidth, getRelationshipLabel, getRelationshipTitle, getRelationshipDirection, splitId, getGender, getAge } from './vis-network'
 import {visMessages} from "./i18n";
+import { darkBlue, darkBrown, darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -172,8 +173,8 @@ const store = createStore({
                 id: 'relationship_' + splitId(link.id,'id')
                     + '-person_' + link.fromPerson.id + '-person_' + link.toPerson.id,
                 arrows: getRelationshipDirection(link),
-                color: 'lightblue',
-                font: { color: '#33839d' },
+                color: lightGreen,
+                font: { color: darkGreen },
                 dashes: true,
                 label: getRelationshipLabel(link),
                 title: getRelationshipTitle(link),
@@ -316,10 +317,10 @@ const store = createStore({
                     to: `${household.id}`,
                     id: `${household.id}-person_${m.person.id}`,
                     arrows: 'from',
-                    color: 'pink',
-                    font: { color: '#D04A60' },
+                    color: lightBrown,
+                    font: { color: darkBrown },
                     dashes: (getHouseholdWidth(m) === 1)? [0,4] : false,  //edge style:  [dash, gap, dash, gap]
-                    label: getHouseholdLabel(m),
+                    //label: getHouseholdLabel(m),
                     width: getHouseholdWidth(m),
                 })
                 if (!getters.isPersonLoaded(m.person.id)) {
@@ -375,8 +376,8 @@ const store = createStore({
                     to: `${course.id}`,
                     id: `accompanying_period_${splitId(course.id,'id')}-person_${p.person.id}`,
                     arrows: 'from',
-                    color: 'orange',
-                    font: { color: 'darkorange' },
+                    color: lightBlue,
+                    font: { color: darkBlue },
                 })
                 if (!getters.isPersonLoaded(p.person.id)) {
                     dispatch('addMissingPerson', [p.person, course])
@@ -428,8 +429,8 @@ const store = createStore({
                 id: 'relationship_' + splitId(relationship.id,'id')
                     + '-person_' + relationship.fromPerson.id + '-person_' + relationship.toPerson.id,
                 arrows: getRelationshipDirection(relationship),
-                color: 'lightblue',
-                font: { color: '#33839d' },
+                color: lightGreen,
+                font: { color: darkGreen },
                 dashes: true,
                 label: getRelationshipLabel(relationship),
                 title: getRelationshipTitle(relationship),

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -1,4 +1,5 @@
-import { visMessages } from './i18n'
+import { darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
+import { visMessages } from './i18n';
 
 /**
  * Vis-network initial data/configuration script
@@ -15,12 +16,12 @@ window.options = {
     /*
     */
     configure: {
-        enabled: true,
+        enabled: false,
         filter: 'physics',
         showButton: true
     },
     physics: {
-        enabled: true,
+        enabled: false,
         barnesHut: {
             theta: 0.5,
             gravitationalConstant: -2000,
@@ -89,7 +90,7 @@ window.options = {
     edges: {
         font: {
             color: '#b0b0b0',
-            size: 9,
+            size: 14,
             face: 'arial',
             background: 'none',
             strokeWidth: 2, // px
@@ -112,30 +113,30 @@ window.options = {
             },
             color: {
                 border: '#b0b0b0',
-                background: 'rgb(193,229,222)',
+                background: lightGreen,
                 highlight: {
-                    border: '#89c9a9',
-                    background: 'rgb(156,213,203)'
+                    border: '#216458',
+                    background: darkGreen,
                 },
                 hover: {
-                    border: '#89c9a9',
-                    background: 'rgb(156,213,203)'
+                    border: '#216458',
+                    background: darkGreen,
                 }
             },
-            opacity: 0.85,
+            opacity: 0.9,
             shadow:{
                 enabled: true,
                 color: 'rgba(0,0,0,0.5)',
                 size:10,
                 x:5,
-                y:5
+                y:5,
             },
         },
         household: {
-            color: 'pink'
+            color: lightBrown,
         },
         accompanying_period: {
-            color: 'orange',
+            color: lightBlue,
         },
     }
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue

@@ -0,0 +1,51 @@
+<template>
+<ul class="list-suggest add-items" v-if="suggested.length > 0">
+  <li v-for="r in suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
+</ul>
+</template>
+
+<script>
+
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+  name: "SetReferrer",
+  props: {
+   suggested: {
+      type: Array,
+      required: false,
+      //default: [],
+    },
+    periodId: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      /*suggested: [
+        {id: 5, text: 'Robert'}, {id: 8, text: 'Monique'},
+      ]*/
+    }
+  },
+  emits: ['referrerSet'],
+  methods: {
+    setReferrer: function(ref) {
+      const url = `/api/1.0/person/accompanying-course/${this.periodId}.json`;
+      const body = { type: "accompanying_period", user: { id: ref.id, type: ref.type }};
+
+      return makeFetch('PATCH', url, body)
+          .then((response) => {
+            this.$emit('referrerSet', ref);
+          })
+          .catch((error) => {
+            throw error;
+          })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -77,7 +77,10 @@
                     <h4 class="item-key visually-hidden">{{ 'Pinned comment'|trans }}</h4>
                     <blockquote class="chill-user-quote">
                         <i class="fa fa-flag float-end text-chill-gray" title="{{ 'pinned'|trans }}"></i>
-                        {{ accompanyingCourse.pinnedComment.content|chill_markdown_to_html }}
+                        {{ accompanyingCourse.pinnedComment.content|u.truncate(250, '…', false)|chill_markdown_to_html }}
+                        {% if accompanyingCourse.pinnedComment.content|length > 250 %}
+                            <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_comment_list', {'accompanying_period_id': accompanyingCourse.id}) }}">{{ 'Read more'|trans }}</a>
+                        {% endif %}
                         <div class="metadata">
                             {{ 'Last updated by'| trans }}
                             <span class="user">
@@ -148,14 +151,14 @@
                     {% if accompanyingCourse.requestorPerson is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p class="blur">{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
+                            <div class="confidential"><p>{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
                         {% endif %}
                     {% elseif accompanyingCourse.requestorThirdParty is not null %}
                         <h4 class="item-key">{{ 'Requestor'|trans }}</h4>
                         {% if accompanyingCourse.requestorAnonymous %}
-                            <div class="confidential"><p class="blur">{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
+                            <div class="confidential"><p>{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
                         {% else %}
                             {{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
                         {% endif %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig

@@ -1,4 +1,4 @@
-<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}">
+<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass|raw }}{% endif %}" data-accompanying-period-id="{{ period.id|e('html_attr') }}">
     <div class="item-row">
         <div class="wrap-header">
             <div class="wh-row">
@@ -43,11 +43,12 @@
                 </div>
                 <div class="wh-col">
                     {% if chill_accompanying_periods.fields.user == 'visible'  %}
+                        {# the tags `data-referrer-text` is used by module `@ChillPerson/mod/AccompanyingPeriod/setReferrer.js` #}
                         {% if period.user %}
                             <abbr class="referrer" title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans }}:</abbr>
-                            {{ period.user|chill_entity_render_box }}
+                            <span data-referrer-text="data-referrer-text">{{ period.user|chill_entity_render_box }}</span>
                         {% else %}
-                            <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
+                            <span class="chill-no-data-statement" data-referrer-text="data-referrer-text">{{ 'No accompanying user'|trans }}</span>
                         {% endif %}
                     {% endif %}
                 </div>

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/create.html.twig

@@ -0,0 +1,15 @@
+<div class="col-md col-xxl">
+    <div id="collapseForm" class="{% if not form.vars.submitted %}collapse{% endif %}">
+        <h3 style="margin-bottom: 2rem;">{{ 'Add a person resource'|trans }}</h3>
+        {% include "@ChillPerson/PersonResource/form.html.twig" %}
+    </div>
+
+    <ul class="record_actions sticky-form-buttons">
+        <li>
+            <button class="btn btn-primary btn-create change-icon" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
+                {{ 'Add a person resource'|trans }}
+            </button>
+        </li>
+    </ul>
+
+</div>

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/delete.html.twig

@@ -0,0 +1,17 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = 'chill_person_resource_list' %}
+{# {% set person = person %} #}
+
+{% block title  'Remove resource'|trans %}
+
+{% block personcontent %}
+{{ include('@ChillMain/Util/confirmation_template.html.twig',
+    {
+        'title'             : 'Remove resource'|trans,
+        'confirm_question'  : 'Are you sure you want to remove the resource for "%name%" ?'|trans({ '%name%' : person.firstname ~ ' ' ~ person.lastname } ),
+        'cancel_route'      : 'chill_person_resource_list',
+        'cancel_parameters' : { 'person_id' : person.id },
+        'form'              : form
+    } ) }}
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/edit.html.twig

@@ -0,0 +1,23 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = 'chill_person_resource_edit' %}
+
+{% block js %}
+    {{ encore_entry_script_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block title %}{{ 'edit resource'|trans|capitalize }}{% endblock %}
+
+{% block personcontent %}
+
+<h1 style="margin-bottom: 2rem;">{{ 'edit resource'|trans }}</h1>
+
+{% include "@ChillPerson/PersonResource/form.html.twig" %}
+
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/form.html.twig

@@ -0,0 +1,77 @@
+{{ form_start(form, {'attr' : {'id' : 'create-form'}}) }}
+{{ form_errors(form) }}
+{{ form_row(form.kind) }}
+    <div id="linked-entity">
+        <fieldset class="mb-3">
+            <div class="row">
+                <legend class="col-sm-4 col-form-label">Associer un</legend>
+                <div class="col-sm-8">
+                    <div id="entity-selector">
+                        <div class="form-check">
+                            {% if resource is defined and resource.person is not null %}
+                                <input checked type="radio" id="chill_personbundle_person_resource_linkedEntity_0" name="linked-entity" class="form-check-input" value="person" {% if form.vars.submitted and app.request.request.get('linked-entity', null) == 'person' %}checked{% endif %}/>
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_0">Usager</label>
+                            {% else %}
+                                <input type="radio" id="chill_personbundle_person_resource_linkedEntity_0" name="linked-entity" class="form-check-input" value="person" />
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_0">Usager</label>
+                            {% endif %}
+                        </div>
+                        <div class="form-check">
+                            {% if resource is defined and resource.thirdparty is not null %}
+                                <input checked type="radio" id="chill_personbundle_person_resource_linkedEntity_1" name="linked-entity" class="form-check-input" value="thirdparty" {% if form.vars.submitted and app.request.request.get('linked-entity', null) == 'thirdparty' %}checked{% endif %}/>
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_1">Tiers</label>
+                            {% else %}
+                                <input type="radio" id="chill_personbundle_person_resource_linkedEntity_1" name="linked-entity" class="form-check-input" value="thirdparty" />
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_1">Tiers</label>
+                            {% endif %}
+                        </div>
+                        <div class="form-check">
+                            {% if resource is defined and resource.freeText is not null %}
+                                <input checked type="radio" id="chill_personbundle_person_resource_linkedEntity_2" name="linked-entity" class="form-check-input" value="freetext" {% if form.vars.submitted and app.request.request.get('linked-entity', null) == 'thirdparty' %}checked{% endif %}/>
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_2">Description libre</label>
+                            {% else %}
+                                <input type="radio" id="chill_personbundle_person_resource_linkedEntity_2" name="linked-entity" class="form-check-input" value="freetext" />
+                                <label class="form-check-label" for="chill_personbundle_person_resource_linkedEntity_2">Description libre</label>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+
+
+    <div id="person-entity">
+        {{ form_row(form.person) }}
+    </div>
+    <div id="thirdparty-entity">
+        {{ form_row(form.thirdparty) }}
+    </div>
+    <div id="freetext-entity">
+        {{ form_row(form.freetext) }}
+    </div>
+
+
+{{ form_row(form.comment) }}
+
+{% if action is defined %}
+    <ul class="record_actions sticky-form-buttons">
+        <li class="edit">
+            <button class="btn btn-edit"
+            type="submit" id="newPersonResource">
+                {{ 'edit resource'|trans|capitalize }}
+            </button>
+        </li>
+    </ul>
+{% else %}
+    <ul class="record_actions">
+        <li>
+            <button class="btn btn-create"
+            type="submit" id="newPersonResource">
+                {{ 'Save'|trans }}
+            </button>
+        </li>
+    </ul>
+{% endif %}
+
+{{ form_end(form) }}

src/Bundle/ChillPersonBundle/Resources/views/PersonResource/list.html.twig

@@ -0,0 +1,89 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = 'chill_person_resource_list' %}
+
+{% block title %}{{ 'Person resources'|trans|capitalize ~ ' ' ~ person|chill_entity_render_string }}{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('page_person_resource_showhide_input') }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block personcontent %}
+
+<h1>{{ 'List of resources'|trans }}</h1>
+
+{% if personResources|length > 0 %}
+    <div class="flex-table">
+        {% for resource in personResources %}
+            <div class="item-bloc">
+                <div class="item-row">
+                    <div class="item-col">
+                    {% if resource.person is not null %}
+                        <div class="denomination h3">
+                            <span class="name">{{ resource.person }}</span>
+                            <span class="badge rounded-pill bg-person">{{ 'person'|trans|capitalize }}</span>
+                        </div>
+                    {% elseif resource.thirdparty is not null %}
+                        <div class="denomination h3">
+                            <span class="name">{{ resource.thirdparty }}</span>
+                            <span class="badge rounded-pill bg-thirdparty">
+                                {{ 'thirdparty'|trans|capitalize }}
+                                <i class="fa fa-fw fa-user-md"></i>
+                            </span>
+                        </div>
+                    {% else %}
+                        <div class="denomination h3">
+                            <span>{{ resource.freetext }}</span>
+                        </div>
+                    {% endif %}
+                    </div>
+                    <div class="item-col">
+                        {% if resource.kind %}
+                        <span>{{ resource.kind.title.fr|capitalize }}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                {% if resource.comment.comment is not empty %}
+                    <div class="item-row separator">
+                        <section class="chill-entity entity-comment-embeddable">
+                            <div>{{ resource.comment|chill_entity_render_box }}<div>
+                        </section>
+                    </div>
+                {% endif %}
+                {% if is_granted('CHILL_PERSON_UPDATE', resource.person) %}
+                    <div class="item-row separator">
+                        <div class="item-col">
+                            <ul class="record_actions">
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_person_resource_edit', {'resource_id': resource.id,
+                                                    'person_id': person.id,}) }}"
+                                                    class="btn btn-sm btn-edit"
+                                                    title="{{ 'Edit'|trans }}"></a>
+                                </li>
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_person_resource_delete', {'person_id': person.id,
+                                                    'resource_id': resource.id}) }}"
+                                        class="btn btn-sm btn-delete"
+                                        title="{{ 'Delete'|trans }}"></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+
+{% else %}
+    <p class="chill-no-data-statement">{{ 'There are no available resources'|trans }}</p>
+{% endif %}
+
+{% include "@ChillPerson/PersonResource/create.html.twig" %}
+
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/_form.html.twig

@@ -0,0 +1,37 @@
+
+
+{{ form_start(form) }}
+
+{{ form_row(form.startDate) }}
+{{ form_row(form.endDate) }}
+
+{% if form.hostPerson is defined %}
+    {{ form_row(form.hostPerson) }}
+{% endif %}
+
+{% if form.hostThirdParty is defined %}
+    {{ form_row(form.hostThirdParty) }}
+{% endif %}
+
+{% if form.address is defined %}
+    {{ form_row(form.address) }}
+
+    {% block js %}
+    {{ encore_entry_script_tags('mod_input_address') }}
+    {% endblock %}
+
+    {% block css %}
+        {{ encore_entry_link_tags('mod_input_address') }}
+    {% endblock %}
+{% endif %}
+
+{{ form_row(form.comment) }}
+
+
+<ul class="record_actions sticky-form-buttons">
+    <li>
+        <button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
+    </li>
+</ul>
+
+{{ form_end(form) }}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/delete.html.twig

@@ -0,0 +1,58 @@
+{% extends "@ChillPerson/Person/layout.html.twig" %}
+
+{% set activeRouteKey = '' %}
+
+{% block title %}{{ 'Delete residential address'|trans }}{% endblock %}
+
+{% block personcontent %}
+<div class="address-new">
+
+    <h1>{{ block('title') }}</h1>
+    {% set a = residentialAddress %}
+    <ul class="list-content fa-ul">
+        {% if a.hostPerson is not null %}
+        <li>
+            <i class="fa fa-li fa-home"></i>
+            <span class="item-key">{{ "Address of"|trans}} </span>
+            <span class="chill-entity entity-person badge-person">{{ a.hostPerson|chill_entity_render_box }}</span>
+        </li>
+        <li>
+            {% set address_date = date(a.startDate|date("m/d/Y")) %}
+            {% if a.hostPerson.getCurrentHouseholdAddress(a.endDate) is not null %}
+                <i class="fa fa-li fa-map-marker"></i>
+                {{ a.hostPerson.getCurrentHouseholdAddress(a.endDate)|chill_entity_render_box }}
+            {% endif %}
+        </li>
+        {% elseif a.hostThirdParty is not null %}
+        <li>
+            <i class="fa fa-li fa-home"></i>
+            <span class="item-key">{{ "Address of"|trans}}</span>
+            <span class="chill-entity entity-person badge-person">{{ a.hostThirdParty|chill_entity_render_box }}</span>
+        </li>
+        <li>
+            {% if a.hostThirdParty.address is not null %}
+                <i class="fa fa-li fa-map-marker"></i>
+                {{ a.hostThirdParty.address|chill_entity_render_box }}
+            {% endif %}
+        </li>
+        {% else %}
+        <li>
+            {% if a.address is not null %}
+                <i class="fa fa-li fa-map-marker"></i>
+                {{ a.address|chill_entity_render_box }}
+            {% endif %}
+            {% endif %}
+        </li>
+    </ul>
+
+    {{ include('@ChillMain/Util/confirmation_template.html.twig',
+        {
+            'title'             : 'Delete residential address ?'|trans,
+            'confirm_question'  : 'Are you sure you want to remove this residential address for %name% ?'|trans({'%name%': person|chill_entity_render_string }),
+            'cancel_route'      : 'chill_person_residential_address_list',
+            'cancel_parameters' : {'id' : person.Id},
+            'form'              : delete_form
+        } ) }}
+
+</div>
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/edit.html.twig

@@ -0,0 +1,51 @@
+{% extends "@ChillPerson/Person/layout.html.twig" %}
+
+{% set activeRouteKey = '' %}
+
+{% block title 'Edit a residential address'|trans %}
+
+{% block personcontent %}
+<div class="address-edit">
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+
+        {{ form_start(form) }}
+
+        {{ form_row(form.startDate) }}
+        {{ form_row(form.endDate) }}
+
+        {% if residentialAddress.address is not null %}
+
+            {% if form.address is defined %}
+                {{ form_row(form.address) }}
+
+                {% block js %}
+                {{ encore_entry_script_tags('mod_input_address') }}
+                {% endblock %}
+
+                {% block css %}
+                    {{ encore_entry_link_tags('mod_input_address') }}
+                {% endblock %}
+            {% endif %}
+        {% endif %}
+
+        {{ form_row(form.comment) }}
+
+        <ul class="record_actions sticky-form-buttons">
+            <li class="cancel">
+                <a href="{{ chill_path_add_return_path('chill_person_residential_address_list', {'id': person.id}) }}" class="btn btn-cancel">
+                    {{ 'Cancel'|trans|chill_return_path_label }}
+                </a>
+            </li>
+            <li>
+                <button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
+            </li>
+        </ul>
+
+        {{ form_end(form) }}
+
+    {% endblock %}
+
+</div>
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/list.html.twig

@@ -0,0 +1,116 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = '' %}
+
+{% block title %}{{ 'Residential addresses history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}{% endblock %}
+
+{% block personcontent %}
+<div class="person-address">
+
+    <h1>{{ 'Residential addresses history'|trans }}</h1>
+
+    {% if is_granted('CHILL_PERSON_SEE', person) %}
+
+        {% if addresses|length == 0 %}
+            <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+
+        {% else %}
+            <div class="flex-table">
+            {% for a in addresses %}
+
+                {% if a.address is not null %}
+                    {% set kind = 'address' %}
+                {% else %}
+                    {% set kind = null %}
+                {% endif %}
+
+                <div class="item-bloc">
+                    <div class="item-row">
+
+                        <div class="item-col" style="width: 33%;">
+                            <ul class="list-unstyled h3">
+                                {% if a.endDate is not null %}
+                                <li><span class="item-key">{{'Since'|trans}} : </span>{{ a.startDate|format_date('long') }}</li>
+                                {% endif %}
+                                <li><span class="item-key">{{'Until'|trans}} : </span><b>{{ a.endDate|format_date('long') }}</b></li>
+                            </ul>
+                        </div>
+                        <div class="item-col flex-column justify-content-start">
+                            <div class="float-button top">
+                                <div class="box">
+                                    <div class="action">
+                                        {% if is_granted('CHILL_PERSON_UPDATE', person) %}
+                                            <a href="{{ path('chill_person_residential_address_edit', { 'id' : a.id, 'kind' : kind } ) }}" class="btn btn-update" title="{{ 'Update'|trans|e('html_attr') }}"></a>
+                                            <a href="{{ path('chill_person_residential_address_delete', { 'id' : a.id, 'kind' : kind } ) }}" class="btn btn-delete" title="{{ 'Delete'|trans|e('html_attr') }}"></a>
+                                        {% endif %}
+                                    </div>
+                                    <ul class="list-content fa-ul">
+                                        {% if a.hostPerson is not null %}
+                                        <li>
+                                            <i class="fa fa-li fa-home"></i>
+                                            <span class="item-key">{{ "Address of"|trans}} </span>
+                                            <span class="chill-entity entity-person badge-person">{{ a.hostPerson|chill_entity_render_box }}</span>
+                                        </li>
+                                        <li>
+                                            {% set address_date = date(a.startDate|date("m/d/Y")) %}
+                                            {% if a.hostPerson.getCurrentHouseholdAddress(a.endDate) is not null %}
+                                                <i class="fa fa-li fa-map-marker"></i>
+                                                {{ a.hostPerson.getCurrentHouseholdAddress(a.endDate)|chill_entity_render_box }}
+                                            {% endif %}
+                                        </li>
+                                        {% elseif a.hostThirdParty is not null %}
+                                        <li>
+                                            <i class="fa fa-li fa-home"></i>
+                                            <span class="item-key">{{ "Address of"|trans}}</span>
+                                            <span class="chill-entity entity-person badge-person">{{ a.hostThirdParty|chill_entity_render_box }}</span>
+                                        </li>
+                                        <li>
+                                            {% if a.hostThirdParty.address is not null %}
+                                            <i class="fa fa-li fa-map-marker"></i>
+                                            {{ a.hostThirdParty.address|chill_entity_render_box }}
+                                            {% endif %}
+                                        </li>
+                                        {% else %}
+                                        <li>
+                                            {% if a.address is not null %}
+                                                <i class="fa fa-li fa-map-marker"></i>
+                                                {{ a.address|chill_entity_render_box }}
+                                            {% endif %}
+                                        {% endif %}
+                                        </li>
+                                    </ul>
+                                    <div class="item-row">
+                                        {% if not a.comment.isEmpty %}
+                                            {{ a.comment|chill_entity_render_box }}
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            {% endfor %}
+            </div>
+        {% endif %}
+
+
+    {% endif %}
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="btn btn-cancel">
+                {{ 'Back to the person details'|trans }}
+            </a>
+        </li>
+        {% if is_granted('CHILL_PERSON_UPDATE', person) %}
+        <li>
+            <a class="btn btn-create"
+                href="{{ path('chill_person_residential_address_new', { 'id' : person.id } ) }}">
+                {{ 'Add a residential address'|trans }}
+            </a>
+        </li>
+        {% endif %}
+    </ul>
+</div>
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/new.html.twig

@@ -0,0 +1,29 @@
+{% extends "@ChillPerson/Person/layout.html.twig" %}
+
+{% set activeRouteKey = '' %}
+
+{% block title %}{{ 'New residential address'|trans }}{% endblock %}
+
+{% block personcontent %}
+<div class="address-new">
+
+    {% block content %}
+        <h1>{{ block('title') }}</h1>
+
+        {# TODO #}
+        {% block form %}
+            {% include '@ChillPerson/ResidentialAddress/_form.html.twig' %}
+        {% endblock %}
+
+    {% endblock %}
+
+</div>
+{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/new_pick_kind.html.twig

@@ -0,0 +1,49 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% block title 'Which kind of residential address would you create ?'|trans %}
+
+{% block content %}
+<div class="col-10 centered">
+    <h1>{{ block('title') }}</h1>
+
+    <div class="container" style="margin-top: 2rem;">
+        <div class="row">
+           <div class="col-md-4 mb-4">
+               <a
+                   href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'person'}) }}"
+                   class="btn btn-outline-chill-green-dark">
+                   {{ 'The address of another person'|trans }}
+               </a>
+           </div>
+           <div class="col-md-8">
+               <p>{{ 'residential_address_person_explanation'|trans  }}</p>
+           </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4 mb-4">
+                <a
+                    href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'thirdparty'}) }}"
+                    class="btn btn-outline-chill-green-dark">
+                    {{ 'The address of a third party'|trans }}
+                </a>
+            </div>
+            <div class="col-md-8">
+                <p>{{ 'residential_address_third_party_explanation'|trans  }}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4 mb-4">
+                <a
+                    href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'address'}) }}"
+                    class="btn btn-outline-chill-green-dark">
+                    {{ 'A new address'|trans }}
+                </a>
+            </div>
+            <div class="col-md-8">
+                <p>{{ 'residential_address_new_address_explanation'|trans  }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}