parent
d90be45455
commit
095e1ae40b
@ -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 : 'https://via.placeholder.com/1'"
|
||||||
|
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" />
|
||||||
|
</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" />
|
||||||
|
</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>
|
Binary file not shown.
Loading…
Reference in new issue