Merge branch 'main' into staging

client/apollo.config.json

@@ -0,0 +1,9 @@
+{
+  "client": {
+    "service": {
+      // can be a string pointing to a single file or an array of strings
+      "localSchemaFile": "./src/app/generated/server.model.graphql"
+    },
+    "excludes": ["./src/app/generated/*.ts", "./src/app/generated/*.json"]
+  }
+}

client/src/app/components/activities/activity-feed/activity-feed.component.html

@@ -56,14 +56,15 @@
                 text-align: center;
                 color: #666;
               ">
-              No Activities found matching
+              No Activities found
               @if (cvcScope().mode === 'SUBJECT') {
-                specified subject
+                for this subject
               } @else if (cvcScope().mode === 'USER') {
-                specified contributor
-              } @else {
-                specified filters
+                for this contributor
+              } @else if (cvcScope().mode === 'ORGANIZATION') {
+                for this organization
               }
+              that match specified filters
             </div>
           </ng-template>
           <!-- scroller top/bottom dropshadows - MIDDLE -->
@@ -113,6 +114,8 @@
            feedFilter$ to emit, which is required to fire off an initial query -->
       <cvc-activity-feed-filters
         (cvcFiltersChange)="onFilterChange$.next($event)"
+        [cvcRefreshChanges]="(refreshChange$ | async)!"
+        [cvcCheckInterval]="cvcCheckInterval()"
         [cvcFilterOptions]="feedFilterOptions()"
         [cvcFilters]="cvcFilters()"
         [cvcScope]="cvcScope()">

client/src/app/components/activities/activity-feed/activity-feed.component.ts

