feat: Adding progress bar,but calling it notifications

projects/components/src/lib/core/notifications/notifications.component.html

@@ -1,6 +1,6 @@
 <div *ngFor="let notification of  notifications" class="notification">
   <div class="progress-bar">
-    <mat-progress-bar mode="determinate" [value]="notification.progress"></mat-progress-bar>
+    <mat-progress-bar mode="determinate" [value]="notification.data.progress"></mat-progress-bar>
   </div>
   <div class="info">
     {{notification.title}}

projects/components/src/lib/core/notifications/notifications.component.scss

@@ -7,7 +7,6 @@
     padding: 0.5rem;
   }
   .info {
-    flex: 0;
     padding: 0.5rem;
   }
 }

projects/components/src/lib/core/notifications/notifications.module.ts

@@ -6,6 +6,7 @@ import { MaterialModule } from '../../shared/modules/material.module';
 
 @NgModule({
   declarations: [NotificationsComponent],
+  exports: [NotificationsComponent],
   imports: [CommonModule, MaterialModule]
 })
 export class NotificationsModule {}

projects/components/src/public-api.ts

@@ -30,3 +30,5 @@ export * from './lib/activity-time-chart/activity-time-chart.module';
 export * from './lib/clan-active-population/clan-active-population.module';
 export * from './lib/member-callout/member-callout.module';
 export * from './lib/member-callout/member-callout.component';
+export * from './lib/core/notifications/notifications.module';
+export * from './lib/core/notifications/notifications.component';

projects/data/src/lib/clan-db/clan-member-activity/clan-member-activity.service.ts

@@ -70,7 +70,9 @@ export class ClanMemberActivityService extends BaseMemberActivityService {
           }, 3),
           tap((x) => {
             complete++;
-            progress(complete);
+            if (progress) {
+              progress(complete);
+            }
           }),
           toArray()
         );

src/app/clan/clan.component.html

@@ -1,12 +1,14 @@
 <div class="main-container">
+
   <lib-navbar [clanDetails]="clanDetails$ | async" [versionNumber]="versionNumber"
     (selectThemeOutput)="changeTheme($event)" (openLink)="openLink($event)" (openAbout)="openAbout()"
     (resetDatabase)="resetDatabase()" (toggleMenu)="sidenav.open()"></lib-navbar>
   <mat-sidenav-container>
     <mat-sidenav [appResponsiveSidebar]="960" #sidenav mode="side" opened>
       <mat-nav-list class="clan-nav">
         <div class="section-nav">
-          <a mat-list-item routerLink="./" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"> Details </a>
+          <a mat-list-item routerLink="./" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
+            Details </a>
           <a mat-list-item routerLink="roster" routerLinkActive="active-link"> Roster </a>
           <a mat-list-item routerLink="member-activity" routerLinkActive="active-link"> Member Activity </a>
           <a mat-list-item routerLink="crucible" routerLinkActive="active-link"> Crucible </a>
@@ -18,10 +20,12 @@
         </div>
       </mat-nav-list>
     </mat-sidenav>
