|
|
|
@ -7,7 +7,7 @@
|
|
|
|
|
backText="workouts"
|
|
|
|
|
link="workouts"
|
|
|
|
|
icon="WMi-left-open"
|
|
|
|
|
title="add a workout"
|
|
|
|
|
:title="(workoutId ? 'edit' : 'add') + ' a workout'"
|
|
|
|
|
subTitle="let us know you better, it comes handy."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
@ -16,8 +16,9 @@
|
|
|
|
|
<div class="pb-14 h-100">
|
|
|
|
|
<div class="add__workout dark w-100 h-100">
|
|
|
|
|
<ImageCropper
|
|
|
|
|
:url.sync="form.thumbnail"
|
|
|
|
|
label="manager image"
|
|
|
|
|
:url.sync="form.thumbnail"
|
|
|
|
|
v-model="fileForm.media"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -90,7 +91,7 @@
|
|
|
|
|
placeholder="suggested course time?"
|
|
|
|
|
label="suggested course time?"
|
|
|
|
|
class="no-error-msg pt-0 mt-0"
|
|
|
|
|
v-model="form.suggested_time"
|
|
|
|
|
v-model="form.suggested_set"
|
|
|
|
|
></v-text-field
|
|
|
|
|
></v-col>
|
|
|
|
|
<v-col cols="2"
|
|
|
|
@ -99,18 +100,16 @@
|
|
|
|
|
placeholder="suggested times each course?"
|
|
|
|
|
label="suggested times each course?"
|
|
|
|
|
class="no-error-msg pt-0 mt-0"
|
|
|
|
|
v-model="form.suggested_set"
|
|
|
|
|
v-model="form.suggested_per_set"
|
|
|
|
|
></v-text-field
|
|
|
|
|
></v-col>
|
|
|
|
|
<v-col cols="2"
|
|
|
|
|
><v-text-field
|
|
|
|
|
dark
|
|
|
|
|
<v-col cols="2">
|
|
|
|
|
<TimeInput
|
|
|
|
|
v-model="form.suggested_time"
|
|
|
|
|
class="no-error-msg pt-0 mt-0"
|
|
|
|
|
placeholder="suggested ESTIMATED TIME"
|
|
|
|
|
label="suggested ESTIMATED TIME"
|
|
|
|
|
class="no-error-msg pt-0 mt-0"
|
|
|
|
|
v-model="form.suggested_per_set"
|
|
|
|
|
></v-text-field
|
|
|
|
|
></v-col>
|
|
|
|
|
/></v-col>
|
|
|
|
|
<v-col cols="6"
|
|
|
|
|
><v-text-field
|
|
|
|
|
dark
|
|
|
|
@ -125,18 +124,28 @@
|
|
|
|
|
<v-col cols="12">
|
|
|
|
|
<v-combobox
|
|
|
|
|
v-model="form.tags"
|
|
|
|
|
:search-input.sync="search"
|
|
|
|
|
clearable
|
|
|
|
|
:append-icon="null"
|
|
|
|
|
hide-selected
|
|
|
|
|
class="multiple"
|
|
|
|
|
label="Add some tags"
|
|
|
|
|
placeholder="Add some tags"
|
|
|
|
|
multiple
|
|
|
|
|
persistent-hint
|
|
|
|
|
small-chips
|
|
|
|
|
dark
|
|
|
|
|
>
|
|
|
|
|
<template #selection="{ item }">
|
|
|
|
|
<v-chip label small color="white" text-color="black">{{
|
|
|
|
|
item
|
|
|
|
|
}}</v-chip>
|
|
|
|
|
<template #selection="{ item, select }">
|
|
|
|
|
<v-chip
|
|
|
|
|
label
|
|
|
|
|
small
|
|
|
|
|
color="white"
|
|
|
|
|
text-color="black"
|
|
|
|
|
close
|
|
|
|
|
@click="select"
|
|
|
|
|
@click:close="removeTags(item)"
|
|
|
|
|
>{{ item }}</v-chip
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</v-combobox>
|
|
|
|
|
</v-col>
|
|
|
|
@ -146,15 +155,17 @@
|
|
|
|
|
<div class="mt-2">
|
|
|
|
|
<v-divider dark class="mb-2"></v-divider>
|
|
|
|
|
<div class="d-flex justify-space-between">
|
|
|
|
|
<router-link :to="{ name: 'workouts' }">
|
|
|
|
|
<RectangleButton
|
|
|
|
|
text="I’VE CHANGED MY MIND"
|
|
|
|
|
icon="WMi-cancel"
|
|
|
|
|
class="px-0"
|
|
|
|
|
height="19"
|
|
|
|
|
/>
|
|
|
|
|
</router-link>
|
|
|
|
|
<RectangleButton
|
|
|
|
|
text="I’VE CHANGED MY MIND"
|
|
|
|
|
icon="WMi-cancel"
|
|
|
|
|
class="px-0"
|
|
|
|
|
height="19"
|
|
|
|
|
/>
|
|
|
|
|
<RectangleButton
|
|
|
|
|
text="add the workout"
|
|
|
|
|
@click.native="add"
|
|
|
|
|
:text="(workoutId ? 'update' : 'add') + ' the workout'"
|
|
|
|
|
@click.native="submit"
|
|
|
|
|
class="custom-btn add-btn"
|
|
|
|
|
height="25"
|
|
|
|
|
/>
|
|
|
|
@ -167,46 +178,80 @@
|
|
|
|
|
<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";
|
|
|
|
|
import { makeid } from "@/utils/math";
|
|
|
|
|
const RANDOM_TOKEN = makeid(50);
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
SectionTitle,
|
|
|
|
|
ImageCropper,
|
|
|
|
|
},
|
|
|
|
|
data: () => ({
|
|
|
|
|
search: null,
|
|
|
|
|
form: {
|
|
|
|
|
get() {
|
|
|
|
|
return this.value;
|
|
|
|
|
},
|
|
|
|
|
set(value) {
|
|
|
|
|
this.$emit("input", value);
|
|
|
|
|
},
|
|
|
|
|
batch_id: RANDOM_TOKEN,
|
|
|
|
|
},
|
|
|
|
|
fileForm: {
|
|
|
|
|
batch_id: RANDOM_TOKEN,
|
|
|
|
|
collection: "thumbnail",
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
computed: {
|
|
|
|
|
...mapGetters("sportCategories", ["getSportCategories"]),
|
|
|
|
|
...mapGetters("workoutCategories", ["getWorkoutCategories"]),
|
|
|
|
|
...mapGetters("workouts", ["getWorkout"]),
|
|
|
|
|
workoutId() {
|
|
|
|
|
return this.$route.params.id;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
"form.name"(val) {
|
|
|
|
|
this.form.local_name = val;
|
|
|
|
|
},
|
|
|
|
|
$route(to) {
|
|
|
|
|
this.workoutId = to.params.workoutId;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
...mapActions("workouts", ["addWorkout"]),
|
|
|
|
|
...mapActions("workouts", ["addWorkout", "loadWorkout", "updateWorkout"]),
|
|
|
|
|
...mapActions("workoutCategories", ["loadWorkoutCategories"]),
|
|
|
|
|
...mapActions("sportCategories", ["loadSportCategories"]),
|
|
|
|
|
async add() {
|
|
|
|
|
console.log(this.form);
|
|
|
|
|
this.addWorkout(this.form);
|
|
|
|
|
async submit() {
|
|
|
|
|
try {
|
|
|
|
|
if (this.fileForm.media) {
|
|
|
|
|
let repository = new FileRepository();
|
|
|
|
|
await repository.store(this.fileForm);
|
|
|
|
|
}
|
|
|
|
|
if (this.workoutId) {
|
|
|
|
|
this.updateWorkout(this.form);
|
|
|
|
|
} else {
|
|
|
|
|
this.addWorkout(this.form);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return e;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async load() {
|
|
|
|
|
await this.loadWorkout(this.workoutId);
|
|
|
|
|
this.form = this.getWorkout;
|
|
|
|
|
this.loadWorkoutCategories(this.form.sport_category_id);
|
|
|
|
|
},
|
|
|
|
|
changeSportCategories() {
|
|
|
|
|
this.loadWorkoutCategories(this.form.sport_category_id);
|
|
|
|
|
},
|
|
|
|
|
removeTags(item) {
|
|
|
|
|
this.form.tags.splice(this.form.tags.indexOf(item), 1);
|
|
|
|
|
this.form.tags = [...this.form.tags];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.loadSportCategories();
|
|
|
|
|
if (this.workoutId) {
|
|
|
|
|
this.load();
|
|
|
|
|
} else {
|
|
|
|
|
console.log("mo");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
@ -233,7 +278,3 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
.v-autocomplete .v-input__control .v-input__slot .v-select__slot label {
|
|
|
|
|
top: 7px !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|