fix

src/abstraction/repository/bookmarksRepository.js

@@ -1,18 +1,26 @@
 import axios from "axios";
 import url from '@/router/url';
-import { getArray } from "../resources/bookmarksResource";
+import { getArray, setQuery } from "../resources/bookmarksResource";
 
 export default class BookmarsRepository {
-    async indexCourses() {
-        let response = await axios.get(url('indexCoursesBookmarks'));
+    async indexCourses(data) {
+        let params = setQuery(data)
+        let response = await axios.get(url('indexCoursesBookmarks'), { params });
         if (response.status === 200) {
             return getArray(response.data);
         }
     }
-    async indexWorkouts() {
-        let response = await axios.get(url('indexWorkoutsBookmarks'));
+    async indexWorkouts(data) {
+        let params = setQuery(data)
+        let response = await axios.get(url('indexWorkoutsBookmarks'), { params });
         if (response.status === 200) {
             return getArray(response.data);
         }
     }
+    async deleteWorkout(workoutId) {
+        await axios.delete(url("destroyWorkoutBookmarks", { workout: workoutId }));
+    }
+    async deleteProgram(courseId) {
+        await axios.delete(url("destroyProgramBookmarks", { course: courseId }));
+    }
 }

src/abstraction/repository/productRepository.js

@@ -22,4 +22,14 @@ export default class ProductRepository {
             return getJson(response.data);
         }
     }
+    async update(productId, data) {
+        let json = setData(data, true);
+        let response = await axios.post(
+            url("updateProduct", { product: productId }),
+            json
+        );
+        if (response.status === 200) {
+            return response.data.data;
+        }
+    }
 }

src/abstraction/repository/userProgramsRepository.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+import url from "@/router/url"
+import { getArray, setQuery } from "../resources/userProgramsResource";
+export default class UserProgramsRepository {
+    async index(data) {
+        let params = setQuery(data);
+        let response = await axios.get(url('indexUserProgram'), { params });
+        if (response.status === 200) {
+            return getArray(response.data);
+        }
+    }
+}

src/abstraction/resources/bookmarksResource.js

