Filtering by subscription

src/app/app.routes.ts

@@ -26,7 +26,7 @@ export const routes: Routes = [
   {
     path: 'subscriptions',
     loadComponent: async () => {
-      const c = await import('./pages/subscriptions/subscriptions-page.component')
+      const c = await import('./pages/subscriptions-page/subscriptions-page')
       return c.SubscriptionsPage
     },
     data: { title: 'Subscriptions' },

src/app/components/nav/nav.component.css

@@ -34,3 +34,15 @@ mat-sidenav-content {
 .page-content {
   overflow: auto;
 }
+
+.title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.title h2 {
+  font-size: smaller;
+}

src/app/components/nav/nav.component.html

@@ -43,7 +43,10 @@
           <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
         </button>
       }
-      <h1>{{ currentTitle() }}</h1>
+      <div class="title">
+        <h1>{{ currentTitle() }}</h1>
+        <h2>{{ currentSubtitle() }}</h2>
+      </div>
     </mat-toolbar>
     <div class="page-content">
       <ng-content select="router-outlet"/>

src/app/components/nav/nav.component.ts

@@ -1,4 +1,11 @@
-import { Component, DestroyRef, inject, OnInit, signal, viewChild } from '@angular/core'
+import {
+  Component,
+  DestroyRef,
+  inject,
+  OnInit,
+  signal,
+  viewChild
+} from '@angular/core'
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
 import { AsyncPipe } from '@angular/common'
 import { MatToolbarModule } from '@angular/material/toolbar'
@@ -35,6 +42,7 @@ export class NavComponent implements OnInit {
   private sideNav = viewChild<MatSidenav>('drawer')
 
   currentTitle = toSignal(this.titleService.$currentTitle)
+  currentSubtitle = toSignal(this.titleService.$currentSubtitle)
 
   isHandset = signal<boolean>(false)
 

src/app/pages/home/home-page.component.ts

@@ -9,7 +9,7 @@ import { MatToolbarModule } from '@angular/material/toolbar'
 import { MatButtonToggleModule } from '@angular/material/button-toggle'
 import { MatIconModule } from '@angular/material/icon'
 import { RowSpacer } from '../../components/row-spacer/row-spacer'
-import { Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { Article } from '../../entities/article/article.types'
 import { MatPaginatorModule } from '@angular/material/paginator'
 import { TagService } from '../../services/tag-service'
@@ -44,6 +44,7 @@ import { SortOrder } from '../../entities/base/base.enums'
 export class HomePage implements OnInit {
   feedService = inject(FeedService)
   router = inject(Router)
+  route = inject(ActivatedRoute)
   destroyRef = inject(DestroyRef)
   tagService = inject(TagService)
   titleService = inject(TitleService)
@@ -54,6 +55,7 @@ export class HomePage implements OnInit {
 
   $readFilter = new BehaviorSubject(true)
   $favFilter = new BehaviorSubject(false)
+  $subscriptionFilter = new BehaviorSubject<string | null>(null)
   $dateOrder = new BehaviorSubject(SortOrder.Desc)
 
   favTagId = signal<string>('')
@@ -93,9 +95,10 @@ export class HomePage implements OnInit {
             this.pageService.$currentPage,
             this.$favFilter,
             this.$readFilter,
+            this.$subscriptionFilter,
             this.$dateOrder,
           ]).pipe(
-            switchMap(([perPage, pageNumber, fav, read, dateSort]) => {
+            switchMap(([perPage, pageNumber, fav, read, subscription, dateSort]) => {
               const filters: Record<string, string | boolean> = {}
 
               if (read) {
@@ -106,6 +109,10 @@ export class HomePage implements OnInit {
                 filters['tags'] = favTag
               }
 
+              if (subscription) {
+                filters['subscription'] = subscription
+              }
+
               return this.feedService.getAllArticles({
                 pagination: {
                   perPage,
@@ -124,9 +131,31 @@ export class HomePage implements OnInit {
         if (result) {
           this.articles.set(result.result)
           this.pageService.setTotalResults(result.total)
-          this.titleService.setTitle(`News: ${result.total} articles`)
+          this.titleService.setTitle(`Articles: ${result.total} articles`)
         } else {
-          this.titleService.setTitle('News')
+          this.titleService.setTitle('Articles')
+        }
+      })
+
+    this.route.queryParams
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        switchMap((params) => {
+          const subscriptionId: string = params['subscription']
+          if (!subscriptionId) {
+            return of(null)
+          }
+          return this.feedService.getOneSubscription({ subscriptionId })
+        }),
+        catchError((e) => {
+          console.error(e)
+          return of(null)
+        }),
+      )
+      .subscribe((feed) => {
+        if (feed) {
+          this.titleService.setSubtitle(feed.title)
+          this.$subscriptionFilter.next(feed._id)
         }
       })
   }
@@ -165,9 +194,9 @@ export class HomePage implements OnInit {
     if (filter === 'read') {
       this.$readFilter.next(!this.$readFilter.value)
     } else {
-      this.pageService.setCurrentPage(1)
+      this.$favFilter.next(!this.$favFilter.value)
     }
-    this.$favFilter.next(!this.$favFilter.value)
+    this.pageService.setCurrentPage(1)
   }
 
   orderHandler(param: 'date') {

src/app/pages/subscriptions/subscriptions-page.component.css → src/app/pages/subscriptions-page/subscriptions-page.css

@@ -9,3 +9,7 @@
 :host .mat-mdc-paginator {
   background: transparent;
 }
+
+.card {
+  cursor: pointer;
+}

src/app/pages/subscriptions/subscriptions-page.component.html → src/app/pages/subscriptions-page/subscriptions-page.html

@@ -23,7 +23,11 @@
   } @else {
     @defer {
       @for (f of feeds(); track f._id) {
-        <mat-card>
+        <mat-card
+          class="card"
+          routerLink="/home"
+          [queryParams]="{ subscription: f._id }"
+        >
           <mat-card-header>
             <mat-card-title>{{ f.title }}</mat-card-title>
             <app-row-spacer/>

src/app/pages/subscriptions/subscriptions-page.component.ts → src/app/pages/subscriptions-page/subscriptions-page.ts

@@ -18,9 +18,10 @@ import { Paginator } from '../../components/paginator/paginator'
 import { PageService } from '../../services/page-service'
 import { TitleService } from '../../services/title-service'
 import { scrollUp } from '../../../utils'
+import { RouterLink } from '@angular/router'
 
 @Component({
-  selector: 'app-subscriptions',
+  selector: 'app-subscriptions-page',
   imports: [
     MatCardModule,
     MatToolbarModule,
@@ -32,9 +33,10 @@ import { scrollUp } from '../../../utils'
     MatPaginatorModule,
     LinkTrimPipe,
     Paginator,
+    RouterLink,
   ],
-  templateUrl: './subscriptions-page.component.html',
-  styleUrl: './subscriptions-page.component.css',
+  templateUrl: './subscriptions-page.html',
+  styleUrl: './subscriptions-page.css',
 })
 export class SubscriptionsPage implements OnInit {
   constructor() {

src/app/services/title-service.ts

@@ -11,8 +11,15 @@ export class TitleService {
   private $$currentTitle = new BehaviorSubject<string>('')
   $currentTitle = this.$$currentTitle.asObservable()
 
+  private $$currentSubtitle = new BehaviorSubject<string | null>(null)
+  $currentSubtitle = this.$$currentSubtitle.asObservable()
+
   setTitle(title: string) {
     this.$$currentTitle.next(title)
     this.pageTitleService.setTitle(title)
   }
+
+  setSubtitle(subtitle: string | null) {
+    this.$$currentSubtitle.next(subtitle)
+  }
 }