Add anchor tag to motion block
Adds `<a ...>` tags to motion block list and motion block detail Allowing opening details in a new tab
This commit is contained in:
Sean Engelhardt
parent
95161d5dea
commit
f0ffaef1e5
@ -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>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/tables.scss';
|
||||
|
||||
.block-title {
|
||||
padding: 40px;
|
||||
padding-left: 25px;
|
||||
|
||||
@ -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
|
||||
* Navigate to the motion that was clicked on
|
||||
* Return the URL to a selected motion
|
||||
*
|
||||
* @param motion the selected ViewMotion
|
||||
* @returns a link as url
|
||||
*/
|
||||
public onClickMotionTitle(motion: ViewMotion): void {
|
||||
this.router.navigate([`/motions/${motion.id}`]);
|
||||
public getMotionLink(motion: ViewMotion): string {
|
||||
return `/motions/${motion.id}`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/tables.scss';
|
||||
|
||||
.os-headed-listview-table {
|
||||
// Title
|
||||
.mat-column-title {
|
||||
|
||||
@ -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
|
||||
*
|
||||
|
||||
@ -2,20 +2,31 @@
|
||||
.mat-table {
|
||||
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;
|
||||
/** nide the anchor column from head row */
|
||||
.mat-header-row {
|
||||
.mat-column-anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/** Let the column stretch over the row only */
|
||||
.mat-row {
|
||||
position: relative;
|
||||
/** 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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user