From 96f88b54d55e58a65c592679777a1db825b07cd8 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Tue, 10 Sep 2019 11:18:55 +0200
Subject: [PATCH] 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
---
 .../amendment-list.component.html             | 26 +++++++++++----
 .../amendment-list.component.scss             |  4 +++
 .../amendment-list.component.ts               | 32 +++++++++++++------
 client/src/styles.scss                        |  1 +
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/client/src/app/site/motions/modules/amendment-list/amendment-list.component.html b/client/src/app/site/motions/modules/amendment-list/amendment-list.component.html
index 783cb2b5a..f2d2bbba7 100644
--- a/client/src/app/site/motions/modules/amendment-list/amendment-list.component.html
+++ b/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 }}
diff --git a/client/src/app/site/motions/modules/amendment-list/amendment-list.component.scss b/client/src/app/site/motions/modules/amendment-list/amendment-list.component.scss
index 88be4f51b..cbf8c08cf 100644
--- a/client/src/app/site/motions/modules/amendment-list/amendment-list.component.scss
+++ b/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;
+}
diff --git a/client/src/app/site/motions/modules/amendment-list/amendment-list.component.ts b/client/src/app/site/motions/modules/amendment-list/amendment-list.component.ts
index 5e670914b..02f5c7609 100644
--- a/client/src/app/site/motions/modules/amendment-list/amendment-list.component.ts
+++ b/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
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 19dd804d8..45df4c26b 100644
--- a/client/src/styles.scss
+++ b/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 {