OpenSlides/client/src/app/site/assignments/assignment-list/assignment-list.component.html

<os-head-bar plusButton=true (plusButtonClicked)=onPlusButton() [multiSelectMode]="isMultiSelect">
    <!-- Title -->
    <div class="title-slot">

        <h2 translate>Elections</h2>
    </div>
    <!-- Menu -->
    <div class="menu-slot">
        <button type="button" mat-icon-button [matMenuTriggerFor]="assignmentMenu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <!-- Multiselect info -->
    <div class="central-info-slot">
        <button mat-icon-button (click)="toggleMultiSelect()">
            <mat-icon>arrow_back</mat-icon>
        </button>
        <span>{{ selectedRows.length }}&nbsp;</span><span translate>selected</span>
    </div>

    <div class="extra-controls-slot on-transition-fade" *ngIf="isMultiSelect">
        <button mat-icon-button (click)="deleteSelected()">
            <mat-icon>delete</mat-icon>
        </button>
    </div>

</os-head-bar>


<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="selector">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell" ></mat-header-cell>
        <mat-cell *matCellDef="let assignment" class="checkbox-cell" >
            <mat-icon>{{ isSelected(assignment) ? 'check_circle' : '' }}</mat-icon>
        </mat-cell>
    </ng-container>
    <!-- name column -->
    <ng-container matColumnDef="title">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
        <mat-cell *matCellDef="let assignment">{{ assignment.getTitle() }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="phase">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Phase</mat-header-cell>
        <mat-cell *matCellDef="let assignment">
            <mat-chip-list>
                <mat-chip color="primary" selected>{{ assignment.phase }}</mat-chip>
            </mat-chip-list>
        </mat-cell>
    </ng-container>
    <ng-container matColumnDef="candidates">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Candidates</mat-header-cell>
        <mat-cell *matCellDef="let assignment">
            <mat-chip-list>
                <mat-chip color="accent" selected>{{ assignment.candidateAmount }}</mat-chip>
            </mat-chip-list>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="getColumnDefintion()"></mat-header-row>
    <mat-row [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected': ''" (click)='selectItem(row, $event)'
        *matRowDef="let row; columns: getColumnDefintion()">
    </mat-row>
</mat-table>

<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>

<mat-menu #assignmentMenu="matMenu">
    <div *ngIf="!isMultiSelect">
        <button mat-menu-item *osPerms="'assignment.can_manage'" (click)="toggleMultiSelect()">
            <mat-icon>library_add</mat-icon>
            <span translate>Multiselect</span>
        </button>
        <button mat-menu-item (click)="downloadAssignmentButton()">
            <mat-icon>archive</mat-icon>
            <span translate>Export ...</span>
        </button>
    </div>

    <div *ngIf="isMultiSelect">
        <button mat-menu-item (click)="toggleMultiSelect()">
            <mat-icon>library_add</mat-icon>
            <span translate>Exit multiselect</span>
        </button>
        <mat-divider></mat-divider>
        <button mat-menu-item class="red-warning-text" *osPerms="'assignment.can_manage'" (click)="deleteSelected()">
            <mat-icon>delete</mat-icon>
            <span translate>Delete assignments</span>
        </button>
    </div>
</mat-menu>