From 00ac6aa1b903f41d0b4dbf3f5578a12224d3aca4 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 28 Jan 2022 18:01:26 +0100
Subject: [PATCH] homepage_widget: init counters on load, arrange MyCustoms tab

---
 .../public/vuejs/HomepageWidget/App.vue       | 15 ++++-
 .../public/vuejs/HomepageWidget/MyCustoms.vue | 62 ++++++++++++++++---
 .../public/vuejs/HomepageWidget/js/i18n.js    | 10 ++-
 .../public/vuejs/HomepageWidget/js/store.js   | 26 +++++---
 4 files changed, 93 insertions(+), 20 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
index 719e46670..33b3b7206 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -6,7 +6,7 @@
       <li class="nav-item">
          <a class="nav-link"
             :class="{'active': activeTab === 'MyCustoms'}"
-            @load="selectTab('MyCustoms')" @click="selectTab('MyCustoms')">
+            @click="selectTab('MyCustoms')">
             <i class="fa fa-home"></i>
          </a>
       </li>
@@ -115,9 +115,20 @@ export default {
    },
    methods: {
       selectTab(tab) {
-         this.$store.dispatch('getByTab', tab);
+         this.$store.dispatch('getByTab', { tab: tab });
          this.activeTab = tab;
       }
+   },
+   mounted() {
+      for (const m of [
+         'MyNotifications',
+         'MyAccompanyingCourses',
+         'MyWorks',
+         'MyEvaluations',
+         'MyTasks',
+      ]) {
+         this.$store.dispatch('getByTab', { tab: m, param: "countOnly=1" });
+      }
    }
 }
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
index 8f974d0d8..65de954ee 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -1,32 +1,76 @@
 <template>
    <span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
-   <div v-else id="dashboards" class="row g-3">
+   <div v-else id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
+      
       <div class="mbloc col col-sm-6 col-lg-4">
          <div class="custom1">
-            Mon bloc personnalisé
-            
-            x notifications non lues
-            x tâches en rappel
-            x ...
-            
+            <ul class="list-unstyled">
+               <li v-if="counter.notifications > 0">
+                  <b>{{ counter.notifications }}</b> {{ $t('counter.unread_notifications') }}
+               </li>
+               <li v-if="counter.accompanyingCourses > 0">
+                  <b>{{ counter.accompanyingCourses }}</b> {{ $t('counter.assignated_courses') }}
+               </li>
+               <li v-if="counter.works > 0">
+                  <b>{{ counter.works }}</b> {{ $t('counter.assignated_actions') }}
+               </li>
+               <li v-if="counter.evaluations > 0">
+                  <b>{{ counter.evaluations }}</b> {{ $t('counter.assignated_evaluations') }}
+               </li>
+               <li v-if="counter.tasksAlert > 0">
+                  <b>{{ counter.tasksAlert }}</b> {{ $t('counter.alert_tasks') }}
+               </li>
+               <li v-if="counter.tasksWarning > 0">
+                  <b>{{ counter.tasksWarning }}</b> {{ $t('counter.warning_tasks') }}
+               </li>
+            </ul>
          </div>
       </div>
+      
+      <!--
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom2">
+            Mon dashboard personnalisé
+         </div>
+      </div>
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom3">
+            Mon dashboard personnalisé
+         </div>
+      </div>
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom4">
+            Mon dashboard personnalisé
+         </div>
+      </div>
+      -->
+
    </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+import Masonry from 'masonry-layout/masonry';
+
 export default {
    name: "MyCustoms",
    computed: {
+      ...mapGetters(['counter']),
       noResults() {
-         return true
+         return false
       },
+   },
+   mounted() {
+      const elem = document.querySelector('#dashboards');
+      const masonry = new Masonry(elem, {});
    }
 }
 </script>
 
 <style scoped>
