cherrypick/src/client/app/mobile/views/pages/settings/settings.profile.vue

<template>
	<md-card class="md-layout-item md-size-50 md-small-size-100">
		<md-card-header>
			<div class="md-title">%i18n:@title%</div>
		</md-card-header>

		<md-card-content>
			<md-field>
				<label>%i18n:@name%</label>
				<md-input v-model="name" :disabled="saving"/>
			</md-field>

			<md-field>
				<label>%i18n:@location%</label>
				<md-input v-model="location" :disabled="saving"/>
			</md-field>

			<md-field>
				<label>%i18n:@description%</label>
				<md-textarea v-model="description" :disabled="saving"/>
			</md-field>

			<md-field>
				<label>%i18n:@birthday%</label>
				<md-input type="date" v-model="birthday" :disabled="saving"/>
			</md-field>

			<div>
				<div class="md-body-2">%i18n:@avatar%</div>
				<md-menu md-direction="bottom-end" :md-close-on-select="true">
					<md-button md-menu-trigger>%i18n:@set-avatar%</md-button>
					<md-menu-content>
						<md-menu-item @click="uploadAvatar">%i18n:@upload-avatar%</md-menu-item>
						<md-menu-item @click="chooseAvatar">%i18n:@choose-avatar%</md-menu-item>
					</md-menu-content>
				</md-menu>
			</div>

			<div>
				<div class="md-body-2">%i18n:@banner%</div>
				<md-menu md-direction="bottom-end" :md-close-on-select="true">
					<md-button md-menu-trigger>%i18n:@set-banner%</md-button>
					<md-menu-content>
						<md-menu-item @click="uploadAvatar">%i18n:@upload-banner%</md-menu-item>
						<md-menu-item @click="chooseAvatar">%i18n:@choose-banner%</md-menu-item>
					</md-menu-content>
				</md-menu>
			</div>
		</md-card-content>

		<md-card-actions>
			<md-button class="md-primary" :disabled="saving" @click="save">%i18n:@save%</md-button>
		</md-card-actions>
	</md-card>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	data() {
		return {
			name: null,
			location: null,
			description: null,
			birthday: null,
			saving: false
		};
	},
	created() {
		this.name = (this as any).os.i.name || '';
		this.location = (this as any).os.i.profile.location;
		this.description = (this as any).os.i.description;
		this.birthday = (this as any).os.i.profile.birthday;
	},
	methods: {
		chooseAvatar() {
			(this as any).apis.chooseDriveFile({
				multiple: false
			}).then(file => {
				this.avatarSaving = true;

				(this as any).api('i/update', {
					avatarId: file.id
				}).then(() => {
					this.avatarSaving = false;
					alert('%i18n:!@avatar-saved%');
				});
			});
		},
		chooseBanner() {
			(this as any).apis.chooseDriveFile({
				multiple: false
			}).then(file => {
				this.bannerSaving = true;

				(this as any).api('i/update', {
					bannerId: file.id
				}).then(() => {
					this.bannerSaving = false;
					alert('%i18n:!@banner-saved%');
				});
			});
		},
		uploadAvatar() {
			// a
		},
		uploadBanner() {
			// a
		},
		save() {
			this.saving = true;

			(this as any).api('i/update', {
				name: this.name || null,
				location: this.location || null,
				description: this.description || null,
				birthday: this.birthday || null
			}).then(() => {
				this.saving = false;
				alert('%i18n:!@saved%');
			});
		}
	}
});
</script>