Merge pull request #645 from griffithlab/org-page-fixes

Various Org Page Fixes
griffithlab · Oct 20, 2022 · b599fb9 · b599fb9
2 parents d3c3713 + d7baa3b
commit b599fb9
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 105 deletions.
diff --git a/client/src/app/generated/civic.apollo.ts b/client/src/app/generated/civic.apollo.ts
@@ -6242,9 +6242,9 @@ export type OrganizationGroupsQueryVariables = Exact<{
 }>;
 
 
-export type OrganizationGroupsQuery = { __typename: 'Query', organization?: { __typename: 'Organization', subGroups: Array<{ __typename: 'Organization', id: number, name: string, description: string, profileImagePath?: string | undefined, orgStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, orgAndSuborgsStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, subGroups: Array<{ __typename: 'Organization', id: number, name: string, profileImagePath?: string | undefined }> }> } | undefined };
+export type OrganizationGroupsQuery = { __typename: 'Query', organization?: { __typename: 'Organization', id: number, name: string, url: string, description: string, profileImagePath?: string | undefined, subGroups: Array<{ __typename: 'Organization', id: number, name: string, url: string, description: string, profileImagePath?: string | undefined, orgStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, orgAndSuborgsStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, subGroups: Array<{ __typename: 'Organization', id: number, name: string, url: string, profileImagePath?: string | undefined }> }> } | undefined };
 
-export type OrganizationGroupsFieldsFragment = { __typename: 'Organization', id: number, name: string, description: string, profileImagePath?: string | undefined, orgStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, orgAndSuborgsStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, subGroups: Array<{ __typename: 'Organization', id: number, name: string, profileImagePath?: string | undefined }> };
+export type OrganizationGroupsFieldsFragment = { __typename: 'Organization', id: number, name: string, url: string, description: string, profileImagePath?: string | undefined, orgStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, orgAndSuborgsStatsHash: { __typename: 'Stats', comments: number, revisions: number, appliedRevisions: number, submittedEvidenceItems: number, acceptedEvidenceItems: number, suggestedSources: number, submittedAssertions: number, acceptedAssertions: number }, subGroups: Array<{ __typename: 'Organization', id: number, name: string, url: string, profileImagePath?: string | undefined }> };
 
 export type OrganizationMembersQueryVariables = Exact<{
   organizationId: Scalars['Int'];
@@ -8286,6 +8286,7 @@ export const OrganizationGroupsFieldsFragmentDoc = gql`
     fragment OrganizationGroupsFields on Organization {
   id
   name
+  url
   description
   profileImagePath(size: 12)
   orgStatsHash {
@@ -8311,6 +8312,7 @@ export const OrganizationGroupsFieldsFragmentDoc = gql`
   subGroups {
     id
     name
+    url
     profileImagePath(size: 12)
   }
 }