-    <mat-sidenav-content >
-      <div [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.data && o.activatedRoute.routeConfig.data.title" >
-      <router-outlet #o="outlet"></router-outlet>
-</div>
+    <mat-sidenav-content>
+      <lib-notifications [notifications]="notifications$ | async"></lib-notifications>
+      <div
+        [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.data && o.activatedRoute.routeConfig.data.title">
+        <router-outlet #o="outlet"></router-outlet>
+      </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

src/app/clan/clan.component.ts

@@ -16,6 +16,7 @@ import * as memberProfileActions from './store/member-profiles/member-profiles.a
 
 import * as routerStore from '../root-store/router/router.selectors';
 import { actionSettingsChangeClan, actionSettingsChangeTheme } from '../root-store/settings/settings.actions';
+import { getAllNotifications } from './store/notifications/notifications.selectors';
 
 // import { Clan } from 'bungie-parse';
 import { Store, select } from '@ngrx/store';
@@ -51,6 +52,7 @@ export class ClanComponent implements OnInit, OnDestroy {
   clanId = this.activatedRoute.params.pipe(map((x) => x.id, distinctUntilChanged()));
 
   clanDetails$: Observable<ClanDetails> = this.store.pipe(select(clanDetailSelectors.getClanDetail));
+  notifications$ = this.store.pipe(select(getAllNotifications));
   private destroyed = new Subject();
 
   ngOnInit() {}

src/app/clan/clan.module.ts

@@ -18,6 +18,7 @@ import { ClanDbModule } from '@destiny/data';
 import { AboutModule } from '../about/about.module';
 import { MatDialogModule } from '@angular/material/dialog';
 import { DirectivesModule } from '../shared/directives/directives.module';
+import { NotificationsModule } from '@destiny/components';
 
 @NgModule({
   declarations: [ClanComponent],
@@ -33,6 +34,7 @@ import { DirectivesModule } from '../shared/directives/directives.module';
     MatDialogModule,
     AboutModule,
     DirectivesModule,
+    NotificationsModule,
     // ClanRosterModule,
     //         BungieParseModule,
     StoreModule.forFeature('clan', clanState.reducers),

src/app/clan/store/member-activities/member-activities.effects.ts

@@ -37,6 +37,7 @@ import { Observable } from 'rxjs';
 import { loadMemberProfileSuccess } from '../member-profiles/member-profiles.actions';
 import { getAllMembers, getMemberProfileEntities } from '../member-profiles/member-profiles.selectors';
 import { nowPlusMinutes } from 'projects/data/src/lib/utility/date-utils';
+import { addNotification, removeNotification, updateNotification } from '../notifications/notifications.actions';
 
 @Injectable()
 export class MemberActivityEffects {
@@ -86,9 +87,31 @@ export class MemberActivityEffects {
       ofType(memberActivityActions.refreshMemberActivities),
       withLatestFrom(this.store.select(clanIdSelectors.getClanIdState)),
       switchMap(([action, clanId]) => {
-        return this.memberActivityService.updateAllActivityCache(clanId, action.member).pipe(
+        this.store.dispatch(
+          addNotification({
+            notification: { id: 'memberActivity', title: 'Updating Member Activities', data: { progress: 0 } }
+          })
+        );
+        const progress = (progressCount) => {
+          this.store.dispatch(
+            updateNotification({
+              notification: {
+                id: 'memberActivity',
+                title: 'Updating Member Activities',
+                data: { progress: progressCount }
+              }
+            })
+          );
+        };
+
+        return this.memberActivityService.updateAllActivityCache(clanId, action.member, progress).pipe(
           switchMap(() => {
             window.localStorage.setItem('lastActivityUpdate-' + clanId, new Date().toString());
+            this.store.dispatch(
+              removeNotification({
+                notification: { id: 'memberActivity', title: 'Updating Member Activities', data: { progress: 100 } }
+              })
+            );
             return this.memberActivityService.getAllActivitiesFromCache2(clanId, action.member);
           })
         );

src/app/clan/store/member-profiles/member-profiles.effects.ts

@@ -58,7 +58,9 @@ export class MemberProfileEffects {
       switchMap(({ clanId, clanMembers }) => {
         // clanMembers = clanMembers.slice(0, 10);
         let progress = 0;
-        this.store.dispatch(addNotification({ notification: { id: 'memberProfile', data: { progress } } }));
+        this.store.dispatch(
+          addNotification({ notification: { id: 'memberProfile', title: 'Updating Profiles', data: { progress } } })
+        );
 
         return this.profileService.getSerializedProfiles(clanId.toString(), clanMembers).pipe(
           // tap((x) => {
@@ -71,13 +73,19 @@ export class MemberProfileEffects {
            */
           mergeMap((members) => {
             progress += members.length;
-            this.store.dispatch(updateNotification({ notification: { id: 'memberProfile', data: { progress } } }));
+            this.store.dispatch(
+              updateNotification({
+                notification: { id: 'memberProfile', title: 'Updating Profiles', data: { progress } }
+              })
+            );
             this.store.dispatch(memberProfileActions.loadMemberProfiles({ memberProfiles: members }));
             return members;
           }),
           toArray(),
           map((x) => {
-            this.store.dispatch(removeNotification({ notification: { id: 'memberProfile', data: 'done' } }));
+            this.store.dispatch(
+              removeNotification({ notification: { id: 'memberProfile', title: 'Updating Profiles', data: 'done' } })
+            );
             return memberProfileActions.loadMemberProfileSuccess();
           })
         );

src/app/clan/store/notifications/notifications.selectors.ts

@@ -7,8 +7,8 @@ import { NotificationState, NotificationAdapter } from './notifications.state';
 export const getNotificationEntityState = createSelector(getClanState, (state) => state.notifications);
 
 export const {
-  selectIds: getMemberIds,
-  selectEntities: getMemberProfileEntities,
-  selectAll: getAllMembers,
-  selectTotal: getTotalMembers
+  selectIds: getNotificationIds,
+  selectEntities: getNotificationEntities,
+  selectAll: getAllNotifications,
+  selectTotal: getTotalNotificaitons
 } = NotificationAdapter.getSelectors(getNotificationEntityState);

src/app/clan/store/notifications/notifications.state.ts

@@ -1,6 +1,7 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 export interface Notification {
   id: string;
+  title: string;
   data: any;
 }