fix

src/components/Bookmarks/Items.vue

@@ -22,41 +22,48 @@
             <v-tabs-items v-model="tab">
               <!-- program tab -->
               <v-tab-item>
-                <v-row class="mt-4">
+                <data-iterator
-                  <v-col
+                  :loading="getBookmarkProgramsLoading"
-                    cols="4"
+                  :items="getBookmarksPrograms"
-                    class="mb-2"
+                  @pagination="changePaginationPrograms"
-                    v-for="(program, i) in getBookmarksPrograms"
+                  :pagination="getPaginationProgram"
-                    :key="i"
+                  class="row pb-10 mt-5"
                 >
-                    <BookmarksPrograms :program="program" />
+                  <template #loading>
+                    <loading />
+                  </template>
+                  <template #no-items>
+                    <no-items />
+                  </template>
+                  <template #items="{ item }">
+                    <v-col cols="4" class="mb-2">
+                      <BookmarksPrograms :program="item" />
                     </v-col>
-                </v-row>
+                  </template>
-                <div class="text-center mt-40 mb-5">
+                </data-iterator>
-                  <pagination
-                    :pagination="getPaginationProgram"
-                    @pagination="changePaginationPrograms"
-                  />
-                </div>
               </v-tab-item>
               <!-- /program tab -->
               <!-- workout tab -->
               <v-tab-item>
-                <v-row class="mt-4">
+                <data-iterator
-                  <v-col
+                  :loading="getBookmarkWorkoutsLoading"
-                    cols="6"
+                  :items="getBookmarksWorkouts"
-                    v-for="(workout, i) in getBookmarksWorkouts"
-                    :key="i"
-                    class="mb-2"
-                    ><BookmarksWorkouts :workout="workout"
-                  /></v-col>
-                </v-row>
-                <div class="text-center mt-40 mb-5">
-                  <pagination
-                    :pagination="getPaginationWorkout"
                   @pagination="changePaginationWorkouts"
-                  />
+                  :pagination="getPaginationWorkout"
-                </div>
+                  class="row pb-10 mt-5"
+                >
+                  <template #loading>
+                    <loading />
+                  </template>
+                  <template #no-items>
+                    <no-items />
+                  </template>
+                  <template #items="{ item }">
+                    <v-col cols="6" class="mb-2"
+                      ><BookmarksWorkouts :workout="item"
+                    /></v-col>
+                  </template>
+                </data-iterator>
               </v-tab-item>
               <!-- /workout tab -->
             </v-tabs-items>
