Skip to content

Commit

Permalink
feat: Member Activity Table Loading Enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@WorthyD
WorthyD committed Dec 6, 2020
1 parent 50128c8 commit f7a20cc
Show file tree
Hide file tree
Showing 11 changed files with 116 additions and 235 deletions.
101 changes: 5 additions & 96 deletions ...s/components/src/lib/clan-roster-activity-table/clan-roster-activity-table.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ng-container *ngIf="!memberProfilesLoading; else loading">
<mat-table [dataSource]="viewModel" matSort class="mat-elevation-z8" matSortStart="desc"
<mat-table [dataSource]="sortedData" matSort class="mat-elevation-z8" matSortStart="desc"
(matSortChange)="sortData($event)">

<ng-container matColumnDef="loadingRow">
Expand All @@ -11,7 +11,7 @@
<ng-container matColumnDef="displayName" sticky>
<mat-header-cell *matHeaderCellDef mat-sort-header>Display Name</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.profile.profile.data?.userInfo?.displayName}}
{{element.memberProfile.profile.data?.userInfo?.displayName}}
</mat-cell>
</ng-container>

Expand All @@ -20,25 +20,20 @@
<mat-cell *matCellDef="let element" class="activity-cell">

<div class="mx-1">
<div *ngIf="element.activities; else loadingActivities">
<lib-activity-bar-chart [events]="element.activities">
</lib-activity-bar-chart>
</div>
<lib-activity-bar-chart [events]="element.stats.activities">
</lib-activity-bar-chart>
</div>
</mat-cell>
</ng-container>

<ng-container *ngFor="let calculation of calculatedColumns; let colIndex = index"
matColumnDef="{{calculation.key}}">
<!-- <th mat-header-cell *matHeaderCellDef mat-sort-header class="calc-header"> -->
<mat-header-cell *matHeaderCellDef class="calc-header" mat-sort-header>
{{calculation.value}}
</mat-header-cell>
<mat-cell *matCellDef="let element" class="calc-cell">

<div *ngIf="element[calculation.key] || element[calculation.key] === 0; else loadingNumbers">
{{element[calculation.key] | playtime}}
</div>
{{element.stats[calculation.key] | playtime}}

</mat-cell>
</ng-container>
Expand Down Expand Up @@ -70,89 +65,3 @@ <h2>
<lib-loading></lib-loading>
</div>
</ng-template>
<ng-template #loadingNumbers>
<lib-loading diameter="25"></lib-loading>
</ng-template>

<ng-template #loadingActivities>
<lib-loading-bar></lib-loading-bar>
</ng-template>
<!--
<textarea name="" id="" style="width:100%;">
{{viewModel | json}}
</textarea>
-->

