seepur/resources/scripts/applications/home/views/home.vue

246 lines
8.4 KiB
Vue
Raw Normal View History

2020-02-02 22:42:18 +00:00
<template>
<div class="container is-fullwidth">
2020-04-12 14:25:42 +00:00
<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="user.name"
:background="childCoverModalImage ? childCoverModalImage : user.profile_cover"
/>
<file-select v-model="childCoverModalImage" accept="image/*" lable="Select Cover:"></file-select>
</Modal>
<!-- Create Call Modal -->
<ConfigureNewCallModal
@newCall="makeCall($event)"
@dismiss="showCreateCallModal=false"
:isActive="showCreateCallModal"
/>
<!-- Profile -->
<ProfileHeader :title="user.name" :background="user.profile_cover" />
<div class="columns is-fullheight m-t-md">
2020-05-09 19:11:55 +00:00
<div class="column is-2">
2020-04-12 14:25:42 +00:00
<div class="card">
2020-05-09 19:11:55 +00:00
<div class="card-image p-md">
<figure class="image is-1by1">
2020-04-12 14:25:42 +00:00
<img :src="user.avatar" class="is-rounded is-avatar" />
2020-03-17 22:16:34 +00:00
</figure>
</div>
2020-04-12 14:25:42 +00:00
<div class="card-content">
<div v-if="!![...user.connections.children, ...user.connections.connections].length">
<p class="card-header-title">Connections</p>
<ChildCard
v-for="child in [...user.connections.children, ...user.connections.connections]"
:key="child.id"
:child="child"
></ChildCard>
<br />
</div>
2020-03-17 22:16:34 +00:00
</div>
2020-02-09 15:17:11 +00:00
</div>
2020-03-17 22:16:34 +00:00
</div>
2020-04-12 14:25:42 +00:00
<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">{{`${user.name.split(' ')[0]}'s Room`}}</h1>
2020-04-12 14:25:42 +00:00
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
2020-05-10 02:48:26 +00:00
<!-- Dropdown -->
<div :class="`dropdown ${addMenuOpen ? 'is-active' : ''}`">
<div class="dropdown-trigger">
<button
class="button"
aria-haspopup="true"
aria-controls="dropdown-menu"
@click="addMenuOpen=!addMenuOpen"
>
<span>Add</span>
<span class="icon is-small">
<i
:class="`fa fa-angle-${addMenuOpen ? 'up' : 'down'}`"
aria-hidden="true"
></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" @click="onAddClicked('book')">
<i class="fa fa-fw fa-book"></i> Add a book
</a>
<a class="dropdown-item" @click="onAddClicked('slideshow')">
<i class="fa fa-fw fa-photo"></i> New slideshow
</a>
<a class="dropdown-item" @click="onAddClicked('puzzle')">
<i class="fa fa-fw fa-puzzle-piece"></i> Create a puzzle
</a>
<hr class="dropdown-divider" />
<a class="dropdown-item" @click="onAddClicked('child')">
<i class="fa fa-fw fa-child"></i> Add a child
</a>
</div>
</div>
</div>
<!-- End Dropdown -->
<!-- <button class="button" @click="onAddClicked()">
2020-04-12 14:25:42 +00:00
<i class="fa fa-fw fa-plus"></i> Add
2020-05-10 02:48:26 +00:00
</button>-->
2020-04-12 14:25:42 +00:00
<button class="button is-success m-l-md" @click="showCreateCallModal=true">
<i class="fa fa-fw fa-phone"></i> Call
</button>
</div>
</div>
</nav>
<div class="Books">
<h2 class="subtitle">
<i class="fa fa-fw fa-book"></i> My Books
</h2>
2020-05-09 19:11:55 +00:00
<div class="is-flex m-b-md is-justify-centered">
<div class="book-thumb m-l-md" v-for="book in user.books" :key="book.id">
2020-04-12 14:25:42 +00:00
<div class="book-cover">
<figure class="image is-2by3 m-a">
<img :src="`/u/books/${book.id}/thumbnail`" />
2020-04-12 14:25:42 +00:00
</figure>
</div>
<div class="book-text">
<div>{{book.title}}</div>
2020-04-12 14:25:42 +00:00
</div>
</div>
</div>
</div>
2020-03-17 22:16:34 +00:00
</div>
2020-02-09 15:17:11 +00:00
</div>
</div>
</div>
</div>
2020-02-02 22:42:18 +00:00
</div>
</template>
<script lang="ts">
2020-04-12 14:25:42 +00:00
import { mapActions, mapGetters } from "vuex";
import ChildCard from "../components/Child_Card.vue";
2020-03-17 22:16:34 +00:00
import Services from "../../services/index";
2020-04-12 14:25:42 +00:00
import Loading from "../../shared/components/Loading/Loading.vue";
import ProfileHeader from "../components/ProfileHeader.vue";
import AddConnectionModal from "../components/AddConnectionModal.vue";
import ConfigureNewCallModal from "../components/ConfigureNewCallModal.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";
2020-02-02 22:42:18 +00:00
export default {
name: "Home",
2020-02-09 15:17:11 +00:00
components: {
2020-04-12 14:25:42 +00:00
Loading,
ProfileHeader,
Modal,
FileSelect,
AvatarBadge,
AddConnectionModal,
ConfigureNewCallModal,
ChildCard
2020-02-09 15:17:11 +00:00
},
beforeCreate() {},
2020-03-17 22:16:34 +00:00
async created() {
2020-04-12 14:25:42 +00:00
this.loading = false;
return true;
2020-03-17 22:16:34 +00:00
},
2020-02-09 15:17:11 +00:00
data() {
return {
2020-04-12 14:25:42 +00:00
loading: true,
child: null,
isParent: false,
inEditMode: false,
showCoverModal: false,
showCreateCallModal: false,
showAddConnectionModal: false,
2020-05-10 02:48:26 +00:00
childCoverModalImage: null,
addMenuOpen: false
2020-02-09 15:17:11 +00:00
};
2020-04-12 14:25:42 +00:00
},
methods: {
2020-05-10 02:48:26 +00:00
onAddClicked(action: string) {
this.notify({
message: `Add ${action} button clicked. Still not working`
});
this.addMenuOpen = false;
2020-05-01 17:36:24 +00:00
},
2020-04-12 14:25:42 +00:00
onDeleteClicked() {
2020-05-01 17:36:24 +00:00
this.notify({ message: "Delete button clicked. Still not working" });
2020-04-12 14:25:42 +00:00
},
goChildProfile(connection) {
this.$router.push({ path: `/child/${connection.id}` });
},
async makeCall(event) {
try {
const response = await Services.ApiService.createCall(event);
2020-05-01 17:24:22 +00:00
this.notify({ message: `Connecting...` });
2020-04-12 14:25:42 +00:00
this.$router.push({ path: `/call/${response.data.id}` });
} catch (e) {
console.error(e);
}
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", "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"])
2020-02-02 22:42:18 +00:00
}
};
</script>