Activity Feed Final Updates

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

@@ -13,17 +13,6 @@
       <cvc-activity-feed-counts
         *nzSpaceItem
         [cvcFeedCounts]="counts()"></cvc-activity-feed-counts>
-      <span *nzSpaceItem>
-        <nz-tag
-          *ngIf="moreLoading()"
-          nzColor="processing">
-          <i
-            nz-icon
-            nzType="sync"
-            nzSpin></i>
-          <span>Loading…</span>
-        </nz-tag>
-      </span>
     </nz-space>
   </ng-template>
   <ng-template #cardExtra>
@@ -49,13 +38,7 @@
             }
           </div>
           <ng-template #resultsMessage>
-            <div
-              style="
-                font-size: 18px;
-                font-weight: 600;
-                text-align: center;
-                color: #666;
-              ">
+            <div class="results-message">
               No Activities found
               @if (cvcScope().mode === 'SUBJECT') {
                 for this subject
@@ -64,23 +47,9 @@
               } @else if (cvcScope().mode === 'ORGANIZATION') {
                 for this organization
               }
-              that match specified filters
+              that match specified filters.
             </div>
           </ng-template>
-          <!-- scroller top/bottom dropshadows - MIDDLE -->
-          <!-- TODO: control atBottom signal with allRowsLoaded$ -->
-          <div class="boundaries">
-            <!-- <div
-              class="shadow-top"
-              [@atTop]="scroller().isAtTop ? 'isAtTop' : 'isNotAtTop'"></div> -->
-            <!-- <div
-              class="shadow-bottom"
-              [@atBottom]="
-                scroller().isAtBottom && counts()?.rows === counts()?.total
-                  ? 'isAtBottom'
-                  : 'isNotAtBottom'
-              "></div> -->
-          </div>
 
           <!-- scroller layer - BOTTOM-->
           <div class="scroller">
@@ -98,7 +67,10 @@
                       routines: scrollerRoutines
                     "
                     [cvcActivity]="edge.node"
-                    [cvcScope]="cvcScope()"></cvc-activity-feed-item>
+                    [cvcScope]="cvcScope()"
+                    [cvcShowOrganization]="showOrganization()">
+                    "></cvc-activity-feed-item
+                  >
                 }
               </div>
             </nz-spin>
@@ -108,19 +80,20 @@
     </nz-col>
 
     <!-- FEED FILTERS COLUMN -->
-    <nz-col [nzSpan]="cvcShowFilters() ? 6 : 0">
-      <!-- NOTE: setting nzSpan to 0 hides the filters column rather than removing it
-           from the DOM as with *ngIf. Component initialization causes cvc-activity-feed-filters'
-           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()">
-      </cvc-activity-feed-filters>
-    </nz-col>
+    @if (cvcShowFilters()) {
+      <nz-col
+        [nzSm]="24"
+        [nzMd]="6">
+        <cvc-activity-feed-filters
+          (cvcFiltersChange)="onFilterChange$.next($event)"
+          [cvcRefreshChanges]="(refreshChange$ | async)!"
+          [cvcCheckInterval]="cvcCheckInterval()"
+          [cvcFilterOptions]="feedFilterOptions()"
+          [cvcFilters]="cvcFilters()"
+          [cvcScope]="cvcScope()">
+        </cvc-activity-feed-filters>
+      </nz-col>
+    }
   </nz-row>
 </nz-card>
 <ng-template #cardExtra>

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

@@ -2,6 +2,12 @@
   display: block;
 }
 
