fix

src/abstraction/repository/programSeriesRepository.js

@@ -21,6 +21,16 @@ export default class ProgramSeriesRepository {
             return getJson(response.data.data);
         }
     }
+    async update(data, seriesId) {
+        let json = setData(data);
+        let response = await axios.put(
+            url("updateSeries", { series: seriesId }),
+            json
+        );
+        if (response.status === 200) {
+            return response.data.data;
+        }
+    }
     async delete(data) {
         await axios.delete(url("destroySeries", { series: data }));
     }

src/abstraction/repository/sportCategoryRepository.js

@@ -2,8 +2,14 @@ import axios from "axios";
 import url from "@/router/url";
 import { getArray, getJson } from "../resources/sportCategoryResource";
 export default class SportCategoryRepository {
-    async index() {
+    async index(data) {
-        let response = await axios.get(url("indexClientSportCategories"));
+        let response = await axios.get(url("indexSportCategories"), { params: data });
+        if (response.status === 200) {
+            return getArray(response.data);
+        }
+    }
+    async trainerIndex(data) {
+        let response = await axios.get(url("indexClientSportCategories"), { params: data });
         if (response.status === 200) {
             return getArray(response.data);
         }

src/abstraction/resources/programResource.js

@@ -3,10 +3,12 @@ import { getJsonTrainer } from './trainerProgramResource';
 import { getJsonSportCategory } from './sportCategoryPorgramResource';
 export const getJson = (data) => ({
     id: data.id,
+    active_trainee_count: data.active_trainee_count,
     trainer: data.trainer ? getJsonTrainer(data.trainer) : {},
     trainer_id: data.trainer_id,
     sport_category: data.trainer ? getJsonSportCategory(data.trainer) : {},
     sport_category_id: data.sport_category_id,
+    program_category_id: data.sport_category?.parent?.id,
     thumbnail: data.thumbnail,
     verified: data.verified,
     status: data.status,

src/abstraction/resources/programSeriesResource.js

@@ -1,5 +1,4 @@
 import { getJsonTrainer } from './trainerProgramResource';
-import { objectToFormData } from "@/utils/objectToFormData";
 export const getJson = (data) => ({
     id: data.id,
     trainer: data.trainer ? getJsonTrainer(data.trainer) : {},
@@ -28,5 +27,5 @@ export const setData = (data) => {
         estimate_time: data.estimate_time,
         repeat: data.repeat
     };
-    return objectToFormData(formData);
+    return formData;
 };

src/abstraction/resources/sportCategoryResource.js

@@ -9,4 +9,3 @@ export const getArray = ({ data }) => {
     data = data.map((category) => getJson(category));
     return { data };
 };
-

src/abstraction/resources/workoutResource.js

@@ -1,4 +1,3 @@
-import { objectToFormData } from "@/utils/objectToFormData";
 import { SetPagination, SetQueriesObject } from "@/utils/setQueriesObject";
 export const getJson = (data) => ({
     id: data.id,

src/components/Bookmarks/Items.vue

@@ -74,13 +74,11 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import BookmarksWorkouts from "./Workouts/Workouts.vue";
 import BookmarksPrograms from "./Programs/Programs";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 export default {
   components: {
-    SectionTitle,
     BookmarksWorkouts,
     BookmarksPrograms,
   },

src/components/Bookmarks/Programs/Programs.vue

@@ -1,10 +1,15 @@
 <template>
   <div>
     <div class="wa__program__images">
-      <div
+      <img
-        class="wa__program__image"
+        class="wa__program__image w-100"
-        :style="{ backgroundImage: `url(${program.bookmark_data.thumbnail})` }"
+        :src="
-      ></div>
+          program.bookmark_data.thumbnail
+            ? program.bookmark_data.thumbnail
+            : 'https://via.placeholder.com/1280x720'
+        "
+        alt="product image"
+      />
       <div class="wa__program__image__button">
         <div class="wa__program__image__button--icon">
           <RectangleButton
@@ -80,9 +85,6 @@ export default {
   display: block;
   transition: 0.5s ease;
   backface-visibility: hidden;
-  height: 300px;
-  background-size: cover;
-  background-position: center;
 }
 .wa__program__image__button {
   transition: 0.5s ease;

src/components/Bookmarks/Workouts/Workouts.vue

@@ -2,13 +2,16 @@
   <div class="border-bottom">
     <v-row>
       <v-col cols="4" class="pr-0">
-        <div
+        <img
-          class="workout__img"
+          class="rounded w-100"
-          :style="{
+          :src="
-            backgroundImage: `url(${workout.bookmark_data.thumbnail})`,
+            workout.bookmark_data.thumbnail
-          }"
+              ? workout.bookmark_data.thumbnail
-        ></div
+              : 'https://via.placeholder.com/1280x720'
-      ></v-col>
+          "
+          alt="workout image"
+        />
+      </v-col>
       <v-col cols="8">
         <div class="details__card">
           <div>
@@ -26,17 +29,17 @@
                   label
                   color="gray"
                   text-color="black"
-                  class="mr-1 text-uppercase"
+                  class="mr-1 text-uppercase tag__chip"
                   xs
                   v-for="(item, i) in workout.bookmark_data.tags"
                   :key="i"
-                  :text="item.name"
+                  :text="item"
                 />
               </div>
               <div>
                 <RectangleButton
                   size="large"
-                  height="26"
+                  height="31"
                   icon="WMi-trash"
                   class="custom-btn ml-1"
                   @click="deleteBookmarkWorkout(workout.id)"
@@ -87,4 +90,8 @@ export default {
   height: 100%;
   justify-content: space-between;
 }
+.tag__chip {
+  font-size: 12px !important;
+  font-family: "Montserrat-light";
+}
 </style>

src/components/Products/Add.vue

@@ -219,7 +219,6 @@
 </template>
 <script>
 import { mapActions, mapGetters } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import Dropzone from "../Global/Input/Dropzone.vue";
@@ -230,7 +229,6 @@ const RANDOM_TOKEN = makeid(50);
 //
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
     Dropzone,
   },

src/components/Products/Items.vue

@@ -48,12 +48,10 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ProductItem from "./Item.vue";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 export default {
   components: {
-    SectionTitle,
     ProductItem,
   },
   data: () => ({}),

src/components/Profile/Profile.vue

@@ -170,14 +170,12 @@
 </template>
 <script>
 import { mapActions, mapGetters } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import { makeid } from "@/utils/math";
 const RANDOM_TOKEN = makeid(50);
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
   },
   data: () => ({

src/components/Profile/TraineeProfile.vue

@@ -154,10 +154,8 @@
 </template>
 <script>
 import { mapActions, mapGetters } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 export default {
   components: {
-    SectionTitle,
   },
   data: () => ({
     form: {},

src/components/ProgramSeries/Item.vue

@@ -49,6 +49,7 @@
             width="48"
             class="ml-1 custom-btn"
             icon="WMi-pencil"
+            @click.native.prevent="$_openModal('add_series', { data: series })"
           />
           <RectangleButton
             v-if="role === 'admin'"
@@ -119,4 +120,4 @@ export default {
   word-wrap: break-word;
   overflow: hidden;
 }
-</style>
+</style>

src/components/ProgramSeries/Items.vue

@@ -49,14 +49,12 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import SeriesItem from "./Item.vue";
 import { mapGetters, mapActions } from "vuex";
 import AddSeriesModal from "./Modals/AddSeriesModal.vue";
 
 export default {
   components: {
-    SectionTitle,
     SeriesItem,
     AddSeriesModal,
   },

src/components/ProgramSeries/Modals/AddSeriesModal.vue

@@ -5,10 +5,11 @@
     tag="vee-form"
     @submit="addSeries"
     ref="modal"
+    @open="openModal"
   >
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -73,7 +74,7 @@
         <RectangleButton
           height="29"
           class="btn__modal--confirm custom-btn wa__f__m__eb"
-          text="add"
+          :text="`${form.id ? 'edit' : 'add'}`"
           type="submit"
         />
       </div>
@@ -82,10 +83,8 @@
 </template>
 <script>
 import { mapActions } from "vuex";
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 export default {
   name: "modal_add_series",
-  components: { SectionTitle },
   props: {
     programId: {},
   },
@@ -98,14 +97,27 @@ export default {
     },
   }),
   methods: {
-    ...mapActions("programSeries", ["addSeriesToProgram"]),
+    ...mapActions("programSeries", ["addSeriesToProgram", "updateSeriesToProgram"]),
+    openModal({ data }) {
+      this.form = { ...data };
+    },
     async addSeries() {
-      let response = await this.addSeriesToProgram({
+      if (this.form.id) {
-        data: this.form,
+        let response = await this.updateSeriesToProgram({
-        courseId: Number(this.programId),
+          data: this.form,
-      });
+          seriesId: +this.form.id,
-      if (response) {
+        });
-        this.$_closeModal();
+        if (response) {
+          this.$_closeModal();
+        }
+      } else {
+        let response = await this.addSeriesToProgram({
+          data: this.form,
+          courseId: Number(this.programId),
+        });
+        if (response) {
+          this.$_closeModal();
+        }
       }
     },
   },

src/components/Programs/Add.vue

@@ -35,6 +35,18 @@
                     item-value="id"
                     label="program category"
                     :items="getSportCategories"
+                    v-model="form.program_category_id"
+                    @change="changeSportCategories"
+                  ></v-autocomplete>
+                </v-col>
+                <v-col cols="4">
+                  <v-autocomplete
+                    dark
+                    class="mt-0 pt-0"
+                    item-text="name"
+                    item-value="id"
+                    label="workout subcategory"
+                    :items="getSubSportCategories"
                     v-model="form.sport_category_id"
                   ></v-autocomplete>
                 </v-col>
@@ -130,7 +142,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import { mapGetters, mapActions } from "vuex";
@@ -140,7 +151,6 @@ const RANDOM_TOKEN = makeid(50);
 
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
   },
   data: () => ({
@@ -160,7 +170,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters("sportCategories", ["getSportCategories"]),
+    ...mapGetters("sportCategories", ["getSportCategories", "getSubSportCategories"]),
     ...mapGetters("programs", ["getProgram"]),
     programId() {
       return this.$route.params.id;
@@ -203,6 +213,10 @@ export default {
       this.form = this.getProgram;
       this.form["batch_id"] = RANDOM_TOKEN;
       // this.perviousCropData = this.fileForm.crop_data;
+      await this.loadSportCategories(this.form.program_category_id);
+    },
+    async changeSportCategories() {
+      await this.loadSportCategories(this.form.program_category_id);
     },
     removeTags(item) {
       this.form.tags.splice(this.form.tags.indexOf(item), 1);

src/components/Programs/Item.vue

@@ -32,6 +32,7 @@
             />
           </router-link>
           <router-link
+            v-if="program.active_trainee_count === 0"
             :to="{
               name: 'editProgram',
               params: { id: program.id },
@@ -130,9 +131,19 @@ export default {
       "loadProgram",
     ]),
     removeProgram(id) {
-      toast.question("Are sure delete program?", "Delete program", () => {
+      console.log("this.program.active_trainee_count", this.program.active_trainee_count);
-        this.deleteProgram(id);
+      if (this.program.active_trainee_count === 0) {
-      });
+        console.log("is not started");
+        toast.question("Are sure delete program?", "Delete program", async () => {
+          await this.deleteProgram({ courseId: id, isStarted: false });
+        });
+      } else {
+        console.log("is started");
+        toast.question("Are sure delete program?", "Delete program", async () => {
+          await this.deleteProgram({ courseId: id, isStarted: true });
+          this.program.verified = false;
+        });
+      }
     },
     async openDetailModal() {
       await this.loadProgram(this.program.id);

src/components/Programs/Items.vue

@@ -64,7 +64,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "@/components/Global/Section/SectionTitle.vue";
 import ProgramItem from "./Item.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import ProgramDetailModal from "./Modals/Detail.vue";
@@ -74,7 +73,6 @@ import { mapGetters, mapActions, mapMutations } from "vuex";
 import { UserStorage } from "@/utils/storage";
 export default {
   components: {
-    SectionTitle,
     ProgramItem,
     FiltersModal,
     ProgramDetailModal,

src/components/Programs/Modals/FiltersModal.vue

@@ -7,7 +7,7 @@
   >
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -70,7 +70,7 @@
       </div>
     </template>
     <template #footer>
-    <div class="d-flex justify-space-between align-items-center w-100 px-4">
+      <div class="d-flex justify-space-between align-items-center w-100 px-4">
         <RectangleButton
           class="btn__modal--cancel pl-0"
           text="cancel"
@@ -91,7 +91,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import { cloneDeep } from "lodash";
 import { mapMutations, mapGetters } from "vuex";
 let defaultFilter = {
@@ -115,7 +114,6 @@ let defaultFilter = {
 };
 export default {
   name: "modal_filters",
-  components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
     programStatus: [

src/components/TraineePrograms/Items.vue

@@ -38,11 +38,9 @@
 </template>
 <script>
 import { mapActions, mapGetters, mapMutations } from "vuex";
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import TraineeProgramItem from "./Item.vue";
 export default {
   components: {
-    SectionTitle,
     TraineeProgramItem,
   },
   computed: {

src/components/Users/Item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user__card">
     <v-row>
-      <v-col cols="3" @click="openUserDetailModal">
+      <v-col class="cursor-pointer" cols="3" @click="openUserDetailModal">
         <div class="d-flex align-center h-100" style="overflow: hidden">
           <div style="line-height: 14px">
             <div class="user__name wa__f__m__eb">

src/components/Users/Items.vue

@@ -63,7 +63,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ChangeRoleModal from "./Modals/ChangeRoleModal.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import UserDetailModal from "./Modals/Detail.vue";
@@ -73,7 +72,6 @@ import { UserStorage } from "@/utils/storage";
 
 export default {
   components: {
-    SectionTitle,
     UserItem,
     ChangeRoleModal,
     FiltersModal,

src/components/Users/Modals/ChangeRoleModal.vue

@@ -2,7 +2,7 @@
   <basic-modal @open="openModal" width="458" transition="slide-x-transition">
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -51,11 +51,9 @@
 </template>
 <script>
 import { mapActions } from "vuex";
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import toast from "@/utils/toast";
 export default {
   name: "modal_changeRole",
-  components: { SectionTitle },
   props: {
     userId: {},
   },

src/components/Users/Modals/FiltersModal.vue

@@ -8,7 +8,7 @@
   >
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -83,7 +83,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import { mapMutations, mapGetters } from "vuex";
 import { cloneDeep } from "lodash";
 import { UserStorage } from "@/utils/storage";
@@ -104,7 +103,6 @@ let defaultFilter = {
 };
 export default {
   name: "modal_filters",
-  components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
     role: UserStorage.getRole() ? UserStorage.getRole() : null,

src/components/Workouts/Add.vue

@@ -178,7 +178,6 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import ImageCropper from "../Global/Input/ImageCropper.vue";
 import FileRepository from "../../abstraction/repository/fileRepository";
 import { mapActions, mapGetters } from "vuex";
@@ -188,7 +187,6 @@ const RANDOM_TOKEN = makeid(50);
 
 export default {
   components: {
-    SectionTitle,
     ImageCropper,
   },
   data: () => ({

src/components/Workouts/Item.vue

@@ -13,7 +13,7 @@
               ? workout.thumbnail
               : 'https://via.placeholder.com/1280x720'
           "
-          alt="product image"
+          alt="workout image"
         />
       </v-col>
       <v-col cols="8">

src/components/Workouts/Items.vue

@@ -59,7 +59,6 @@
 </template>
 <script>
 import WorkoutItem from "./Item";
-import SectionTitle from "@/components/Global/Section/SectionTitle.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import DetailModal from "./Modals/Detail.vue";
 import AppSectionModal from "@/components/Global/Modal/AppSection.vue";
@@ -67,7 +66,6 @@ import { mapGetters, mapActions, mapMutations } from "vuex";
 export default {
   components: {
     WorkoutItem,
-    SectionTitle,
     FiltersModal,
     DetailModal,
     AppSectionModal,

src/components/Workouts/Modals/FiltersModal.vue

@@ -7,7 +7,7 @@
   >
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -70,7 +70,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 
 import { cloneDeep } from "lodash";
 import { mapMutations, mapGetters } from "vuex";
@@ -88,7 +87,6 @@ const defaultFilter = {
 
 export default {
   name: "modal_filters",
-  components: { SectionTitle },
   data: () => ({
     filter: cloneDeep(defaultFilter),
   }),

src/components/WorkoutsSeries/Items.vue

@@ -49,14 +49,12 @@
   </div>
 </template>
 <script>
-import SectionTitle from "../Global/Section/SectionTitle.vue";
 import WorkoutsSeriesItem from "./Item.vue";
 import AttachWorkoutModal from "./Modals/AttachWorkoutModal.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 
 export default {
   components: {
-    SectionTitle,
     WorkoutsSeriesItem,
     AttachWorkoutModal,
   },

src/components/WorkoutsSeries/Modals/AttachWorkoutModal.vue

@@ -9,7 +9,7 @@
   >
     <template #header>
       <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+        <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
       </div>
     </template>
     <template #default>
@@ -123,7 +123,6 @@
   </basic-modal>
 </template>
 <script>
-import SectionTitle from "../../Global/Section/SectionTitle.vue";
 import AddWorkoutsItem from "../Item.vue";
 import { mapActions, mapGetters, mapMutations } from "vuex";
 import { cloneDeep } from "lodash";
@@ -139,7 +138,7 @@ const defaultFilter = {
 };
 export default {
   name: "modal_add_workout",
-  components: { SectionTitle, AddWorkoutsItem },
+  components: { AddWorkoutsItem },
   data: () => ({
     filter: cloneDeep(defaultFilter),
     search: null,

src/router/url.js

@@ -37,9 +37,10 @@ const urls = {
   // join workout to series
   joinWorkoutToSeries: "trainer/series/:series/workout/:workout",
   destroyWorkoutFromSeries: "trainer/series/:series/workout/:workout",
-  //  series
+  // programs -> series
   indexSeries: "trainer/courses/:course/series",
   storeSeries: "trainer/course/:course/series",
+  updateSeries: "trainer/series/:series",
   destroySeries: "trainer/series/:series",
   // programs -> series -> workouts
   indexSeriesWorkouts: "trainer/courses/:course/series/:series/workouts",

src/store/modules/programSeries/actions.js

@@ -26,6 +26,11 @@ export default {
             return resource
         }
     },
+    async updateSeriesToProgram({ commit }, { data, seriesId }) {
+        let repository = new ProgramSeriesRepository();
+        const resource = await repository.update(data, seriesId);
+        commit("UPDATE_SERIES_TO_PROGRAM", resource);
+    },
     async deleteSeriesFromProgram({ commit }, seriesId) {
         let repository = new ProgramSeriesRepository();
         await repository.delete(seriesId);

src/store/modules/programs/actions.js

@@ -55,14 +55,15 @@ export default {
         const resource = await repository.update(data.id, data);
         commit("UPDATE_PROGRAM", resource);
     },
-    async deleteProgram({ commit }, courseId) {
+    async deleteProgram({ commit }, { courseId, isStarted }) {
         let repository = new ProgramRepository();
         if (role === 'admin') {
             await repository.delete(courseId);
         } else {
             await repository.deleteTrainer(courseId);
         }
-        commit('DELETE_PROGRAM', courseId);
+        console.log('is started', isStarted);
+        !isStarted && commit('DELETE_PROGRAM', courseId);
     },
     async verifyProgram({ commit }, courseId) {
         let repository = new ProgramRepository();

src/store/modules/sportCategories/actions.js

@@ -1,9 +1,11 @@
 import SportCategoryRepository from "@/abstraction/repository/sportCategoryRepository";
+import { UserStorage } from "@/utils/storage";
+let role = UserStorage.getRole() ? UserStorage.getRole() : null;
 export default {
-    async loadSportCategories({ commit }) {
+    async loadSportCategories({ commit }, parentId) {
         let repository = new SportCategoryRepository();
-        const resource = await repository.index();
+        const resource = role === 'admin' ? await repository.index({ parent_id: parentId }) : await repository.trainerIndex({ parent_id: parentId });
-        commit("SET_SPORT_CATEGORIES", resource.data);
+        parentId ? commit("SET_SUB_SPORT_CATEGORIES", resource.data) : commit("SET_SPORT_CATEGORIES", resource.data);
     },
     async loadSportCategory({ commit }, sportCategoryId) {
         let repository = new SportCategoryRepository();

src/store/modules/sportCategories/getters.js

@@ -1,4 +1,5 @@
 export default {
     getSportCategories: state => state.sportCategories,
+    getSubSportCategories: state => state.subSportCategories,
     getSportCategory: state => state.sportCategory,
 }

src/store/modules/sportCategories/mutations.js

@@ -3,6 +3,9 @@ export default {
     SET_SPORT_CATEGORIES(state, payload) {
         Vue.set(state, "sportCategories", payload);
     },
+    SET_SUB_SPORT_CATEGORIES(state, payload) {
+        Vue.set(state, "subSportCategories", payload);
+    },
     SET_SPORT_CATEGORY(state, payload) {
         Vue.set(state, "sportCategory", payload);
     },

src/store/modules/sportCategories/state.js

@@ -1,4 +1,5 @@
 export default {
     sportCategories: [],
-    sportCategory: []
+    subSportCategories: [],
+    sportCategory: [],
 };

src/styles/vuetify/_modify.scss

@@ -24,7 +24,9 @@ ul {
 a {
     text-decoration: none !important;
 }
-
+.cursor-pointer {
+    cursor: pointer !important;
+}
 .wa__link a {
     text-decoration: none;
     display: block;