Merge remote-tracking branch 'origin/master' into issue505_create_household_composition

2025-06-07 18:44:08 +00:00 · 2022-03-14 13:35:43 +01:00 · 2022-03-14 13:35:43 +01:00 · b590444375
commit b590444375
parent fb1552f6b7 873258fc84
25 changed files with 385 additions and 118 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -11,6 +11,9 @@ and this project adheres to
 ## Unreleased

 <!-- write down unreleased development here -->
+* [person] order accompanying period by opening date in search persons, person and household period lists (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/493)
+* [parcours] autosave of the pinned comment for draft accompanying course (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/477)
+* [main] filter user job in undispatch acc period to assign (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/472)
 * [main] filter user job in undispatch acc period to assign (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/472)
 * [person] Add url in accompanying period work evaluations entity and form (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/476)
 * [person] Add document generation in admin and in person/{id}/document (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/464)
@ -30,14 +33,18 @@ and this project adheres to
 * [confidential] Fix position of toggle button so it does not cover text nor fall outside of box (no issue)
 * [parcours] Fix edit of both thirdparty and contact name (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/474)
 * [template] do not list inactive templates (for doc generator)
+* [household] bugfix if position of member is null, renderbox no longer throws an error (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/480)
 * [parcours] location cannot be removed if linked to a user (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/478)
 * [person] email added to twig personRenderbox (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/490)
 * [person] Add link to current household in person banner (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/484)
+* [address] person badge in address history changed to open OnTheFly with all person info (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/489)
 * [person] Change 'personne' with 'usager' and '&' with 'ET' (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/499)
 * [thirdparty] Add parameter condition to display centers or not (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/500)
 * [phonenumber] Remove placeholder in phonenumber field (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/496)
+* [person_resource] separate create page created to avoid confusion (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/504)
 * [contact] add contact button color changed plus the pipe at the side removed (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/506)
 * [household] create-edit household composition placed in separate page to avoid confusion (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/505)
+* [blur] Improved positioning of toggle icon (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/486)

 ## Test releases

--- a/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
@ -1,17 +1,22 @@
 /**
 * Generic api method that can be adapted to any fetch request
 */