+.results-message {
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+}
+
 .feed-container {
   // pull container flush to nz-card body edges
   margin-top: -11px;

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

@@ -7,6 +7,7 @@ import {
   Injector,
   input,
   NgZone,
+  OnInit,
   Signal,
 } from '@angular/core'
 import {
@@ -85,7 +86,7 @@ import { toSignal } from '@angular/core/rxjs-interop'
 import { pluck } from 'rxjs-etc/operators'
 import { isNonNulled } from 'rxjs-etc'
 import { NzCardModule } from 'ng-zorro-antd/card'
-import { NzGridModule } from 'ng-zorro-antd/grid'
+import { EmbeddedProperty, NzGridModule } from 'ng-zorro-antd/grid'
 import { CvcAutoHeightDivModule } from '@app/directives/auto-height-div/auto-height-div.module'
 import { CvcActivityFeedCounts } from '@app/components/activities/activity-feed/feed-counts/feed-counts.component'
 import { CvcActivityFeedSettingsButton } from '@app/components/activities/activity-feed/feed-settings/feed-settings.component'
@@ -99,9 +100,16 @@ import { tag } from 'rxjs-spy/operators'
 import { NzAlertModule } from 'ng-zorro-antd/alert'
 import { NzButtonModule } from 'ng-zorro-antd/button'
 import { NzIconModule } from 'ng-zorro-antd/icon'
+import {
+  BreakpointMap,
+  gridResponsiveMap,
+  NzBreakpointService,
+} from 'ng-zorro-antd/core/services'
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 
 export const FEED_SCROLL_SERVICE_TOKEN =
   new InjectionToken<ScrollerStateService>('ActivityFeedScrollerState')
+@UntilDestroy()
 @Component({
   selector: 'cvc-activity-feed',
   templateUrl: './activity-feed.component.html',
@@ -137,7 +145,7 @@ export const FEED_SCROLL_SERVICE_TOKEN =
   ],
   animations: [],
 })
-export class CvcActivityFeed {
+export class CvcActivityFeed implements OnInit {
   // INPUTS
   cvcShowFilters = input<boolean>(true)
   cvcSettings = input<ActivityFeedSettings>(feedDefaultSettings)
@@ -149,7 +157,6 @@ export class CvcActivityFeed {
   // SOURCE STREAMS
   onSettingChange$: Subject<ActivityFeedSettings>
   onFilterChange$: Subject<ActivityFeedFilters>
-  onToggleItem$: Subject<FeedItemToggle>
 
   // INTERMEDIATE STREAMS
   poll$: Subject<FetchParams>
@@ -161,16 +168,14 @@ export class CvcActivityFeed {
   onQueryComplete$: Subject<boolean>
   edge$: Observable<ActivityInterfaceEdge[]>
   pageInfo$: Observable<PageInfo>
-  onAllRowsFetched$: Subject<boolean>
 
   // PRESENTATION SIGNALS
   refetchLoading: Signal<boolean> // loading state for refetch, shows spinner over feed
-  moreLoading: Signal<boolean> // loading state for fetchMore, shows spinner in card header
   zeroRows: Signal<boolean> // true when no rows are returned from query
   counts: Signal<Maybe<ActivityFeedCounts>>
   feedFilterOptions: Signal<ActivityFeedFilterOptions>
   scroller: Signal<ScrollerState>
-  allRowsFetched: Signal<boolean>
+  showOrganization: Signal<boolean>
 
   // REFERENCES
   queryRef?: QueryRef<ActivityFeedQuery, ActivityFeedQueryVariables>
@@ -182,25 +187,26 @@ export class CvcActivityFeed {
     private gql: ActivityFeedGQL,
     private injector: Injector,
     @Inject(FEED_SCROLL_SERVICE_TOKEN)
-    private scrollerState: ScrollerStateService
+    private scrollerState: ScrollerStateService,
+    private breakpoints: NzBreakpointService
   ) {
     this.onSettingChange$ = new Subject()
     this.onFilterChange$ = new Subject()
-    this.onToggleItem$ = new Subject<FeedItemToggle>()
 
     this.poll$ = new Subject()
     this.fetchMore$ = new Subject()
     this.init$ = new Subject()
     this.queryType$ = new Subject()
     this.pageInfo$ = new Observable()
     this.onQueryComplete$ = new Subject()
-    this.onAllRowsFetched$ = new Subject()
 
     this.scrollerRoutines = configureScrollerRoutines(this, this.scrollerState)
     this.scroller = this.scrollerState.state.asReadonly()
-    this.allRowsFetched = toSignal(this.onAllRowsFetched$, {
-      initialValue: false,
-    })
+
+    this.showOrganization = toSignal(
+      this.onSettingChange$.pipe(map((settings) => settings.showOrganization)),
+      { initialValue: feedDefaultSettings.showOrganization }
+    )
 
     this.refreshChange$ = combineLatest([
       this.onSettingChange$,
@@ -235,7 +241,6 @@ export class CvcActivityFeed {
           this.queryRef = this.gql.watch(event.query)
         } else {
           if (event.type === 'refetch') {
-            this.onAllRowsFetched$.next(false)
             this.queryRef.refetch(event.query).then((data) => {
               this.onQueryComplete$.next(true)
               if (this.scrollAdapter) this.scrollAdapter.reload()
@@ -263,22 +268,12 @@ export class CvcActivityFeed {
         pluck('loading'),
         withLatestFrom(this.queryType$),
         filter(([_loading, queryType]) => queryType === 'refetch'),
-        map(([loading]) => loading)
+        map(([loading]) => loading),
+        distinctUntilChanged()
         // tag('refetchLoading')
       ),
       { initialValue: false }
     )
-    // TODO: figure out why moreLoading is always false in template
-    this.moreLoading = toSignal(
-      this.result$.pipe(
-        pluck('loading'),
-        withLatestFrom(this.queryType$),
-        filter(([_loading, queryType]) => queryType === 'fetchMore'),
-        map(([loading]) => loading)
-        // tag('moreLoading')
-      ),
-      { initialValue: false }
-    )
 
     const connection$ = this.result$.pipe(
       pluck('data', 'activities'),
@@ -326,6 +321,20 @@ export class CvcActivityFeed {
       this.configureAdapter()
     })
 
+    // show organization if settings's showOrganization is true,
+    // or filters has organizationId specified
+    this.showOrganization = toSignal(
+      combineLatest([this.onSettingChange$, this.onFilterChange$]).pipe(
+        map(([settings, filters]) => {
+          return (
+            settings.showOrganization === true ||
+            filters.organizationId.length > 0
+          )
+        })
+      ),
+      { initialValue: feedDefaultSettings.showOrganization }
+    )
+
     this.zeroRows = toSignal(
       this.result$.pipe(
         map((result) => result.data?.activities?.edges.length === 0)
@@ -350,7 +359,6 @@ export class CvcActivityFeed {
               hasNextPage === false &&
               edges.length <= edgesRequired
             ) {
-              this.onAllRowsFetched$.next(true)
               return of(edges)
             }
 
@@ -393,4 +401,13 @@ export class CvcActivityFeed {
       { injector: this.injector }
     )
   }
+
+  ngOnInit(): void {
+    // feed-filters usually emits filter values, ensuring
+    // the merge for refreshChange$ emits on init$. So if filters
+    // are hidden, we need to emit the current filters manually:
+    if (!this.cvcShowFilters()) {
+      this.onFilterChange$.next(this.cvcFilters())
+    }
+  }
 }

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

@@ -22,6 +22,7 @@ export const feedDefaultSettings: ActivityFeedSettings = {
   scope: { mode: EventFeedMode.Unscoped },
   includeAutomatedEvents: false,
   showFilters: true,
+  showOrganization: true,
   requestDetails: false,
 }
 
@@ -46,6 +47,7 @@ export const simpleActivityTypes = new Set([
   'CreateFeatureActivity',
   'ModerateAssertionActivity',
   'ModerateEvidenceItemActivity',
+  'DeleteCommentActivity',
 ])
 
 //TODO: Remove me, not needed

client/src/app/components/activities/activity-feed/activity-feed.query.gql

@@ -112,10 +112,13 @@ fragment ActivityFeedItemBase on ActivityInterface {
       }
     }
     ... on Comment {
+      deleted
+      deletedAt
       commentable {
         id
         name
         link
+
         ... on FactorVariant {
           feature {
             id

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

@@ -24,6 +24,7 @@ export type ActivityFeedSettings = {
   scope: ActivityFeedScope
   includeAutomatedEvents: boolean
   showFilters: boolean
+  showOrganization: boolean
   requestDetails: boolean
 }
 

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

@@ -1,4 +1,14 @@
 <div class="comment-container">
-  <cvc-comment-body
-    [commentBodySegments]="activity().comment.parsedComment"></cvc-comment-body>
+  @if (activity().comment.deleted) {
+    <span
+      nz-typography
+      nzType="secondary">
+      <i> This comment has been deleted. </i>
+    </span>
+  } @else {
+    <cvc-comment-body
+      [commentBodySegments]="
+        activity().comment.parsedComment
+      "></cvc-comment-body>
+  }
 </div>

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

@@ -2,11 +2,12 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { CvcCommentBodyModule } from '@app/components/comments/comment-body/comment-body.module'
 import { CommentActivityDetailFragment } from '@app/generated/civic.apollo'
+import { NzTypographyModule } from 'ng-zorro-antd/typography'
 
 @Component({
   selector: 'cvc-comment-activity-details',
   standalone: true,
-  imports: [CommonModule, CvcCommentBodyModule],
+  imports: [CommonModule, CvcCommentBodyModule, NzTypographyModule],
   templateUrl: './comment-activity.component.html',
   styleUrl: './comment-activity.component.less',
   changeDetection: ChangeDetectionStrategy.OnPush,

client/src/app/components/activities/activity-feed/feed-item-details/comment/comment-activity.query.gql

@@ -1,5 +1,7 @@
 fragment CommentActivityDetail on CommentActivity {
   comment {
+    deleted
+    deletedAt
     ...commentListNode
     commentable {
       id

client/src/app/components/activities/activity-feed/feed-item-details/delete-comment/delete-comment-activity.component.html

@@ -1,4 +1,14 @@
 <div class="comment-container">
-  <cvc-comment-body
-    [commentBodySegments]="activity().comment.parsedComment"></cvc-comment-body>
+  @if (activity().comment.deleted) {
+    <span
+      nz-typography
+      nzType="secondary">
+      <i> This comment has been deleted. </i>
+    </span>
+  } @else {
+    <cvc-comment-body
+      [commentBodySegments]="
+        activity().comment.parsedComment
+      "></cvc-comment-body>
+  }
 </div>

client/src/app/components/activities/activity-feed/feed-item-details/delete-comment/delete-comment-activity.component.less

@@ -5,6 +5,4 @@
 
 .comment-container {
   .comment-container-mixin();
-  text-decoration: line-through;
-  opacity: 0.7; // Optional: to make the struck-through text slightly faded
 }