From e4629ed599921dc14f185fa91d62daf18ffe58bc Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 25 Jan 2022 17:30:09 +0100
Subject: [PATCH] store first makeFetch, with loading spinner

---
 .../Resources/public/chill/scss/buttons.scss  |  2 +-
 .../public/vuejs/HomepageWidget/App.vue       | 12 +++-
 .../HomepageWidget/MyAccompanyingCourses.vue  | 12 +++-
 .../public/vuejs/HomepageWidget/MyCustoms.vue | 13 +++-
 .../public/vuejs/HomepageWidget/js/store.js   | 59 +++++++++++++++++--
 5 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
index 8f69d7955..fda1cb5ed 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
@@ -145,6 +145,6 @@ div.sticky-buttons {
         text-align: center;
         padding: 0.45rem 0.7rem;
         display: block;
-        margin-bottom: 0.35rem;
+        margin-bottom: 0.5rem;
     }
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
index cf8ad2a1d..973dacad6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -13,6 +13,7 @@
             :class="{'active': activeTab === 'MyWorks'}"
             @click="selectTab('MyWorks')">
             {{ $t('my_works') }}
+            <!-- <span class="badge rounded-pill bg-danger counter">2</span> -->
          </a>
       </li>
       <li class="nav-item">
@@ -43,6 +44,9 @@
             {{ $t('my_notifications') }}
          </a>
       </li>
+      <li class="nav-item loading ms-auto py-2" v-if="loading">
+         <i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
+      </li>
    </ul>
    
    <div class="my-4">
@@ -74,6 +78,7 @@ import MyEvaluations from './MyEvaluations';
 import MyTasks from './MyTasks';
 import MyAccompanyingCourses from './MyAccompanyingCourses';
 import MyNotifications from './MyNotifications';
+import { mapState, mapGetters } from "vuex";
 
 export default {
    name: "App",
@@ -91,11 +96,16 @@ export default {
       }
    },
    computed: {
+      ...mapState([
+         'loading',
+      ]),
+      ...mapGetters([
+      ])
    },
    methods: {
       selectTab(tab) {
-         console.log('load tab content', tab);
          this.activeTab = tab;
+         this.$store.dispatch('getByTab', tab);
       }
    }
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
index 31107b564..f94a042dc 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -3,8 +3,18 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from "vuex";
+
 export default {
-   name: "MyAccompanyingCourses"
+   name: "MyAccompanyingCourses",
+   computed: {
+      ...mapState([
+         'accompanyingCourses',
+      ]),
+      ...mapGetters([
+         'isAccompanyingCoursesLoaded',
+      ])
+   },
 }
 </script>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
index cc7831104..28a2ec93b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -1,5 +1,11 @@
 <template>
-   MyCustoms
+   <div id="dashboards" class="row g-3">
+      <div class="mbloc col col-sm-6 col-lg-4">
+         <div class="custom1">
+            Mon bloc personnalisé
+         </div>
+      </div>
+   </div>
 </template>
 
 <script>
@@ -9,5 +15,8 @@ export default {
 </script>
 
 <style scoped>
-
+div.custom1 {
+   font-style: italic;
+   color: var(--bs-chill-gray);
+}
 </style>
\ No newline at end of file
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 bb9af47e6..b9888da7b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
@@ -1,14 +1,65 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 
 const debug = process.env.NODE_ENV !== 'production';
 
+const isEmpty = (obj) => {
+    return obj
+        && Object.keys(obj).length === 0
+        && Object.getPrototypeOf(obj) === Object.prototype;
+};
+
 const store = createStore({
     strict: debug,
-    state: {},
-    getters: {},
-    mutations: {},
-    actions: {},
+    state: {
+        accompanyingCourses: {},
+        errorMsg: [],
+        loading: false
+    },
+    getters: {
+        isAccompanyingCoursesLoaded(state) {
+            return !isEmpty(state.accompanyingCourses);
+        },
+    },
+    mutations: {
+        addCourses(state, courses) {
+            console.log('addCourses', courses);
+            state.accompanyingCourses = courses;
+        },
+        setLoading(state, bool) {
+            state.loading = bool;
+        },
+        catchError(state, error) {
+            state.errorMsg.push(error);
+        }
+    },
+    actions: {
+        getByTab({ commit, getters }, tab) {
+            switch (tab) {
+                case 'MyAccompanyingCourses':
+                    if (!getters.isAccompanyingCoursesLoaded) {
+                        commit('setLoading', true);
+                        const url = `/api/1.0/person/accompanying-period/work/my-near-end`;
+                        makeFetch('GET', url)
+                            .then((response) => {
+                                commit('addCourses', response);
+                                commit('setLoading', false);
+                            })
+                            .catch((error) => {
+                                commit('catchError', error);
+                                throw error;
+                            })
+                    }
+                    break;
+                case 'MyCustoms':
+                    break;
+                default:
+                    throw 'tab '+ tab;
+
+            }
+        }
+    },
 });
 
 export { store };
\ No newline at end of file