fix

src/components/Workouts/Items.vue

@@ -62,7 +62,7 @@ import WorkoutItem from "./Item";
 import SectionTitle from "../Global/Section/SectionTitle.vue";
 import FiltersModal from "./Modals/FiltersModal.vue";
 import DetailModal from "./Modals/Detail.vue";
-import SpecialPlaceHolderModal from "./Modals/SpecialPlaceHolder.vue";
+import SpecialPlaceHolderModal from "./Modals/SpecialPlaceHolder/SpecialPlaceHolder.vue";
 import { mapGetters, mapActions, mapMutations } from "vuex";
 export default {
   components: {

src/components/Workouts/Modals/SpecialPlaceHolder.vue

@@ -1,52 +0,0 @@
-<template>
-  <basic-modal
-    width="900"
-    transition="slide-x-transition"
-    tag="form"
-    @submit="filterWorkotus"
-  >
-    <template #header>
-      <div class="close__modal">
-        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
-      </div>
-    </template>
-    <template #default>
-      <div>
-        <SectionTitle
-          title="make the workout special"
-          subTitle="Select a place holder"
-          :is-modal="true"
-        />
-      </div>
-      <div class="mt-8 mb-10">
-        <div>
-          <v-switch
-            v-model="switch1"
-            inset
-            color="#ffd600"
-            :label="`Switch 1: ${switch1.toString()}`"
-          ></v-switch>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <v-spacer></v-spacer>
-      <div class="px-4">
-        <RectangleButton
-          height="29"
-          class="btn__modal--confirm custom-btn wa__f__m__eb"
-          text="close"
-          @click="$_closeModal()"
-        />
-      </div>
-    </template>
-  </basic-modal>
-</template>
-<script>
-export default {
-  name: "modal_workout_special_place_holder",
-  data: () => ({
-    switch1: true,
-  }),
-};
-</script>

src/components/Workouts/Modals/SpecialPlaceHolder/Item.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-switch
+    v-model="placeHolder"
+    inset
+    color="#ffd600"
+    :label="item.name"
+    class="special__place__holder"
+    @change="$emit('change')"
+  ></v-switch>
+</template>
+<script>
+export default {
+  name: "special_place_holder_item",
+  props: {
+    value: {},
+    item: {},
+  },
+  computed: {
+    placeHolder: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+};
+</script>
+<style lang="scss">
+/* -------------------- switch ------------------------------*/
+.v-input--switch.special__place__holder label {
+  margin-bottom: 0;
+  color: var(--color-white) !important;
+  font-family: "montserrat-light" !important;
+  font-size: 26px !important;
+}
+</style>

src/components/Workouts/Modals/SpecialPlaceHolder/SpecialPlaceHolder.vue

@@ -0,0 +1,77 @@
+<template>
+  <basic-modal width="900" transition="slide-x-transition">
+    <template #header>
+      <div class="close__modal">
+        <v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
+      </div>
+    </template>
+    <template #default>
+      <div>
+        <SectionTitle
+          title="make the workout special"
+          subTitle="Select a place holder"
+          :is-modal="true"
+        />
+      </div>
+      <div class="mt-8 mb-10">
+        <div>
+          <SpecialPlaceHolderItem
+            v-for="item in placeHolders"
+            :key="item.id"
+            :item="item"
+            v-model="switches[item.id]"
+            @change="changeSwitch(item.id)"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <v-spacer></v-spacer>
+      <div class="px-4">
+        <RectangleButton
+          height="29"
+          class="btn__modal--confirm custom-btn wa__f__m__eb"
+          text="close"
+          @click="$_closeModal()"
+        />
+      </div>
+    </template>
+  </basic-modal>
+</template>
+<script>
+import SpecialPlaceHolderItem from "./Item.vue";
+export default {
+  name: "modal_workout_special_place_holder",
+  components: {
+    SpecialPlaceHolderItem,
+  },
+  data: () => ({
+    form: {},
+    placeHolders: [
+      {
+        id: 1,
+        name: "Home latest program",
+      },
+      {
+        id: 2,
+        name: "Home special program",
+      },
+    ],
+    switches: [],
+  }),
+  methods: {
+    changeSwitch(id) {
+      const value = this.switches[id];
+      console.log(id, value, this.switches);
+      // if (value) {
+      //   this.form.special_views.push(id);
+      // } else {
+      //   this.$delete(
+      //     this.form.special_views,
+      //     this.form.special_views.findIndex((x) => x === id)
+      //   );
+      // }
+    },
+  },
+};
+</script>