Merge pull request 'workout_detail' (#2) from workout_detail into master
Reviewed-on: https://git.lilianamodels.com/champya/champya-front/pulls/2master
commit
3c8e46f15c
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div class="info__box pl-2">
|
||||||
|
<div class="info__title text-uppercase">{{ title }}</div>
|
||||||
|
<div class="info__sub__title">
|
||||||
|
<!-- If the sub title is text -->
|
||||||
|
<template v-if="subTitle">
|
||||||
|
<component
|
||||||
|
:is="tag"
|
||||||
|
:class="['white--text sub__text', { 'ml-n1': tag === 'pre' }]"
|
||||||
|
>
|
||||||
|
<slot name="sub-title" :text="subTitle">{{ subTitle }}</slot>
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
<!-- If the sub title is link -->
|
||||||
|
<template v-if="link">
|
||||||
|
<a :href="link" v-text="link" class="white--text link"></a>
|
||||||
|
</template>
|
||||||
|
<!-- If the subtitle is an array and needs a loop-->
|
||||||
|
<div>
|
||||||
|
<slot
|
||||||
|
name="items"
|
||||||
|
:item="item"
|
||||||
|
v-for="(item, i) in items"
|
||||||
|
:index="i"
|
||||||
|
:itemNumber="i + 1"
|
||||||
|
>
|
||||||
|
<Chip
|
||||||
|
class="item__chip mr-2"
|
||||||
|
:text="item"
|
||||||
|
label
|
||||||
|
sm
|
||||||
|
color="white"
|
||||||
|
text-color="black"
|
||||||
|
/>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
subTitle: {
|
||||||
|
type: [String, Number],
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
tag: {
|
||||||
|
type: String,
|
||||||
|
default: "div",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.info__box {
|
||||||
|
line-height: 18px;
|
||||||
|
border-left: 1px solid #707070;
|
||||||
|
}
|
||||||
|
.info__box .info__title {
|
||||||
|
color: #bebebe;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "Montserrat-regular";
|
||||||
|
}
|
||||||
|
.info__box .info__sub__title .link {
|
||||||
|
border-bottom: 1px solid #bebebe;
|
||||||
|
}
|
||||||
|
.info__box .info__sub__title .item__chip {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: "montserrat-light";
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<basic-modal width="900" transition="slide-x-transition" @open="openModal">
|
||||||
|
<template #header>
|
||||||
|
<div class="close__modal">
|
||||||
|
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<div>
|
||||||
|
<SectionTitle
|
||||||
|
title="program details"
|
||||||
|
subTitle="The details you need"
|
||||||
|
:is-modal="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 mb-10">
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
<img
|
||||||
|
class="program__img w-100"
|
||||||
|
:src="
|
||||||
|
program.thumbnail
|
||||||
|
? program.thumbnail
|
||||||
|
: 'https://via.placeholder.com/1280x720'
|
||||||
|
"
|
||||||
|
alt="program image"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="NAME" :sub-title="program.title" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="trainer" :sub-title="program.trainer.name">
|
||||||
|
<template #sub-title="{ text }">
|
||||||
|
<div class="d-flex align-center">
|
||||||
|
<div class="sub__text--slot">{{ text }}</div>
|
||||||
|
<div>
|
||||||
|
<RectangleButton
|
||||||
|
size="large"
|
||||||
|
height="16"
|
||||||
|
class="btn-more ml-3 px-4 py-2 rounded"
|
||||||
|
text="know more"
|
||||||
|
color="white"
|
||||||
|
@click="openUserDetailModal"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Info>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="description" :sub-title="program.description" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="tags" :items="program.tags" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<RectangleButton
|
||||||
|
height="29"
|
||||||
|
class="btn__modal--confirm custom-btn wa__f__m__eb"
|
||||||
|
text="close"
|
||||||
|
@click="$_closeModal()"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</basic-modal>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapGetters, mapActions } from "vuex";
|
||||||
|
export default {
|
||||||
|
name: "modal_program_detail",
|
||||||
|
data: () => ({
|
||||||
|
program: {},
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
...mapGetters("users", ["getUser"]),
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions("users", ["loadUser"]),
|
||||||
|
openModal({ data }) {
|
||||||
|
this.program = { ...data };
|
||||||
|
},
|
||||||
|
async openUserDetailModal() {
|
||||||
|
await this.loadUser(this.program.trainer.id);
|
||||||
|
this.$_openModal("user_detail", { data: this.getUser });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.program__img {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.btn-more {
|
||||||
|
font-family: "Montserrat-extralight";
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid var(--color-white);
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<basic-modal width="900" transition="slide-x-transition" @open="openModal">
|
||||||
|
<template #header>
|
||||||
|
<div class="close__modal">
|
||||||
|
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<div>
|
||||||
|
<SectionTitle
|
||||||
|
title="user details"
|
||||||
|
subTitle="The details you need"
|
||||||
|
:is-modal="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 mb-10">
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
<img
|
||||||
|
class="user__img w-100"
|
||||||
|
:src="user.profile ? user.profile : require('@Assets/anonymous.png')"
|
||||||
|
alt="user image"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="6">
|
||||||
|
<Info title="NAME" :sub-title="user.first_name" />
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="6">
|
||||||
|
<Info title="LAST NAME" :sub-title="user.last_name" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="EMAIL ADDRESS" :sub-title="user.email" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
<Info title="role" :sub-title="user.role" />
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="4">
|
||||||
|
<Info title="joined date" :sub-title="user.joined_date" />
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="4">
|
||||||
|
<Info title="BIRTHDAY" :sub-title="user.birthday" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="3">
|
||||||
|
<Info title="country" :sub-title="user.country.name" />
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="9">
|
||||||
|
<Info title="address" :sub-title="user.address" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<RectangleButton
|
||||||
|
height="29"
|
||||||
|
class="btn__modal--confirm custom-btn wa__f__m__eb"
|
||||||
|
text="close"
|
||||||
|
@click="$_closeModal()"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</basic-modal>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "modal_user_detail",
|
||||||
|
data: () => ({
|
||||||
|
user: {},
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
openModal({ data }) {
|
||||||
|
this.user = { ...data };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.user__img {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.btn-more {
|
||||||
|
font-family: "Montserrat-extralight";
|
||||||
|
font-size: 10px;
|
||||||
|
border: 1px solid var(--color-white);
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<basic-modal width="1200" transition="slide-x-transition" @open="openModal">
|
||||||
|
<template #header>
|
||||||
|
<div class="close__modal">
|
||||||
|
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<div>
|
||||||
|
<SectionTitle
|
||||||
|
title="workout details"
|
||||||
|
subTitle="The details you need"
|
||||||
|
:is-modal="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 mb-10">
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
<img
|
||||||
|
class="workout__img w-100"
|
||||||
|
:src="
|
||||||
|
workout.thumbnail
|
||||||
|
? workout.thumbnail
|
||||||
|
: 'https://via.placeholder.com/1280x720'
|
||||||
|
"
|
||||||
|
alt="workout image"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="8">
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="6">
|
||||||
|
<Info
|
||||||
|
title="category"
|
||||||
|
:sub-title="workout.workout_category.sport_category.name"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="6">
|
||||||
|
<Info title="sub category" :sub-title="workout.workout_category.name" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="NAME" :sub-title="workout.name" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="a short quote" :sub-title="workout.title" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
<Info title="suggested course time?" :sub-title="workout.suggested_set" />
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="4">
|
||||||
|
<Info
|
||||||
|
title="suggested times each course?"
|
||||||
|
:sub-title="workout.suggested_per_set"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="4">
|
||||||
|
<Info title="suggested ESTIMATED TIME" :sub-title="workout.suggested_time" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="VIDEO LINK" :sub-title="workout.video" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="description" :sub-title="workout.description" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<Info title="tags" :items="workout.tags" />
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<RectangleButton
|
||||||
|
height="29"
|
||||||
|
class="btn__modal--confirm custom-btn wa__f__m__eb"
|
||||||
|
text="close"
|
||||||
|
@click="$_closeModal()"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</basic-modal>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "modal_workout_detail",
|
||||||
|
data: () => ({
|
||||||
|
workout: {},
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
openModal({ data }) {
|
||||||
|
this.workout = { ...data };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.workout__img {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
Binary file not shown.
Loading…
Reference in new issue