fix

src/abstraction/repository/authRepository.js

@@ -38,7 +38,6 @@ export default class AuthRepository {
     async verifyCode(data) {
         let json = setData(data);
         let response = await axios.post(url("verifyCode"), json);
-        console.log(response.data);
         return getJson(response.data)
     }
 }

src/abstraction/repository/programRepository.js

@@ -23,7 +23,6 @@ export default class ProgramRepository {
         }
     }
     async indexMyPrograms(data) {
-        console.log('repository');
         let params = setQuery(data);
         let response = await axios.get(url("indexMyProgram"), {
             params

src/components/Products/Add.vue

@@ -11,7 +11,13 @@
             subTitle="what we perpared for people"
           />
         </div>
-        <v-form lazy-validation ref="form" @submit.prevent="submit">
+        <loading v-if="loading" class="loading-data" />
+        <v-form
+          lazy-validation
+          ref="form"
+          @submit.prevent="submit"
+          :class="{ 'loading-form': loading }"
+        >
           <v-row class="mt-4">
             <v-col cols="3">
               <div class="pb-14 h-100">
@@ -191,14 +197,16 @@
                   text="I’VE CHANGED MY MIND"
                   icon="WMi-cancel"
                   class="px-0"
-                  height="19"
+                  height="29"
+                  lg
                 />
               </router-link>
               <RectangleButton
                 :text="`${productId ? 'update this' : 'add the'}  product`"
                 class="custom-btn add-btn"
-                height="25"
+                height="29"
                 type="submit"
+                lg
               />
             </div>
           </div>
@@ -225,6 +233,7 @@ export default {
     Dropzone,
   },
   data: () => ({
+    loading: false,
     random_token: RANDOM_TOKEN,
     form: {
       batch_id: RANDOM_TOKEN,

src/components/Products/Items.vue

@@ -13,10 +13,7 @@
             />
           </div>
           <div>
-            <router-link
+            <router-link :to="{ name: 'addProduct' }" class="text-decoration-none">
-              :to="{ name: 'addProduct' }"
-              class="text-decoration-none"
-            >
               <RectangleButton
                 icon="WMi-plus"
                 class="custom-btn"
@@ -26,22 +23,26 @@
             /></router-link>
           </div>
         </div>
-        <v-row class="mt-4">
+        <data-iterator
-          <v-col
+          :is-filtered="isFilteredProduct"
-            cols="12"
+          :loading="getProductsLoading"
-            sm="4"
+          :items="getProducts"
-            v-for="(product, i) in getProducts"
-            :key="i"
-            class="mb-3"
-            ><ProductItem :product="product"
-          /></v-col>
-        </v-row>
-      </div>
-      <div class="text-center mt-40 mb-5">
-        <pagination
-          :pagination="getPaginationProduct"
           @pagination="changePagination"
-        />
+          :pagination="getPaginationProduct"
+          class="row pb-10 mt-5"
+        >
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
+          </template>
+          <template #items="{ item }">
+            <v-col cols="12" sm="4" class="mb-3">
+              <ProductItem :product="item" />
+            </v-col>
+          </template>
+        </data-iterator>
       </div>
     </main-back>
   </div>
@@ -57,7 +58,12 @@ export default {
   },
   data: () => ({}),
   computed: {
-    ...mapGetters("products", ["getProducts", "getPaginationProduct"]),
+    ...mapGetters("products", [
+      "getProducts",
+      "getPaginationProduct",
+      "isFilteredProduct",
+      "getProductsLoading",
+    ]),
   },
   methods: {
     ...mapActions("products", ["loadProducts"]),

src/components/Profile/Profile.vue

@@ -150,7 +150,7 @@
                   text="I’VE CHANGED MY MIND"
                   icon="WMi-cancel"
                   class="px-0"
-                  height="19"
+                  height="29"
                   lg
               /></router-link>
               <RectangleButton
@@ -221,20 +221,4 @@ export default {
   padding-right: 100px !important;
   padding-left: 100px !important;
 }
-
-.loading__container {
-  position: relative;
-}
-
-.loading-data {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 9999;
-  transform: translate(-50%, -50%);
-}
-
-.loading-form {
-  filter: blur(5px);
-}
 </style>

src/components/Programs/Modals/FiltersModal.vue

@@ -138,14 +138,16 @@ export default {
     ...mapGetters("programs", ["getFilters"]),
   },
   methods: {
-    ...mapMutations("programs", ["SET_FILTER_PROGRAMS"]),
+    ...mapMutations("programs", ["SET_FILTER_PROGRAMS", "SET_IS_FILTERED_PROGRAM"]),
     filterPrograms() {
+      this.SET_IS_FILTERED_PROGRAM(true);
       this.SET_FILTER_PROGRAMS(this.filter);
       this.$emit("filter");
       this.$emit("filterCount", this.filter);
       this.$_closeModal();
     },
     clearFilter() {
+      this.SET_IS_FILTERED_PROGRAM(false);
       this.filter = cloneDeep(defaultFilter);
       this.SET_FILTER_PROGRAMS(this.filter);
       this.$emit("filter");

src/components/Users/Items.vue

@@ -91,12 +91,19 @@ export default {
       "getUsersLoading",
     ]),
     ...mapGetters("modal", ["isModal"]),
-
     ...mapState("users", ["filters"]),
+    filter() {
+      return {
+        role_name: {
+          type: "in",
+          val: this.$route.query.role_name,
+        },
+      };
+    },
   },
   methods: {
     ...mapActions("users", ["loadUsers", "loadTrainerTrainee", "laodRoles"]),
-    ...mapMutations("users", ["SET_PAGINATION"]),
+    ...mapMutations("users", ["SET_PAGINATION", "SET_FILTER_USER"]),
     changePagination(page) {
       if (this.getPaginationUser.page !== page) {
         this.SET_PAGINATION(page);
@@ -111,9 +118,10 @@ export default {
     },
   },
   async created() {
-    if (!this.$route.query.role_name) {
+    if (this.$route.query.role_name) {
-      this.load();
+      this.SET_FILTER_USER(this.filter);
     }
+    this.load();
     this.role === "admin" ? await this.laodRoles() : false;
     this.getRoles.push({ id: 0, name: "trainee" });
   },

src/components/Users/Modals/FiltersModal.vue

@@ -2,7 +2,7 @@
   <basic-modal
     width="458"
     transition="slide-x-transition"
-    tag="form"
+    tag="vee-form"
     @submit="filterUser"
   >
     <template #header>
@@ -118,14 +118,16 @@ export default {
     ...mapGetters("users", ["getFilters"]),
   },
   methods: {
-    ...mapMutations("users", ["SET_FILTER_USER"]),
+    ...mapMutations("users", ["SET_FILTER_USER", "SET_IS_FILTERED_USER"]),
     // ...mapActions("users", ["laodRoles"]),
     filterUser() {
+      this.SET_IS_FILTERED_USER(true);
       this.SET_FILTER_USER(this.filter);
       this.$emit("filter");
       this.$_closeModal();
     },
     clearFilter() {
+      this.SET_IS_FILTERED_USER(false);
       this.filter = cloneDeep(defaultFilter);
       this.SET_FILTER_USER(this.filter);
       this.$emit("filter");
@@ -135,11 +137,9 @@ export default {
   created() {
     if (this.$route.query.role_name) {
       this.filter.role_name.val = this.$route.query.role_name;
-      this.filterUser();
     }
     let filter = { ...this.filter, ...this.getFilters };
     this.filter = filter;
-    console.log(this.filter, this.getFilters, filter);
   },
 };
 </script>

src/components/Workouts/Add.vue

@@ -11,7 +11,8 @@
             subTitle="let us know you better, it comes handy."
           />
         </div>
-        <v-form @submit.prevent="submit">
+          <loading v-if="loading" class="loading-data" />
+        <v-form @submit.prevent="submit" :class="{ 'loading-form': loading }">
           <v-row class="mt-4">
             <v-col cols="3">
               <div class="pb-14 h-100">
@@ -156,14 +157,16 @@
                   text="I’VE CHANGED MY MIND"
                   icon="WMi-cancel"
                   class="px-0"
-                  height="19"
+                  height="29"
+                  lg
                 />
               </router-link>
               <RectangleButton
                 :text="(workoutId ? 'update' : 'add') + ' the workout'"
                 type="submit"
                 class="custom-btn add-btn"
-                height="25"
+                height="29"
+                lg
               />
             </div>
           </div>
@@ -188,6 +191,7 @@ export default {
   },
   data: () => ({
     // perviousCropData: {},
+    loading: false,
     form: {
       batch_id: RANDOM_TOKEN,
     },
@@ -242,11 +246,12 @@ export default {
       await this.loadWorkout(this.workoutId);
       this.form = this.getWorkout;
       this.form["batch_id"] = RANDOM_TOKEN;
-      this.loadWorkoutCategories(this.form.sport_category_id);
+     await this.loadWorkoutCategories(this.form.sport_category_id);
       // this.perviousCropData = this.fileForm.crop_data;
+      this.loading = false
     },
-    changeSportCategories() {
+    async changeSportCategories() {
-      this.loadWorkoutCategories(this.form.sport_category_id);
+     await this.loadWorkoutCategories(this.form.sport_category_id);
     },
     removeTags(item) {
       this.form.tags.splice(this.form.tags.indexOf(item), 1);
@@ -256,6 +261,7 @@ export default {
   created() {
     this.loadSportCategories();
     if (this.workoutId) {
+      this.loading = true;
       this.load();
     }
   },

src/components/Workouts/Items.vue

@@ -21,9 +21,7 @@
               :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
-            <router-link
+            <router-link class="text-decoration-none" :to="{ name: 'addWorkout' }"
-              class="text-decoration-none"
-              :to="{ name: 'addWorkout' }"
               ><RectangleButton
                 size="xx-large"
                 icon="WMi-plus"
@@ -32,28 +30,25 @@
             /></router-link>
           </div>
         </div>
-        <template v-if="getWorkouts.length">
+        <data-iterator
-          <v-row class="mt-10">
+          :is-filtered="isFilteredWorkout"
-            <v-col
+          :loading="getWorkoutsLoading"
-              cols="12"
+          :items="getWorkouts"
-              md="6"
-              class="mb-3"
-              v-for="workout in getWorkouts"
-              :key="workout.id"
-              ><WorkoutItem :workout="workout"
-            /></v-col>
-          </v-row>
-        </template>
-      </div>
-      <div class="text-center mt-40 mb-5" v-if="getWorkouts.length">
-        <pagination
-          :pagination="getPaginationWorkout"
           @pagination="changePagination"
-        />
+          :pagination="getPaginationWorkout"
-      </div>
+          class="row pb-10 mt-5"
-      <template v-if="!getWorkouts.length">
+        >
-        <div class="text-center">There are no items to display</div>
+          <template #loading>
+            <loading />
+          </template>
+          <template #no-items>
+            <no-items />
           </template>
+          <template #items="{ item }">
+            <v-col cols="12" md="6" class="mb-3"><WorkoutItem :workout="item" /></v-col>
+          </template>
+        </data-iterator>
+      </div>
     </main-back>
     <div class="text-center">
       <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
@@ -76,6 +71,8 @@ export default {
       "getWorkouts",
       "getPaginationWorkout",
       "getFilterCount",
+      "isFilteredWorkout",
+      "getWorkoutsLoading",
     ]),
     ...mapGetters("modal", ["isModal"]),
   },

src/components/Workouts/Modals/FiltersModal.vue

@@ -99,13 +99,15 @@ export default {
     ...mapGetters("workouts", ["getFilters"]),
   },
   methods: {
-    ...mapMutations("workouts", ["SET_FILTER_WORKOUTS"]),
+    ...mapMutations("workouts", ["SET_FILTER_WORKOUTS", "SET_IS_FILTERED_WORKOUT"]),
     filterWorkotus() {
+      this.SET_IS_FILTERED_WORKOUT(true);
       this.SET_FILTER_WORKOUTS(this.filter);
       this.$emit("filter");
       this.$_closeModal();
     },
     clearFilter() {
+      this.SET_IS_FILTERED_WORKOUT(false);
       this.filter = cloneDeep(defaultFilter);
       this.SET_FILTER_WORKOUTS(this.filter);
       this.$emit("filter");

src/components/WorkoutsSeries/Modals/AddWorkoutModal.vue

@@ -215,7 +215,6 @@ export default {
 
     // });
     await this.loadWorkoutsToSeries();
-    console.log(this.getWorkoutsToSeries);
   },
 };
 </script>

src/store/modules/products/actions.js

@@ -1,13 +1,18 @@
 import ProductRepository from "@/abstraction/repository/productRepository";
 export default {
     async loadProducts({ state, commit }) {
+        try {
+            commit("SET_LOADING_PRODUCTS", true);
             let data = { pagination: state.pagination };
             let repository = new ProductRepository();
             const resource = await repository.index(data);
             commit("SET_PRODUCTS", resource.data);
             commit("SET_PAGINATION", resource.pagination);
-
+        } catch (e) {
-
+            return e;
+        } finally {
+            commit("SET_LOADING_PRODUCTS", false);
+        }
     },
     async loadProduct({ commit }, productId) {
         let repository = new ProductRepository();
@@ -23,5 +28,5 @@ export default {
         let repository = new ProductRepository();
         const resource = await repository.update(data.id, data);
         commit("UPDATE_PRODUCT", resource);
-    }
+    },
 };

src/store/modules/products/getters.js

@@ -1,5 +1,7 @@
 export default {
     getProducts: state => state.products,
     getProduct: state => state.product,
-    getPaginationProduct: state => state.pagination
+    getPaginationProduct: state => state.pagination,
+    isFilteredProduct: state => state.isFiltered,
+    getProductsLoading: state => state.loading,
 }

src/store/modules/products/mutations.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 export default {
+    // SET
     SET_PRODUCTS(state, payload) {
         Vue.set(state, "products", payload)
     },
@@ -10,11 +11,17 @@ export default {
     SET_PRODUCT(state, payload) {
         Vue.set(state, "product", payload);
     },
+    // ADD
     ADD_PRODUCT(state, payload) {
         state.products.push(payload);
     },
+    // UPDATE
     UPDATE_PRODUCT(state, payload) {
         const index = state.products.findIndex((x) => x.id === payload.id);
         Vue.set(state.products, index, payload);
     },
+    // LOADING
+    SET_LOADING_PRODUCTS(state, status) {
+        Vue.set(state, 'loading', status);
+    },
 };

src/store/modules/products/state.js

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

src/store/modules/programs/actions.js

@@ -66,5 +66,5 @@ export default {
         let repository = new ProgramRepository();
         await repository.verify(courseId);
         commit("VERIFY_PROGRAM", courseId);
-    }
+    },
 };

src/store/modules/programs/mutations.js

@@ -18,6 +18,9 @@ export default {
     SET_FILTER_COUNT(state, payload) {
         Vue.set(state, "filterCount", payload);
     },
+    SET_IS_FILTERED_PROGRAM(state, status) {
+        Vue.set(state, 'isFiltered', status);
+    },
     // ADD
     ADD_PROGRAM(state, payload) {
         state.programs.push(payload);

src/store/modules/users/mutations.js

@@ -18,6 +18,10 @@ export default {
     SET_FILTER_COUNT(state, payload) {
         Vue.set(state, "filterCount", payload);
     },
+    SET_IS_FILTERED_USER
+        (state, payload) {
+        Vue.set(state, "isFiltered", payload);
+    },
     // UPDATE
     UPDATE_USER(state, payload) {
         const index = state.users.findIndex((x) => x.id === payload.id);

src/store/modules/workouts/actions.js

@@ -3,6 +3,7 @@ import { setQuery } from "@/abstraction/resources/workoutResource";
 export default {
     async loadWorkouts({ state, commit }) {
         try {
+            commit("SET_LOADING_WORKOUTS", true);
             let data = { pagination: state.pagination, filters: state.filters };
             let repository = new WorkoutRepository();
             const resource = await repository.index(data);
@@ -12,6 +13,8 @@ export default {
             commit("SET_PAGINATION", resource.pagination);
         } catch (e) {
             return e;
+        } finally {
+            commit("SET_LOADING_WORKOUTS", false);
         }
     },
     async loadWorkout({ commit }, workoutId) {

src/store/modules/workouts/getters.js

@@ -3,5 +3,7 @@ export default {
     getWorkout: state => state.workout,
     getPaginationWorkout: state => state.pagination,
     getFilters: state => state.filters,
-    getFilterCount: state => state.filterCount
+    getFilterCount: state => state.filterCount,
+    isFilteredWorkout: state => state.isFiltered,
+    getWorkoutsLoading: state => state.loading,
 }

src/store/modules/workouts/mutations.js

@@ -18,6 +18,9 @@ export default {
     SET_FILTER_COUNT(state, payload) {
         Vue.set(state, "filterCount", payload);
     },
+    SET_IS_FILTERED_WORKOUT(state, payload) {
+        Vue.set(state, "isFiltered", payload);
+    },
     // ADD
     ADD_WORKOUT(state, payload) {
         state.workouts.push(payload);
@@ -34,4 +37,8 @@ export default {
         Vue.set(state.pagination, 'itemsLength', state.pagination.itemsLength - 1);
         Vue.set(state.pagination, 'pageStop', state.pagination.pageStop - 1);
     },
+    // LOADING
+    SET_LOADING_WORKOUTS(state, status) {
+        Vue.set(state, 'loading', status);
+    }
 };

src/store/modules/workouts/state.js

@@ -5,5 +5,7 @@ export default {
         itemsPerPage: 12
     },
     filters: {},
-    filterCount: null
+    filterCount: null,
+    isFiltered: false,
+    loading: false,
 };

src/styles/vuetify/_modify.scss

@@ -312,3 +312,20 @@ input::placeholder {
     font-family: "cizel" !important;
     color: var(--color-social-yellow) !important;
 }
+
+/* -------------------- loading ------------------------------*/
+.loading__container {
+    position: relative;
+}
+
+.loading-data {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 9999;
+    transform: translate(-50%, -50%);
+}
+
+.loading-form {
+    filter: blur(5px);
+}

src/views/Register.vue

@@ -180,7 +180,6 @@ export default {
       this.verifyCodePage = !this.verifyCodePage;
     },
     async verifyEmailCode() {
-      console.log(this.form);
       await this.verifyEmail(this.form);
       this.$router.push({ name: "dashboard" });
     },