<!--
<ng-container *ngIf="!isLoading; else loading">
<ng-container *ngIf="memberProfiles">
<table mat-table [dataSource]="sortedData" matSort class="mat-elevation-z8" matSortStart="desc"
(matSortChange)="sortData($event)">
<ng-container matColumnDef="displayName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Display Name</th>
<td mat-cell *matCellDef="let element">{{element.profile.data?.userInfo?.displayName}}</td>
</ng-container>
<ng-container matColumnDef="activityChart">
<th mat-header-cell *matHeaderCellDef>26 week activity</th>
<td mat-cell *matCellDef="let element" class="activity-cell">
<div class="mx-1">
<div *ngIf="(memberActivities | activitySelector : element) as e; else loadingActivities">
<lib-activity-bar-chart [events]="e.activities">
</lib-activity-bar-chart>
</div>
</div>
</td>
</ng-container>
<ng-container *ngFor="let calculation of calculatedColumns; let colIndex = index" matColumnDef="{{calculation}}">
<th mat-header-cell *matHeaderCellDef class="calc-header">
{{calculation}}
</th>
<td mat-cell *matCellDef="let element" class="calc-cell">
<div *ngIf="(memberActivities | activitySelector : element) as e; else loadingNumbers">
{{e[calculation] | playtime}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="activityLink">
<th mat-header-cell *matHeaderCellDef>Activity LInk</th>
<td mat-cell *matCellDef="let element">
<button (click)="memberClick(element)">View</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</ng-container>
</ng-container>
<ng-template #loading>
<div class="text-center m-5">
<h2>
Activity Stats...
</h2>
<p>
</p>
<lib-loading></lib-loading>
</div>
</ng-template>
<ng-template #loadingNumbers>
<lib-loading diameter="25"></lib-loading>
</ng-template>
<ng-template #loadingActivities>
<lib-loading-bar></lib-loading-bar>
</ng-template> -->
10 changes: 6 additions & 4 deletions ...s/components/src/lib/clan-roster-activity-table/clan-roster-activity-table.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
mat-table {
max-width: 100%;
overflow: auto;
//overflow: auto;
}
mat-row {
// transition: height 1s;
transition: flex 0.3s ease-out;
}
.mat-column-activityChart {
flex: 2 0 0;
min-width: 700px;
// Too wide and it breaks the whole experience.
min-width: 700px;
> div {
width: 100%;

max-width: 1000px;
}
}
.mat-column-displayName {
align-self: stretch;
flex: 0 0 150px;
flex: 1 0 150px;
}
.mat-column-lastWeek,
.mat-column-lastMonth,
Expand Down Expand Up @@ -43,4 +46,3 @@ mat-row {
.mat-column-loadingRow {
padding: 0;
}

41 changes: 21 additions & 20 deletions ...onents/src/lib/clan-roster-activity-table/clan-roster-activity-table.component.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { StorybookModule } from '../storybook/storybook.module';

import { ClanRosterActivityTableModule } from './clan-roster-activity-table.module';
import { ClanRosterActivityTableComponent } from './clan-roster-activity-table.component';
import { MOCK_ROSTER_ACTIVITY, MOCK_ROSTER_ACTIVITIES } from './_MOCK_ROSTER_ACTIVITY_LIST';
import {
MOCK_ROSTER_ACTIVITY,
MOCK_ROSTER_ACTIVITIES,
MOCK_ROSTER_ACTIVITIES_COMBINE
} from './_MOCK_ROSTER_ACTIVITY_LIST';
import { withKnobs, boolean } from '@storybook/addon-knobs';
export default {
title: 'Clan / Clan Activity Stats',
Expand All @@ -18,34 +22,31 @@ export default {

export const base = () => ({
component: ClanRosterActivityTableComponent,
template: `<lib-clan-roster-activity-table [memberProfiles]="memberStats" [memberActivities]="activities" [isLoading]="isLoading" [memberProfilesLoading]="isProfileLoading"></lib-clan-roster-activity-table>`,
template: `<lib-clan-roster-activity-table [memberActivityStats]="memberStats" [isLoading]="isLoading" [memberProfilesLoading]="areProfilesLoading" ></lib-clan-roster-activity-table>`,
props: {
memberStats: MOCK_ROSTER_ACTIVITY,
activities: MOCK_ROSTER_ACTIVITIES,
isLoading: boolean('Is Loading', false),
isProfileLoading: boolean('Is Profile Loading', false)
memberStats: MOCK_ROSTER_ACTIVITIES_COMBINE,
areProfilesLoading: boolean('profiles Loading', false),
isLoading: boolean('Is Loading', false)
}
});

export const loadingTable = () => ({
component: ClanRosterActivityTableComponent,
template: `<lib-clan-roster-activity-table [memberProfiles]="memberStats" [isLoading]="true"></lib-clan-roster-activity-table>`,
template: `<lib-clan-roster-activity-table [memberActivityStats]="memberStats" [isLoading]="isLoading" [memberProfilesLoading]="areProfilesLoading"></lib-clan-roster-activity-table>`,
props: {
memberStats: MOCK_ROSTER_ACTIVITY
}
});
memberStats: MOCK_ROSTER_ACTIVITIES_COMBINE,

const loadingVar = MOCK_ROSTER_ACTIVITY.map((x) => {
return { ...x, stats: undefined };
areProfilesLoading: boolean('profiles Loading', true),
isLoading: boolean('Is Loading', true)
}
});

export const loadingMembers = () => ({
export const loadingProfilesTable = () => ({
component: ClanRosterActivityTableComponent,
template: `<lib-clan-roster-activity-table [memberProfiles]="(isLoadingMembers == true) ? memberStats : memberStats2" [isLoading]="isLoading"></lib-clan-roster-activity-table>`,

template: `<lib-clan-roster-activity-table [memberActivityStats]="memberStats" [isLoading]="isLoading" [memberProfilesLoading]="areProfilesLoading"></lib-clan-roster-activity-table>`,
props: {
memberStats: loadingVar,
memberStats2: MOCK_ROSTER_ACTIVITY,
isLoadingMembers: boolean('Is Loading2', true),
isLoading: boolean('Is Loading', true)
memberStats: MOCK_ROSTER_ACTIVITIES_COMBINE,

isLoading: boolean('Is Loading', false),
areProfilesLoading: boolean('profiles Loading', true)
}
});
110 changes: 61 additions & 49 deletions ...cts/components/src/lib/clan-roster-activity-table/clan-roster-activity-table.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
import { Sort } from '@angular/material/sort';
import { getMemberProfileId } from '@destiny/data';
import { MemberProfile } from 'bungie-models';
import { ActivityStats, MemberProfile } from 'bungie-models';
import { compare } from '../utilities/compare';

import { rowsAnimation } from '../core/animations/table-row';
Expand Down Expand Up @@ -30,6 +30,18 @@ export class ClanRosterActivityTableComponent implements OnInit {
@Input()
memberProfilesLoading: boolean;

sortedData: ActivityStats[]

_memberActivityStats;
@Input()
get memberActivityStats(): ActivityStats[] {
return this._memberActivityStats;
}
set memberActivityStats(value) {
this._memberActivityStats = value;
this.sortedData = value.slice();
}

// _memberActivityStats;
// @Input()
// get memberActivityStats(): MemberActivityRecentStats[] {
Expand All @@ -44,28 +56,28 @@ export class ClanRosterActivityTableComponent implements OnInit {

viewModel: MemberActivityRecentStats[] = [];

_members;
@Input()
get memberProfiles(): MemberProfile[] {
return this._members;
}
set memberProfiles(value) {
this._members = value;
this.updateViewModel();
}
// _members;
// @Input()
// get memberProfiles(): MemberProfile[] {
// return this._members;
// }
// set memberProfiles(value) {
// this._members = value;
// this.updateViewModel();
// }

_memberActivities;
@Input()
get memberActivities(): MemberActivityRecentStats[] {
return this._memberActivities;
}
set memberActivities(value) {
this._memberActivities = value;
this.updateViewModel();
}
// _memberActivities;
// @Input()
// get memberActivities(): MemberActivityRecentStats[] {
// return this._memberActivities;
// }
// set memberActivities(value) {
// this._memberActivities = value;
// this.updateViewModel();
// }

@Output() viewMember = new EventEmitter<MemberProfile>();
sortedData: MemberProfile[];
// sortedData: MemberProfile[];

calculatedColumns = [
{ key: 'lastWeek', value: 'Last Week' },
Expand All @@ -84,52 +96,52 @@ export class ClanRosterActivityTableComponent implements OnInit {

ngOnInit(): void {}

updateViewModel() {
if (this.memberProfiles.length > 0) {
if (this.memberProfiles.length !== this.viewModel.length) {
this.viewModel = this.memberProfiles.map((x) => {
return { profile: x, id: getMemberProfileId(x) };
});
}

if (this.memberActivities) {
this.memberActivities.forEach((x) => {
const vmIndex = this.viewModel.findIndex((vm) => vm.id === x.id);
if (vmIndex > -1) {
const vm = this.viewModel[vmIndex];
vm.lastMonth = x.lastMonth ?? 0;
vm.lastNinetyDays = x.lastNinetyDays ?? 0;
vm.lastWeek = x.lastWeek ?? 0;
vm.activities = x.activities;
}
});
}
}
}
// updateViewModel() {
// if (this.memberProfiles.length > 0) {
// if (this.memberProfiles.length !== this.viewModel.length) {
// this.viewModel = this.memberProfiles.map((x) => {
// return { profile: x, id: getMemberProfileId(x) };
// });
// }

// if (this.memberActivities) {
// this.memberActivities.forEach((x) => {
// const vmIndex = this.viewModel.findIndex((vm) => vm.id === x.id);
// if (vmIndex > -1) {
// const vm = this.viewModel[vmIndex];
// vm.lastMonth = x.lastMonth ?? 0;
// vm.lastNinetyDays = x.lastNinetyDays ?? 0;
// vm.lastWeek = x.lastWeek ?? 0;
// vm.activities = x.activities;
// }
// });
// }
// }
// }

memberClick(m: any) {
this.viewMember.emit(m.profile);
this.viewMember.emit(m.memberProfile);
}
sortData(sort: Sort) {
const data = this.viewModel.slice();
const data = this.memberActivityStats.slice();
if (!sort.active || sort.direction === '') {
this.viewModel = data;
this.sortedData = data;
return;
}

this.viewModel = data.sort((a, b) => {
this.sortedData = data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
case 'displayName':
return compare(
a.profile.profile.data.userInfo.displayName.toLowerCase(),
b.profile.profile.data.userInfo.displayName.toLowerCase(),
a.memberProfile.profile.data.userInfo.displayName.toLowerCase(),
b.memberProfile.profile.data.userInfo.displayName.toLowerCase(),
isAsc
);
case 'lastWeek':
case 'lastMonth':
case 'lastNinetyDays':
return compare(a[sort.active] ?? 0, b[sort.active], isAsc);
return compare(a.stats[sort.active] ?? 0, b.stats[sort.active], isAsc);
default:
return 0;
}
Expand Down
1 change: 0 additions & 1 deletion projects/components/src/lib/clan-roster-list-view/clan-roster-list-view.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
mat-table {
max-width: 100%;
overflow: auto;
}
mat-row {
}
Expand Down
Loading

0 comments on commit f7a20cc

Please sign in to comment.