fix

src/abstraction/repository/workoutRepository.js

@@ -1,10 +1,22 @@
 import axios from "axios";
 import url from "@/router/url";
-import { setData } from "../resources/workoutResource.js";
+import { setData, getJson, getArray } from "../resources/workoutResource.js";
 export default class WorkoutRepository {
+    async index() {
+        let response = await axios.get(url("indexWorkout"));
+        if (response.status === 200) {
+            return getArray(response.data);
+        }
+    }
     async store(data) {
         let json = setData(data);
         let response = await axios.post(url("storeWorkout"), json);
-        console.log('response', response);
+        console.log('kldsbhakjbg', response.data);
+        if (response.status === 201) {
+            return getJson(response.data);
+        }
+    }
+    async delete(workoutId) {
+        await axios.delete(url("destroyWorkout", { workout: workoutId }));
     }
 }

src/abstraction/resources/workoutResource.js

@@ -1,9 +1,25 @@
 import { objectToFormData } from "@/utils/objectToFormData";
+export const getJson = (data) => ({
+    id: data.id,
+    local_name: data.local_name,
+    name: data.name,
+    description: data.description,
+    suggestion_default: {
+        suggested_per_ste: data.suggestion_default.suggested_per_set,
+        suggested_set: data.suggestion_default.suggested_set,
+        suggested_time: data.suggestion_default.suggested_time,
+    },
+    tags: data.tags,
+    thumbnail: data.thumbnail,
+    title: data.title,
+    video: data.video,
+});
 export const setData = (data, isUpdate = false) => {
     let formData = {
         workout_category_id: data.workout_category_id,
         name: data.name,
         local_name: data.local_name,
+        title: data.title,
         description: data.description,
         video: data.video,
         suggested_per_set: data.suggested_per_set,
@@ -17,3 +33,8 @@ export const setData = (data, isUpdate = false) => {
     }
     return objectToFormData(formData);
 };
+export const getArray = ({ data }) => {
+    
+    data = data.map((workout) => getJson(workout));
+    return { data };
+};

src/components/AddWorkout/Main.vue

@@ -31,6 +31,7 @@
                   item-value="id"
                   label="workout category"
                   :items="getSportCategories"
+                  v-model="form.sport_category_id"
                   @change="changeSportCategories"
                 ></v-autocomplete>
               </v-col>
@@ -122,18 +123,22 @@
             </v-row>
             <v-row>
               <v-col cols="12">
-                <v-autocomplete
-                  dark
-                  class="pt-0 multiple"
-                  item-value="id"
-                  item-text="name"
-                  attach
-                  chips
-                  label="model types"
-                  placeholder="model types"
+                <v-combobox
                   v-model="form.tags"
+                  :search-input.sync="search"
+                  hide-selected
+                  label="Add some tags"
                   multiple
-                ></v-autocomplete>
+                  persistent-hint
+                  small-chips
+                  dark
+                >
+                  <template #selection="{ item }">
+                    <v-chip label small color="white" text-color="black">{{
+                      item
+                    }}</v-chip>
+                  </template>
+                </v-combobox>
               </v-col>
             </v-row>
           </v-col>
@@ -169,6 +174,7 @@ export default {
     ImageCropper,
   },
   data: () => ({
+    search: null,
     form: {
       get() {
         return this.value;
@@ -182,16 +188,21 @@ export default {
     ...mapGetters("sportCategories", ["getSportCategories"]),
     ...mapGetters("workoutCategories", ["getWorkoutCategories"]),
   },
+  watch: {
+    "form.name"(val) {
+      this.form.local_name = val;
+    },
+  },
   methods: {
     ...mapActions("workouts", ["addWorkout"]),
     ...mapActions("workoutCategories", ["loadWorkoutCategories"]),
     ...mapActions("sportCategories", ["loadSportCategories"]),
     async add() {
+      console.log(this.form);
       this.addWorkout(this.form);
     },
     changeSportCategories() {
-      console.log("change");
-      this.loadWorkoutCategories();
+      this.loadWorkoutCategories(this.form.sport_category_id);
     },
   },
   created() {
@@ -221,3 +232,8 @@ export default {
   font-size: 40px;
 }
 </style>
+<style>
+.v-autocomplete .v-input__control .v-input__slot .v-select__slot label {
+  top: 7px !important;
+}
+</style>

src/components/Global/Input/ImageCropper.vue

@@ -11,12 +11,32 @@
     </div>
     <div class="wa__modal__form">
       <div>
+        <RectangleButton
+          text="select your file"
+          icon="WMi-camera"
+          class="w-100"
+          height="30"
+          bg-color="white"
+          color="black"
+          v-if="hiddenInput"
+          @click.native="$refs.fileInput.$refs.input.click()"
+        />
         <v-file-input
           accept="image/png, image/jpeg, image/bmp"
           placeholder="Pick an Image"
           prepend-icon="mdi-camera"
           :label="label"
           @change="changeImage"
+          ref="fileInput"
+          :style="[
+            hiddenInput
+              ? {
+                  visibility: 'hidden',
+                  height: '0',
+                  padding: '0',
+                }
+              : '',
+          ]"
           :dark="dark"
         ></v-file-input>
       </div>
@@ -50,6 +70,9 @@ export default {
     dark: {
       default: true,
     },
+    hiddenInput: {
+      default: true,
+    },
   },
   computed: {
     form: {

src/components/Workouts/Item.vue

@@ -4,14 +4,14 @@
       <v-col cols="4" class="pr-0">
         <div
           class="workout__img"
-          :style="{ backgroundImage: `url(${workout.src})` }"
+          :style="{ backgroundImage: `url(${workout.thumbnail})` }"
         ></div
       ></v-col>
       <v-col cols="8">
         <div class="details__card">
           <div>
             <div class="workout__title wa__f__m__eb text-uppercase">
-              {{ workout.title }}
+              {{ workout.name }}
             </div>
             <div class="workout__description">{{ workout.description }}</div>
           </div>
@@ -24,15 +24,26 @@
                   text-color="black"
                   class="mr-1 text-uppercase"
                   x-small
-                  v-for="(item, i) in workout.items"
+                  v-for="(item, i) in workout.tags"
                   :key="i"
                 >
-                  {{ item.text }}
+                  {{ item.name }}
                 </v-chip>
               </div>
               <div>
-                <RectangleButton size="large" height="26" icon="WMi-trash" class="custom-btn custom-icon ml-1" />
-                <RectangleButton size="large" height="26" icon="WMi-pencil" class="custom-btn custom-icon ml-1" />
+                <RectangleButton
+                  size="large"
+                  height="26"
+                  icon="WMi-trash"
+                  class="custom-btn custom-icon ml-1"
+                  @click.native="deleteWorkout(workout.id)"
+                />
+                <RectangleButton
+                  size="large"
+                  height="26"
+                  icon="WMi-pencil"
+                  class="custom-btn custom-icon ml-1"
+                />
               </div>
             </div>
           </div>
@@ -42,12 +53,16 @@
   </div>
 </template>
 <script>
+import { mapActions } from "vuex";
 export default {
   props: {
     workout: {
       type: Object,
     },
   },
+  methods: {
+    ...mapActions("workouts", ["deleteWorkout"]),
+  },
 };
 </script>
 <style scoped>
@@ -75,5 +90,4 @@ export default {
   height: 100%;
   justify-content: space-between;
 }
-
 </style>

src/components/Workouts/Main.vue

@@ -37,7 +37,7 @@
             cols="12"
             md="6"
             class="mb-3"
-            v-for="workout in workouts"
+            v-for="workout in getWorkouts"
             :key="workout.id"
             ><WorkoutItem :workout="workout"
           /></v-col>
@@ -49,71 +49,23 @@
 </template>
 <script>
 import WorkoutItem from "./Item";
-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 SectionTitle from "../Global/Section/SectionTitle.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
+import { mapGetters, mapActions } from "vuex";
 export default {
   components: {
     WorkoutItem,
     SectionTitle,
     FiltersModal,
   },
-  data: () => ({
-    workouts: [
-      {
-        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",
-          },
-        ],
-      },
-    ],
-  }),
+  computed: {
+    ...mapGetters("workouts", ["getWorkouts"]),
+  },
+  methods: {
+    ...mapActions("workouts", ["loadWorkouts"]),
+  },
+  created() {
+    this.loadWorkouts();
+  },
 };
 </script>

src/router/url.js

@@ -5,10 +5,12 @@ const urls = {
   register: "auth/register",
   resetPassword: "auth/forget-password",
   logout: "auth/logout",
-  indexProgram: 'courses',
-  indexSportCategories: 'admin/sport-categories',
-  indexWorkoutCategories: 'admin/workout-categories',
-  storeWorkout: "admin/workouts"
+  indexProgram: "courses",
+  indexSportCategories: "admin/sport-categories",
+  indexWorkoutCategories: "admin/workout-categories",
+  storeWorkout: "admin/workouts",
+  indexWorkout: "admin/workouts",
+  destroyWorkout: "admin/workouts/:workout",
 };
 
 export default urlGenerator(urls);

src/store/modules/workoutCategories.js/actions.js

@@ -1,9 +1,8 @@
 import WorkoutCategoriesRepository from "@/abstraction/repository/workoutCategoriesRepository";
 export default {
-    async loadWorkoutCategories({ commit }) {
-        let data = { sorts: 'fasdfas' }
+    async loadWorkoutCategories({ commit }, id) {
         let repository = new WorkoutCategoriesRepository();
-        const resource = await repository.index(data);
+        const resource = await repository.index({filters:{sport_category_id: id}});
         commit("SET_WORKOUT_CATEGORIES", resource.data);
     }
 };

src/store/modules/workouts/actions.js

@@ -1,9 +1,19 @@
 import workoutRepository from "@/abstraction/repository/workoutRepository";
 export default {
+    async loadWorkouts({ commit }) {
+        let repository = new workoutRepository();
+        const resource = await repository.index();
+        commit("SET_WORKOUT", resource.data);
+        // commit("SET_PAGINATION", resource.pagination);
+    },
     async addWorkout({ commit }, data) {
-        console.log('data', data);
         let repository = new workoutRepository();
         const resource = await repository.store(data);
-        commit("SET_WORKOUTS", resource.data);
+        commit("ADD_WORKOUT", resource.data);
+    },
+    async deleteWorkout({ commit }, workoutId) {
+        let repository = new workoutRepository();
+        await repository.delete(workoutId);
+        commit('DELETE_WORKOUT', workoutId);
     }
 };

src/store/modules/workouts/getters.js

@@ -0,0 +1,3 @@
+export default {
+    getWorkouts: state => state.workouts
+}

src/store/modules/workouts/mutations.js

@@ -1,7 +1,13 @@
 import Vue from "vue";
 export default {
-    SET_WORKOUTS(state, data) {
-        Vue.set(state, "workout", data);
+    SET_WORKOUT(state, data) {
+        Vue.set(state, "workouts", data);
+    },
+    ADD_WORKOUT(state, data) {
+        state.workouts.push(data);
+    },
+    DELETE_WORKOUT(state, workoutId) {
+        const index = state.workouts.findIndex((x) => x.id === workoutId);
+        state.workouts.splice(index, 1);
     },
 };
-