blob: 326f2f20c2431ac60a31b1f4d14599fdbae6e70d [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6import {prpcClient} from 'prpc-client-instance.js';
7
8import 'elements/framework/mr-header/mr-header.js';
9import '../mr-activity-table/mr-activity-table.js';
10import '../mr-comment-table/mr-comment-table.js';
11
12/**
13 * `<mr-profile-page>`
14 *
15 * The main entry point for a Monorail web components profile.
16 *
17 */
18export class MrProfilePage extends LitElement {
19 /** @override */
20 static get styles() {
21 return css`
22 .history-container {
23 padding: 1em 16px;
24 display: flex;
25 flex-direction: column;
26 min-height: 100%;
27 box-sizing: border-box;
28 flex-grow: 1;
29 }
30 mr-comment-table {
31 width: 100%;
32 margin-bottom: 1em;
33 box-sizing: border-box;
34 }
35 mr-activity-table {
36 width: 70%;
37 flex-grow: 0;
38 margin: auto;
39 margin-bottom: 5em;
40 height: 200px;
41 box-sizing: border-box;
42 }
43 .metadata-container {
44 font-size: var(--chops-main-font-size);
45 border-right: var(--chops-normal-border);
46 width: 15%;
47 min-width: 256px;
48 flex-grow: 0;
49 flex-shrink: 0;
50 box-sizing: border-box;
51 min-height: 100%;
52 }
53 .container-outside {
54 box-sizing: border-box;
55 width: 100%;
56 max-width: 100%;
57 margin: auto;
58 padding: 0.75em 8px;
59 display: flex;
60 align-items: stretch;
61 justify-content: space-between;
62 flex-direction: row;
63 flex-wrap: no-wrap;
64 flex-grow: 0;
65 min-height: 100%;
66 }
67 .profile-data {
68 text-align: center;
69 padding-top: 40%;
70 font-size: var(--chops-main-font-size);
71 }
72 `;
73 }
74
75 /** @override */
76 render() {
77 return html`
78 <mr-header
79 .userDisplayName=${this.user}
80 .loginUrl=${this.loginUrl}
81 .logoutUrl=${this.logoutUrl}
82 >
83 <span slot="subheader">
84 &gt; Viewing Profile: ${this.viewedUser}
85 </span>
86 </mr-header>
87 <div class="container-outside">
88 <div class="metadata-container">
89 <div class="profile-data">
90 ${this.viewedUser} <br>
91 <b>Last visit:</b> ${this.lastVisitStr} <br>
92 <b>Starred Developers:</b>
93 ${this.starredUsers.length ? this.starredUsers.join(', ') : 'None'}
94 </div>
95 </div>
96 <div class="history-container">
97 ${this.user === this.viewedUser ? html`
98 <mr-activity-table
99 .comments=${this.comments}
100 @dateChange=${this._changeDate}
101 ></mr-activity-table>
102 `: ''}
103 <mr-comment-table
104 .user=${this.viewedUser}
105 .viewedUserId=${this.viewedUserId}
106 .comments=${this.comments}
107 .selectedDate=${this.selectedDate}>
108 </mr-comment-table>
109 </div>
110 </div>
111 `;
112 }
113
114 /** @override */
115 static get properties() {
116 return {
117 user: {type: String},
118 logoutUrl: {type: String},
119 loginUrl: {type: String},
120 viewedUser: {type: String},
121 viewedUserId: {type: Number},
122 lastVisitStr: {type: String},
123 starredUsers: {type: Array},
124 comments: {type: Array},
125 selectedDate: {type: Number},
126 };
127 }
128
129 /** @override */
130 updated(changedProperties) {
131 if (changedProperties.has('viewedUserId')) {
132 this._fetchActivity();
133 }
134 }
135
136 async _fetchActivity() {
137 const commentMessage = {
138 userRef: {
139 userId: this.viewedUserId,
140 },
141 };
142
143 const resp = await prpcClient.call(
144 'monorail.Issues', 'ListActivities', commentMessage
145 );
146
147 this.comments = resp.comments;
148 }
149
150 _changeDate(e) {
151 if (!e.detail) return;
152 this.selectedDate = e.detail.date;
153 }
154}
155
156customElements.define('mr-profile-page', MrProfilePage);