From 2307891fe3baf6edddedd7f4381f2634829bb9d0 Mon Sep 17 00:00:00 2001
From: sajjad_talkhabi <talkhabisajad10@gmail.com>
Date: Tue, 21 Dec 2021 18:06:03 +0330
Subject: [PATCH] fix

---
 package-lock.json                             | 160 +++++------
 src/components/Dashboard/Main.vue             |   4 +-
 src/components/Global/Section/SideBar.vue     |   8 +-
 src/components/Profile/Profile.vue            | 252 ++++++++++--------
 src/components/Profile/TraineeProfile.vue     | 189 +++++++++++++
 src/components/Profile/TrainerProfile.vue     | 221 ---------------
 src/components/ProgramSeries/Items.vue        |   7 +-
 .../ProgramSeries/Modals/AddSeriesModal.vue   |  12 +-
 src/components/Programs/Items.vue             |  23 +-
 src/components/Users/Items.vue                |  18 +-
 src/components/Workouts/Items.vue             |  20 +-
 src/router/path.js                            |  10 +-
 ...{TrainerProfile.vue => TraineeProfile.vue} |   2 +-
 13 files changed, 488 insertions(+), 438 deletions(-)
 create mode 100644 src/components/Profile/TraineeProfile.vue
 delete mode 100644 src/components/Profile/TrainerProfile.vue
 rename src/views/{TrainerProfile.vue => TraineeProfile.vue} (87%)

