blob: 326f2f20c2431ac60a31b1f4d14599fdbae6e70d [file] [log] [blame]
// Copyright 2019 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {LitElement, html, css} from 'lit-element';
import {prpcClient} from 'prpc-client-instance.js';
import 'elements/framework/mr-header/mr-header.js';
import '../mr-activity-table/mr-activity-table.js';
import '../mr-comment-table/mr-comment-table.js';
/**
* `<mr-profile-page>`
*
* The main entry point for a Monorail web components profile.
*
*/
export class MrProfilePage extends LitElement {
/** @override */
static get styles() {
return css`
.history-container {
padding: 1em 16px;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
flex-grow: 1;
}
mr-comment-table {
width: 100%;
margin-bottom: 1em;
box-sizing: border-box;
}
mr-activity-table {
width: 70%;
flex-grow: 0;
margin: auto;
margin-bottom: 5em;
height: 200px;
box-sizing: border-box;
}
.metadata-container {
font-size: var(--chops-main-font-size);
border-right: var(--chops-normal-border);
width: 15%;
min-width: 256px;
flex-grow: 0;
flex-shrink: 0;
box-sizing: border-box;
min-height: 100%;
}
.container-outside {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: auto;
padding: 0.75em 8px;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-direction: row;
flex-wrap: no-wrap;
flex-grow: 0;
min-height: 100%;
}
.profile-data {
text-align: center;
padding-top: 40%;
font-size: var(--chops-main-font-size);
}
`;
}
/** @override */
render() {
return html`
<mr-header
.userDisplayName=${this.user}
.loginUrl=${this.loginUrl}
.logoutUrl=${this.logoutUrl}
>
<span slot="subheader">
&gt; Viewing Profile: ${this.viewedUser}
</span>
</mr-header>
<div class="container-outside">
<div class="metadata-container">
<div class="profile-data">
${this.viewedUser} <br>
<b>Last visit:</b> ${this.lastVisitStr} <br>
<b>Starred Developers:</b>
${this.starredUsers.length ? this.starredUsers.join(', ') : 'None'}
</div>
</div>
<div class="history-container">
${this.user === this.viewedUser ? html`
<mr-activity-table
.comments=${this.comments}
@dateChange=${this._changeDate}
></mr-activity-table>
`: ''}
<mr-comment-table
.user=${this.viewedUser}
.viewedUserId=${this.viewedUserId}
.comments=${this.comments}
.selectedDate=${this.selectedDate}>
</mr-comment-table>
</div>
</div>
`;
}
/** @override */
static get properties() {
return {
user: {type: String},
logoutUrl: {type: String},
loginUrl: {type: String},
viewedUser: {type: String},
viewedUserId: {type: Number},
lastVisitStr: {type: String},
starredUsers: {type: Array},
comments: {type: Array},
selectedDate: {type: Number},
};
}
/** @override */
updated(changedProperties) {
if (changedProperties.has('viewedUserId')) {
this._fetchActivity();
}
}
async _fetchActivity() {
const commentMessage = {
userRef: {
userId: this.viewedUserId,
},
};
const resp = await prpcClient.call(
'monorail.Issues', 'ListActivities', commentMessage
);
this.comments = resp.comments;
}
_changeDate(e) {
if (!e.detail) return;
this.selectedDate = e.detail.date;
}
}
customElements.define('mr-profile-page', MrProfilePage);