feat: display last user activity

scripts/members.js

@@ -3,7 +3,7 @@ import Utilities from './utilities.js';
 import routes from './routes.js';
 import Groups from './groups.js';
 import Base from './base-component.js';
-// import db from './db.js';
+import db from './db.js';
 
 class Members extends Base {
 	constructor() {
@@ -19,8 +19,16 @@ class Members extends Base {
 	}
 
 	getEvents(ev, memberId) {
+		const activityCell = ev.target.closest('tr').querySelector('.member-activity');
 		this.loadEvents(memberId).then(events => {
-			console.log(events);
+			if (events.length === 0) {
+				db.members.update(memberId, { last_activity: 'NA' });
+				activityCell.innerHTML = 'NA';
+				return;
+			}
+			db.members.update(memberId, { last_activity: events[0].created_at }).then(() => {
+				activityCell.innerHTML = timeAgo.format(Date.parse(events[0].created_at));
+			});
 		});
 	}
 
@@ -29,9 +37,17 @@ class Members extends Base {
 		for (const member of members) {
 			membersTemplates.push(html`
 				<tr>
-					<td class="listing__avatar"><img src="${member.avatar_url}" alt="${member.name}" /></td>
+					<td class="listing__avatar">
+						<a target="_blank" href="${member.web_url}">
+							<img src="${member.avatar_url}" alt="${member.name}" />
+						</a>
+					</td>
 					<td>${member.name}</td>
-					<td class="member-activity"> - </td>
+					<td class="member-activity">
+						${member.last_activity && member.last_activity !== 'NA' ?
+							timeAgo.format(Date.parse(member.last_activity)) :
+							member.last_activity ? member.last_activity : '-'}
+					</td>
 					<td class="listing__actions">
 						<button @click=${(ev)=> {this.getEvents(ev, member.id)}}>Load activity</button>
 					</td>

styles/objects/panels.css

@@ -45,5 +45,5 @@
 }
 
 .panel__narrow-content {
-	width: 400px;
+	width: 500px;
 }