sajjad
3 years ago
commit
fc51240d96
|
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,114 @@
|
||||
<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>
|
||||
<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 { 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,97 @@
|
||||
<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>
|
||||
<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_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,114 @@
|
||||
<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>
|
||||
<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_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