Add anchor tag to motion block

Adds `<a ...>` tags to motion block list and motion block detail
Allowing opening details in a new tab

client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html

@@ -45,7 +45,7 @@
         <!-- title column -->
         <ng-container matColumnDef="title">
             <mat-header-cell *matHeaderCellDef mat-sort-header> <span translate>Motion</span> </mat-header-cell>
-            <mat-cell *matCellDef="let motion" (click)="onClickMotionTitle(motion)">
+            <mat-cell *matCellDef="let motion">
                 {{ motion.getTitle() }}
             </mat-cell>
         </ng-container>
@@ -86,6 +86,14 @@
             </mat-cell>
         </ng-container>
 
+        <!-- Anchor column to open the separate tab -->
+        <ng-container matColumnDef="anchor">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let motion">
+                <a [routerLink]="getMotionLink(motion)"></a>
+            </mat-cell>
+        </ng-container>
+
         <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
         <mat-row *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
     </table>

client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/tables.scss';
+
 .block-title {
     padding: 40px;
     padding-left: 25px;

client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts

@@ -122,7 +122,7 @@ export class MotionBlockDetailComponent extends ListViewBaseComponent<ViewMotion
      * @returns an array of strings building the column definition
      */
     public getColumnDefinition(): string[] {
-        let columns = ['title', 'state', 'recommendation'];
+        let columns = ['title', 'state', 'recommendation', 'anchor'];
         if (this.operator.hasPerms('motions.can_manage_manage')) {
             columns = columns.concat('remove');
         }
@@ -143,13 +143,13 @@ export class MotionBlockDetailComponent extends ListViewBaseComponent<ViewMotion
     }
 
     /**
-     * Click handler for the motion title cell in the table
+     * Return the URL to a selected motion
-     * Navigate to the motion that was clicked on
      *
      * @param motion the selected ViewMotion
+     * @returns a link as url
      */
-    public onClickMotionTitle(motion: ViewMotion): void {
+    public getMotionLink(motion: ViewMotion): string {
-        this.router.navigate([`/motions/${motion.id}`]);
+        return `/motions/${motion.id}`;
     }
 
     /**

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html

@@ -63,13 +63,13 @@
         <!-- title column -->
         <ng-container matColumnDef="title">
             <mat-header-cell *matHeaderCellDef mat-sort-header> <span translate>Title</span> </mat-header-cell>
-            <mat-cell *matCellDef="let block" (click)="openItem(block)"> {{ block.title }} </mat-cell>
+            <mat-cell *matCellDef="let block"> {{ block.title }} </mat-cell>
         </ng-container>
 
         <!-- amount column -->
         <ng-container matColumnDef="amount">
             <mat-header-cell *matHeaderCellDef> <span translate>Motions</span> </mat-header-cell>
-            <mat-cell *matCellDef="let block" (click)="openItem(block)">
+            <mat-cell *matCellDef="let block">
                 <span class="os-amount-chip">{{ getMotionAmount(block.motionBlock) }}</span>
             </mat-cell>
         </ng-container>
@@ -89,6 +89,14 @@
             </mat-cell>
         </ng-container>
 
+        <!-- Anchor column to open the separate tab -->
+        <ng-container matColumnDef="anchor">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let block">
+                <a [routerLink]="block.id"></a>
+            </mat-cell>
+        </ng-container>
+
         <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
         <mat-row *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
     </table>

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/tables.scss';
+
 .os-headed-listview-table {
     // Title
     .mat-column-title {

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { MatSnackBar } from '@angular/material';
@@ -14,9 +14,9 @@ import { MotionBlock } from 'app/shared/models/motions/motion-block';
 import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service';
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
+import { StorageService } from 'app/core/core-services/storage.service';
 import { ViewItem } from 'app/site/agenda/models/view-item';
 import { ViewMotionBlock } from 'app/site/motions/models/view-motion-block';
-import { StorageService } from 'app/core/core-services/storage.service';
 
 /**
  * Table for the motion blocks
@@ -83,7 +83,6 @@ export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBl
         matSnackBar: MatSnackBar,
         route: ActivatedRoute,
         storage: StorageService,
-        private router: Router,
         private repo: MotionBlockRepositoryService,
         private agendaRepo: ItemRepositoryService,
         private formBuilder: FormBuilder,
@@ -123,7 +122,7 @@ export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBl
      * @returns an array of strings building the column definition
      */
     public getColumnDefinition(): string[] {
-        let columns = ['title', 'amount'];
+        let columns = ['title', 'amount', 'anchor'];
         if (this.operator.hasPerms('core.can_manage_projector')) {
             columns = ['projector'].concat(columns);
         }
@@ -133,15 +132,6 @@ export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBl
         return columns;
     }
 
-    /**
-     * Action while clicking on a row. Navigate to the detail page of given block
-     *
-     * @param block the given motion block
-     */
-    public openItem(block: ViewMotionBlock): void {
-        this.router.navigate([`${block.id}`], { relativeTo: this.route });
-    }
-
     /**
      * return the amount of motions in a motion block
      *

client/src/assets/styles/tables.scss

@@ -2,20 +2,31 @@
 .mat-table {
     width: 100%;
 
-    /** Style for the anchor column */
+    /** nide the anchor column from head row */
-    .mat-column-anchor {
+    .mat-header-row {
-        position: absolute !important;
+        .mat-column-anchor {
-        top: 0;
+            display: none;
-        right: 0;
+        }
-        bottom: 0;
+    }
-        left: 0;
-        opacity: 0.1;
-        z-index: 1;
 
-        a {
+    /** Let the column stretch over the row only */
-            display: block;
+    .mat-row {
-            height: 100%;
+        position: relative;
-            width: 100%;
+        /** Style for the anchor column */
+        .mat-column-anchor {
+            position: absolute !important;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            opacity: 0.1;
+            z-index: 1;
+
+            a {
+                display: block;
+                height: 100%;
+                width: 100%;
+            }
         }
     }