-const makeFetch = (method, url, body) => {
-    return fetch(url, {
+const makeFetch = (method, url, body, options) => {
+    let opts = {
        method: method,
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: (body !== null) ? JSON.stringify(body) : null
-    })
+    };
+
+    if (typeof options !== 'undefined') {
+        opts = Object.assign(opts, options);
+    }
+
+    return fetch(url, opts)
    .then(response => {
        if (response.ok) {
-            console.log('200 error')
            return response.json();
        }

--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/blur.scss
@ -1,37 +1,26 @@
 .confidential {
    display: flex;
    position: relative;
-}
-.toggle-far-twig {
-    i {
-        bottom: 0px;
-        right: -30px;
-    }
+    margin-right: 20px
 }

-.toggle-close-twig {
-    i {
-        bottom: 0px;
-        right: -5px;
-    }
+.toggle-container {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    z-index: 5;
+    padding-right: 1rem;
 }
 .toggle{
-    margin-left: 30px;
-    margin-top: 5px;
-    cursor: pointer;
    position: absolute;
-    z-index: 5;
-    right: -30px
-}
-
-.toggle-far {
-    bottom: 0px;
-    right: 20px !important;
-}
-
-.toggle-close {
-    bottom: 125px;
-    right: 15px !important;
+    right: 4px;
+    &-twig {
+        position: absolute;
+        right: -25px;
+        bottom: 20px;
+    }
 }

 .blur {
--- a/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/blur/index.js
@ -2,17 +2,18 @@ require('./blur.scss');

 document.querySelectorAll('.confidential').forEach(function (el) {
    let i = document.createElement('i');
-    const classes = ['fa', 'fa-eye', 'toggle'];
+    const classes = ['fa', 'fa-eye-slash', 'toggle-twig'];
    i.classList.add(...classes);
    el.appendChild(i);
+
    const toggleBlur = function(e) {
        for (let child of el.children) {
-            if (!child.classList.contains('toggle')) {
+            if (!child.classList.contains('toggle-twig')) {
                child.classList.toggle('blur');
            }
        }
-        i.classList.toggle('fa-eye');
        i.classList.toggle('fa-eye-slash');
+        i.classList.toggle('fa-eye');
    }
    i.addEventListener('click', toggleBlur);
    toggleBlur();
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
@ -22,6 +22,7 @@ const fetchCountries = () => {
 */
 const fetchCities = (country) => {
   //console.log('<<< fetching cities for', country);
+    // warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
   const url = `/api/1.0/main/postal-code.json?item_per_page=1000&country=${country.id}`;
   return fetch(url)
      .then(response => {
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@ -3,8 +3,8 @@
        <div :class="{ 'blur': isBlurred }">
            <slot name="confidential-content"></slot>
        </div>
-        <div>
-            <i class="fa fa-eye toggle" :class="positionBtn" aria-hidden="true" @click="toggleBlur"></i>
+        <div class="toggle-container">
+            <i class="fa toggle" :class="toggleIcon" aria-hidden="true" @click="toggleBlur"></i>
        </div>
    </div>
 </template>
@ -12,28 +12,24 @@
 <script>
 export default {
    name: "Confidential",
-    props: ['positionBtnFar'],
    data() {
        return {
            isBlurred: true,
+            toggleIcon: 'fa-eye',
        };
    },
    methods : {
        toggleBlur() {
            console.log(this.positionBtnFar);
            this.isBlurred = !this.isBlurred;
+            this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
        },
    },
-    computed: {
-        positionBtn() {
-            return this.positionBtnFar ? 'toggle-far' : 'toggle-close'
-        }
-    }
 }
 </script>

 <style scoped lang='scss'>
    .confidential{
-        align-items: center;
+        align-content: center;
    }
 </style>
--- a/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
@ -59,7 +59,7 @@
    must be shown in such list
 #}
 {%- if render == 'list' -%}
-    <li class="chill-entity entity-address {% if address.confidential %} confidential toggle-far-twig {% endif %}">
+    <li class="chill-entity entity-address {% if address.confidential %} confidential {% endif %}">
        {% if options['with_picto'] %}
            <i class="fa fa-li fa-map-marker"></i>
        {% endif %}
@ -68,7 +68,7 @@
 {%- endif -%}

 {%- if render == 'inline' -%}
-    <span class="chill-entity entity-address {% if address.confidential %} confidential toggle-far-twig {% endif %}">
+    <span class="chill-entity entity-address {% if address.confidential %} confidential {% endif %}">
        {% if options['with_picto'] %}
            <i class="fa fa-fw fa-map-marker"></i>
        {% endif %}
@ -77,7 +77,7 @@
 {%- endif -%}

 {%- if render == 'bloc' -%}
-    <div class="chill-entity entity-address {% if address.confidential %} confidential toggle-close-twig {% endif %}">
+    <div class="chill-entity entity-address {% if address.confidential %} confidential {% endif %}">
        {% if options['has_no_address'] == true and address.isNoAddress == true %}
            {% if address.postCode is not empty %}
            <div class="address{% if options['multiline'] %} multiline{% endif %}{% if options['with_delimiter'] %} delimiter{% endif %}">
--- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingPeriodController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/AccompanyingPeriodController.php
@ -222,6 +222,10 @@ class AccompanyingPeriodController extends AbstractController
        $accompanyingPeriodsRaw = $this->accompanyingPeriodACLAwareRepository
            ->findByPerson($person, AccompanyingPeriodVoter::SEE);

+        usort($accompanyingPeriodsRaw, static function ($a, $b) {
+            return $b->getOpeningDate() > $a->getOpeningDate();
+        });
+
        // filter visible or not visible
        $accompanyingPeriods = array_filter($accompanyingPeriodsRaw, function (AccompanyingPeriod $ap) {
            return $this->isGranted(AccompanyingPeriodVoter::SEE, $ap);
--- a/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/HouseholdController.php
@ -78,6 +78,10 @@ class HouseholdController extends AbstractController
            }
        }

+        usort($accompanyingPeriods, static function ($a, $b) {
+            return $b->getOpeningDate() > $a->getOpeningDate();
+        });
+
        $oldMembers = $household->getNonCurrentMembers();
        $accompanyingPeriodsOld = [];

--- a/src/Bundle/ChillPersonBundle/Controller/PersonResourceController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/PersonResourceController.php
@ -133,6 +133,19 @@ final class PersonResourceController extends AbstractController
        $personResources = [];
        $personResources = $this->personResourceRepository->findBy(['personOwner' => $personOwner->getId()]);

+        return $this->render(
+            'ChillPersonBundle:PersonResource:list.html.twig',
+            [
+                'person' => $personOwner,
+                'personResources' => $personResources,
+            ]
+        );
+    }
+
+    public function newAction(Request $request, $person_id)
+    {
+        $personOwner = $this->personRepository->find($person_id);
+
        $form = $this->createForm(PersonResourceType::class);

        $form->handleRequest($request);
@ -165,11 +178,10 @@ final class PersonResourceController extends AbstractController
        }

        return $this->render(
-            'ChillPersonBundle:PersonResource:list.html.twig',
+            'ChillPersonBundle:PersonResource:create.html.twig',
            [
-                'person' => $personOwner,
-                'personResources' => $personResources,
                'form' => $form->createView(),
+                'person' => $personOwner,
            ]
        );
    }
--- a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
+++ b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
@ -15,6 +15,7 @@ use Chill\MainBundle\DependencyInjection\MissingBundleException;
 use Chill\MainBundle\Security\Authorization\ChillExportVoter;
 use Chill\PersonBundle\Controller\HouseholdCompositionTypeApiController;
 use Chill\PersonBundle\Doctrine\DQL\AddressPart;
+use Chill\PersonBundle\Security\Authorization\AccompanyingPeriodCommentVoter;
 use Chill\PersonBundle\Security\Authorization\AccompanyingPeriodResourceVoter;
 use Chill\PersonBundle\Security\Authorization\AccompanyingPeriodVoter;
 use Chill\PersonBundle\Security\Authorization\PersonVoter;
@ -415,6 +416,25 @@ class ChillPersonExtension extends Extension implements PrependExtensionInterfac
                        ],
                    ],
                ],
+                [
+                    'class' => \Chill\PersonBundle\Entity\AccompanyingPeriod\Comment::class,
+                    'name' => 'accompanying_period_comment',
+                    'base_path' => '/api/1.0/person/accompanying-period/comment',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => false,
+                                Request::METHOD_PATCH => true,
+                                Request::METHOD_HEAD => false,
+                                Request::METHOD_DELETE => false,
+                            ],
+                            'roles' => [
+                                Request::METHOD_PATCH => AccompanyingPeriodCommentVoter::EDIT,
+                            ],
+                        ],
+                    ],
+                ],
                [
                    'class' => \Chill\PersonBundle\Entity\AccompanyingPeriod\Resource::class,
                    'name' => 'accompanying_period_resource',
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
@ -257,9 +257,11 @@ class AccompanyingPeriod implements

    /**
     * @ORM\ManyToOne(
-     *     targetEntity=Comment::class
+     *     targetEntity=Comment::class,
+     *     cascade={"persist"},
     * )
     * @Groups({"read"})
+     * @ORM\JoinColumn(onDelete="SET NULL")
     */
    private ?Comment $pinnedComment = null;

--- a/src/Bundle/ChillPersonBundle/Entity/Person.php
+++ b/src/Bundle/ChillPersonBundle/Entity/Person.php
@ -109,6 +109,7 @@ class Person implements HasCenterInterface, TrackCreationInterface, TrackUpdateI
     * @ORM\OneToMany(targetEntity=AccompanyingPeriodParticipation::class,
     *     mappedBy="person",
     * cascade={"persist", "remove", "merge", "detach"})
+     * @ORM\OrderBy({"startDate" = "DESC"})
     */
    private $accompanyingPeriodParticipations;

--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
@ -33,6 +33,8 @@ div.banner {
        padding-top: 1em;
        padding-bottom: 1em;
        div.contact {
+            display: flex;
+            align-content: center;
            & > * {
                margin-right: 1em;
            }
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@ -14,24 +14,27 @@

            <ckeditor
               name="content"
-               v-bind:placeholder="$t('comment.content')"
+               :placeholder="$t('comment.content')"
               :editor="editor"
               v-model="content"
               tag-name="textarea">
            </ckeditor>

-            <div v-if="pinnedComment" class="metadata">
+            <div class="sub-comment">
+               <div v-if="pinnedComment !== null && typeof pinnedComment.creator !== 'undefined'" class="metadata">
                  {{ $t('comment.created_by', [
                        pinnedComment.creator.text,
-               $d(pinnedComment.createdAt.datetime, 'long')
-            ]) }}
+                        $d(pinnedComment.updatedAt.datetime, 'long')
+                     ])
+                  }}
+               </div>
+               <div class="loading">
+                  <i v-if="loading" class="fa fa-circle-o-notch fa-spin" :title="$t('loading')"></i>
+               </div>
            </div>

            <div>
               <ul class="record_actions">
-                  <li>
-                     <button type="submit" class="btn btn-save">{{ $t('action.save') }}</button>
-                  </li>
                  <li v-if="pinnedComment !== null">
                     <a class="btn btn-delete"
                        @click="removeComment">
@ -50,6 +53,7 @@
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+import { mapState } from "vuex";

 export default {
   name: "Comment",
@ -59,22 +63,58 @@ export default {
   data() {
      return {
         editor: ClassicEditor,
-         formdata: {
-            type: "accompanying_period_comment",
-            content: ''
-         }
+         loading: false,
+         lastRecordedContent: null,
      }
   },
   computed: {
-      pinnedComment() {
-         return this.$store.state.accompanyingCourse.pinnedComment;
-      },
+      ...mapState({
+         pinnedComment: state => state.accompanyingCourse.pinnedComment,
+      }),
      content: {
         set(value) {
-            this.formdata.content = value;
+           console.log('new comment value', value);
+            console.log('previous value', this.lastRecordedContent);
+            this.lastRecordedContent = value;
+
+           setTimeout(() => {
+               console.log('performing test on ', value);
+               if (this.lastRecordedContent === value) {
+                 this.loading = true;
+                 if (value !== '') {
+                   this.$store.dispatch('updatePinnedComment', value)
+                       .then(() => {
+                         this.loading = false;
+                       })
+                       .catch(({name, violations}) => {
+                         if (name === 'ValidationException' || name === 'AccessException') {
+                           violations.forEach((violation) => this.$toast.open({message: violation}));
+                         } else {
+                           this.$toast.open({message: 'An error occurred'})
+                         }
+                       });
+                 } else {
+                   if (this.$store.state.accompanyingCourse.pinnedComment !== null) {
+                     this.$store.dispatch('removePinnedComment', {id: this.pinnedComment.id})
+                         .then(() => {
+                           this.loading = false;
+                           this.lastRecoredContent = null;
+                         })
+                         .catch(({name, violations}) => {
+                           if (name === 'ValidationException' || name === 'AccessException') {
+                             violations.forEach((violation) => this.$toast.open({message: violation}));
+                           } else {
+                             this.$toast.open({message: 'An error occurred'})
+                           }
+                         });
+                   }
+                 }
+               }
+           }, 3000);
+
         },
        get() {
-            return (this.pinnedComment)? this.pinnedComment.content : {};
+          return this.pinnedComment ? this.pinnedComment.content : '';
         }
      },
      errors() {
@ -82,18 +122,11 @@ export default {
      }
   },
   methods: {
-      submitform() {
-         this.$store.dispatch('postFirstComment', this.formdata)
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
+      onContentChange() {
+         let lastRecordedContent = this.formData.content;
      },
      removeComment() {
-         this.$store.dispatch('postFirstComment', {})
+         this.$store.dispatch('removePinnedComment', {id: this.pinnedComment.id})
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
@ -104,15 +137,18 @@ export default {
      }
   }
 }
-/*
-* TODO
-* - [x] delete button in ul record_actions, but not in form
-* - [ ] display updatedAt => pinnedComment fetch PATCH content changes MUST NOT change object id !!
-*/
 </script>

 <style lang="scss">
 div.ck-editor.ck-reset {
   margin: 0.6em 0;
 }
+div.sub-comment {
+   display: flex;
+   justify-content: space-between;
+   div.loading {
+      margin-right: 6px;
+      margin-left: 6px;
+   }
+}
 </style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@ -9,7 +9,7 @@
         <input type="checkbox" v-model="requestorIsAnonymous" class="me-2" />
         {{ $t('requestor.is_anonymous') }}
      </label>
-      <confidential :positionBtn="false" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+      <confidential v-if="accompanyingCourse.requestor.type === 'thirdparty'">
         <template v-slot:confidential-content>
            <third-party-render-box
               :thirdparty="accompanyingCourse.requestor"
@ -33,7 +33,7 @@
         </template>
      </confidential>

-      <confidential :positionBtnFar="false" v-else-if="accompanyingCourse.requestor.type === 'person'">
+      <confidential v-else-if="accompanyingCourse.requestor.type === 'person'">
         <template v-slot:confidential-content>
            <person-render-box render="bloc"
               :person="accompanyingCourse.requestor"
@ -339,5 +339,6 @@ div.flex-table {

 .confidential {
   display: block;
+   margin-right: 0px !important;
 }
 </style>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@ -122,7 +122,7 @@ const appMessages = {
         title: "Observations",
         label: "Ajout d'une note",
         content: "Rédigez une première note…",
-         created_by: "créé par {0}, le {1}"
+         created_by: "créé par {0}, mis à jour le {1}"
      },
      confirm: {
         title: "Confirmation",
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@ -42,7 +42,11 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
            referrersSuggested: [],
            // all the users available
            users: [],
-            permissions: {}
+            permissions: {},
+            // controller for updating comment
+            updateCommentAbortController: null,
+            // waiting response for inserting first comment
+            postFirstPinnedCommentResponse: null,
         },
         getters: {
            isParticipationValid(state) {
@ -203,9 +207,35 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
               //console.log('### mutation: toggleConfidential');
               state.accompanyingCourse.confidential = value;
            },
-            postFirstComment(state, comment) {
-               //console.log('### mutation: postFirstComment', comment);
-               state.accompanyingCourse.pinnedComment = comment;
+            setPinnedComment(state, content) {
+               if (null === state.accompanyingCourse.pinnedComment) {
+                  state.accompanyingCourse.pinnedComment = {
+                     id: -1,
+                     content,
+                     type: "accompanying_period_comment",
+                  };
+               } else {
+                  state.accompanyingCourse.pinnedComment.content = content;
+               }
+            },
+            setPinnedCommentDetails(state, value) {
+               state.accompanyingCourse.pinnedComment.id = value.id;
+               if (typeof value.creator !== 'undefined') {
+                  state.accompanyingCourse.pinnedComment.creator = value.creator;
+                  state.accompanyingCourse.pinnedComment.updatedBy = value.updatedBy;
+                  state.accompanyingCourse.pinnedComment.updatedAt = value.updatedAt;
+                  state.accompanyingCourse.pinnedComment.createdAt = value.createdAt;
+
+               }
+            },
+            removePinnedComment(state, value) {
+               state.accompanyingCourse.pinnedComment = null;
+            },
+            setPinCommentAbortController(state, value) {
+               state.updateCommentAbortController = value;
+            },
+            setPostFirstPinnedCommentResponse(state, value) {
+               state.postFirstPinnedCommentResponse = value;
            },
            updateSocialIssues(state, value) {
               console.log('updateSocialIssues', value);
@ -337,6 +367,87 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou
                     throw error;
                  })
            },
+            /**
+             * Add/remove pinnedComment
+             */
+            removePinnedComment({ commit }, payload) {
+               const body = {type: "accompanying_period_comment", id: payload.id};
+               const url = `/api/1.0/person/accompanying-course/${id}/comment.json`;
+
+               return makeFetch('DELETE', url, body)
+                  .then((response) => {
+                     commit('removePinnedComment');
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
+            /**
+             * internal method to insert a new comment
+             *
+             * @param commit
+             * @param dispatch
+             * @param content
+             * @returns {*}
+             */
+            addPinnedComment({ commit, dispatch }, content) {
+               const url = `/api/1.0/person/accompanying-course/${id}/comment.json`;
+
+               return makeFetch('POST', url, {type: "accompanying_period_comment", content})
+                  .then((response) => {
+                     commit('setPinnedCommentDetails', response);
+                     return dispatch('patchFirstComment', response);
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     throw error;
+                  })
+            },
+            updatePinnedComment({ commit, state, dispatch }, content) {
+               commit('setPinnedComment', content);
+               if (state.accompanyingCourse.pinnedComment.id === -1 && state.postFirstPinnedCommentResponse === null) {
+                  let r = dispatch('addPinnedComment', content).then(() => {
+                     commit('setPostFirstPinnedCommentResponse', null);
+                  });
+                  commit('setPostFirstPinnedCommentResponse', r);
+               } else {
+                  (state.postFirstPinnedCommentResponse === null ? Promise.resolve() : state.postFirstPinnedCommentResponse).then(() => {
+                     dispatch('updateExistingPinnedComment', content);
+                  });
+               }
+            },
+            /**
+             * internal method to patch an existing comment
+             *
+             * @param commit
+             * @param state
+             * @param comment
+             * @returns {*}
+             */
+            updateExistingPinnedComment({ commit, state }, content) {
+               const payload = {type: "accompanying_period_comment",  content, id: state.accompanyingCourse.pinnedComment.id};
+               const url = `/api/1.0/person/accompanying-period/comment/${payload.id}.json`;
+
+               if (state.updateCommentAbortController !== null) {
+                  state.updateCommentAbortController.abort();
+                  commit('setPinCommentAbortController', null);
+               }
+
+               let controller = new AbortController();
+               commit('setPinCommentAbortController', controller);
+
+               return makeFetch('PATCH', url, payload, { signal: controller.signal })
+                  .then((response) => {
+                     commit('setPinCommentAbortController', null);
+                     commit('setPinnedCommentDetails', response);
+                  })
+                  .catch((error) => {
+                     commit('catchError', error);
+                     commit('setPinCommentAbortController', null);
+                     throw error;
+                  })
+            },
            /**
             * Add/remove/display anonymous requestor
             */
@ -606,18 +717,20 @@ let initPromise = (root) => Promise.all([getScopesPromise(root), accompanyingCou

               return Promise.all(promises);
            },
-            postFirstComment({ commit }, payload) {
-               const url = `/api/1.0/person/accompanying-course/${id}.json`
-               const body = { type: "accompanying_period", pinnedComment: payload }
-
+            patchFirstComment({ commit }, payload) {
+               const url = `/api/1.0/person/accompanying-course/${id}.json`;
+               const body = {
+                  type: "accompanying_period",
+                  pinnedComment: {
+                     type: "accompanying_period_comment",
+                     id: payload.id
+                  }
+               };
               return makeFetch('PATCH', url, body)
-                  .then((response) => {
-                     commit('postFirstComment', response.pinnedComment);
-                  })
                  .catch((error) => {
                     commit('catchError', error);
                     throw error;
-                  })
+                  });
            },
            updateSocialIssues({ state, commit, dispatch }, { payload, body, method }) {
               const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
@ -87,10 +87,14 @@ export default {
    currentMembers() {
      let members = this.household.members.filter(m => this.household.current_members_id.includes(m.id))
        .sort((a, b) => {
-          if (a.position.ordering < b.position.ordering) {
+
+          const orderA = a.position ? a.position.ordering : 0;
+          const orderB = b.position ? b.position.ordering : 0;
+
+          if (orderA < orderB) {
            return -1;
          }
-          if (a.position.ordering > b.position.ordering) {
+          if (orderA > orderB) {
            return 1;
          }
          if (a.holder && !b.holder) {
--- a/src/Bundle/ChillPersonBundle/Resources/views/PersonResource/create.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/PersonResource/create.html.twig
@ -1,15 +1,25 @@
+{% 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 style="margin-bottom: 2rem;">{{ 'Add a person resource'|trans }}</h1>
+
 <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>
+{% endblock %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/PersonResource/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/PersonResource/list.html.twig
@ -85,8 +85,14 @@
    <p class="chill-no-data-statement">{{ 'There are no available resources'|trans }}</p>
 {% endif %}

-<h1 style="margin-bottom: 2rem;">{{ 'Add a person resource'|trans }}</h1>
-
-{% include "@ChillPerson/PersonResource/create.html.twig" %}
+{% if is_granted('CHILL_PERSON_UPDATE', person) %}
+<ul class="record_actions sticky-form-buttons">
+    <li>
+        <a href="{{ chill_path_add_return_path('chill_person_resource_new', {'person_id': person.id,}) }}"
+                class="btn btn-new"
+                title="{{ 'Create'|trans }}">{{ 'Create'|trans }}</a>
+    </li>
+</ul>
+{% endif %}

 {% endblock %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/ResidentialAddress/list.html.twig
@ -49,7 +49,12 @@
                                        <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>
+                                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                                    action: 'show', displayBadge: true,
+                                                    targetEntity: { name: 'person', id: a.hostPerson.id },
+                                                    buttonText: a.hostPerson|chill_entity_render_string,
+                                                    isDead: a.hostPerson.deathdate is not null
+                                                } %}
                                        </li>
                                        <li>
                                            {% set address_date = date(a.startDate|date("m/d/Y")) %}
@ -62,7 +67,12 @@
                                        <li>
                                            <i class="fa fa-li fa-home"></i>
                                            <span class="item-key">{{ "Address of"|trans}}</span>
-                                            <span class="chill-entity entity-person badge-thirdparty">{{ a.hostThirdParty|chill_entity_render_box }}</span>
+                                            {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                                action: 'show', displayBadge: true,
+                                                targetEntity: { name: 'thirdparty', id: a.hostThirdParty.id },
+                                                buttonText: a.hostThirdParty|chill_entity_render_string,
+                                                isDead: false,
+                                            } %}
                                        </li>
                                        <li>
                                            {% if a.hostThirdParty.address is not null %}
--- a/src/Bundle/ChillPersonBundle/config/routes.yaml
+++ b/src/Bundle/ChillPersonBundle/config/routes.yaml
@ -59,6 +59,10 @@ chill_person_resource_list:
    path: /{_locale}/person/{person_id}/resources/list
    controller: Chill\PersonBundle\Controller\PersonResourceController::listAction

+chill_person_resource_new:
+    path: /{_locale}/person/{person_id}/resources/new
+    controller: Chill\PersonBundle\Controller\PersonResourceController::newAction
+
 chill_person_resource_edit:
    path: /{_locale}/person/{person_id}/resources/{resource_id}/edit
    controller: Chill\PersonBundle\Controller\PersonResourceController::editAction
--- a/src/Bundle/ChillPersonBundle/migrations/Version20220310124318.php
+++ b/src/Bundle/ChillPersonBundle/migrations/Version20220310124318.php
@ -0,0 +1,38 @@
+<?php
+
+/**
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Chill\Migrations\Person;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Change constraint on pinnedComment in Accompanying period.
+ */
+final class Version20220310124318 extends AbstractMigration
+{
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chill_person_accompanying_period DROP CONSTRAINT fk_e260a868b0804e90');
+        $this->addSql('ALTER TABLE chill_person_accompanying_period ADD CONSTRAINT fk_e260a868b0804e90 FOREIGN KEY (pinnedcomment_id) REFERENCES chill_person_accompanying_period_comment (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+
+    public function getDescription(): string
+    {
+        return 'Change constraint on pinnedComment in Accompanying period';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chill_person_accompanying_period DROP CONSTRAINT FK_E260A868B0804E90');
+        $this->addSql('ALTER TABLE chill_person_accompanying_period ADD CONSTRAINT FK_E260A868B0804E90 FOREIGN KEY (pinnedComment_id) REFERENCES chill_person_accompanying_period_comment (id) ON DELETE SET NULL NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+}
--- a/src/Bundle/ChillTaskBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillTaskBundle/translations/messages.fr.yml
@ -46,6 +46,7 @@ User: Utilisateur
 "Associated tasks": "Tâches associées"
 "My tasks": "Mes tâches"
 "Tasks for this accompanying period": "Tâches pour ce parcours d'accompagnement"
+"Tasks for {{ name }}": "Tâches pour {{ name }}"
 "No description": "Pas de description"
 "No dates specified": "Dates non spécifiées"
 "No one assignee": "Aucune personne assignée"