Merge remote-tracking branch 'origin/master' into features/create-social-action

src/Bundle/ChillPersonBundle/Resources/public/index.js

@@ -1,2 +1,3 @@
 require('./sass/person.scss');
 require('./sass/person_with_period.scss');
+require('./sass/household_banner.scss');

src/Bundle/ChillPersonBundle/Resources/public/sass/household_banner.scss

@@ -0,0 +1,5 @@
+.banner-household {
+  .current-members-explain {
+    font-weight: 700;
+  }
+}

src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss

@@ -1,7 +1,6 @@
 /// complete and overwrite flex-table in chillmain.scss
 div.list-with-period,
-div.list-household-members,
-div.list-household-members--summary { 
+div.list-household-members {
 
     .chill-entity__person {
        .chill-entity__person__first-name,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue

@@ -1,13 +1,13 @@
 <template>
   <household></household>
-  <concerned></concerned>
-  <dates></dates>
-  <confirmation></confirmation>
+  <concerned v-if="hasHouseholdOrLeave"></concerned>
+  <dates v-if="showConfirm"></dates>
+  <confirmation v-if="showConfirm"></confirmation>
 </template>
 
 <script>
 
-import { mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 import Concerned from './components/Concerned.vue';
 import Household from './components/Household.vue';
 import Dates from './components/Dates.vue';
@@ -22,11 +22,14 @@ export default {
     Confirmation,
   },
   computed: {
-    // for debugging purpose
-    // (not working)
-    //...mapState({
-    //  'concerned', 'household', 'positions'
-    //  })
+    ...mapGetters([
+      'hasHouseholdOrLeave',
+      'hasPersonsWellPositionnated',
+    ]),
+    showConfirm () {
+      return this.$store.getters.hasHouseholdOrLeave 
+        && this.$store.getters.hasPersonsWellPositionnated;
+    },
   }
 }
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue

@@ -21,13 +21,10 @@
       <div v-for="conc in concUnpositionned"
         class="item-bloc"
         v-bind:key="conc.person.id"
-        draggable="true"
-        @dragstart="onStartDragConcern($event, conc.person.id)"
       >
         <div class="item-row person">
           <div class="item-col box-person">
             <div>
-              <img src="~ChillMainAssets/img/draggable.svg" class="drag-icon" />
               <person :person="conc.person"></person>
             </div>
             <div v-if="conc.person.birthdate !== null">
@@ -89,21 +86,18 @@
       v-for="position in positions"
     >
       <h3>{{ position.label.fr }}</h3>
-      <div class="flex-table list-household-members">
+
+      <div v-if="concByPosition(position.id).length > 0" class="flex-table list-household-members">
         <member-details
           v-for="conc in concByPosition(position.id)"
           v-bind:key="conc.person.id"
           v-bind:conc="conc"
         >
         </member-details>
-        <div
-          class="droppable_zone"
-          @drop="onDropConcern($event, position.id)"
-          @dragover.prevent
-          @dragenter.prevent
-        >
-          {{ $t('household_members_editor.drop_persons_here', {'position': position.label.fr }) }}
-        </div>
+      </div>
+
+      <div v-else>
+        <p class="chill-no-data-statement">{{ $t('household_members_editor.concerned.no_person_in_position') }}</p>
       </div>
     </div>
   </div>
@@ -120,22 +114,6 @@ div.person {
   }
 }
 
-.drag-icon {
-  height: 1.1em;
-  margin-right: 0.5em;
-}
-
-.droppable_zone {
-  background-color: var(--chill-llight-gray);
-  color: white;
-  font-size: large;
-  text-align: center;
-  display: table-cell;
-  vertical-align: middle;
-  padding: 1em;
-  background: linear-gradient(to top, var(--chill-light-gray), 30%, var(--chill-llight-gray));
-}
-
 .move_to {
   .move_hint {
     text-align: center;
@@ -194,18 +172,8 @@ export default {
       this.$refs.addPersons.resetSearch(); // to cast child method
       modal.showModal = false;
     },
-    onStartDragConcern(evt, person_id) {
-      evt.dataTransfer.dropEffect = 'move'
-      evt.dataTransfer.effectAllowed = 'move'
-      evt.dataTransfer.setData('application/x.person', person_id)
-    },
-    onDropConcern(evt, position_id) {
-      const person_id = Number(evt.dataTransfer.getData('application/x.person'));
-      this.moveToPosition(person_id, position_id);
-    },
     moveToPosition(person_id, position_id) {
       this.$store.dispatch('markPosition', { person_id, position_id });
-
     },
     removeConcerned(conc) {
       this.$store.dispatch('removeConcerned', conc);

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue

@@ -2,11 +2,8 @@
   <h2>{{ $t('household_members_editor.household_part') }}</h2>
 
   <div v-if="hasHousehold">
-    <span v-if="isHouseholdNew">
-      {{ $t('household_members_editor.household.new_household') }}
-    </span>
-    <div v-else>
-      Ménage existant 
+    <div>
+      <household-viewer :household="household"></household-viewer>
     </div>
   </div>
   <div v-else-if="isForceLeaveWithoutHousehold">
@@ -39,16 +36,20 @@
 <script>
 
 import { mapGetters } from 'vuex';
+import HouseholdViewer from 'ChillPersonAssets/vuejs/_components/Household/Household.vue';
 
 export default {
   name: 'Household',
+  components: {
+    HouseholdViewer,
+  },
   computed: {
     ...mapGetters([
       'hasHousehold',
       'isHouseholdNew',
     ]),
     household() {
-      return this.$store.household;
+      return this.$store.state.household;
     },
     allowHouseholdCreate() {
       return this.$store.state.allowHouseholdCreate;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js

@@ -19,12 +19,13 @@ const appMessages = {
         move_to: "Déplacer vers",
         persons_to_positionnate: 'Usagers à positionner',
         persons_leaving: "Usagers quittant leurs ménages",
+        no_person_in_position: "Aucun usager ne sera ajouté à cette position",
       },
       drop_persons_here: "Glissez-déposez ici les usagers pour la position \"{position}\"",
       all_positionnated: "Tous les usagers sont positionnés",
       holder: "Titulaire",
-      is_holder: "Sera titulaire",
-      is_not_holder: "Ne sera pas titulaire",
+      is_holder: "Est titulaire",
+      is_not_holder: "N'est pas titulaire",
       remove_position: "Retirer des {position}",
       remove_concerned: "Ne plus transférer",
       household_part: "Ménage de destination",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js

@@ -19,7 +19,15 @@ const store = createStore({
   state: {
     concerned,
     household: window.household_members_editor_data.household,
-    positions: window.household_members_editor_data.positions,
+    positions: window.household_members_editor_data.positions.sort((a, b) => {
+        if (a.ordering < b.ordering) {
+          return -1;
+        }
+        if (a.ordering > b.ordering) {
+          return 1;
+        }
+        return 0;
+      }),
     startDate: new Date(),
     allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
     allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
@@ -35,6 +43,13 @@ const store = createStore({
     hasHousehold(state) {
       return state.household !== null;
     },
+    hasHouseholdOrLeave(state) {
+      return state.household !== null || state.forceLeaveWithoutHousehold;
+    },
+    hasPersonsWellPositionnated(state, getters) {
+      return getters.needsPositionning === false
+        || (getters.persons.length > 0 && getters.concUnpositionned.length === 0);
+    },
     persons(state) { 
       return state.concerned.map(conc => conc.person);
     },
@@ -150,7 +165,7 @@ const store = createStore({
       )
     },
     createHousehold(state) {
-      state.household = { type: 'household', members: [], address: null }
+      state.household = { type: 'household', members: [], current_address: null }
       state.forceLeaveWithoutHousehold = false;
     },
     forceLeaveWithoutHousehold(state) {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Household/Household.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="chill-entity chill-entity__household">
+    <!-- identifier -->
+    <div v-if="isHouseholdNew()" class="identifier">
+      <i class="fa fa-home"></i>
+      {{ $t('new_household') }}
+    </div>
+    <div v-else class="identifier">
+      <i class="fa fa-home"></i>
+      {{ $t('household_number', { number: household.id } ) }}
+    </div>
+
+    <!-- member part --> 
+    <div v-if="hasCurrentMembers" class="members">
+      <span class="current-members">{{ $t('current_members') }}: </span>
+      <template v-for="(m, index) in currentMembers()" :key="m.id">
+        <person :person="m.person"></person>
+        <span v-if="m.holder">
+          &nbsp;<span class="badge badge-primary">{{ $t('holder') }}</span>
+        </span>
+        <span v-if="index != (currentMembersLength() - 1)">, </span>
+      </template>
+    </div>
+    <div v-else class="members">
+      <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
+    </div>
+
+    <!-- address part -->
+    <div v-if="hasAddress()" class="where">
+      <i class="fa fa-where"></i>
+      <show-address :address="household.current_address"></show-address>
+    </div>
+    <div v-else class="where">
+      <i class="fa fa-where"></i>
+      <p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.chill-entity__household {
+  display: grid;
+  grid-template-areas: 
+    "identifier identifier where"
+    "who        who        where"
+    ;
+  grid-template-columns:
+    auto        auto       30%
+    ;
+
+  .identifier {
+    grid-area: identifier;
+    
+    font-size: 1.3em;
+    font-weight: 700;
+    color: var(--chill-blue);
+
+  }
+  .members {
+    grid-area: who;
+
+    .current-members {
+      font-weight: 700;
+    }
+  }
+  .where {
+    grid-area: where
+  }
+
+
+}
+</style>
+
+
+
+<script>
+
+import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/_components/ShowAddress.vue';
+
+const i18n = {
+  "messages":
+    {
+      "fr":
+      {
+        "household_number": "Ménage #{number}",
+        "current_members": "Membres actuels",
+        "no_current_address": "Sans adresse actuellement",
+        "new_household": "Nouveau ménage",
+        "no_members_yet": "Aucun membre actuellement",
+        "holder": "titulaire",
+      }
+  }
+}
+;
+
+export default {
+  name: 'Household',
+  props: ['household'],
+  components: {
+    Person,
+    ShowAddress,
+  },
+  i18n,
+  methods: {
+    hasCurrentMembers() {
+      return this.household.current_members_id.length > 0;
+    },
+    currentMembers() {
+      return this.household.members.filter(m => this.household.current_members_id.includes(m.id))
+        .sort((a, b) => {
+          if (a.position.ordering < b.position.ordering) {
+            return -1;  
+          }
+          if (a.position.ordering > b.position.ordering) {
+            return 1;
+          }
+          if (a.holder && !b.holder) {
+            return -1;
+          }
+          if (!a.holder && b.holder) {
+            return 1;
+          }
+          return 0;
+        });
+    },
+    currentMembersLength() {
+      return this.household.current_members_id.length;
+    },
+    isHouseholdNew() {
+      return !Number.isInteger(this.household.id);
+    },
+    hasAddress() {
+      return this.household.current_address !== null;
+    }
+  }
+};
+
+</script>

src/Bundle/ChillPersonBundle/Resources/views/Household/Member/edit.html.twig

@@ -12,7 +12,7 @@
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
     <a 
-      href="{{ chill_return_path_or('chill_person_household_members', { 'household_id': household.id}) }}"
+      href="{{ chill_return_path_or('chill_person_household_summary', { 'household_id': household.id}) }}"
       class="sc-button bt-cancel"
       >
       {{ 'Cancel'|trans }}

src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig

@@ -12,25 +12,35 @@
 
             <div class="grid-3" id="banner-flags"></div>
 
-            <div class="grid-3" id="banner-status"></div>
+            <div class="grid-3" id="banner-status">
+              {% set address = household.currentAddress %}
+              {% if address is empty %}
+              <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
+              {% else %}
+              <div>
+                {{ address|chill_entity_render_box({'multiline': true, 'with_valid_from': false}) }}
+              </div>
+              {% endif %}
+            </div>
 
         </div>
     </div>
     <div class="grid-12 parent" id="header-accompanying_course-details" >
         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
             <div id="banner-misc">
-              {%- set persons = household.getCurrentPersons() -%}
-              {%- if persons|length > 0 -%}
+              {%- set members = household.getCurrentMembersOrdered() -%}
+              {%- if members|length > 0 -%}
               <span class="current-members-explain">
               {{- 'household.Current household members'|trans }}:
               </span>
-              {%- for p in persons|slice(0, 5) -%}
-              {{- p|chill_entity_render_box({'addLink': false}) -}}
+              {%- for m in members|slice(0, 5) -%}
+              {{- m.person|chill_entity_render_box({'addLink': false}) -}}
+              {%- if m.holder %} <span class="badge badge-primary">{{ 'household.holder'|trans }}</span>{% endif -%}
               {%- if false == loop.last -%}, {% endif -%}
               {%- endfor -%}
-              {% if persons|length > 5 %}
+              {% if members|length > 5 %}
               <span class="current-members-more">
-              {{ 'household.and x other persons'|trans({'x': persons|length-5}) }}
+              {{ 'household.and x other persons'|trans({'x': members|length-5}) }}
               </span>
               {% endif %} 
               {%- endif -%}

src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig

@@ -5,49 +5,233 @@
 {% block content %}
 <h1>{{ block('title') }}</h1>
 
-<h2>{{ 'household.Current household members'|trans }}</h2>
+<h2>{{ 'household.Current address'|trans }}</h2>
+
+{% set address = household.currentAddress %}
+
+{% if address is empty %}
+<p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
+{% else %}
+<div>
+  {{ address|chill_entity_render_box({'multiline': true}) }}
+</div>
+{% endif %}
+
+<h2>{{ 'household.Household members'|trans }}</h2>
+
+{% if form is not null %}
+  {{ form_start(form) }}
+
+  {{ form_row(form.commentMembers) }}
+
+  <div id="waitingForBirthContainer">
+  {{ form_row(form.waitingForBirth) }}
+  </div>
+
+  <div id="waitingForBirthDateContainer">
+  {{ form_row(form.waitingForBirthDate) }}
+  </div>
+
+  <ul class="record_actions">
+    <li>
+      <button type="submit" class="sc-button bt-save">
+        {{ 'Save'|trans }}
+      </button>
+    </li>
+  </ul>
+
+  {{ form_end(form) }}
+{% else %}
+
+  {% if not household.commentMembers.isEmpty() %}
+      {{ household.commentMembers|chill_entity_render_box }}
+  {% endif %}
+
+  {% if household.waitingForBirth %}
+    {% if household.waitingForBirthDate is not null %}
+    {{ 'household.Expecting for birth on date'|trans({ 'date': household.waitingForBirthDate|format_date('long') }) }}
+    {% else %}
+    {{ 'household.Expecting for birth'|trans }}
+    {% endif %}
+  {% else %}
+    <p class="chill-no-data-statement">
+      {{ 'household.Any expecting birth'|trans }}
+    </p>
+  {% endif %}
+
+  <ul class="record_actions">
+    <li>
+      <a 
+        href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': household.id, 'edit': 1 }) }}"
+        class="sc-button bt-edit"
+        >
+        {{ 'household.Comment and expecting birth'|trans }}
+      </a>
+    </li>
+  </ul>
+
+{% endif %}
+
 
 {% for p in positions %}
-{%- set members = household.currentMembersByPosition(p) %}
-{% if members|length > 0 %}
-<h3>{{ p.label|localize_translatable_string }}</h3>
+  <h3>{{ p.label|localize_translatable_string }}</h3>
 
-{% if false == p.shareHousehold %}
-<p>{{ 'household.Those members does not share address'|trans }}</p>
-{% endif %}
+  {% if false == p.shareHousehold %}
+    <p>{{ 'household.Those members does not share address'|trans }}</p>
+  {% endif %}
 
-<div class="flex-table list-household-members--summary">
-  {% for m in members %}
-  <div class="item-bloc">
-    <div class="item-row person">
-      <div class="item-col box-person">
-        <div>
-          {{ m.person|chill_entity_render_box({'addLink': true}) }}
-          {% if m.holder %}
-            <span class="badge badge-primary">{{ 'household.holder'|trans }}</span>
+  {%- set members = household.currentMembersByPosition(p) %}
+  {% if members|length > 0 %}
+    <div class="flex-table list-household-members">
+      {% for m in members %}
+        <div class="item-bloc">
+          <div class="item-row person">
+            <div class="item-col box-person">
+              <div>
+                {{ m.person|chill_entity_render_box({'addLink': true}) }}
+                {% if m.holder %}
+                  <span class="badge badge-primary">{{ 'household.holder'|trans }}</span>
+                {% endif %}
+              </div>
+              <div>
+                {{ 'Born the date'|trans({ 'gender': m.person.gender, 'birthdate': m.person.birthdate|format_date('long') }) }}
+              </div>
+            </div>
+            <div class="item-col box-where">
+              <ul class="list-content fa-ul">
+                {% if m.startDate is not empty %}
+                  <li>{{ 'Since %date%'|trans({'%date%': m.startDate|format_date('long') }) }}</li>
+                {% endif %}
+                {% if m.endDate is not empty %}
+                  <li>{{ 'Until %date%'|trans({'%date%': m.endDate|format_date('long') }) }}</li>
+                {% endif %}
+              </ul>
+              <ul class="record_actions">
+                <li>
+                  <a 
+                  href="{{ chill_path_add_return_path('chill_person_household_member_edit', { 'id': m.id }) }}" 
+                  class="sc-button bt-edit" 
+                  />
+                    {{ 'household.Update membership'|trans }}
+                  </a>
+                </li>
+                <li>
+                  <a 
+                  href="{{ chill_path_add_return_path(
+                    'chill_person_household_members_editor', 
+                    {
+                      'persons': [ m.person.id ],
+                      'household': household.id
+                    } ) }}"
+                    class="sc-button" 
+                    />
+                    <i class="fa fa-arrows-h"></i>
+                    {{ 'household.Change position'|trans }}
+                  </a>
+                </li>
+                <li>
+                  <a 
+                  href="{{ chill_path_add_return_path(
+                    'chill_person_household_members_editor', 
+                    {
+                      'persons': [ m.person.id ], 
+                      'allow_leave_without_household': true 
+                    } ) }}"
+                    class="sc-button" 
+                    />
+                    <i class="fa fa-sign-out"></i>
+                    {{ 'household.Leave'|trans }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          {% if m.comment is not empty %}
+            <div class="item-row comment">
+              <blockquote class="chill-user-quote">
+                {{ m.comment|chill_markdown_to_html }}
+              </blockquote>
+            </div>
           {% endif %}
         </div>
-        <div>
-          {{ 'Born the date'|trans({ 'gender': m.person.gender, 'birthdate': m.person.birthdate|format_date('long') }) }}
-        </div>
-      </div>
-      <div class="item-col box-where">
-        <ul class="list-content fa-ul">
-          {% if m.startDate is not empty %}
-            <li>{{ 'Since %date%'|trans({'%date%': m.startDate|format_date('long') }) }}</li>
-          {% endif %}
-          {% if m.endDate is not empty %}
-            <li>{{ 'Until %date%'|trans({'%date%': m.endDate|format_date('long') }) }}</li>
-          {% endif %}
-        </ul>
+      {% endfor %}
+    </div>
+  {% else %}
+  <p class="chill-no-data-statement">{{ 'household.Any persons into this position'|trans }}</p>
+  {% endif %}
+
+  {% set members = household.nonCurrentMembersByPosition(p) %}
+  {% if members|length > 0 %}
+    <p><!-- force a space after table --></p>
+    <button class="sc-button bt-green" type="button" data-toggle="collapse" data-target="#nonCurrent_{{ p.id }}" aria-expanded="false" aria-controls="collapse non current members">
+      {{ 'household.Show future or past memberships'|trans({'length': members|length}) }}
+    </button>
+
+    <div id="nonCurrent_{{ p.id }}" class="collapse">
+      <div class="flex-table list-household-members">
+        {% for m in members %}
+          <div class="item-bloc">
+            <div class="item-row person">
+              <div class="item-col box-person">
+                <div>
+                  {{ m.person|chill_entity_render_box({'addLink': true}) }}
+                  {% if m.holder %}
+                    <span class="badge badge-primary">{{ 'household.holder'|trans }}</span>
+                  {% endif %}
+                </div>
+                <div>
+                  {{ 'Born the date'|trans({ 'gender': m.person.gender, 'birthdate': m.person.birthdate|format_date('long') }) }}
+                </div>
+              </div>
+              <div class="item-col box-where">
+                <ul class="list-content fa-ul">
+                  {% if m.startDate is not empty %}
+                    <li>{{ 'Since %date%'|trans({'%date%': m.startDate|format_date('long') }) }}</li>
+                  {% endif %}
+                  {% if m.endDate is not empty %}
+                    <li>{{ 'Until %date%'|trans({'%date%': m.endDate|format_date('long') }) }}</li>
+                  {% endif %}
+                </ul>
+                <ul class="record_actions">
+                  <li>
+                    <a 
+                    href="{{ chill_path_add_return_path('chill_person_household_member_edit', { 'id': m.id }) }}" 
+                    class="sc-button bt-edit" 
+                    />
+                      {{ 'household.Update membership'|trans }}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            {% if m.comment is not empty %}
+            <div class="item-row comment">
+              <blockquote class="chill-user-quote">
+                {{ m.comment|chill_markdown_to_html }}
+              </blockquote>
+            </div>
+            {% endif %}
+          </div>
+        {% endfor %}
       </div>
     </div>
-  </div>
-  {% endfor %}
-</div>
-
-{% endif %}
 
+  {% endif %}
 {% endfor %}
 
+<ul class="record_actions">
+  <li>
+    <a 
+    href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'household': household.id }) }}"
+      class="sc-button bt-create">
+      {{ 'household.Add a member'|trans }}
+    </a>
+  </li>
+</ul>
+
 {% endblock %}
+
+{% block js %}
+{{ encore_entry_script_tags('household_edit_metadata') }}
+{% endblock %}
+