diff --git a/package-lock.json b/package-lock.json
index a853a3e..45b1d9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2844,63 +2844,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -2909,28 +2852,6 @@
           "requires": {
             "minipass": "^3.1.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -12490,6 +12411,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-meta": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
diff --git a/src/components/Dashboard/Main.vue b/src/components/Dashboard/Main.vue
index 3cb3b7d..6ee5bfc 100644
--- a/src/components/Dashboard/Main.vue
+++ b/src/components/Dashboard/Main.vue
@@ -97,7 +97,7 @@
               <box text="trainees" link="users" icon=" WMi-users" />
             </div>
             <div class="mr-5 section">
-              <box text="profile" link="trainerProfile" icon="WMi-user" />
+              <box text="profile" link="profile" icon="WMi-user" />
             </div>
           </div>
         </div>
@@ -156,7 +156,7 @@
               <box text="programs" link="traineePrograms" icon="WMi-align-left" />
             </div>
             <div class="mr-5 section">
-              <box text="profile" link="profile" icon="WMi-user" />
+              <box text="profile" link="traineeProfile" icon="WMi-user" />
             </div>
           </div>
         </div>
diff --git a/src/components/Global/Section/SideBar.vue b/src/components/Global/Section/SideBar.vue
index 61f9910..e1d91d8 100644
--- a/src/components/Global/Section/SideBar.vue
+++ b/src/components/Global/Section/SideBar.vue
@@ -115,8 +115,8 @@ export default {
             {
               id: 2,
               text: "my profile",
-              link: "trainerProfile",
-              active: this.$route.name === "trainerProfile",
+              link: "profile",
+              active: this.$route.name === "profile",
             },
             {
               id: 3,
@@ -152,8 +152,8 @@ export default {
             {
               id: 2,
               text: "my profile",
-              link: "profile",
-              active: this.$route.name === "profile",
+              link: "traineeProfile",
+              active: this.$route.name === "traineeProfile",
             },
             {
               id: 3,
diff --git a/src/components/Profile/Profile.vue b/src/components/Profile/Profile.vue
index e759e8b..f0635f7 100644
--- a/src/components/Profile/Profile.vue
+++ b/src/components/Profile/Profile.vue
@@ -13,117 +13,132 @@
         </div>
         <v-form @submit.prevent="submit">
           <v-row class="mt-4">
-            <v-col class="12" sm="3">
-              <v-text-field
-                label="your email address"
-                class="no-error-msg pt-0"
-                dark
-                v-model="form.email"
-              ></v-text-field>
-            </v-col>
-            <v-col class="12" sm="3">
-              <v-text-field
-                label="your name"
-                class="no-error-msg pt-0"
-                dark
-                v-model="form.first_name"
-              ></v-text-field>
-            </v-col>
-            <v-col class="12" sm="3">
-              <v-text-field
-                label="your family name"
-                class="no-error-msg pt-0"
-                dark
-                v-model="form.last_name"
-              ></v-text-field>
-            </v-col>
-            <v-col class="12" sm="3">
-              <v-text-field
-                label="your cell number"
-                class="no-error-msg pt-0"
-                dark
-                v-model="form.cell_number"
-              ></v-text-field>
-            </v-col>
-          </v-row>
-          <v-row>
             <v-col cols="3">
-              <v-autocomplete
-                label="your country"
-                class="no-error-msg pt-0"
-                dark
-                item-value="id"
-                item-text="name"
-                :items="getCountries"
-                v-model="form.country_id"
-              ></v-autocomplete>
+              <div class="pb-14 h-100">
+                <div class="w-100 h-100">
+                  <ImageCropper
+                    label="manager image"
+                    :url.sync="form.profile"
+                    v-model="fileForm"
+                  />
+                </div>
+              </div>
             </v-col>
-            <v-col cols="3">
-              <v-text-field
-                label="address"
-                class="no-error-msg pt-0"
-                dark
-                v-model="form.address"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="3"
-              ><DateInput
-                class="no-error-msg"
-                label="Birthday"
-                dark
-                :max="new Date().toISOString().slice(0, 10)"
-                v-model="form.birthday"
-            /></v-col>
-            <v-col cols="3"></v-col>
-          </v-row>
-          <v-divider dark></v-divider>
-          <v-row class="w-75">
-            <v-col cols="3"
-              ><v-text-field
-                label="weight"
-                class="no-error-msg pt-0"
-                suffix="kg"
-                dark
-                v-model="form.weight"
-              ></v-text-field
-            ></v-col>
-            <v-col cols="3"
-              ><v-text-field
-                label="height"
-                class="no-error-msg pt-0"
-                suffix="cm"
-                dark
-                v-model="form.height"
-              ></v-text-field
-            ></v-col>
-            <v-col cols="3"
-              ><v-text-field
-                label="arm diameter"
-                class="no-error-msg pt-0"
-                suffix="cm"
-                dark
-                v-model="form.arm_diameter"
-              ></v-text-field
-            ></v-col>
-            <v-col cols="3"
-              ><v-text-field
-                label="lge diameter"
-                class="no-error-msg pt-0"
-                suffix="cm"
-                dark
-                v-model="form.leg_diameter"
-              ></v-text-field
-            ></v-col>
-          </v-row>
-          <v-row class="mb-16">
-            <v-col cols="12">
-              <v-textarea
-                label="about you"
-                class="no-error-msg"
-                rows="4"
-                dark
-                v-model="form.details"
-              ></v-textarea>
+            <v-col cols="9">
+              <v-row class="mt-4">
+                <v-col class="12" sm="3">
+                  <v-text-field
+                    label="your email address"
+                    class="no-error-msg pt-0"
+                    dark
+                    v-model="form.email"
+                  ></v-text-field>
+                </v-col>
+                <v-col class="12" sm="3">
+                  <v-text-field
+                    label="your name"
+                    class="no-error-msg pt-0"
+                    dark
+                    v-model="form.first_name"
+                  ></v-text-field>
+                </v-col>
+                <v-col class="12" sm="3">
+                  <v-text-field
+                    label="your family name"
+                    class="no-error-msg pt-0"
+                    dark
+                    v-model="form.last_name"
+                  ></v-text-field>
+                </v-col>
+                <v-col class="12" sm="3">
+                  <v-text-field
+                    label="your cell number"
+                    class="no-error-msg pt-0"
+                    dark
+                    v-model="form.cell_number"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+              <v-row>
+                <v-col cols="3">
+                  <v-autocomplete
+                    label="your country"
+                    class="no-error-msg pt-0"
+                    dark
+                    item-value="id"
+                    item-text="name"
+                    :items="getCountries"
+                    v-model="form.country_id"
+                  ></v-autocomplete>
+                </v-col>
+                <v-col cols="3">
+                  <v-text-field
+                    label="address"
+                    class="no-error-msg pt-0"
+                    dark
+                    v-model="form.address"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3"
+                  ><DateInput
+                    class="no-error-msg"
+                    label="Birthday"
+                    dark
+                    :max="new Date().toISOString().slice(0, 10)"
+                    v-model="form.birthday"
+                /></v-col>
+                <v-col cols="3"></v-col>
+              </v-row>
+              <v-divider dark></v-divider>
+              <v-row class="w-100">
+                <v-col cols="3"
+                  ><v-text-field
+                    label="weight"
+                    class="no-error-msg pt-0"
+                    suffix="kg"
+                    dark
+                    v-model="form.weight"
+                  ></v-text-field
+                ></v-col>
+                <v-col cols="3"
+                  ><v-text-field
+                    label="height"
+                    class="no-error-msg pt-0"
+                    suffix="cm"
+                    dark
+                    v-model="form.height"
+                  ></v-text-field
+                ></v-col>
+                <v-col cols="3"
+                  ><v-text-field
+                    label="arm diameter"
+                    class="no-error-msg pt-0"
+                    suffix="cm"
+                    dark
+                    v-model="form.arm_diameter"
+                  ></v-text-field
+                ></v-col>
+                <v-col cols="3"
+                  ><v-text-field
+                    label="lge diameter"
+                    class="no-error-msg pt-0"
+                    suffix="cm"
+                    dark
+                    v-model="form.leg_diameter"
+                  ></v-text-field
+                ></v-col>
+              </v-row>
+              <v-row class="mb-16">
+                <v-col cols="12">
+                  <v-textarea
+                    label="about you"
+                    class="no-error-msg"
+                    rows="4"
+                    dark
+                    v-model="form.details"
+                  ></v-textarea>
+                </v-col>
+              </v-row>
             </v-col>
           </v-row>
           <div class="mt-16">
@@ -152,12 +167,24 @@
 <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: () => ({
-    form: {},
+    form: {
+      batch_id: RANDOM_TOKEN,
+    },
+    fileForm: {
+      batch_id: RANDOM_TOKEN,
+      collection: "main_image",
+      crop_data: {},
+    },
   }),
   computed: {
     ...mapGetters("profile", ["getProfile"]),
@@ -169,8 +196,13 @@ export default {
     async setProfile() {
       await this.loadProfile();
       this.form = this.getProfile;
+      this.form["batch_id"] = RANDOM_TOKEN;
     },
     async submit() {
+      if (this.fileForm.file) {
+        let repository = new FileRepository();
+        await repository.store(this.fileForm);
+      }
       await this.updateProfile(this.form);
       this.$router.push({ name: "dashboard" });
     },
diff --git a/src/components/Profile/TraineeProfile.vue b/src/components/Profile/TraineeProfile.vue
new file mode 100644
index 0000000..e759e8b
--- /dev/null
+++ b/src/components/Profile/TraineeProfile.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="h-100">
+    <main-back height="100%">
+      <div class="py-12 px-10">
+        <div>
+          <SectionTitle
+            backText="home page"
+            link="dashboard"
+            icon="WMi-left-open"
+            title="my profile"
+            subTitle="let us know you better, it comes handy."
+          />
+        </div>
+        <v-form @submit.prevent="submit">
+          <v-row class="mt-4">
+            <v-col class="12" sm="3">
+              <v-text-field
+                label="your email address"
+                class="no-error-msg pt-0"
+                dark
+                v-model="form.email"
+              ></v-text-field>
+            </v-col>
+            <v-col class="12" sm="3">
+              <v-text-field
+                label="your name"
+                class="no-error-msg pt-0"
+                dark
+                v-model="form.first_name"
+              ></v-text-field>
+            </v-col>
+            <v-col class="12" sm="3">
+              <v-text-field
+                label="your family name"
+                class="no-error-msg pt-0"
+                dark
+                v-model="form.last_name"
+              ></v-text-field>
+            </v-col>
+            <v-col class="12" sm="3">
+              <v-text-field
+                label="your cell number"
+                class="no-error-msg pt-0"
+                dark
+                v-model="form.cell_number"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="3">
+              <v-autocomplete
+                label="your country"
+                class="no-error-msg pt-0"
+                dark
+                item-value="id"
+                item-text="name"
+                :items="getCountries"
+                v-model="form.country_id"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="3">
+              <v-text-field
+                label="address"
+                class="no-error-msg pt-0"
+                dark
+                v-model="form.address"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="3"
+              ><DateInput
+                class="no-error-msg"
+                label="Birthday"
+                dark
+                :max="new Date().toISOString().slice(0, 10)"
+                v-model="form.birthday"
+            /></v-col>
+            <v-col cols="3"></v-col>
+          </v-row>
+          <v-divider dark></v-divider>
+          <v-row class="w-75">
+            <v-col cols="3"
+              ><v-text-field
+                label="weight"
+                class="no-error-msg pt-0"
+                suffix="kg"
+                dark
+                v-model="form.weight"
+              ></v-text-field
+            ></v-col>
+            <v-col cols="3"
+              ><v-text-field
+                label="height"
+                class="no-error-msg pt-0"
+                suffix="cm"
+                dark
+                v-model="form.height"
+              ></v-text-field
+            ></v-col>
+            <v-col cols="3"
+              ><v-text-field
+                label="arm diameter"
+                class="no-error-msg pt-0"
+                suffix="cm"
+                dark
+                v-model="form.arm_diameter"
+              ></v-text-field
+            ></v-col>
+            <v-col cols="3"
+              ><v-text-field
+                label="lge diameter"
+                class="no-error-msg pt-0"
+                suffix="cm"
+                dark
+                v-model="form.leg_diameter"
+              ></v-text-field
+            ></v-col>
+          </v-row>
+          <v-row class="mb-16">
+            <v-col cols="12">
+              <v-textarea
+                label="about you"
+                class="no-error-msg"
+                rows="4"
+                dark
+                v-model="form.details"
+              ></v-textarea>
+            </v-col>
+          </v-row>
+          <div class="mt-16">
+            <v-divider dark class="mb-2"></v-divider>
+            <div class="d-flex justify-space-between">
+              <router-link :to="{ name: 'dashboard' }">
+                <RectangleButton
+                  text="I’VE CHANGED MY MIND"
+                  icon="WMi-cancel"
+                  class="px-0"
+                  height="19"
+              /></router-link>
+              <RectangleButton
+                text="SAVE THE INFO"
+                class="custom-btn save-btn"
+                height="25"
+                type="submit"
+              />
+            </div>
+          </div>
+        </v-form>
+      </div>
+    </main-back>
+  </div>
+</template>
+<script>
+import { mapActions, mapGetters } from "vuex";
+import SectionTitle from "../Global/Section/SectionTitle.vue";
+export default {
+  components: {
+    SectionTitle,
+  },
+  data: () => ({
+    form: {},
+  }),
+  computed: {
+    ...mapGetters("profile", ["getProfile"]),
+    ...mapGetters("countries", ["getCountries"]),
+  },
+  methods: {
+    ...mapActions("profile", ["updateProfile", "loadProfile"]),
+    ...mapActions("countries", ["loadCountries"]),
+    async setProfile() {
+      await this.loadProfile();
+      this.form = this.getProfile;
+    },
+    async submit() {
+      await this.updateProfile(this.form);
+      this.$router.push({ name: "dashboard" });
+    },
+  },
+  async created() {
+    await this.loadCountries();
+    this.setProfile();
+  },
+};
+</script>
+<style scoped>
+.save-btn {
+  padding-right: 100px !important;
+  padding-left: 100px !important;
+}
+</style>
diff --git a/src/components/Profile/TrainerProfile.vue b/src/components/Profile/TrainerProfile.vue
deleted file mode 100644
index f0635f7..0000000
--- a/src/components/Profile/TrainerProfile.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-  <div class="h-100">
-    <main-back height="100%">
-      <div class="py-12 px-10">
-        <div>
-          <SectionTitle
-            backText="home page"
-            link="dashboard"
-            icon="WMi-left-open"
-            title="my profile"
-            subTitle="let us know you better, it comes handy."
-          />
-        </div>
-        <v-form @submit.prevent="submit">
-          <v-row class="mt-4">
-            <v-col cols="3">
-              <div class="pb-14 h-100">
-                <div class="w-100 h-100">
-                  <ImageCropper
-                    label="manager image"
-                    :url.sync="form.profile"
-                    v-model="fileForm"
-                  />
-                </div>
-              </div>
-            </v-col>
-            <v-col cols="9">
-              <v-row class="mt-4">
-                <v-col class="12" sm="3">
-                  <v-text-field
-                    label="your email address"
-                    class="no-error-msg pt-0"
-                    dark
-                    v-model="form.email"
-                  ></v-text-field>
-                </v-col>
-                <v-col class="12" sm="3">
-                  <v-text-field
-                    label="your name"
-                    class="no-error-msg pt-0"
-                    dark
-                    v-model="form.first_name"
-                  ></v-text-field>
-                </v-col>
-                <v-col class="12" sm="3">
-                  <v-text-field
-                    label="your family name"
-                    class="no-error-msg pt-0"
-                    dark
-                    v-model="form.last_name"
-                  ></v-text-field>
-                </v-col>
-                <v-col class="12" sm="3">
-                  <v-text-field
-                    label="your cell number"
-                    class="no-error-msg pt-0"
-                    dark
-                    v-model="form.cell_number"
-                  ></v-text-field>
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col cols="3">
-                  <v-autocomplete
-                    label="your country"
-                    class="no-error-msg pt-0"
-                    dark
-                    item-value="id"
-                    item-text="name"
-                    :items="getCountries"
-                    v-model="form.country_id"
-                  ></v-autocomplete>
-                </v-col>
-                <v-col cols="3">
-                  <v-text-field
-                    label="address"
-                    class="no-error-msg pt-0"
-                    dark
-                    v-model="form.address"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="3"
-                  ><DateInput
-                    class="no-error-msg"
-                    label="Birthday"
-                    dark
-                    :max="new Date().toISOString().slice(0, 10)"
-                    v-model="form.birthday"
-                /></v-col>
-                <v-col cols="3"></v-col>
-              </v-row>
-              <v-divider dark></v-divider>
-              <v-row class="w-100">
-                <v-col cols="3"
-                  ><v-text-field
-                    label="weight"
-                    class="no-error-msg pt-0"
-                    suffix="kg"
-                    dark
-                    v-model="form.weight"
-                  ></v-text-field
-                ></v-col>
-                <v-col cols="3"
-                  ><v-text-field
-                    label="height"
-                    class="no-error-msg pt-0"
-                    suffix="cm"
-                    dark
-                    v-model="form.height"
-                  ></v-text-field
-                ></v-col>
-                <v-col cols="3"
-                  ><v-text-field
-                    label="arm diameter"
-                    class="no-error-msg pt-0"
-                    suffix="cm"
-                    dark
-                    v-model="form.arm_diameter"
-                  ></v-text-field
-                ></v-col>
-                <v-col cols="3"
-                  ><v-text-field
-                    label="lge diameter"
-                    class="no-error-msg pt-0"
-                    suffix="cm"
-                    dark
-                    v-model="form.leg_diameter"
-                  ></v-text-field
-                ></v-col>
-              </v-row>
-              <v-row class="mb-16">
-                <v-col cols="12">
-                  <v-textarea
-                    label="about you"
-                    class="no-error-msg"
-                    rows="4"
-                    dark
-                    v-model="form.details"
-                  ></v-textarea>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-          <div class="mt-16">
-            <v-divider dark class="mb-2"></v-divider>
-            <div class="d-flex justify-space-between">
-              <router-link :to="{ name: 'dashboard' }">
-                <RectangleButton
-                  text="I’VE CHANGED MY MIND"
-                  icon="WMi-cancel"
-                  class="px-0"
-                  height="19"
-              /></router-link>
-              <RectangleButton
-                text="SAVE THE INFO"
-                class="custom-btn save-btn"
-                height="25"
-                type="submit"
-              />
-            </div>
-          </div>
-        </v-form>
-      </div>
-    </main-back>
-  </div>
-</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: () => ({
-    form: {
-      batch_id: RANDOM_TOKEN,
-    },
-    fileForm: {
-      batch_id: RANDOM_TOKEN,
-      collection: "main_image",
-      crop_data: {},
-    },
-  }),
-  computed: {
-    ...mapGetters("profile", ["getProfile"]),
-    ...mapGetters("countries", ["getCountries"]),
-  },
-  methods: {
-    ...mapActions("profile", ["updateProfile", "loadProfile"]),
-    ...mapActions("countries", ["loadCountries"]),
-    async setProfile() {
-      await this.loadProfile();
-      this.form = this.getProfile;
-      this.form["batch_id"] = RANDOM_TOKEN;
-    },
-    async submit() {
-      if (this.fileForm.file) {
-        let repository = new FileRepository();
-        await repository.store(this.fileForm);
-      }
-      await this.updateProfile(this.form);
-      this.$router.push({ name: "dashboard" });
-    },
-  },
-  async created() {
-    await this.loadCountries();
-    this.setProfile();
-  },
-};
-</script>
-<style scoped>
-.save-btn {
-  padding-right: 100px !important;
-  padding-left: 100px !important;
-}
-</style>
diff --git a/src/components/ProgramSeries/Items.vue b/src/components/ProgramSeries/Items.vue
index 4117cff..432c3c4 100644
--- a/src/components/ProgramSeries/Items.vue
+++ b/src/components/ProgramSeries/Items.vue
@@ -34,7 +34,10 @@
       </div>
     </main-back>
     <div class="text-center">
-      <AddSeriesModal :programId="programId" />
+      <AddSeriesModal
+        :programId="programId"
+        v-if="isModal('modal_add_series')"
+      />
     </div>
   </div>
 </template> 
@@ -52,6 +55,8 @@ export default {
   },
   computed: {
     ...mapGetters("programSeries", ["getProgramSeries"]),
+    ...mapGetters("modal", ["isModal"]),
+
     programId() {
       return this.$route.params.id;
     },
diff --git a/src/components/ProgramSeries/Modals/AddSeriesModal.vue b/src/components/ProgramSeries/Modals/AddSeriesModal.vue
index 2f0d89e..f4e1200 100644
--- a/src/components/ProgramSeries/Modals/AddSeriesModal.vue
+++ b/src/components/ProgramSeries/Modals/AddSeriesModal.vue
@@ -1,5 +1,10 @@
 <template>
-  <basic-modal width="520" transition="slide-x-transition" tag="form" @submit="addSeries">
+  <basic-modal
+    width="520"
+    transition="slide-x-transition"
+    tag="form"
+    @submit="addSeries"
+  >
     <template #header>
       <div class="close__modal">
         <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
@@ -31,7 +36,7 @@
                 dark
                 label="how many times in a week?"
                 class="mt-0 pt-0"
-                :rules="[rules.required, rules.min]"
+                :rules="[rules.required, rules.min, rules.zero]"
                 v-model="form.repeat"
               ></v-text-field>
             </v-col>
@@ -84,12 +89,13 @@ export default {
     rules: {
       required: (value) => !!value || "Required.",
       min: (v) => v <= 7 || "The value of this field must be less than 7",
+      zero: (v) => v === 0 || "The value of this field not be 0",
     },
   }),
   methods: {
     ...mapActions("programSeries", ["addSeriesToProgram"]),
     async addSeries() {
-      if (this.form.repeat <= 7) {
+      if (this.form.repeat <= 7 && this.form.repeat != 0) {
         let response = await this.addSeriesToProgram({
           data: this.form,
           courseId: Number(this.programId),
diff --git a/src/components/Programs/Items.vue b/src/components/Programs/Items.vue
index a8f6d15..9bb1fdf 100644
--- a/src/components/Programs/Items.vue
+++ b/src/components/Programs/Items.vue
@@ -22,7 +22,10 @@
               :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
-            <router-link :to="{ name: 'addProgram' }" class="text-decoration-none">
+            <router-link
+              :to="{ name: 'addProgram' }"
+              class="text-decoration-none"
+            >
               <RectangleButton
                 icon="WMi-plus"
                 size="xx-large"
@@ -45,11 +48,14 @@
         </v-row>
       </div>
       <div class="text-center mt-40 mb-5">
-        <pagination :pagination="getPaginationProgram" @pagination="changePagination" />
+        <pagination
+          :pagination="getPaginationProgram"
+          @pagination="changePagination"
+        />
       </div>
     </main-back>
     <div class="text-center">
-      <FiltersModal @filter="load" />
+      <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
     </div>
   </div>
 </template>
@@ -69,7 +75,12 @@ export default {
     role: UserStorage.getRole() ? UserStorage.getRole() : null,
   }),
   computed: {
-    ...mapGetters("programs", ["getPrograms", "getPaginationProgram", "getFilterCount"]),
+    ...mapGetters("programs", [
+      "getPrograms",
+      "getPaginationProgram",
+      "getFilterCount",
+    ]),
+    ...mapGetters("modal", ["isModal"]),
   },
   methods: {
     ...mapActions("programs", ["loadPrograms", "loadMyPrograms"]),
@@ -81,7 +92,9 @@ export default {
       }
     },
     async load() {
-      this.role === "admin" ? await this.loadPrograms() : await this.loadMyPrograms();
+      this.role === "admin"
+        ? await this.loadPrograms()
+        : await this.loadMyPrograms();
     },
   },
   created() {
diff --git a/src/components/Users/Items.vue b/src/components/Users/Items.vue
index 1173504..318a1d3 100644
--- a/src/components/Users/Items.vue
+++ b/src/components/Users/Items.vue
@@ -30,13 +30,21 @@
         </v-row>
       </div>
       <div class="text-center mt-40 mb-5">
-        <pagination :pagination="getPaginationUser" @pagination="changePagination" />
+        <pagination
+          :pagination="getPaginationUser"
+          @pagination="changePagination"
+        />
       </div>
     </main-back>
     <div class="text-center">
-      <ChangeRoleModal :allRoles="getRoles" :userId="id" /><FiltersModal
+      <ChangeRoleModal
+        :allRoles="getRoles"
+        :userId="id"
+        v-if="isModal('modal_changeRole')"
+      /><FiltersModal
         @filter="load"
         :allRoles="getRoles"
+        v-if="isModal('modal_filters')"
       />
     </div>
   </div>
@@ -67,6 +75,8 @@ export default {
       "getRoles",
       "getFilterCount",
     ]),
+    ...mapGetters("modal", ["isModal"]),
+
     ...mapState("users", ["filters"]),
   },
   methods: {
@@ -79,7 +89,9 @@ export default {
       }
     },
     async load() {
-      this.role === "admin" ? await this.loadUsers() : await this.loadTrainerTrainee();
+      this.role === "admin"
+        ? await this.loadUsers()
+        : await this.loadTrainerTrainee();
     },
     userId(id) {
       this.id = id;
diff --git a/src/components/Workouts/Items.vue b/src/components/Workouts/Items.vue
index e844848..62d10c7 100644
--- a/src/components/Workouts/Items.vue
+++ b/src/components/Workouts/Items.vue
@@ -21,7 +21,9 @@
               :text="getFilterCount ? getFilterCount : '0'"
               @click.native="$_openModal('filters')"
             />
-            <router-link class="text-decoration-none" :to="{ name: 'addWorkout' }"
+            <router-link
+              class="text-decoration-none"
+              :to="{ name: 'addWorkout' }"
               ><RectangleButton
                 size="xx-large"
                 icon="WMi-plus"
@@ -44,13 +46,18 @@
         </template>
       </div>
       <div class="text-center mt-40 mb-5" v-if="getWorkouts.length">
-        <pagination :pagination="getPaginationWorkout" @pagination="changePagination" />
+        <pagination
+          :pagination="getPaginationWorkout"
+          @pagination="changePagination"
+        />
       </div>
       <template v-if="!getWorkouts.length">
         <div class="text-center">There are no items to display</div>
       </template>
     </main-back>
-    <div class="text-center"><FiltersModal @filter="load" /></div>
+    <div class="text-center">
+      <FiltersModal @filter="load" v-if="isModal('modal_filters')" />
+    </div>
   </div>
 </template>
 <script>
@@ -65,7 +72,12 @@ export default {
     FiltersModal,
   },
   computed: {
-    ...mapGetters("workouts", ["getWorkouts", "getPaginationWorkout", "getFilterCount"]),
+    ...mapGetters("workouts", [
+      "getWorkouts",
+      "getPaginationWorkout",
+      "getFilterCount",
+    ]),
+    ...mapGetters("modal", ["isModal"]),
   },
   methods: {
     ...mapActions("workouts", ["loadWorkouts"]),
diff --git a/src/router/path.js b/src/router/path.js
index 3af5f98..6e61132 100644
--- a/src/router/path.js
+++ b/src/router/path.js
@@ -39,13 +39,13 @@ export default [
         path: '/profile',
         view: 'Profile',
         name: 'profile',
-        meta: { auth: true, roles: ["trainee", "admin"] }
+        meta: { auth: true, roles: ["trainer", "admin"] }
     },
     {
-        path: '/trainer-profile',
-        view: 'TrainerProfile',
-        name: 'trainerProfile',
-        meta: { auth: true, roles: ["trainer"] }
+        path: '/trainee-profile',
+        view: 'TraineeProfile',
+        name: 'traineeProfile',
+        meta: { auth: true, roles: ["trainee"] }
     },
     {
         path: '/workouts',
diff --git a/src/views/TrainerProfile.vue b/src/views/TraineeProfile.vue
similarity index 87%
rename from src/views/TrainerProfile.vue
rename to src/views/TraineeProfile.vue
index f9f0a87..1c710d0 100644
--- a/src/views/TrainerProfile.vue
+++ b/src/views/TraineeProfile.vue
@@ -22,7 +22,7 @@
   </v-container>
 </template>
 <script>
-import ProfileHome from "../components/Profile/TrainerProfile";
+import ProfileHome from "../components/Profile/TraineeProfile";
 export default {
   components: {
     ProfileHome,