Add the title too the amendments page

Adds an observable view model of the parent motion to the amendment list page to show the title

client/src/app/site/motions/modules/amendment-list/amendment-list.component.html

@@ -1,6 +1,14 @@
 <os-head-bar [nav]="false" [multiSelectMode]="isMultiSelect" goBack="true">
     <!-- Title -->
-    <div class="title-slot"><h2 translate>Amendments</h2></div>
+    <div class="title-slot" *ngIf="!parentMotion"><h2 translate>Amendments</h2></div>
+
+    <!-- TODO would require translations with parameters -->
+    <div class="title-slot" *ngIf="parentMotion">
+        <h2>
+            {{ 'Amendments to' | translate }}
+            {{ (parentMotion | async)?.identifierOrTitle }}
+        </h2>
+    </div>
 
     <!-- Menu -->
     <div class="menu-slot">
@@ -23,6 +31,7 @@
     [columns]="tableColumnDefinition"
     [filterProps]="filterProps"
     [multiSelect]="isMultiSelect"
+    [hiddenInMobile]="['summary']"
     listStorageKey="amendments"
     [(selectedRows)]="selectedRows"
     (dataSourceChange)="onDataSourceChange($event)"
@@ -30,16 +39,19 @@
     <!-- Meta -->
     <div *pblNgridCellDef="'meta'; row as motion" class="cell-slot fill">
         <a class="detail-link" [routerLink]="motion.getDetailStateURL()"></a>
-        <div class="column-identifier innerTable">
+        <div class="innerTable">
             <!-- Identifier and line -->
-            <div class="title-line">
-                {{ motion.identifier }}
-                (<span translate>Line</span>&nbsp;<span>{{ getChangeLines(motion) }}</span
-                >)
+            <div class="title-line one-line">
+                <span>{{ motion.identifier }}</span>
+                <span *ngIf="motion.diffLines && motion.diffLines.length">
+                    <span *ngIf="motion.identifier">&nbsp;&middot;&nbsp;</span>
+                    <span translate>Line</span>
+                    <span>&nbsp;{{ getChangeLines(motion) }}</span>
+                </span>
             </div>
 
             <!-- Submitter -->
-            <div class="submitters-line">
+            <div class="submitters-line one-line">
                 <span *ngIf="motion.submitters.length">
                     <span translate>by</span>
                     {{ motion.submitters }}

client/src/app/site/motions/modules/amendment-list/amendment-list.component.scss

@@ -1,2 +1,6 @@
 @import '~assets/styles/motion-styles-common';
 @import 'app/site/motions/styles/motion-list-styles.scss';
+
+.submitters-line {
+    // white-space: nowrap;
+}

client/src/app/site/motions/modules/amendment-list/amendment-list.component.ts

@@ -1,10 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatDialog, MatSnackBar } from '@angular/material';
 import { DomSanitizer, SafeHtml, Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
 import { PblColumnDefinition } from '@pebula/ngrid';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 import { AmendmentFilterListService } from '../../services/amendment-filter-list.service';
 import { AmendmentSortListService } from '../../services/amendment-sort-list.service';
@@ -31,9 +33,9 @@ import { ViewMotion } from '../../models/view-motion';
 })
 export class AmendmentListComponent extends BaseListViewComponent<ViewMotion> implements OnInit {
     /**
-     * Has the id of the parent motion if passed through the constructor
+     * Hold the parent motion if present
      */
-    private parentMotionId: number;
+    public parentMotion: Observable<ViewMotion>;
 
     /**
      * Hold item visibility
@@ -47,10 +49,11 @@ export class AmendmentListComponent extends BaseListViewComponent<ViewMotion> im
         {
             prop: 'meta',
             minWidth: 250,
-            width: '15%'
+            width: 'auto'
         },
         {
             prop: 'summary',
+            minWidth: 280,
             width: 'auto'
         },
         {
@@ -80,7 +83,7 @@ export class AmendmentListComponent extends BaseListViewComponent<ViewMotion> im
         translate: TranslateService,
         matSnackBar: MatSnackBar,
         storage: StorageService,
-        route: ActivatedRoute,
+        private route: ActivatedRoute,
         public motionRepo: MotionRepositoryService,
         public motionSortService: MotionSortListService,
         public amendmentSortService: AmendmentSortListService,
@@ -93,16 +96,25 @@ export class AmendmentListComponent extends BaseListViewComponent<ViewMotion> im
         super(titleService, translate, matSnackBar, storage);
         super.setTitle('Amendments');
         this.canMultiSelect = true;
-        this.parentMotionId = parseInt(route.snapshot.params.id, 10);
-        if (this.parentMotionId) {
-            this.amendmentFilterService.parentMotionId = this.parentMotionId;
+    }
+
+    public ngOnInit(): void {
+        // determine if a paramter exists.
+        if (!!this.route.snapshot.paramMap.get('id')) {
+            // set the parentMotion observable. This will "only" fire
+            // if there is a subscription to the parent motion
+            this.parentMotion = this.route.paramMap.pipe(
+                switchMap((params: ParamMap) => {
+                    const parentMotionId = +params.get('id');
+                    this.amendmentFilterService.parentMotionId = parentMotionId;
+                    return this.motionRepo.getViewModelObservable(parentMotionId);
+                })
+            );
         } else {
             this.amendmentFilterService.parentMotionId = undefined;
         }
     }
 
-    public ngOnInit(): void {}
-
     /**
      * Extract the lines of the amendments
      * If an amendments has multiple changes, they will be printed like an array of strings

client/src/styles.scss

@@ -628,6 +628,7 @@ button.mat-menu-item.selected {
 .innerTable {
     display: inline-block;
     line-height: 150%;
+    width: -webkit-fill-available;
 }
 // with os-sort-filter-bar
 .virtual-scroll-with-head-bar {