store first makeFetch, with loading spinner

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;
     }
 }

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);
       }
    }
 }

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>
 

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>

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: {},
+    state: {
-    getters: {},
+        accompanyingCourses: {},
-    mutations: {},
+        errorMsg: [],
-    actions: {},
+        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 };