sajjad
3 years ago
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