266 lines
8.4 KiB
Vue
266 lines
8.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="loading" v-if="loading">
|
|
<Loading />
|
|
</div>
|
|
<div class v-else>
|
|
<!-- Profile Cover Modal -->
|
|
<Modal
|
|
title="Change Cover"
|
|
:isActive="showCoverModal"
|
|
acceptText="Change"
|
|
rejectText="Cancel"
|
|
@accept="changeCover()"
|
|
@close="showCoverModal=false"
|
|
>
|
|
<ProfileHeader
|
|
:title="child.name"
|
|
:background="childCoverModalImage ? childCoverModalImage : child.profile_cover"
|
|
/>
|
|
<file-select v-model="childCoverModalImage" accept="image/*" lable="Select Cover:"></file-select>
|
|
</Modal>
|
|
<!-- Add Connection Modal -->
|
|
<AddConnectionModal
|
|
@createNewConnection="addConnection($event)"
|
|
@dismiss="showAddConnectionModal=false"
|
|
:isActive="showAddConnectionModal"
|
|
:childName="child.name"
|
|
/>
|
|
<!-- Profile -->
|
|
<ProfileHeader :title="child.name" :background="child.profile_cover" />
|
|
<div class="columns is-fullheight m-t-md">
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by4 p-md">
|
|
<img :src="child.avatar" class="is-rounded is-avatar" />
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<p>Hi!</p>
|
|
<p>Im {{age}}</p>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
<footer v-if="isParent" class="card-footer">
|
|
<a
|
|
class="card-footer-item"
|
|
@click="togleEditMode()"
|
|
>{{inEditMode ? 'Cancel' : 'Edit'}}</a>
|
|
<a class="card-footer-item is-danger" @click="onDeleteClicked()">Delete</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<nav class="level">
|
|
<!-- Left side -->
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<h1 class="title">{{`${child.name.split(' ')[0]}'s Room`}}</h1>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="level">
|
|
<!-- Left side -->
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<h1 class="subtitle">Parents</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side -->
|
|
<div class="level-right">
|
|
<div class="level-item" v-if="isParent">
|
|
<button class="button" @click="showAddConnectionModal = true">
|
|
<i class="fa fa-fw fa-plus"></i> Add Connection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="parents">
|
|
<div class="is-flex">
|
|
<AvatarBadge
|
|
class="column"
|
|
v-for="parent in child.parents"
|
|
:key="parent.id"
|
|
:img="parent.avatar"
|
|
:text="parent.name"
|
|
:isLink="user.id === parent.id"
|
|
@onClick="goToUserProfile(parent)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<nav class="level">
|
|
<!-- Left side -->
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<h1 class="subtitle">Connections</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side -->
|
|
</nav>
|
|
<div class="columns">
|
|
<AvatarBadge
|
|
class="column"
|
|
v-for="connection in child.connections"
|
|
:key="connection.id"
|
|
:img="connection.avatar"
|
|
:text="connection.name"
|
|
:isLink="user.id === connection.id"
|
|
@onClick="goToUserProfile(connection)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapActions, mapGetters } from "vuex";
|
|
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
|
|
import Services from "../../services/index";
|
|
import Loading from "../../shared/components/Loading/Loading.vue";
|
|
import ProfileHeader from "../components/ProfileHeader.vue";
|
|
import AddConnectionModal from "../components/AddConnectionModal.vue";
|
|
import FileSelect from "../../shared/components/FileSelect/FileSelect.vue";
|
|
import AvatarBadge from "../components/AvatarBadge.vue";
|
|
import Moment from "moment";
|
|
import Modal from "../../shared/components/Modal/Modal.vue";
|
|
export default {
|
|
name: "ChildProfile",
|
|
components: {
|
|
ChildAvatar,
|
|
Loading,
|
|
ProfileHeader,
|
|
Modal,
|
|
FileSelect,
|
|
AvatarBadge,
|
|
AddConnectionModal
|
|
},
|
|
beforeCreate() {},
|
|
async created() {
|
|
const response = await Services.ApiService.getChild(this.$route.params.id);
|
|
this.loading = false;
|
|
if (response.code === 0) {
|
|
console.log(response);
|
|
//Cool
|
|
this.child = response.data;
|
|
if (!this.user) await this.getUser();
|
|
this.isParent = this.child.parents.reduce((isParent, parent) => {
|
|
if (isParent) return true;
|
|
return parent.id === this.user.id;
|
|
}, this.isParent);
|
|
} else {
|
|
// notCool
|
|
this.notify({ message: "Sorry, Child not found!", level: "danger" });
|
|
this.$router.push({ path: `/` });
|
|
}
|
|
return true;
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
child: null,
|
|
isParent: false,
|
|
inEditMode: false,
|
|
showCoverModal: false,
|
|
showAddConnectionModal: false,
|
|
childCoverModalImage: null
|
|
};
|
|
},
|
|
methods: {
|
|
onDeleteClicked() {
|
|
this.notify({ message: "Delete button clicked. Still not working" });
|
|
},
|
|
goToUserProfile(user) {
|
|
if (this.user.id === user.id) {
|
|
this.$router.push({ path: `/` });
|
|
} else {
|
|
this.$router.push({ path: `/user/${user.id}` });
|
|
}
|
|
},
|
|
async addConnection(_connection) {
|
|
try {
|
|
this.loading = true;
|
|
const connection = await Services.ApiService.createConnection({
|
|
..._connection,
|
|
child_id: this.child.id
|
|
});
|
|
if (connection.code === 409) {
|
|
this.loading = false;
|
|
this.showAddConnectionModal = false;
|
|
return this.notify({ message: connection.message, level: "warning" });
|
|
} else if (connection.code !== 0) {
|
|
this.loading = false;
|
|
this.showAddConnectionModal = false;
|
|
return this.notify({ message: connection.message, level: "danger" });
|
|
}
|
|
// debugger;
|
|
this.notify({
|
|
message: `Awesome!\n${connection.data.user.name} is connected to ${this.child.name}`,
|
|
level: "success"
|
|
});
|
|
if (connection.data.is_parent) {
|
|
this.child.parents.push(connection.data.user);
|
|
} else {
|
|
this.child.connections.push(connection.data.user);
|
|
}
|
|
console.log(connection);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
this.loading = false;
|
|
this.showAddConnectionModal = false;
|
|
return true;
|
|
},
|
|
async changeCover() {
|
|
if (this.childCoverModalImage) {
|
|
this.loading = true;
|
|
try {
|
|
this.child.profile_cover = await Services.ApiService.updateChildCover(
|
|
this.child.id,
|
|
this.childCoverModalImage
|
|
);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
this.loading = false;
|
|
}
|
|
this.showCoverModal = false;
|
|
this.this.childCoverModalImage = null;
|
|
},
|
|
togleEditMode() {
|
|
this.inEditMode = !this.inEditMode;
|
|
if (this.inEditMode) {
|
|
this.showCoverModal = true;
|
|
}
|
|
},
|
|
...mapActions(["getUser", "getConnections", "notify"])
|
|
},
|
|
computed: {
|
|
age() {
|
|
const years = Moment().diff(this.child.dob, "years");
|
|
const months = Moment().diff(this.child.dob, "months") % 12;
|
|
const isNewBorn = !years && !months;
|
|
let text = "a new boarn!";
|
|
if (!isNewBorn) {
|
|
text = "";
|
|
if (years) text += `${years} years`;
|
|
if (years && months) text += ` and`;
|
|
if (months) text += ` ${months} months`;
|
|
text += " old";
|
|
}
|
|
return `${text}`;
|
|
},
|
|
...mapGetters(["user", "connections"])
|
|
}
|
|
};
|
|
</script>
|
|
|