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

<os-head-bar
    mainButtonIcon="edit"
    [nav]="false"
    [mainButton]="true"
    [editMode]="editBlock"
    (mainEvent)="toggleEditMode()"
    (saveEvent)="saveBlock()"
>
    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="block && !editBlock">{{ 'Motion block' | translate }} {{ block.id }}</h2>

        <form [formGroup]="blockEditForm" (ngSubmit)="saveBlock()" (keydown)="onKeyDown($event)" *ngIf="editBlock">
            <mat-form-field>
                <input
                    type="text"
                    matInput
                    osAutofocus
                    required
                    formControlName="title"
                    placeholder="{{ 'Title' | translate }}"
                />
            </mat-form-field>
        </form>
    </div>

    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="motionBlockMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>
</os-head-bar>

<!-- Title -->
<div *ngIf="block" class="block-title on-transition-fade">
    <h2 *ngIf="!editBlock">{{ block.title }}</h2>
    <h2 *ngIf="editBlock">{{ blockEditForm.get('title').value }}</h2>
</div>

<mat-card class="block-card">
    <button mat-raised-button color="primary" (click)="onFollowRecButton()" [disabled]="isFollowingProhibited()">
        <mat-icon>done_all</mat-icon>
        <span translate>Follow recommendations for all motions</span>
    </button>

    <table class="os-headed-listview-table on-transition-fade" mat-table [dataSource]="dataSource" matSort>
        <!-- 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)"> {{ motion.title }} </mat-cell>
        </ng-container>

        <!-- state column -->
        <ng-container matColumnDef="state">
            <mat-header-cell *matHeaderCellDef> <span translate>State</span> </mat-header-cell>
            <mat-cell class="chip-container" *matCellDef="let motion">
                <mat-basic-chip
                    disableRipple
                    [ngClass]="{
                        green: motion.state.css_class === 'success',
                        red: motion.state.css_class === 'danger',
                        grey: motion.state.css_class === 'default',
                        lightblue: motion.state.css_class === 'primary'
                    }"
                >
                    {{ motion.state.name | translate }}
                </mat-basic-chip>
            </mat-cell>
        </ng-container>

        <!-- Recommendation column -->
        <ng-container matColumnDef="recommendation">
            <mat-header-cell *matHeaderCellDef> <span translate>Recommendation</span> </mat-header-cell>
            <mat-cell class="chip-container" *matCellDef="let motion">
                <mat-basic-chip disableRipple class="bluegrey">
                    {{
                        motion.recommendation
                            ? (motion.recommendation.recommendation_label | translate)
                            : ('not set' | translate)
                    }}
                </mat-basic-chip>
            </mat-cell>
        </ng-container>

        <!-- Remove motion column -->
        <ng-container matColumnDef="remove">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let motion">
                <button
                    type="button"
                    mat-icon-button
                    color="warn"
                    matTooltip="{{ 'Remove from motion block' | translate }}"
                    (click)="onRemoveMotionButton(motion)"
                >
                    <mat-icon>close</mat-icon>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
        <mat-row *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
    </table>
</mat-card>

<!-- The menu content -->
<mat-menu #motionBlockMenu="matMenu">
    <button mat-menu-item [routerLink]="getSpeakerLink()">
        <mat-icon>mic</mat-icon>
        <span translate>List of speakers</span>
    </button>

    <button mat-menu-item>
        <mat-icon>videocam</mat-icon>
        <span translate>Project</span>
    </button>
    <mat-divider></mat-divider>

    <button mat-menu-item class="red-warning-text" (click)="onDeleteBlockButton()">
        <mat-icon>delete</mat-icon>
        <span translate>Delete</span>
    </button>
</mat-menu>