-div.custom1 {
+div.custom4,
+div.custom3,
+div.custom2 {
    font-style: italic;
    color: var(--bs-chill-gray);
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
index 60b473186..f0bdbbcf6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
@@ -33,7 +33,15 @@ const appMessages = {
         StartDate: "Date d'ouverture",
         SocialAction: "Action d'accompagnement",
         no_data: "Aucun résultats",
-        no_dashboard: "Pas de tableaux de bord"
+        no_dashboard: "Pas de tableaux de bord",
+        counter: {
+            unread_notifications: "notifications non lues",
+            assignated_courses: "parcours assignés",
+            assignated_actions: "actions assignées",
+            assignated_evaluations: "évaluations assignées",
+            alert_tasks: "tâches en rappel",
+            warning_tasks: "tâches à échéances",
+        }
     }
 };
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
index 991486dab..81896e5ec 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
@@ -12,7 +12,7 @@ const debug = process.env.NODE_ENV !== 'production';
 
 const isEmpty = (obj) => {
     return obj
-        && Object.keys(obj).length === 0
+        && Object.keys(obj).length <= 1
         && Object.getPrototypeOf(obj) === Object.prototype;
 };
 
@@ -49,6 +49,16 @@ const store = createStore({
         isNotificationsLoaded(state) {
             return !isEmpty(state.notifications);
         },
+        counter(state) {
+            return {
+                works: state.works.count,
+                evaluations: state.evaluations.count,
+                tasksWarning: state.tasks.warning.count,
+                tasksAlert: state.tasks.alert.count,
+                accompanyingCourses: state.accompanyingCourses.count,
+                notifications: state.notifications.count,
+            }
+        }
     },
     mutations: {
         addWorks(state, works) {
@@ -83,14 +93,14 @@ const store = createStore({
         }
     },
     actions: {
-        getByTab({ commit, getters }, tab) {
+        getByTab({ commit, getters }, { tab, param }) {
             switch (tab) {
                 case 'MyCustoms':
                     break;
                 case 'MyWorks':
                     if (!getters.isWorksLoaded) {
                         commit('setLoading', true);
-                        const url = `/api/1.0/person/accompanying-period/work/my-near-end`;
+                        const url = `/api/1.0/person/accompanying-period/work/my-near-end${'?'+ param}`;
                         makeFetch('GET', url)
                             .then((response) => {
                                 commit('addWorks', response);
@@ -106,7 +116,7 @@ const store = createStore({
                 case 'MyEvaluations':
                     if (!getters.isEvaluationsLoaded) {
                         commit('setLoading', true);
-                        const url = `/api/1.0/person/accompanying-period/work/evaluation/my-near-end`;
+                        const url = `/api/1.0/person/accompanying-period/work/evaluation/my-near-end${'?'+ param}`;
                         makeFetch('GET', url)
                             .then((response) => {
                                 commit('addEvaluations', response);
@@ -123,8 +133,8 @@ const store = createStore({
                     if (!(getters.isTasksWarningLoaded && getters.isTasksAlertLoaded)) {
                         commit('setLoading', true);
                         const
-                            urlWarning = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=warning&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress`,
-                            urlAlert   = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=alert&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress` //&f[f]=
+                            urlWarning = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=warning&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`,
+                            urlAlert   = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=alert&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`
                         ;
                         makeFetch('GET', urlWarning)
                             .then((response) => {
@@ -151,7 +161,7 @@ const store = createStore({
                 case 'MyAccompanyingCourses':
                     if (!getters.isAccompanyingCoursesLoaded) {
                         commit('setLoading', true);
-                        const url = `/api/1.0/`;
+                        const url = `/api/1.0/person/accompanying-course/list/by-recent-attributions${'?'+ param}`;
                         makeFetch('GET', url)
                             .then((response) => {
                                 commit('addCourses', response);
@@ -167,7 +177,7 @@ const store = createStore({
                 case 'MyNotifications':
                     if (!getters.isNotificationsLoaded) {
                         commit('setLoading', true);
-                        const url = `/api/1.0/main/notification/my/unread`;
+                        const url = `/api/1.0/main/notification/my/unread${'?'+ param}`;
                         makeFetch('GET', url)
                             .then((response) => {
                                 commit('addNotifications', response);