tildefriends/apps/cory/index/tf-user.js

"use strict";
Vue.component('tf-user', {
	data: function() { return {
		show_user_dialog: false,
		show_follow_dialog: false,
		edit_profile_name: null,
		edit_profile_description: null,
	} },
	props: ['id'],
	mounted: function() {
		window.parent.postMessage({user: this.id}, '*');
	},
	computed: {
		following: {
			get: function() {
				return g_data.users &&
					g_data.users[g_data.whoami] &&
					g_data.users[g_data.whoami].following[this.id];
			},
			set: function(newValue) {
				var already_following =
					g_data.users &&
					g_data.users[g_data.whoami] &&
					g_data.users[g_data.whoami].following &&
					g_data.users[g_data.whoami].following[this.id];
				if (newValue && !already_following) {
					if (confirm("Are you sure you want to follow " + this.id + "?")) {
						window.parent.postMessage({appendMessage: {type: "contact", following: true, contact: this.id}}, '*');
					}
				} else if (!newValue && already_following) {
					if (confirm("Are you sure you want to unfollow " + this.id + "?")) {
						window.parent.postMessage({appendMessage: {type: "contact", following: false, contact: this.id}}, '*');
					}
				}
			},
		},
		whoami: { get: function() { return g_data.whoami; } },
		users: { get: function() { return g_data.users; } },
	},
	methods: {
		save_profile: function() {
			var message = {appendMessage: {
				type: 'about',
				about: this.id,
				name: this.edit_profile_name,
				description: this.edit_profile_description,
			}};
			window.parent.postMessage(message, '*');
		},
		show_user: function() {
			this.show_user_dialog = true;
			if (this.id == this.whoami) {
				this.edit_profile_name = this.users[this.id].name;
				this.edit_profile_description = this.users[this.id].description;
			}
		},
	},
	template: `<span>
				<md-chip md-clickable :class="following ? 'md-accent' : ''" @click="show_user()">
					{{users[id] && users[id].name ? users[id].name : id}}
				</md-chip>
				<md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip>
				<md-dialog :md-active.sync="show_user_dialog">
					<md-dialog-title>{{users[id] && users[id].name ? users[id].name : id}}</md-dialog-title>
					<md-dialog-content>
						<div v-if="id == whoami">
							<md-field>
								<label>Name</label>
								<md-input v-model="edit_profile_name"></md-input>
							</md-field>
							<md-field>
								<label>Description</label>
								<md-textarea v-model="edit_profile_description"></md-textarea>
							</md-field>
						</div>
						<template v-if="users[id]">
							<div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div>
							<div v-if="users[id].name">{{id}}</div>
							<div>{{users[id].description}}</div>
							<div><md-switch v-model="following">Following</md-switch></div>
							<div class="md-layout">
								<div class="md-layout-item">
									<md-list>
										<md-subheader>Followers</md-subheader>
										<md-list-item v-for="follower in Object.keys((users[id] && users[id].followers) ? users[id].followers : {})" v-bind:key="'follower-' + follower">
											<tf-user :id="follower"></tf-user>
										</md-list-item>
									</md-list>
								</div>
								<div class="md-layout-item">
									<md-list>
										<md-subheader>Following</md-subheader>
										<md-list-item v-for="user in Object.keys((users[id] && users[id].following) ? users[id].following : {})" v-bind:key="'following-' + user">
											<tf-user :id="user"></tf-user>
										</md-list-item>
									</md-list>
								</div>
							</div>
						</template>
					</md-dialog-content>
					<md-dialog-actions>
						<md-button @click="save_profile" v-if="id == whoami">Save Profile</md-button>
						<md-button @click="show_user_dialog = false">Close</md-button>
					</md-dialog-actions>
				</md-dialog>
			</span>`,
});