@@ -1,3 +1,4 @@
+import { SetPagination, SetQueriesObject } from "@/utils/setQueriesObject";
 import { getJson as getJsonProgram } from './programResource'
 import { getJson as getJsonWorkout } from './workoutResource'
 export const getJson = (data) => ({
@@ -5,12 +6,13 @@ export const getJson = (data) => ({
     bookmarkable_type: data.bookmarkable_type,
     bookmarkable_id: data.bookmarkable_id,
     user_id: data.user_id,
-
     bookmark_data: data.courses ? getJsonProgram(data.courses) : getJsonWorkout(data.workouts),
 });
-export const getArray = ({ data }) => {
-    // const pagination = SetPagination(meta);
-    console.log(data);
+export const getArray = ({ data, meta }) => {
+    const pagination = SetPagination(meta);
     data = data.map(bookmark => getJson(bookmark));
-    return { data };
+    return { data, pagination };
+};
+export const setQuery = (data) => {
+    return SetQueriesObject(data);
 };

src/abstraction/resources/productResource.js

@@ -11,12 +11,15 @@ export const getJson = (data) => ({
     name: data.name,
     video_link: data.video_link,
     purchase_link: data.purchase_link,
-    price: data.price,
-    weight: data.weight,
+    price_unit: data.price,
+    price: `${data.price.replace('$', '')}`,
+    weight_unit: data.weight,
+    weight: `${data.weight.replace('kg', '')}`,
+    dimensions_unit: `${data.dimensions.replace('cm', '')}`,
     dimensions: data.dimensions,
     product_category: data.product_category,
-    product_categories_id: data.product_category?.id,
-    product_category_id: data.product_category?.parent?.id
+    product_categories_id: data.product_category?.parent?.id,
+    product_category_id: data.product_category?.id
 });
 export const setData = (data, isUpdate = false) => {
     let formData = {

src/abstraction/resources/userProgramsResource.js

@@ -0,0 +1,27 @@
+import { SetPagination, SetQueriesObject } from "@/utils/setQueriesObject";
+import { getJsonTrainer } from './trainerProgramResource';
+export const getJson = (data) => ({
+    id: data.id,
+    trainer: data.trainer ? getJsonTrainer(data.trainer) : {},
+    sport_category_id: data.sport_category_id,
+    thumbnail: data.thumbnail,
+    verified: data.verified,
+    status: data.status,
+    title: data.title,
+    description: data.description,
+    series_count: data.series_count,
+    workouts_count: data.workouts_count,
+    type: data.type,
+    period: data.period,
+    series: data.series,
+    schedule: data.schedule
+});
+export const getArray = ({ data, meta }) => {
+    const pagination = SetPagination(meta);
+    data = data.map((program) => getJson(program));
+    return { data, pagination }
+};
+
+export const setQuery = (data) => {
+    return SetQueriesObject(data);
+};

src/components/AddProduct/Main.vue

@@ -32,7 +32,6 @@
                   item-value="id"
                   label="product category"
                   :items="getProductCategories"
-                  @change="changeProductCategories"
                   v-model="form.product_categories_id"
                 ></v-autocomplete>
               </v-col>
@@ -103,9 +102,10 @@
                 ><v-text-field
                   placeholder="price"
                   label="price"
-                  class="no-error-msg pt-0 mt-0"
+                  class="pt-0 mt-0"
                   prefix="$"
                   dark
+                  :rules="[rules.price]"
                   v-model="form.price"
                 ></v-text-field
               ></v-col>
@@ -113,9 +113,10 @@
                 ><v-text-field
                   placeholder="package weight"
                   label="package weight"
-                  class="no-error-msg pt-0 mt-0"
+                  class="pt-0 mt-0"
                   suffix="kg"
                   dark
+                  :rules="[rules.weight]"
                   v-model="form.weight"
                 ></v-text-field
               ></v-col>
@@ -232,7 +233,6 @@ export default {
   data: () => ({
     form: {
       batch_id: RANDOM_TOKEN,
-      price: "",
     },
     fileForm: {
       batch_id: RANDOM_TOKEN,
@@ -241,7 +241,14 @@ export default {
     noResultsText: "No results found.",
     noChildrenText: "It does not have a subset",
     placeholder: "product subcategory",
-    child: [],
+    rules: {
+      price: (value) => {
+        return isNaN(value) ? "please enter number" : true;
+      },
+      weight: (value) => {
+        return isNaN(value) ? "please enter number" : true;
+      },
+    },
   }),
   computed: {
     ...mapGetters("productCategories", ["getProductCategories"]),
@@ -249,24 +256,22 @@ export default {
     ProductId() {
       return this.$route.params.id;
     },
+    child() {
+      if (this.form.product_categories_id) {
+        let category = this.getProductCategories.find((x) => {
+          return x.id === this.form.product_categories_id;
+        });
+        return category.children;
+      }
+      return [];
+    },
   },
   methods: {
     ...mapActions("productCategories", ["loadProductCategories"]),
     ...mapActions("products", ["addProduct", "updateProduct", "loadProduct"]),
-    symbol() {},
-    changeProductCategories() {
-      this.child = [];
-      console.log(this.getProductCategories);
-      let index = this.getProductCategories.find((x) => {
-        return x.id === this.form.product_categories_id;
-        // x.children.map((y) => console.log("y.name", y.name));
-      });
-      index.children.map((x) => this.child.push(x));
-      console.log(this.child);
-    },
     async submit() {
       try {
-        if (this.fileForm.media) {
+        if (this.fileForm.media !== this.fileForm.media) {
           let repository = new FileRepository();
           await repository.store(this.fileForm);
         }
@@ -282,13 +287,9 @@ export default {
     async load() {
       await this.loadProduct(this.ProductId);
       this.form = this.getProduct;
-      console.log("this.form", this.form);
+      // this.changeProductCategories();
     },
     removeTags(item) {
-      // {
-      //   course: data.filter(x => x.type === 'course'),
-      //   workout: data.filter(x => x.type === 'workout')
-      // }
       this.form.tags.splice(this.form.tags.indexOf(item), 1);
       this.form.tags = [...this.form.tags];
     },

src/components/Bookmarks/Main.vue

@@ -31,6 +31,12 @@
                     <BookmarksPrograms :program="program" />
                   </v-col>
                 </v-row>
+                <div class="text-center mt-40 mb-5">
+                  <pagination
+                    :pagination="getPaginationProgram"
+                    @pagination="changePaginationPrograms"
+                  />
+                </div>
               </v-tab-item>
               <v-tab-item>
                 <v-row class="mt-4">
@@ -42,6 +48,12 @@
                     ><BookmarksWorkouts :workout="workout"
                   /></v-col>
                 </v-row>
+                <div class="text-center mt-40 mb-5">
+                  <pagination
+                    :pagination="getPaginationWorkout"
+                    @pagination="changePaginationWorkouts"
+                  />
+                </div>
               </v-tab-item>
             </v-tabs-items>
           </v-col>
@@ -54,10 +66,7 @@
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import BookmarksWorkouts from "./Workouts/Workouts.vue";
 import BookmarksPrograms from "./Programs/Programs";
-import FirstImage from "../../assets/28-284379_photo-wallpaper-man-workout-gym-working-gym-workout.jpg";
-import SecondImage from "../../assets/a-bodybuilder-exhibits-his-muscular-physique-1024-768-0.jpg";
-import ThirdImage from "../../assets/5595849.jpg";
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters, mapMutations } from "vuex";
 export default {
   components: {
     SectionTitle,
@@ -66,82 +75,13 @@ export default {
   },
   data: () => ({
     tab: null,
-    bookmarksWorkouts: [
-      {
-        id: 1,
-        src: FirstImage,
-        title: "CHEST press",
-        description:
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
-        items: [
-          {
-            id: 1,
-            text: "GYM",
-          },
-          {
-            id: 2,
-            text: "forearm",
-          },
-        ],
-      },
-      {
-        id: 2,
-        src: SecondImage,
-        title: "CHEST press - dumbell",
-        description:
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
-        items: [
-          {
-            id: 1,
-            text: "GYM",
-          },
-          {
-            id: 2,
-            text: "forearm",
-          },
-        ],
-      },
-      {
-        id: 3,
-        src: ThirdImage,
-        title: "CHEST press",
-        description:
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
-        items: [
-          {
-            id: 1,
-            text: "GYM",
-          },
-          {
-            id: 2,
-            text: "forearm",
-          },
-        ],
-      },
-    ],
-    bookmarksPrograms: [
-      {
-        id: 1,
-        src: FirstImage,
-        title: "Gym Program Level 1",
-        subTitle: "The best move for shoulder abs",
-        sets: 3,
-        workout: 12,
-      },
-      {
-        id: 2,
-        src: SecondImage,
-        title: "Gym Program Level 1",
-        subTitle: "The best move for shoulder abs",
-        sets: 3,
-        workout: 12,
-      },
-    ],
   }),
   computed: {
     ...mapGetters("bookmarks", [
       "getBookmarksPrograms",
       "getBookmarksWorkouts",
+      "getPaginationWorkout",
+      "getPaginationProgram",
     ]),
   },
   methods: {
@@ -149,10 +89,26 @@ export default {
       "loadBookmarksPrograms",
       "loadBookmarksWorkouts",
     ]),
+    ...mapMutations("bookmarks", [
+      "SET_WORKOUTS_PAGINATION",
+      "SET_PROGRAMS_PAGINATION",
+    ]),
+    changePaginationWorkouts(page) {
+      if (this.getPaginationWorkout.page !== page) {
+        this.SET_WORKOUTS_PAGINATION(page);
+        this.loadBookmarksWorkouts();
+      }
+    },
+    changePaginationPrograms(page) {
+      if (this.getPaginationProgram.page !== page) {
+        this.SET_PROGRAMS_PAGINATION(page);
+        this.loadBookmarksPrograms();
+      }
+    },
   },
-  async created() {
-    await this.loadBookmarksPrograms();
-    await this.loadBookmarksWorkouts();
+  created() {
+    this.loadBookmarksPrograms();
+    this.loadBookmarksWorkouts();
     console.log("this.getBookmarksPrograms", this.getBookmarksPrograms);
     console.log("this.getBookmarksWorkouts", this.getBookmarksWorkouts);
   },

src/components/Bookmarks/Programs/Programs.vue

@@ -12,6 +12,7 @@
             class="custom-btn ml-1"
             height="32"
             icon="WMi-trash"
+            @click.native="deleteBookmarksProgram(program.id)"
           />
         </div>
       </div>
@@ -41,14 +42,15 @@
   </div>
 </template>
 <script>
+import { mapActions } from "vuex";
 export default {
   props: {
     program: {
       type: Object,
     },
   },
-  created() {
-    console.log(this.program);
+  methods: {
+    ...mapActions("bookmarks", ["deleteBookmarksProgram"]),
   },
 };
 </script>

src/components/Bookmarks/Workouts/Workouts.vue

@@ -39,6 +39,7 @@
                   height="26"
                   icon="WMi-trash"
                   class="custom-btn custom-icon ml-1"
+                  @click.native="deleteBookmarksWorkout(workout.id)"
                 />
               </div>
             </div>

src/components/Products/Item.vue

@@ -14,7 +14,9 @@
         <div class="product__title mt-2">{{ product.title }}</div>
         <div class="product__sub__title">{{ product.subTitle }}</div>
       </div>
-      <div class="product__price wa__f__m__eb">{{ product.price }}</div>
+      <div class="product__price wa__f__m__eb">
+        {{ product.price_unit ? product.price_unit : "0$" }}
+      </div>
     </div>
   </router-link>
 </template>

src/components/TrainPrograms/Item.vue

@@ -2,17 +2,18 @@
   <div class="program__card">
     <v-row>
       <v-col cols="4">
+        <div class="d-flex align-center h-100" style="overflow: hidden">
           <div class="program__info">
-          <div class="program__title">{{ program.name }}</div>
-          <div class="program__sub_title">{{ program.text }}</div>
-          <div>
+            <div class="program__title">{{ program.title }}</div>
+            <div class="program__sub__title">{{ program.description }}</div>
+            <div class="mt-1">
               <Chip
                 color="gray"
                 text-color="black"
                 xs
                 label
                 class="mr-1 text-uppercase"
-              :text="`${program.sets} sets`"
+                :text="`${program.series_count} series`"
               />
               <Chip
                 color="gray"
@@ -20,16 +21,17 @@
                 xs
                 label
                 class="mr-1 text-uppercase"
-              :text="`${program.workout} workout`"
+                :text="`${program.workouts_count} workout`"
               />
             </div>
           </div>
+        </div>
       </v-col>
       <v-col cols="4" class="text-center">
         <div class="text-uppercase mt-1">
           <div>started in:</div>
           <div class="wa__f__m__eb program__started">
-            {{ program.started_in }}
+            {{ program.schedule.start_at }}
           </div>
         </div>
       </v-col>
@@ -37,10 +39,15 @@
         <div
           :class="[
             'program__done',
-            { not__enf: program.done < 50, enf: program.done > 50 },
+            {
+              not__enf: program.schedule.done_percent < 50,
+              enf: program.schedule.done_percent > 50,
+            },
           ]"
         >
-          <div class="wa__f__m__eb">{{ program.done }}<span>%</span></div>
+          <div class="wa__f__m__eb">
+            {{ program.schedule.done_percent }}<span>%</span>
+          </div>
           <div class="text-uppercase done">done</div>
         </div>
       </v-col>
@@ -52,6 +59,9 @@ export default {
   props: {
     program: {},
   },
+  created() {
+    console.log(this.program);
+  },
 };
 </script>
 <style scoped>
@@ -59,8 +69,9 @@ export default {
   height: 111px;
   border-top: 1px solid var(--color-bg-black);
   border-bottom: 1px solid var(--color-bg-black);
-  padding-top: 25px;
   position: relative;
+  display: flex;
+  align-items: center;
 }
 .program__info {
   line-height: 18px;
@@ -71,11 +82,14 @@ export default {
 }
 .program__sub__title {
   font-size: 15px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow: hidden;
 }
 .program__started {
   font-size: 22px;
-  position: relative;
-  top: -0.7rem;
+  line-height: 18px;
 }
 .program__done {
   position: absolute;

src/components/TrainPrograms/Main.vue

@@ -14,7 +14,11 @@
           </div>
         </div>
         <v-row class="mt-4">
-            <v-col class="pr-0 pt-0 pb-1" v-for="(trainProgram, i) in trainPrograms" :key="i" cols="12"
+          <v-col
+            class="pr-0 pt-0 pb-1"
+            v-for="(trainProgram, i) in getPrograms"
+            :key="i"
+            cols="12"
             ><TrainProgramItem :program="trainProgram"
           /></v-col>
         </v-row>
@@ -23,6 +27,7 @@
   </div>
 </template>
 <script>
+import { mapActions, mapGetters } from "vuex";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import TrainProgramItem from "./Item.vue";
 export default {
@@ -50,5 +55,15 @@ export default {
       },
     ],
   }),
+  computed: {
+    ...mapGetters("userPrograms", ["getPrograms"]),
+  },
+  methods: {
+    ...mapActions("userPrograms", ["loadPrograms"]),
+  },
+  async created() {
+    await this.loadPrograms();
+    console.log(this.getPrograms);
+  },
 };
 </script>

src/router/url.js

@@ -13,6 +13,8 @@ const urls = {
   verifyProgram: 'admin/courses/verify-course/:course',
   destroyProgram: 'admin/courses/:course',
   updateProgram: "trainer/courses/:course",
+  // user programs
+  indexUserProgram: "my-courses",
   // sport categories
   indexSportCategories: "admin/sport-categories",
   showSportCategory: "admin/sport-categories/:sportCategory",
@@ -36,6 +38,7 @@ const urls = {
   indexProduct: "admin/products",
   showProduct: "admin/products/:product",
   storeProduct: "admin/products",
+  updateProduct: "admin/products/:product",
   // product category
   indexProductCategories: "admin/product-categories",
   // users
@@ -49,6 +52,8 @@ const urls = {
   // bookmarks
   indexCoursesBookmarks: "bookmarks/course",
   indexWorkoutsBookmarks: "bookmarks/workout",
+  destroyWorkoutBookmarks: "bookmarks/:workout",
+  destroyProgramBookmarks: "bookmarks/:course",
   // file
   storeFile: 'media'
 };

src/store/modules/bookmarks/actions.js

@@ -1,15 +1,31 @@
 import BookmarksRepository from "@/abstraction/repository/bookmarksRepository";
 export default {
-    async loadBookmarksPrograms({ commit }) {
+    async loadBookmarksPrograms({ state, commit }) {
+        try {
+            let data = { pagination: state.programsPagination }
             let repository = new BookmarksRepository();
-        const resource = await repository.indexCourses();
+            const resource = await repository.indexCourses(data);
             commit("SET_BOOKMARKS_PROGRAMS", resource.data);
-        // commit("SET_PAGINATION", resource.pagination);
+            commit("SET_PROGRAMS_PAGINATION", resource.pagination);
+        } catch (e) {
+            return e;
+        }
     },
-    async loadBookmarksWorkouts({ commit }) {
+    async loadBookmarksWorkouts({ state, commit }) {
+        let data = { pagination: state.workoutsPagination }
         let repository = new BookmarksRepository();
-        const resource = await repository.indexWorkouts();
+        const resource = await repository.indexWorkouts(data);
         commit("SET_BOOKMARKS_WORKOUTS", resource.data);
-        // commit("SET_PAGINATION", resource.pagination);
+        commit("SET_WORKOUTS_PAGINATION", resource.pagination);
+    },
+    async deleteBookmarksWorkout({ commit }, workoutId) {
+        let repository = new BookmarksRepository();
+        await repository.deleteWorkout(workoutId);
+        commit('DELETE_BOOKMARKS_WORKOUT', workoutId);
+    },
+    async deleteBookmarksProgram({ commit }, courseId) {
+        let repository = new BookmarksRepository();
+        await repository.deleteProgram(courseId);
+        commit('DELETE_BOOKMARKS_PROGRAM', courseId);
     },
 };

src/store/modules/bookmarks/getters.js

@@ -1,4 +1,6 @@
 export default {
     getBookmarksPrograms: state => state.programs,
     getBookmarksWorkouts: state => state.workouts,
+    getPaginationProgram: state => state.programsPagination,
+    getPaginationWorkout: state => state.workoutsPagination
 }

src/store/modules/bookmarks/mutations.js

@@ -6,4 +6,20 @@ export default {
     SET_BOOKMARKS_WORKOUTS(state, payload) {
         Vue.set(state, "workouts", payload)
     },
+    SET_WORKOUTS_PAGINATION(state, pagination) {
+        pagination = { ...state.workoutsPagination, ...pagination };
+        Vue.set(state, "workoutsPagination", pagination);
+    },
+    SET_PROGRAMS_PAGINATION(state, pagination) {
+        pagination = { ...state.programsPagination, ...pagination };
+        Vue.set(state, "programsPagination", pagination);
+    },
+    DELETE_BOOKMARKS_WORKOUT(state, payload) {
+        const index = state.workouts.findIndex((x) => x.id === payload);
+        Vue.delete(state.workouts, index)
+    },
+    DELETE_BOOKMARKS_PROGRAM(state, payload) {
+        const index = state.programs.findIndex((x) => x.id === payload);
+        Vue.delete(state.programs, index)
+    },
 };

src/store/modules/bookmarks/state.js

@@ -1,7 +1,10 @@
 export default {
     programs: [],
     workouts: [],
-    pagination: {
+    programsPagination: {
+        itemsPerPage: 12
+    },
+    workoutsPagination: {
         itemsPerPage: 12
     },
 };

src/store/modules/products/mutations.js

@@ -14,7 +14,7 @@ export default {
     ADD_PRODUCT(state, payload) {
         state.products.push(payload);
     },
-    UPDATE_PROGRAM(state, payload) {
+    UPDATE_PRODUCT(state, payload) {
         const index = state.products.findIndex((x) => x.id === payload.id);
         Vue.set(state.products, index, payload);
     },

src/store/modules/programs/mutations.js

@@ -17,12 +17,12 @@ export default {
         const index = state.programs.findIndex((x) => x.id === payload.id);
         Vue.set(state.programs, index, payload);
     },
-    DELETE_PROGRAM(state, courseId) {
-        const index = state.programs.findIndex((x) => x.id === courseId);
+    DELETE_PROGRAM(state, payload) {
+        const index = state.programs.findIndex((x) => x.id === payload);
         Vue.delete(state.programs, index)
     },
-    VERIFY_PROGRAM(state, courseId) {
-        const index = state.programs.find(x => x.id === courseId);
+    VERIFY_PROGRAM(state, payload) {
+        const index = state.programs.find(x => x.id === payload);
         index.verified = !index.verified;
     }
 };

src/store/modules/userPrograms/actions.js

@@ -0,0 +1,16 @@
+import UserProgramsRepository from "@/abstraction/repository/userProgramsRepository";
+export default {
+    async loadPrograms({ state, commit }) {
+        try {
+            let data = { pagination: state.pagination };
+            let repository = new UserProgramsRepository();
+            const resource = await repository.index(data);
+            console.log('resource', resource);
+            commit("SET_PROGRAMS", resource.data);
+            commit("SET_PAGINATION", resource.pagination);
+        }
+        catch (e) {
+            return e;
+        }
+    },
+};

src/store/modules/userPrograms/getters.js

@@ -0,0 +1,3 @@
+export default {
+    getPrograms: state => state.programs,
+};

src/store/modules/userPrograms/mutations.js

@@ -0,0 +1,10 @@
+import Vue from "vue";
+export default {
+    SET_PROGRAMS(state, payload) {
+        Vue.set(state, "programs", payload);
+    },
+    SET_PAGINATION(state, pagination) {
+        pagination = { ...state.pagination, ...pagination };
+        Vue.set(state, "pagination", pagination);
+    },
+};

src/store/modules/userPrograms/state.js

@@ -0,0 +1,6 @@
+export default {
+    programs: [],
+    pagination: {
+        itemsPerPage: 12
+    },
+};