@@ -7,8 +7,6 @@ import {
   Injector,
   input,
   NgZone,
-  OnInit,
-  runInInjectionContext,
   Signal,
 } from '@angular/core'
 import {
@@ -36,9 +34,9 @@ import {
   ScrollerStateService,
 } from '@app/components/activities/activity-feed/feed-scroll-service/feed-scroll.service'
 import {
-  BehaviorSubject,
   combineLatest,
   filter,
+  interval,
   map,
   merge,
   Observable,
@@ -47,6 +45,7 @@ import {
   Subject,
   switchMap,
   take,
+  timer,
   withLatestFrom,
 } from 'rxjs'
 import {
@@ -58,7 +57,13 @@ import {
   connectionToFilterOptions,
   queryParamsToQueryVariables,
 } from '@app/components/activities/activity-feed/activity-feed.functions'
-import { shareReplay } from 'rxjs/operators'
+import {
+  distinctUntilChanged,
+  mapTo,
+  shareReplay,
+  skip,
+  startWith,
+} from 'rxjs/operators'
 import { ApolloQueryResult } from '@apollo/client/core'
 import {
   ActivityFeedGQL,
@@ -92,7 +97,8 @@ import { CommonModule } from '@angular/common'
 import { NzResultModule } from 'ng-zorro-antd/result'
 import { tag } from 'rxjs-spy/operators'
 import { NzAlertModule } from 'ng-zorro-antd/alert'
-import { animate, state, style, transition, trigger } from '@angular/animations'
+import { NzButtonModule } from 'ng-zorro-antd/button'
+import { NzIconModule } from 'ng-zorro-antd/icon'
 
 export const FEED_SCROLL_SERVICE_TOKEN =
   new InjectionToken<ScrollerStateService>('ActivityFeedScrollerState')
@@ -112,6 +118,8 @@ export const FEED_SCROLL_SERVICE_TOKEN =
     NzTagModule,
     NzSpinModule,
     NzResultModule,
+    NzButtonModule,
+    NzIconModule,
     CvcActivityFeedItem,
     CvcAutoHeightDivModule,
     CvcActivityFeedCounts,
@@ -136,6 +144,7 @@ export class CvcActivityFeed {
   cvcFilters = input<ActivityFeedFilters>(feedDefaultFilters)
   cvcScope = input<ActivityFeedScope>(feedDefaultScope)
   cvcTitle = input<string>('Activity Feed')
+  cvcCheckInterval = input<number>(0)
 
   // SOURCE STREAMS
   onSettingChange$: Subject<ActivityFeedSettings>
@@ -145,13 +154,13 @@ export class CvcActivityFeed {
   // INTERMEDIATE STREAMS
   poll$: Subject<FetchParams>
   fetchMore$: Subject<FetchParams>
+  refreshChange$: Observable<FeedQueryRefetchEvent>
   result$: Observable<ApolloQueryResult<ActivityFeedQuery>>
   init$: Subject<void>
   queryType$: Subject<'refetch' | 'fetchMore'>
   onQueryComplete$: Subject<boolean>
   edge$: Observable<ActivityInterfaceEdge[]>
   pageInfo$: Observable<PageInfo>
-  onZeroRows$: Subject<boolean>
   onAllRowsFetched$: Subject<boolean>
 
   // PRESENTATION SIGNALS
@@ -185,17 +194,15 @@ export class CvcActivityFeed {
     this.queryType$ = new Subject()
     this.pageInfo$ = new Observable()
     this.onQueryComplete$ = new Subject()
-    this.onZeroRows$ = new Subject()
     this.onAllRowsFetched$ = new Subject()
 
     this.scrollerRoutines = configureScrollerRoutines(this, this.scrollerState)
     this.scroller = this.scrollerState.state.asReadonly()
-    this.zeroRows = toSignal(this.onZeroRows$, { initialValue: false })
     this.allRowsFetched = toSignal(this.onAllRowsFetched$, {
       initialValue: false,
     })
 
-    const refreshChange$ = combineLatest([
+    this.refreshChange$ = combineLatest([
       this.onSettingChange$,
       this.onFilterChange$,
     ]).pipe(
@@ -221,16 +228,15 @@ export class CvcActivityFeed {
     )
 
     this.result$ = this.init$.pipe(
-      switchMap(() => merge(refreshChange$, fetchChange$)),
+      switchMap(() => merge(this.refreshChange$, fetchChange$)),
       switchMap((event: FeedQueryEvent) => {
         this.queryType$.next(event.type)
-        this.onZeroRows$.next(false)
         if (!this.queryRef) {
           this.queryRef = this.gql.watch(event.query)
         } else {
           if (event.type === 'refetch') {
+            this.onAllRowsFetched$.next(false)
             this.queryRef.refetch(event.query).then((data) => {
-              console.log('refetch complete', data)
               this.onQueryComplete$.next(true)
               if (this.scrollAdapter) this.scrollAdapter.reload()
             })
@@ -304,16 +310,6 @@ export class CvcActivityFeed {
       { initialValue: feedFilterOptionDefaults }
     )
 
-    this.allRowsFetched = toSignal(
-      this.onAllRowsFetched$.pipe(tag('onAllRowsFetched$')),
-      // connection$.pipe(
-      //   map((connection) => {
-      //     return connection.pageInfo.hasNextPage
-      //   })
-      // ),
-      { initialValue: false }
-    )
-
     this.edge$ = this.result$.pipe(
       pluck('data', 'activities'),
       filter(isNonNulled),
@@ -329,6 +325,13 @@ export class CvcActivityFeed {
       this.configureDatasource()
       this.configureAdapter()
     })
+
+    this.zeroRows = toSignal(
+      this.result$.pipe(
+        map((result) => result.data?.activities?.edges.length === 0)
+      ),
+      { initialValue: false }
+    )
   } // end constructor()
 
   configureDatasource(): void {
@@ -347,6 +350,7 @@ export class CvcActivityFeed {
               hasNextPage === false &&
               edges.length <= edgesRequired
             ) {
+              this.onAllRowsFetched$.next(true)
               return of(edges)
             }
 

client/src/app/components/activities/activity-feed/activity-feed.config.ts

@@ -2,7 +2,9 @@ import {
   ActivityInterfaceEdge,
   ActivitySubjectInput,
   ActivityTypeInput,
+  DateSortColumns,
   EventFeedMode,
+  SortDirection,
 } from '@app/generated/civic.apollo'
 import {
   ActivityFeedFilterOptions,
@@ -28,12 +30,10 @@ export const feedDefaultFilters: ActivityFeedFilters = {
   userId: [],
   activityType: [],
   subjectType: [],
-
-  // 103 items, no errors:
-  // activityType: [ActivityTypeInput.Comment],
-  // subjectType: [ActivitySubjectInput.Variant],
   occurredAfter: null,
   occurredBefore: null,
+  sortByColumn: DateSortColumns.Created,
+  sortByDirection: SortDirection.Desc,
 }
 
 export const feedDefaultScope: ActivityFeedScope = {
@@ -74,20 +74,21 @@ export const feedFilterOptionDefaults: ActivityFeedFilterOptions = {
   participatingOrganizations: [],
   activityTypes: [],
   subjectTypes: [],
+  sortColumns: [DateSortColumns.Created, DateSortColumns.LastModified],
+  sortDirections: [SortDirection.Desc, SortDirection.Asc],
 }
 
 export const scrollerSettings: Settings<ActivityInterfaceEdge> = {
-  bufferSize: 25,
+  bufferSize: 20, // fetchmore minimum rows requested
   minIndex: 0,
   startIndex: 0,
-  itemSize: 44,
-  sizeStrategy: SizeStrategy.Frequent,
+  itemSize: 42,
+  sizeStrategy: SizeStrategy.Constant, // seems to provide better performance
   padding: 0.8,
 }
 
 export const scrollerDevSettings: DevSettings = {
   // debug: true,
   // immediateLog: true,
-  // cacheData: true, // smoother scrolling?
   cacheData: true, // testing
 }

client/src/app/components/activities/activity-feed/activity-feed.functions.ts

@@ -12,6 +12,7 @@ import {
   ActivityFeedFilterOptions,
   ActivityFeedCounts,
 } from './activity-feed.types'
+import { feedFilterOptionDefaults } from './activity-feed.config'
 
 // pluck filter options from feed connection object
 export function connectionToFilterOptions(
@@ -22,6 +23,8 @@ export function connectionToFilterOptions(
     participatingOrganizations: connection.participatingOrganizations ?? [],
     activityTypes: connection.activityTypes ?? [],
     subjectTypes: connection.subjectTypes ?? [],
+    sortColumns: feedFilterOptionDefaults.sortColumns,
+    sortDirections: feedFilterOptionDefaults.sortDirections,
   }
 }
 
@@ -64,7 +67,7 @@ export const disableDates = {
 function filtersToQueryVariables(
   filters: ActivityFeedFilters
 ): ActivityFeedFilterVariables {
-  return {
+  const queryVariables = {
     activityType:
       filters['activityType'].length > 0 ? filters['activityType'] : undefined,
     organizationId:
@@ -80,7 +83,12 @@ function filtersToQueryVariables(
     occurredBefore: filters['occurredBefore']
       ? filters['occurredBefore'].toISOString()
       : undefined,
+    sortBy: {
+      column: filters['sortByColumn'],
+      direction: filters['sortByDirection'],
+    },
   }
+  return queryVariables
 }
 
 // convert settings to mode & id query variables
@@ -96,7 +104,6 @@ function settingsToQueryVariables(
       ? { organizationId: [scope.organizationId] }
       : {}),
     ...(scope.mode === EventFeedMode.User ? { userId: [scope.userId] } : {}),
-    userId: scope.mode === EventFeedMode.User ? [scope.userId] : undefined,
   }
 }