sajjad_talkhabi 2 years ago
parent a4f9727177
commit cce81bd605

@ -5,18 +5,18 @@
@submit="submit" @submit="submit"
width="900" width="900"
transition="slide-x-transition" transition="slide-x-transition"
:loading="loading"
> >
<template #header> <template #header>
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
<div class="pt-11">
<SectionTitle :title="title" :subTitle="subTitle" :is-modal="true" />
</div>
</template> </template>
<template #default> <template #default>
<loading v-if="loading" class="loading-data" /> <div>
<div :class="{ 'loading-form': loading }">
<div>
<SectionTitle :title="title" :subTitle="subTitle" :is-modal="true" />
</div>
<div class="mt-8 mb-10"> <div class="mt-8 mb-10">
<v-switch <v-switch
v-for="item in items" v-for="item in items"

@ -6,14 +6,23 @@
:transition="transition" :transition="transition"
dark dark
> >
<main-back height="100%" :is-modal="true"> <loading v-if="loading" class="loading-data" />
<component :is="tag" @submit="$emit('submit')" :ref="tag == 'form' ? 'form' : null"> <main-back
<v-card class="wa__modal"> height="100%"
<div class="wa__modal-header"> :is-modal="true"
:class="{ 'loading-form': loading }"
>
<component
:is="tag"
@submit="$emit('submit')"
:ref="tag == 'form' ? 'form' : null"
>
<v-card :class="['wa__modal', { 'loading-mode': loading }]">
<div class="wa__modal-header pl-4">
<slot name="header" :modal="modal" :data="data" v-if="modal"></slot> <slot name="header" :modal="modal" :data="data" v-if="modal"></slot>
</div> </div>
<v-card-text class="wa__modal-content pb-0"> <v-card-text class="wa__modal-content pb-0">
<slot :modal="modal" :data="data" v-if="modal"></slot> <slot :modal="modal" :data="data" v-if="modal && !loading"></slot>
</v-card-text> </v-card-text>
<div v-if="hasFooter" class="px-4"> <div v-if="hasFooter" class="px-4">
<v-divider class="mb-0"></v-divider> <v-divider class="mb-0"></v-divider>
@ -41,6 +50,10 @@ export default {
tag: { tag: {
default: "div", default: "div",
}, },
loading: {
type: Boolean,
default: false,
},
}, },
data: () => ({ data: () => ({
isOpenModal: false, isOpenModal: false,
@ -90,6 +103,9 @@ export default {
} }
.wa__modal-header { .wa__modal-header {
position: relative; position: relative;
height: 40px; }
/* loading */
.loading-mode {
height: 300px;
} }
</style> </style>

@ -11,15 +11,15 @@
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="add a series" title="add a series"
subTitle="let us help in your search" subTitle="let us help in your search"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
</template>
<template #default>
<div class="mt-6 mb-10"> <div class="mt-6 mb-10">
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">

@ -69,7 +69,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="title__box" @click="openDetailModal"> <div
class="title__box cursor-pointer"
@click="$_openModal('program_detail', { program_id: program.id })"
>
<div class="d-flex align-center mt-1"> <div class="d-flex align-center mt-1">
<div class="program__title"> <div class="program__title">
{{ program.title }} {{ program.title }}
@ -108,10 +111,9 @@
</div> </div>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from "vuex"; import { mapActions } from "vuex";
import toast from "@/utils/toast"; import toast from "@/utils/toast";
import { UserStorage } from "@/utils/storage"; import { UserStorage } from "@/utils/storage";
import AppSectionRepository from "@/abstraction/repository/appSectionRepository";
export default { export default {
data: () => ({ data: () => ({
role: UserStorage.getRole() ? UserStorage.getRole() : null, role: UserStorage.getRole() ? UserStorage.getRole() : null,
@ -121,34 +123,34 @@ export default {
type: Object, type: Object,
}, },
}, },
computed: {
...mapGetters("programs", ["getProgram"]),
},
methods: { methods: {
...mapActions("programs", [ ...mapActions("programs", ["verifyProgram", "deleteProgram"]),
"verifyProgram",
"deleteProgram",
"loadProgram",
]),
removeProgram(id) { removeProgram(id) {
console.log("this.program.active_trainee_count", this.program.active_trainee_count); console.log(
"this.program.active_trainee_count",
this.program.active_trainee_count
);
if (this.program.active_trainee_count === 0) { if (this.program.active_trainee_count === 0) {
console.log("is not started"); console.log("is not started");
toast.question("Are sure delete program?", "Delete program", async () => { toast.question(
await this.deleteProgram({ courseId: id, isStarted: false }); "Are sure delete program?",
}); "Delete program",
async () => {
await this.deleteProgram({ courseId: id, isStarted: false });
}
);
} else { } else {
console.log("is started"); console.log("is started");
toast.question("Are sure delete program?", "Delete program", async () => { toast.question(
await this.deleteProgram({ courseId: id, isStarted: true }); "Are sure delete program?",
this.program.verified = false; "Delete program",
}); async () => {
await this.deleteProgram({ courseId: id, isStarted: true });
this.program.verified = false;
}
);
} }
}, },
async openDetailModal() {
await this.loadProgram(this.program.id);
this.$_openModal("program_detail", { data: this.getProgram });
},
}, },
}; };
</script> </script>

@ -1,19 +1,24 @@
<template> <template>
<basic-modal width="900" transition="slide-x-transition" @open="openModal"> <basic-modal
width="900"
:loading="loading"
transition="slide-x-transition"
@open="openModal"
>
<template #header> <template #header>
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="program details" title="program details"
subTitle="The details you need" subTitle="The details you need"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
<div class="mt-4 mb-10"> </template>
<template #default>
<div class="mt-4 mb-10" v-if="Object.keys(program).length">
<v-row> <v-row>
<v-col cols="4"> <v-col cols="4">
<img <img
@ -45,7 +50,11 @@
class="btn-more ml-3 px-4 py-2 rounded" class="btn-more ml-3 px-4 py-2 rounded"
text="know more" text="know more"
color="white" color="white"
@click="openUserDetailModal" @click="
$_openModal('user_detail', {
user_id: program.trainer.id,
})
"
/> />
</div> </div>
</div> </div>
@ -86,18 +95,26 @@ export default {
name: "modal_program_detail", name: "modal_program_detail",
data: () => ({ data: () => ({
program: {}, program: {},
loading: false,
}), }),
computed: { computed: {
...mapGetters("users", ["getUser"]), ...mapGetters("programs", ["getProgram"]),
}, },
methods: { methods: {
...mapActions("users", ["loadUser"]), ...mapActions("programs", ["loadProgram"]),
openModal({ data }) { openModal({ program_id }) {
this.program = { ...data }; this.load(program_id);
}, },
async openUserDetailModal() { async load(program_id) {
await this.loadUser(this.program.trainer.id); try {
this.$_openModal("user_detail", { data: this.getUser }); this.loading = true;
await this.loadProgram(program_id);
this.program = this.getProgram;
} catch (error) {
return error;
} finally {
this.loading = false;
}
}, },
}, },
}; };

@ -9,15 +9,15 @@
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="filters" title="filters"
subTitle="let us help in your search" subTitle="let us help in your search"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
</template>
<template #default>
<div class="mt-4 mb-10"> <div class="mt-4 mb-10">
<div class="my-6"> <div class="my-6">
<div> <div>
@ -133,7 +133,10 @@ export default {
...mapGetters("programs", ["getFilters"]), ...mapGetters("programs", ["getFilters"]),
}, },
methods: { methods: {
...mapMutations("programs", ["SET_FILTER_PROGRAMS", "SET_IS_FILTERED_PROGRAM"]), ...mapMutations("programs", [
"SET_FILTER_PROGRAMS",
"SET_IS_FILTERED_PROGRAM",
]),
filterPrograms() { filterPrograms() {
this.SET_IS_FILTERED_PROGRAM(true); this.SET_IS_FILTERED_PROGRAM(true);
this.SET_FILTER_PROGRAMS(this.filter); this.SET_FILTER_PROGRAMS(this.filter);

@ -1,13 +1,19 @@
<template> <template>
<div class="user__card"> <div class="user__card">
<v-row> <v-row>
<v-col class="cursor-pointer" cols="3" @click="openUserDetailModal"> <v-col
class="cursor-pointer"
cols="3"
@click="$_openModal('user_detail', { user_id: user.id })"
>
<div class="d-flex align-center h-100" style="overflow: hidden"> <div class="d-flex align-center h-100" style="overflow: hidden">
<div style="line-height: 14px"> <div style="line-height: 14px">
<div class="user__name wa__f__m__eb"> <div class="user__name wa__f__m__eb">
{{ user.first_name }} {{ user.last_name }} {{ user.first_name }} {{ user.last_name }}
</div> </div>
<small class="user__email" v-if="role === 'admin'">{{ user.email }}</small> <small class="user__email" v-if="role === 'admin'">{{
user.email
}}</small>
</div> </div>
</div> </div>
</v-col> </v-col>
@ -25,7 +31,9 @@
<div class="d-flex align-center justify-center h-100"> <div class="d-flex align-center justify-center h-100">
<div v-if="user.role == 'trainer'" class="d-flex align-center"> <div v-if="user.role == 'trainer'" class="d-flex align-center">
<div class="user__program--quantity wa__f__m__eb mr-2"> <div class="user__program--quantity wa__f__m__eb mr-2">
{{ user.created_courses_count ? user.created_courses_count : "0" }} {{
user.created_courses_count ? user.created_courses_count : "0"
}}
</div> </div>
<div class="user__program__text">program created</div> <div class="user__program__text">program created</div>
</div> </div>
@ -86,10 +94,10 @@ export default {
role: UserStorage.getRole() ? UserStorage.getRole() : null, role: UserStorage.getRole() ? UserStorage.getRole() : null,
}), }),
computed: { computed: {
...mapGetters("users", ["getUser", "getRoles"]), ...mapGetters("users", ["getRoles"]),
}, },
methods: { methods: {
...mapActions("users", ["deleteUser", "loadUser"]), ...mapActions("users", ["deleteUser"]),
removeUser(id) { removeUser(id) {
toast.question("Are sure delete User?", "Delete User", () => { toast.question("Are sure delete User?", "Delete User", () => {
this.deleteUser(id); this.deleteUser(id);
@ -104,10 +112,6 @@ export default {
roles: this.getRoles, roles: this.getRoles,
}); });
}, },
async openUserDetailModal() {
await this.loadUser(this.user.id);
this.$_openModal("user_detail", { data: this.getUser });
},
}, },
}; };
</script> </script>

@ -4,18 +4,31 @@
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
<div class="pt-11">
<SectionTitle
title="change role"
subTitle="make it our side"
:is-modal="true"
/>
</div>
</template> </template>
<template #default> <template #default>
<div> <v-item-group
<SectionTitle title="change role" subTitle="make it our side" :is-modal="true" /> class="mt-10 mb-16"
</div> mandatory
<v-item-group class="mt-10 mb-16" mandatory v-model="role_id" @change="change"> v-model="role_id"
@change="change"
>
<v-row> <v-row>
<v-col cols="12" v-for="(role, i) in roles" :key="i" class="py-1"> <v-col cols="12" v-for="(role, i) in roles" :key="i" class="py-1">
<v-item v-slot="{ active, toggle }" :value="role.id"> <v-item v-slot="{ active, toggle }" :value="role.id">
<main-back :social="true"> <main-back :social="true">
<v-card <v-card
:class="['d-flex', 'align-center', { 'item--active': active }]" :class="[
'd-flex',
'align-center',
{ 'item--active': active },
]"
dark dark
height="45" height="45"
@click="toggle" @click="toggle"

@ -1,24 +1,31 @@
<template> <template>
<basic-modal width="900" transition="slide-x-transition" @open="openModal"> <basic-modal
:loading="loading"
width="900"
transition="slide-x-transition"
@open="openModal"
>
<template #header> <template #header>
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="user details" title="user details"
subTitle="The details you need" subTitle="The details you need"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
<div class="mt-4 mb-10"> </template>
<template #default>
<div class="mt-4 mb-10" v-if="Object.keys(user).length">
<v-row> <v-row>
<v-col cols="4"> <v-col cols="4">
<img <img
class="user__img w-100" class="user__img w-100"
:src="user.profile ? user.profile : require('@Assets/anonymous.png')" :src="
user.profile ? user.profile : require('@Assets/anonymous.png')
"
alt="user image" alt="user image"
/> />
</v-col> </v-col>
@ -73,14 +80,31 @@
</basic-modal> </basic-modal>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from "vuex";
export default { export default {
name: "modal_user_detail", name: "modal_user_detail",
data: () => ({ data: () => ({
user: {}, user: {},
loading: false,
}), }),
computed: {
...mapGetters("users", ["getUser"]),
},
methods: { methods: {
openModal({ data }) { ...mapActions("users", ["loadUser"]),
this.user = { ...data }; openModal({ user_id }) {
this.load(user_id);
},
async load(user_id) {
try {
this.loading = true;
await this.loadUser(user_id);
this.user = this.getUser;
} catch (error) {
return error;
} finally {
this.loading = false;
}
}, },
}, },
}; };

@ -10,15 +10,15 @@
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="filters" title="filters"
subTitle="let us help in your search" subTitle="let us help in your search"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
</template>
<template #default>
<div class="mt-4 mb-10"> <div class="mt-4 mb-10">
<div class="my-6"> <div class="my-6">
<div> <div>

@ -1,5 +1,8 @@
<template> <template>
<div class="border-bottom" @click="openDetailModal"> <div
class="border-bottom cursor-pointer"
@click="$_openModal('workout_detail', { workout_id: workout.id })"
>
<v-row> <v-row>
<v-col cols="4" class="pr-0"> <v-col cols="4" class="pr-0">
<!-- <div <!-- <div
@ -84,30 +87,21 @@
</div> </div>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from "vuex"; import { mapActions } from "vuex";
import toast from "@/utils/toast"; import toast from "@/utils/toast";
import AppSectionRepository from "@/abstraction/repository/appSectionRepository";
export default { export default {
props: { props: {
workout: { workout: {
type: Object, type: Object,
}, },
}, },
computed: {
...mapGetters("workouts", ["getWorkout"]),
},
methods: { methods: {
...mapActions("workouts", ["deleteWorkout", "loadWorkout"]), ...mapActions("workouts", ["deleteWorkout"]),
removeWorkout(id) { removeWorkout(id) {
toast.question("Are sure delete workout?", "Delete workout", () => { toast.question("Are sure delete workout?", "Delete workout", () => {
this.deleteWorkout(id); this.deleteWorkout(id);
}); });
}, },
async openDetailModal() {
await this.loadWorkout(this.workout.id);
this.$_openModal("workout_detail", { data: this.getWorkout });
},
}, },
}; };
</script> </script>

@ -1,19 +1,24 @@
<template> <template>
<basic-modal width="1200" transition="slide-x-transition" @open="openModal"> <basic-modal
:loading="loading"
width="1200"
transition="slide-x-transition"
@open="openModal"
>
<template #header> <template #header>
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="workout details" title="workout details"
subTitle="The details you need" subTitle="The details you need"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
<div class="mt-4 mb-10"> </template>
<template #default>
<div class="mt-4 mb-10" v-if="Object.keys(workout).length">
<v-row> <v-row>
<v-col cols="4"> <v-col cols="4">
<img <img
@ -35,7 +40,10 @@
/> />
</v-col> </v-col>
<v-col cols="6"> <v-col cols="6">
<Info title="sub category" :sub-title="workout.workout_category.name" /> <Info
title="sub category"
:sub-title="workout.workout_category.name"
/>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
@ -52,7 +60,10 @@
</v-row> </v-row>
<v-row> <v-row>
<v-col cols="4"> <v-col cols="4">
<Info title="suggested course time?" :sub-title="workout.suggested_set" /> <Info
title="suggested course time?"
:sub-title="workout.suggested_set"
/>
</v-col> </v-col>
<v-col cols="4"> <v-col cols="4">
<Info <Info
@ -61,7 +72,10 @@
/> />
</v-col> </v-col>
<v-col cols="4"> <v-col cols="4">
<Info title="suggested ESTIMATED TIME" :sub-title="workout.suggested_time" /> <Info
title="suggested ESTIMATED TIME"
:sub-title="workout.suggested_time"
/>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
@ -95,14 +109,32 @@
</basic-modal> </basic-modal>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from "vuex";
export default { export default {
name: "modal_workout_detail", name: "modal_workout_detail",
data: () => ({ data: () => ({
workout: {}, workout: {},
loading: false,
}), }),
computed: {
...mapGetters("workouts", ["getWorkout"]),
},
methods: { methods: {
openModal({ data }) { ...mapActions("workouts", ["loadWorkout"]),
this.workout = { ...data }; openModal({ workout_id }) {
this.load(workout_id);
},
async load(workout_id) {
try {
this.loading = true;
await this.loadWorkout(workout_id);
this.workout = this.getWorkout;
console.log(this.workout);
} catch (error) {
return error;
} finally {
this.loading = false;
}
}, },
}, },
}; };

@ -9,8 +9,6 @@
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template>
<template #default>
<div> <div>
<SectionTitle <SectionTitle
title="filters" title="filters"
@ -18,6 +16,8 @@
:is-modal="true" :is-modal="true"
/> />
</div> </div>
</template>
<template #default>
<div class="mt-4 mb-10"> <div class="mt-4 mb-10">
<div class="my-6"> <div class="my-6">
<div> <div>
@ -70,7 +70,6 @@
</basic-modal> </basic-modal>
</template> </template>
<script> <script>
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { mapMutations, mapGetters } from "vuex"; import { mapMutations, mapGetters } from "vuex";
const defaultFilter = { const defaultFilter = {
@ -94,7 +93,10 @@ export default {
...mapGetters("workouts", ["getFilters"]), ...mapGetters("workouts", ["getFilters"]),
}, },
methods: { methods: {
...mapMutations("workouts", ["SET_FILTER_WORKOUTS", "SET_IS_FILTERED_WORKOUT"]), ...mapMutations("workouts", [
"SET_FILTER_WORKOUTS",
"SET_IS_FILTERED_WORKOUT",
]),
filterWorkotus() { filterWorkotus() {
this.SET_IS_FILTERED_WORKOUT(true); this.SET_IS_FILTERED_WORKOUT(true);
this.SET_FILTER_WORKOUTS(this.filter); this.SET_FILTER_WORKOUTS(this.filter);

@ -11,15 +11,15 @@
<div class="close__modal"> <div class="close__modal">
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon> <v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
</div> </div>
</template> <div class="pt-11">
<template #default>
<div>
<SectionTitle <SectionTitle
title="add a workout" title="add a workout"
subTitle="let us help in your search" subTitle="let us help in your search"
:is-modal="true" :is-modal="true"
/> />
</div> </div>
</template>
<template #default>
<div class="mt-8 mb-10"> <div class="mt-8 mb-10">
<div> <div>
<v-autocomplete <v-autocomplete
@ -45,7 +45,14 @@
class="mt-3" class="mt-3"
/> --> /> -->
<div class="pb-3 align mt-2"> <div class="pb-3 align mt-2">
<div class="series__workout__title wa__f__m__eb text-uppercase mb-2"> <div
class="
series__workout__title
wa__f__m__eb
text-uppercase
mb-2
"
>
{{ item.name }} {{ item.name }}
</div> </div>
<div class="series__workout__description"> <div class="series__workout__description">
@ -59,7 +66,9 @@
<template v-if="Object.keys(selectedWorkout).length !== 0"> <template v-if="Object.keys(selectedWorkout).length !== 0">
<v-divider class="mt-6"></v-divider> <v-divider class="mt-6"></v-divider>
<v-row class="mt-1"> <v-row class="mt-1">
<v-col cols="12"><AddWorkoutsItem :addWorkout="selectedWorkout" /></v-col> <v-col cols="12"
><AddWorkoutsItem :addWorkout="selectedWorkout"
/></v-col>
</v-row> </v-row>
</template> </template>
<div class="mt-6"> <div class="mt-6">
@ -171,7 +180,10 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions("workoutToSeries", ["loadWorkoutsToSeries", "attachWorkoutToSeries"]), ...mapActions("workoutToSeries", [
"loadWorkoutsToSeries",
"attachWorkoutToSeries",
]),
...mapMutations("workoutToSeries", ["SET_FILTER_WORKOUTS_TO_SERIES"]), ...mapMutations("workoutToSeries", ["SET_FILTER_WORKOUTS_TO_SERIES"]),
closeModal() { closeModal() {
this.SET_FILTER_WORKOUTS_TO_SERIES({}); this.SET_FILTER_WORKOUTS_TO_SERIES({});

Loading…
Cancel
Save