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

<os-head-bar>



    <!-- Title -->
    <div class="title-slot">
        <h2 *ngIf="block && !editBlock">{{ block.title }}</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>
    <!-- Save button -->
    <div *ngIf="editBlock" class="extra-controls-slot on-transition-fade">
        <button mat-button (click)="saveBlock()"><strong translate class="upper">Save</strong></button>
    </div>


</os-head-bar>

<mat-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 (click)="toggleEditMode()">
        <mat-icon>edit</mat-icon>
        <span translate>Edit title</span>
    </button>

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