attachments-list.component.html

<div *ngIf="!loading" (mouseover)="resetToggleInfo()">
    <div *ngIf="attachments.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
        {{lang.noAttachment}}
    </div>
    <button mat-button color="primary" (click)="createAttachment()">Ajouter une pièce jointe</button>
    <mat-form-field [style.visibility]="attachments.length > 0 ? 'visible' : 'hidden'" floatLabel="never"
        style="padding-left:20px;padding-right:20px;">
        <input matInput placeholder="{{lang.searchByAttachmentType}}" #listFilter>
    </mat-form-field>
    <mat-card *ngFor="let attachment of attachments | filterList:listFilter.value:'typeLabel'" [class.signed]="attachment.status==='SIGN'"
        [style.background-image]="'url('+attachment.thumbnailUrl+')'"
        style="padding:0;margin: 30px;min-height: 300px;background-size: cover;overflow: hidden;" (mouseover)="$event.stopPropagation();toggleInfo(attachment,true)"
        >
        <div class="layout" *ngIf="attachment.hideMainInfo" [@myAnimation] (click)="showAttachment(attachment)">
                <button mat-raised-button color="primary" (click)="$event.stopPropagation();showAttachment(attachment)">Voir le document</button>
                <button mat-raised-button color="warn" *ngIf="attachment.status!=='SIGN'" (click)="$event.stopPropagation();deleteAttachment(attachment)">Supprimer le document</button>
            </div>
        <div class="pjToolsContent">
            <button *ngIf="attachment.relation > 1" color="primary" class="versionButton" mat-button
                [matMenuTriggerFor]="menu" matBadge="{{attachment.relation}}">{{lang.version}}</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item *ngFor="let version of attachment.versions; let i = index" (click)="showAttachment(version)">{{lang.version}} {{i+1}}</button>
            </mat-menu>
            <button color="primary" class="actionsButton" mat-icon-button [matMenuTriggerFor]="menuPjAction">
                <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v"></mat-icon>
            </button>
            <mat-menu #menuPjAction="matMenu">
                <button mat-menu-item (click)="setInSignatureBook(attachment)">
                    <mat-checkbox color="primary" [(ngModel)]="attachment.in_signature_book"></mat-checkbox>
                    {{lang.putInSignatureBook}}
                </button>
                <button mat-menu-item (click)="setInSendAttachment(attachment)" [disabled]="!mailevaEnabled">
                    <mat-checkbox color="primary" [(ngModel)]="attachment.in_send_attach" [disabled]="!mailevaEnabled">
                    </mat-checkbox>
                    {{lang.putInSendAttach}}
                </button>
            </mat-menu>
        </div>

        <div class="infosPj">
            <div class="stateInfo">
                <i class="fas fa-file-signature" *ngIf="attachment.in_signature_book"></i>
                <i class="fa fa-shipping-fast" *ngIf="attachment.in_send_attach"></i>
            </div>
            <div class="mainInfos" *ngIf="!attachment.hideMainInfo">
                {{attachment.chrono}}
            </div>
            <div class="mainInfos" *ngIf="attachment.hideMainInfo">
                {{attachment.title | shorten : 40:'...'}}
            </div>
            <div class="subInfos" *ngIf="!attachment.hideMainInfo">
                {{attachment.typeLabel}}
            </div>
            <div class="subInfos" *ngIf="attachment.hideMainInfo">
                signé le {{attachment.modificationDate | timeAgo}} par {{attachment.typist}} 
            </div>
            <div class="statusInfo">
                {{lang['attachment_'+attachment.status]}}
            </div>
            <!--<mat-accordion>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title class="subInfos">
                            <div class="col-md-6" title="{{attachment.chrono}} (n°{{attachment.res_id}})">
                                
                            </div>
                            <div class="col-md-6" title="{{attachment.attachmentTypeLabel}}"
                                style="text-align:center;flex: 1;">
                                {{attachment.typeLabel}}
                            </div>
                        </mat-panel-title>
                    </mat-expansion-panel-header>

                    <div class="col-md-6">
                        <mat-form-field>
                            <input matInput
                                title='{{attachment.creation_date | date : lang.onRange + " dd/MM/y " + lang.atRange +" HH:mm"}}'
                                [value]="attachment.creation_date | timeAgo" placeholder="{{lang.createdOn}}" disabled>
                        </mat-form-field>
                    </div>
                    <div class="col-md-6">
                        <mat-form-field>
                            <input matInput title="{{attachment.firstname_typist}} {{attachment.lastname_typist}}"
                                [value]="attachment.lastname_typist != null ? attachment.firstname_typist+' '+attachment.lastname_typist : lang.undefined"
                                placeholder="{{lang.by}}" disabled>
                        </mat-form-field>
                    </div>
                    <div class="col-md-6">
                        <mat-form-field>
                            <input matInput [value]="attachment.status" title="{{attachment.status}}"
                                placeholder="{{lang.status}}" disabled>
                        </mat-form-field>
                    </div>
                    <div class="col-md-6">
                        <mat-form-field>
                            <input matInput [value]="attachment.title" title="{{attachment.title}}"
                                placeholder="{{lang.subject}}" disabled>
                        </mat-form-field>
                    </div>
                    <div class="col-md-6" *ngIf="attachment.return_date != null">
                        <mat-form-field>
                            <input matInput
                                title='{{attachment.return_date | date : lang.onRange + " dd/MM/y " + lang.atRange +" HH:mm"}}'
                                [value]="attachment.return_date | timeAgo" placeholder=" {{lang.expectedReturnDate}}"
                                disabled>
                        </mat-form-field>
                    </div>
                    <div class="col-md-6" *ngIf="attachment.return_date != null">
                        <mat-form-field>
                            <input matInput
                                title='{{attachment.effective_date | date : lang.onRange + " dd/MM/y " + lang.atRange +" HH:mm"}}'
                                [value]="attachment.effective_date | timeAgo" placeholder="{{lang.returnDate}}"
                                disabled>
                        </mat-form-field>
                    </div>
                    <div class="col-md-12" *ngIf="attachment.contact != null && attachment.contact != ''">
                        <mat-form-field>
                            <input matInput [value]="attachment.contact" title="{{attachment.contact}}"
                                placeholder="{{lang.forCapital}}" disabled>
                        </mat-form-field>
                    </div>
                    <div *ngIf="attachment.update_date != null" class="col-md-6">
                        <mat-form-field>
                            <input matInput
                                title='{{attachment.update_date | date : lang.onRange + " dd/MM/y " + lang.atRange +" HH:mm"}}'
                                [value]="attachment.update_date | timeAgo" placeholder="{{lang.modifiedOn}}" disabled>
                        </mat-form-field>
                    </div>
                    <div *ngIf="attachment.update_date != null" class="col-md-6">
                        <mat-form-field>
                            <input matInput [value]="attachment.firstname_updated+' '+attachment.lastname_updated"
                                placeholder="{{lang.by}}"
                                title="{{attachment.firstname_updated}} {{attachment.lastname_updated}}" disabled>
                        </mat-form-field>
                    </div>
                </mat-expansion-panel>
            </mat-accordion>-->
        </div>
    </mat-card>
</div>