printed-folder-modal.component.html

<div class="mat-dialog-content-container">
    <h1 mat-dialog-title>
        <span style="flex: 1;">
            {{lang.generateAndDownloadPrintedFolder}}
        </span>
        <button [title]="lang.close" mat-icon-button (click)="dialogRef.close();">
            <mat-icon class="fa fa-times"></mat-icon>
        </button></h1>
    <mat-dialog-content style="padding-bottom:10px;">
        <div class="loading" *ngIf="loading; else loadingTemplate">
            <mat-spinner style="margin:auto;"></mat-spinner>
        </div>
        <ng-template #loadingTemplate>
            <div class="example-loading-shade" *ngIf="isLoadingResults">
                <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
            </div>
            <div style="padding: 10px;">
                <mat-slide-toggle color="primary" [(ngModel)]="summarySheet"
                    (change)="$event.checked ? openSummarySheet() : false">{{lang.attachSummarySheet}}
                </mat-slide-toggle>
            </div>
            <div style="padding: 10px;">
                <mat-slide-toggle color="primary" [(ngModel)]="withSeparator">{{lang.generateSeparators}}
                </mat-slide-toggle>
            </div>
            <div class="printedFolderContainer">
                <mat-expansion-panel *ngIf="mainDocumentInformation.format !== null" hideToggle disabled
                    [title]="!mainDocumentInformation.canConvert ? 'Aucune version pdf trouvé!' : ''">
                    <mat-expansion-panel-header>
                        <mat-panel-title style="color: #135f7f;font-weight: bold;">
                            <mat-checkbox color="primary" [(ngModel)]="mainDocument"
                                [disabled]="!mainDocumentInformation.canConvert" disableRipple>{{lang.mainDocument}}
                            </mat-checkbox>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                </mat-expansion-panel>
                <ng-container *ngFor="let keyVal of printedFolderElement | keyvalue">
                    <div class="printedFolderElement" *ngIf="printedFolderElement[keyVal.key].length > 0">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header>
                                <mat-panel-title style="color: #135f7f;font-weight: bold;">
                                    <mat-checkbox color="primary"
                                        (change)="$event ? toggleAllElements($event.checked, keyVal.key) : null"
                                        [checked]="selectedPrintedFolderElement[keyVal.key].value.length > 0 && selectedPrintedFolderElement[keyVal.key].value.length === printedFolderElement[keyVal.key].length"
                                        [indeterminate]="selectedPrintedFolderElement[keyVal.key].value.length > 0 && selectedPrintedFolderElement[keyVal.key].value.length !== printedFolderElement[keyVal.key].length"
                                        (click)="$event.stopPropagation()" disableRipple>{{lang[keyVal.key]}}
                                    </mat-checkbox>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <mat-selection-list [formControl]="selectedPrintedFolderElement[keyVal.key]" color="primary"
                                class="printedFolderElement-content">
                                <mat-list-option class="printedFolderElement-option"
                                    [title]="!element.canConvert ? 'Aucune version pdf trouvé!' : ''"
                                    [class.disabled]="!element.canConvert" checkboxPosition="before"
                                    *ngFor="let element of printedFolderElement[keyVal.key]"
                                    [disabled]="!element.canConvert" [value]="element.id">
                                    <div class="printedFolderElement-item {{keyVal.key}}">
                                        <div color="primary" style="flex:1;font-size: 80%;padding-right: 10px;"
                                            *ngIf="!functions.empty(element.chronoMaster)">
                                            {{element.chronoMaster}}
                                        </div>
                                        <div color="primary" style="flex:1;font-size: 80%;padding-right: 10px;"
                                            *ngIf="!functions.empty(element.chrono)">
                                            {{element.chrono}}
                                        </div>
                                        <div color="primary"
                                            style="flex:1;display: flex;font-size: 80%;white-space: pre;padding-right: 10px;"
                                            *ngIf="!functions.empty(element.recipients)">
                                            {{lang.for | ucfirst}} : {{element.recipients}}
                                        </div>
                                        <div *ngIf="!functions.empty(element.creator)" color="primary"
                                            style="flex:1;font-size: 80%;padding-right: 10px;">
                                            {{element.creator}}
                                        </div>
                                        <div style="flex:2;padding-right: 10px;" [title]="element.label"
                                            [innerHTML]="element.label | shorten: 150: '...'">
                                        </div>
                                        <div *ngIf="!functions.empty(element.type)" color="primary"
                                            style="flex:1;font-size: 80%;white-space: pre;padding-right: 10px;">
                                            {{element.type}}
                                        </div>

                                        <div *ngIf="!functions.empty(element.status)">
                                            <div *ngIf="element.status === 'SIGN'" style="color: green">
                                                {{lang['attachment_' + element.status]}}
                                            </div>
                                        </div>

                                        <div color="primary" [title]="element.creationDate | fullDate"
                                            style="flex:1;justify-content: flex-end;display: flex;font-size: 80%;">
                                            {{element.creationDate}} {{element.creationDate | date : "dd/MM/y HH:mm"}}
                                        </div>
                                    </div>
                                </mat-list-option>
                            </mat-selection-list>
                        </mat-expansion-panel>
                    </div>
                </ng-container>
            </div>
        </ng-template>
    </mat-dialog-content>
    <span class="divider-modal"></span>
    <div mat-dialog-actions class="actions">
        <button mat-raised-button color="primary" [disabled]="isLoadingResults || isEmptySelection()"
            (click)="onSubmit()">{{lang.validate}}</button>
    </div>
</div>