@@ -83,6 +90,8 @@ export default {
   computed: {
     ...mapGetters("bookmarks", [
       "getBookmarksPrograms",
+      "getBookmarkProgramsLoading",
+      "getBookmarkWorkoutsLoading",
       "getBookmarksWorkouts",
       "getPaginationWorkout",
       "getPaginationProgram",
@@ -90,10 +99,7 @@ export default {
   },
   methods: {
     ...mapActions("bookmarks", ["loadBookmarkProgram", "loadBookmarkWorkout"]),
-    ...mapMutations("bookmarks", [
+    ...mapMutations("bookmarks", ["SET_WORKOUTS_PAGINATION", "SET_PROGRAMS_PAGINATION"]),
-      "SET_WORKOUTS_PAGINATION",
-      "SET_PROGRAMS_PAGINATION",
-    ]),
     changePaginationWorkouts(page) {
       if (this.getPaginationWorkout.page !== page) {
         this.SET_WORKOUTS_PAGINATION(page);
@@ -113,7 +119,7 @@ export default {
   },
 };
 </script>
-<style >
+<style>
 .theme--light.v-tabs > .v-tabs-bar {
   background-color: rgba(0, 0, 0, 0) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.404);

src/components/Global/Input/ImageCropper.vue

@@ -17,6 +17,7 @@
           text="select your file"
           icon="WMi-camera"
           class="w-100"
+          lg
           height="30"
           bg-color="white"
           color="black"

src/components/Profile/TraineeProfile.vue

@@ -11,7 +11,8 @@
             subTitle="let us know you better, it comes handy."
           />
         </div>
-        <v-form @submit.prevent="submit">
+        <loading v-if="getProfileLoading" class="loading-data" />
+        <v-form @submit.prevent="submit" :class="{ 'loading-form': getProfileLoading }">
           <v-row class="mt-4">
             <v-col class="12" sm="3">
               <v-text-field
@@ -105,7 +106,7 @@
                 v-model="form.arm_diameter"
               ></v-text-field
             ></v-col>
-            <v-col cols="3"
+            <v-col cols="3" class="pr-0"
               ><v-text-field
                 label="leg diameter"
                 class="no-error-msg pt-0"
@@ -134,12 +135,14 @@
                   text="I’VE CHANGED MY MIND"
                   icon="WMi-cancel"
                   class="px-0"
-                  height="19"
+                  height="29"
+                  lg
               /></router-link>
               <RectangleButton
                 text="SAVE THE INFO"
                 class="custom-btn save-btn"
-                height="25"
+                height="29"
+                lg
                 type="submit"
               />
             </div>
@@ -160,7 +163,7 @@ export default {
     form: {},
   }),
   computed: {
-    ...mapGetters("profile", ["getProfile"]),
+    ...mapGetters("profile", ["getProfile", "getProfileLoading"]),
     ...mapGetters("countries", ["getCountries"]),
   },
   methods: {

src/components/TraineePrograms/Items.vue

@@ -13,38 +13,54 @@
             />
           </div>
         </div>
-        <template v-if="getPrograms.length">
+        <data-iterator
-          <v-row class="mt-4">
+          :loading="getProgramsLoading"
-            <v-col
+          :items="getPrograms"
-              class="pr-0 pt-0 pb-1"
+          @pagination="changePagination"
-              v-for="(trainProgram, i) in getPrograms"
+          :pagination="getPaginationProgram"
-              :key="i"
+          class="row pb-10 mt-5"
-              cols="12"
+        >
-              ><TrainProgramItem :program="trainProgram"
+          <template #loading>
-            /></v-col>
+            <loading />
-          </v-row>
+          </template>
+          <template #no-items>
+            <no-items />
           </template>
-        <template v-else>
+          <template #items="{ item }">
-          <div class="text-center mt-10">There are no items to display</div>
+            <v-col class="pr-0 pt-0 pb-1" cols="12"
+              ><TraineeProgramItem :program="item"
+            /></v-col>
           </template>
+        </data-iterator>
       </div>
     </main-back>
   </div>
 </template>
 <script>
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters, mapMutations } from "vuex";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
-import TrainProgramItem from "./Item.vue";
+import TraineeProgramItem from "./Item.vue";
 export default {
   components: {
     SectionTitle,
-    TrainProgramItem,
+    TraineeProgramItem,
   },
   computed: {
-    ...mapGetters("userPrograms", ["getPrograms"]),
+    ...mapGetters("userPrograms", [
+      "getPrograms",
+      "getProgramsLoading",
+      "getPaginationProgram",
+    ]),
   },
   methods: {
     ...mapActions("userPrograms", ["loadPrograms"]),
+    ...mapMutations("userPrograms", ["SET_PAGINATION"]),
+    changePagination(page) {
+      if (this.getPaginationProgram.page !== page) {
+        this.SET_PAGINATION(page);
+        this.loadPrograms();
+      }
+    },
   },
   async created() {
     await this.loadPrograms();

src/store/modules/bookmarks/actions.js

@@ -2,6 +2,7 @@ import BookmarkRepository from "@/abstraction/repository/bookmarkRepository";
 export default {
     async loadBookmarkProgram({ state, commit }) {
         try {
+            commit("SET_LOADING_BOOKMARKS_PROGRAM", true);
             let data = { pagination: state.programsPagination }
             let repository = new BookmarkRepository();
             const resource = await repository.indexCourses(data);
@@ -9,14 +10,24 @@ export default {
             commit("SET_PROGRAMS_PAGINATION", resource.pagination);
         } catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_BOOKMARKS_PROGRAM", false);
         }
     },
     async loadBookmarkWorkout({ state, commit }) {
+        try {
+            commit("SET_LOADING_BOOKMARKS_WORKOUT", true);
             let data = { pagination: state.workoutsPagination }
             let repository = new BookmarkRepository();
             const resource = await repository.indexWorkouts(data);
             commit("SET_BOOKMARKS_WORKOUTS", resource.data);
             commit("SET_WORKOUTS_PAGINATION", resource.pagination);
+        } catch (e) {
+            return e;
+        } finally {
+            commit("SET_LOADING_BOOKMARKS_WORKOUT", false);
+        }
+
     },
     async deleteBookmarkWorkout({ commit }, workoutId) {
         let repository = new BookmarkRepository();

src/store/modules/bookmarks/getters.js

@@ -2,5 +2,7 @@ export default {
     getBookmarksPrograms: state => state.programs,
     getBookmarksWorkouts: state => state.workouts,
     getPaginationProgram: state => state.programsPagination,
-    getPaginationWorkout: state => state.workoutsPagination
+    getPaginationWorkout: state => state.workoutsPagination,
+    getBookmarkProgramsLoading: state => state.bookmarksProgramLoading,
+    getBookmarkWorkoutsLoading: state => state.bookmarksWorkoutLoading,
 }

src/store/modules/bookmarks/mutations.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_BOOKMARKS_PROGRAMS(state, payload) {
         Vue.set(state, "programs", payload)
     },
@@ -14,6 +15,7 @@ export default {
         pagination = { ...state.programsPagination, ...pagination };
         Vue.set(state, "programsPagination", pagination);
     },
+    // DELETE
     DELETE_BOOKMARKS_WORKOUT(state, payload) {
         const index = state.workouts.findIndex((x) => x.id === payload);
         Vue.delete(state.workouts, index);
@@ -26,4 +28,11 @@ export default {
         Vue.set(state.programsPagination, 'itemsLength', state.programsPagination.itemsLength - 1);
         Vue.set(state.programsPagination, 'pageStop', state.programsPagination.pageStop - 1);
     },
+    // LOADING
+    SET_LOADING_BOOKMARKS_PROGRAM(state, status) {
+        Vue.set(state, 'bookmarksProgramLoading', status);
+    },
+    SET_LOADING_BOOKMARKS_WORKOUT(state, status) {
+        Vue.set(state, 'bookmarksWorkoutLoading', status);
+    },
 };

src/store/modules/bookmarks/state.js

@@ -7,4 +7,6 @@ export default {
     workoutsPagination: {
         itemsPerPage: 12
     },
+    bookmarksProgramLoading: false,
+    bookmarksWorkoutLoading: false,
 };

src/store/modules/programs/actions.js

@@ -21,6 +21,7 @@ export default {
     },
     async loadMyPrograms({ state, commit }) {
         try {
+            commit("SET_LOADING_PROGRAMS", true);
             let data = { pagination: state.pagination, filters: state.filters };
             let repository = new ProgramRepository();
             const resource = await repository.indexMyPrograms(data);
@@ -28,9 +29,10 @@ export default {
             commit("SET_FILTER_COUNT", Object.keys(filterCount).length);
             commit("SET_PROGRAMS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
-        }
+        } catch (e) {
-        catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_PROGRAMS", false);
         }
     },
     async loadProgram({ commit }, courseId) {

src/store/modules/userPrograms/actions.js

@@ -2,14 +2,16 @@ import UserProgramRepository from "@/abstraction/repository/userProgramRepositor
 export default {
     async loadPrograms({ state, commit }) {
         try {
+            commit("SET_LOADING_PROGRAMS", true);
             let data = { pagination: state.pagination };
             let repository = new UserProgramRepository();
             const resource = await repository.index(data);
             commit("SET_PROGRAMS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
-        }
+        } catch (e) {
-        catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_PROGRAMS", false);
         }
     },
 };

src/store/modules/userPrograms/getters.js

@@ -1,3 +1,5 @@
 export default {
     getPrograms: state => state.programs,
+    getProgramsLoading: state => state.loading,
+    getPaginationProgram: state => state.pagination
 };

src/store/modules/userPrograms/mutations.js

@@ -7,4 +7,8 @@ export default {
         pagination = { ...state.pagination, ...pagination };
         Vue.set(state, "pagination", pagination);
     },
+    // LOADING
+    SET_LOADING_PROGRAMS(state, status) {
+        Vue.set(state, 'loading', status);
+    },
 };

src/store/modules/userPrograms/state.js

@@ -3,4 +3,5 @@ export default {
     pagination: {
         itemsPerPage: 12
     },
+    loading: false
 };