@@ -11692,6 +11694,11 @@ export const OrganizationDetailDocument = gql`
 export const OrganizationGroupsDocument = gql`
     query OrganizationGroups($organizationId: Int!) {
   organization(id: $organizationId) {
+    id
+    name
+    url
+    description
+    profileImagePath(size: 256)
     subGroups {
       ...OrganizationGroupsFields
     }

diff --git a/client/src/app/views/organizations/organizations-detail/organizations-detail.component.ts b/client/src/app/views/organizations/organizations-detail/organizations-detail.component.ts
@@ -1,13 +1,13 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Maybe, Organization, OrganizationDetailFieldsFragment, OrganizationDetailGQL, OrganizationDetailQueryVariables } from "@app/generated/civic.apollo";
 import { Viewer, ViewerService } from "@app/core/services/viewer/viewer.service";
 import { QueryRef } from "apollo-angular";
 import {
   OrganizationDetailQuery
 } from '@app/generated/civic.apollo'
-import { pluck, startWith, map } from "rxjs/operators";
-import { Observable } from 'rxjs';
+import { pluck, startWith, map, takeUntil } from "rxjs/operators";
+import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { RouteableTab } from "@app/components/shared/tab-navigation/tab-navigation.component";
 
 @Component({
@@ -17,65 +17,78 @@ import { RouteableTab } from "@app/components/shared/tab-navigation/tab-navigati
 })
 
 
-export class OrganizationsDetailComponent {
-  queryRef: QueryRef<OrganizationDetailQuery, OrganizationDetailQueryVariables>;
+export class OrganizationsDetailComponent implements OnDestroy {
+  queryRef?: QueryRef<OrganizationDetailQuery, OrganizationDetailQueryVariables>;
+  destroy$ = new Subject<void>();
 
-  organization$: Observable<Maybe<OrganizationDetailFieldsFragment>>;
-  loading$: Observable<boolean>;
-  viewer$: Observable<Viewer>;
+  organization$?: Observable<Maybe<OrganizationDetailFieldsFragment>>;
+  loading$?: Observable<boolean>;
+  viewer$?: Observable<Viewer>;
+  routeSub: Subscription;
 
-  tabs$: Observable<RouteableTab[]>;
+  defaultTabs: RouteableTab[] = [
+    {
+      routeName: 'members',
+      tabLabel: 'Members',
+      iconName: 'pic-right'
+    },
+    {
+      routeName: 'activity',
+      tabLabel: 'Activity',
+      iconName: 'civic-event'
+    },
+    {
+      routeName: 'evidence',
+      tabLabel: 'Evidence Items',
+      iconName: 'civic-evidence'
+    },
+    {
+      routeName: 'assertions',
+      tabLabel: 'Assertions',
+      iconName: 'civic-assertion'
+    },
+  ]
 
-  constructor(private gql: OrganizationDetailGQL, private viewerService: ViewerService, private route: ActivatedRoute) {
+  tabs$: BehaviorSubject<RouteableTab[]>
 
-    const organizationId: number = +this.route.snapshot.params['organizationId'];
+  constructor(private gql: OrganizationDetailGQL, private viewerService: ViewerService, private route: ActivatedRoute) {
+    this.tabs$ = new BehaviorSubject(this.defaultTabs)
 
-    this.queryRef = this.gql.watch({ organizationId: organizationId });
+    this.routeSub = this.route.params.subscribe((params) => {
+      this.queryRef = this.gql.watch({ organizationId: +params.organizationId });
 
-    let observable = this.queryRef.valueChanges
+      let observable = this.queryRef.valueChanges
 
-    this.loading$ = observable.pipe(
-      pluck('loading'),
-      startWith(true));
+      this.loading$ = observable.pipe(
+        pluck('loading'),
+        startWith(true));
 
-    this.organization$ = observable.pipe(
-      pluck('data', 'organization'));
+      this.organization$ = observable.pipe(
+        pluck('data', 'organization'));
 
-    this.viewer$ = this.viewerService.viewer$;
+      this.viewer$ = this.viewerService.viewer$;
 
-    this.tabs$ = this.organization$.pipe(
-      map((org: any) => {
-        const tabs = [
-          {
-            routeName: 'members',
-            tabLabel: 'Members',
-            iconName: 'pic-right'
-          },
-          {
-            routeName: 'activity',
-            tabLabel: 'Activity',
-            iconName: 'civic-event'
-          },
-          {
-            routeName: 'evidence',
-            tabLabel: 'Evidence Items',
-            iconName: 'civic-evidence'
-          },
-          {
-            routeName: 'assertions',
-            tabLabel: 'Assertions',
-            iconName: 'civic-assertion'
-          },
-        ];
-        if (org && org.subGroups.length > 0) {
-          tabs.splice(1, 0, {
-            routeName: 'groups',
-            tabLabel: 'Child Organizations',
-            iconName: 'civic-organization'
-          });
+      this.organization$.pipe(takeUntil(this.destroy$)).subscribe({
+        next: (org: Maybe<OrganizationDetailFieldsFragment>) => {
+          if (org && org.subGroups.length > 0) {
+            this.tabs$.next([
+              ... this.defaultTabs,
+              {
+                routeName: 'groups',
+                tabLabel: 'Child Organizations',
+                iconName: 'civic-organization'
+             }]);
+          } else {
+            this.tabs$.next(this.defaultTabs);
+          }
         }
-        return tabs;
       })
-    );
+    })
+  }
+
+  ngOnDestroy() {
+    this.routeSub.unsubscribe();
+    this.destroy$.next()
+    this.destroy$.unsubscribe();
   }
 }
diff --git a/client/src/app/views/organizations/organizations-groups/organizations-groups.component.html b/client/src/app/views/organizations/organizations-groups/organizations-groups.component.html
@@ -1,5 +1,7 @@
-<ng-container *ngIf="(organizations$ | ngrxPush) as organizations">
-  <nz-space *ngFor="let organization of organizations" nzDirection="vertical">
-    <cvc-organization-card *nzSpaceItem [organization]="organization" ></cvc-organization-card>
-  </nz-space>
-</ng-container>
+<nz-spin [nzSpinning]="this.loading$ | ngrxPush">
+  <ng-container *ngIf="!(this.loading$ | ngrxPush)">
+    <nz-space *ngFor="let organization of organizations$ | ngrxPush" nzDirection="vertical">
+      <cvc-organization-card *nzSpaceItem [organization]="organization" ></cvc-organization-card>
+    </nz-space>
+  </ng-container>
+</nz-spin>
diff --git a/client/src/app/views/organizations/organizations-groups/organizations-groups.component.ts b/client/src/app/views/organizations/organizations-groups/organizations-groups.component.ts
@@ -1,28 +1,27 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnDestroy } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Maybe, OrganizationGroupsQuery, OrganizationGroupsFieldsFragment, OrganizationGroupsGQL, OrganizationGroupsQueryVariables } from "@app/generated/civic.apollo";
 import { Viewer, ViewerService } from "@app/core/services/viewer/viewer.service";
 import { QueryRef } from "apollo-angular";
 import { pluck, startWith } from "rxjs/operators";
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 @Component({
   selector: 'cvc-organizations-groups',
   templateUrl: './organizations-groups.component.html',
   styleUrls: ['./organizations-groups.component.less']
 })
-export class OrganizationsGroupsComponent {
-  queryRef: QueryRef<OrganizationGroupsQuery, OrganizationGroupsQueryVariables>;
+export class OrganizationsGroupsComponent implements OnDestroy {
+  queryRef?: QueryRef<OrganizationGroupsQuery, OrganizationGroupsQueryVariables>;
+  routeSub: Subscription
 
-  organizations$: Observable<Maybe<OrganizationGroupsFieldsFragment>[]>;
-  loading$: Observable<boolean>;
-  viewer$: Observable<Viewer>;
+  organizations$?: Observable<Maybe<OrganizationGroupsFieldsFragment>[]>;
+  loading$?: Observable<boolean>;
+  viewer$?: Observable<Viewer>;
 
   constructor(private gql: OrganizationGroupsGQL, private viewerService: ViewerService, private route: ActivatedRoute) {
-
-      const organizationId: number = +this.route.snapshot.params['organizationId'];
-
-      this.queryRef = this.gql.watch({organizationId: organizationId});
+    this.routeSub = route.params.subscribe((params) => {
+      this.queryRef = this.gql.watch({organizationId: +params.organizationId});
 
       let observable = this.queryRef.valueChanges
 
@@ -34,5 +33,10 @@ export class OrganizationsGroupsComponent {
       pluck('data', 'organization', 'subGroups'));
 
       this.viewer$ = this.viewerService.viewer$;
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.routeSub.unsubscribe();
   }
 }
diff --git a/client/src/app/views/organizations/organizations-groups/organizations-groups.module.ts b/client/src/app/views/organizations/organizations-groups/organizations-groups.module.ts
@@ -5,6 +5,7 @@ import { ReactiveComponentModule } from '@ngrx/component';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { CvcOrganizationCardModule } from '@app/components/organizations/organization-card/organization-card.module';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 @NgModule({
   declarations: [OrganizationsGroupsComponent],
@@ -13,6 +14,7 @@ import { CvcOrganizationCardModule } from '@app/components/organizations/organiz
     ReactiveComponentModule,
     NzSpaceModule,
     NzGridModule,
+    NzSpinModule,
     CvcOrganizationCardModule,
   ]
 })

diff --git a/client/src/app/views/organizations/organizations-groups/organizations-groups.query.gql b/client/src/app/views/organizations/organizations-groups/organizations-groups.query.gql
@@ -3,6 +3,11 @@ query OrganizationGroups(
   $organizationId: Int!
 ) {
   organization(id: $organizationId) {
+  id
+  name
+  url
+  description
+  profileImagePath(size: 256)
     subGroups {
       ...OrganizationGroupsFields
     }
@@ -12,6 +17,7 @@ query OrganizationGroups(
 fragment OrganizationGroupsFields on Organization {
   id
   name
+  url
   description
   profileImagePath(size: 12)
   orgStatsHash {
@@ -37,6 +43,7 @@ fragment OrganizationGroupsFields on Organization {
   subGroups {
     id
     name
+    url
     profileImagePath(size: 12)
   }
 } 
diff --git a/...nt/src/app/views/organizations/organizations-members/organizations-members.component.html b/...nt/src/app/views/organizations/organizations-members/organizations-members.component.html
@@ -1,18 +1,20 @@
-<nz-space nzSize="middle" *ngIf="(members$ | ngrxPush) as members" nzDirection="vertical" class="space-align-block">
-  <div nz-row [nzGutter]="[16, 16]" *nzSpaceItem>
-    <div *ngFor="let member of members" nz-col [nzSpan]="6">
-      <cvc-user-card [user]="member"></cvc-user-card>
-    </div>
-  </div>
-  <!-- Load More button row -->
-  <ng-container *nzSpaceItem>
-    <ng-container *ngrxLet="pageInfo$ as pageInfo">
-      <ng-container *ngIf="pageInfo.hasNextPage">
-        <button *ngIf="pageInfo.hasNextPage"
-          (click)="loadMore(pageInfo.endCursor)"
-          nz-button
-          nzBlock>Load {{this.initialPageSize}} More</button>
+<nz-spin [nzSpinning]="this.loading$ | ngrxPush">
+  <ng-container *ngIf="! (this.loading$ | ngrxPush)">
+    <nz-space nzSize="middle" nzDirection="vertical" class="space-align-block">
+      <div nz-row [nzGutter]="[16, 16]" *nzSpaceItem>
+        <div *ngFor="let member of members$ | ngrxPush" nz-col [nzSpan]="6">
+          <cvc-user-card [user]="member"></cvc-user-card>
+        </div>
+      </div>
+      <!-- Load More button row -->
+      <ng-container *nzSpaceItem>
+        <ng-container *ngrxLet="pageInfo$ as pageInfo">
+          <ng-container *ngIf="pageInfo.hasNextPage">
+            <button *ngIf="pageInfo.hasNextPage" (click)="loadMore(pageInfo.endCursor)" nz-button nzBlock>Load
+              {{this.initialPageSize}} More</button>
+          </ng-container>
+        </ng-container>
       </ng-container>
-    </ng-container>
+    </nz-space>
   </ng-container>
-</nz-space>
+</nz-spin>