diffusions-list.component.html

<div *ngIf="loading" style="display:flex;height:100%;">
    <mat-spinner style="margin:auto;"></mat-spinner>
</div>

<mat-list *ngIf="!loading">
    <div *ngIf="diffList.length == 0" style="text-align:center;font-size:24px;font-weight:bold;opacity:0.3;">
        AUCUNE LISTE DE DIFFUSION
    </div>
    <mat-form-field *ngIf="injectDatas.editable" appearance="outline" floatLabel="never" [style.fontSize.px]="10">
        <input class="userDiffList" #autocompleteFilter type="text" placeholder="{{lang.addUserOrEntity}}" matInput
            [matAutocomplete]="auto" [formControl]="elementCtrl">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let elem of filteredElements | async" [value]="elem.id" (click)="addElem(elem)">
                <p mat-line style="margin:0;">
                    <span class="col-xm-1" style="padding-right:5px;">
                        <mat-icon color="primary" [class]="elem.type == 'entity' ? 'fa fa-sitemap fa-2x' : 'fa fa-user fa-2x'"
                            style="margin-right:0px;"></mat-icon>
                    </span>
                    <span class="col-xm-11">
                        {{ elem.idToDisplay }}
                        <small>{{ elem.descriptionToDisplay }}</small>
                    </span>
                </p>
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
    <div cdkDropListGroup class="roleList">
        <ng-container *ngFor="let role of availableRoles">
            <h3 mat-subheader>{{role.label}}</h3>
            <mat-divider></mat-divider>
            <div cdkDropList [id]="role.id" #dataAvailableList="cdkDropList" [cdkDropListData]="diffList[role.id].items"
                class="cdk-list" (cdkDropListDropped)="drop($event)" [cdkDropListEnterPredicate]="role.id == 'dest' ? noReturnPredicate : allPredicate"
                [cdkDropListDisabled]="role.id == 'dest' || !injectDatas.editable">
                <div *ngIf="diffList[role.id].items.length === 0" style="opacity: 0.5;text-align: center;font-size: 10px;padding: 10px;">
                    Aucune personne
                </div>
                <mat-list-item *ngFor="let diffusion of diffList[role.id].items;let i=index" cdkDrag cdkDragBoundary=".roleList"
                    class="columns" [cdkDragDisabled]="diffusion.item_type == 'entity_id' || !injectDatas.editable"
                    [class.notDraggable]="(diffusion.item_type == 'entity_id' || role.id == 'dest') && injectDatas.editable"
                    [class.notEditable]="!injectDatas.editable">
                    <mat-icon *ngIf="diffusion.item_type == 'user_id'" mat-list-icon class="fa fa-user fa-2x" color="primary"></mat-icon>
                    <h4 mat-line *ngIf="diffusion.item_type == 'user_id'">{{diffusion.labelToDisplay}}</h4>
                    <p mat-line *ngIf="diffusion.item_type == 'user_id'" style="opacity:0.5;">
                        {{diffusion.descriptionToDisplay}} </p>
                    <button mat-icon-button *ngIf="role.id == 'dest' && injectDatas.editable" (click)="loadDestUserList()" [matMenuTriggerFor]="menuDestUserList" title="Choisir une autre personne de l'entité">
                        <mat-icon class="fa fa-user-friends" color="primary"></mat-icon>
                    </button>
                    <mat-menu #menuDestUserList="matMenu">
                        <button mat-menu-item *ngFor="let userDest of userDestList" (click)="changeDest(userDest)">
                          <span>{{userDest.labelToDisplay}}</span>
                        </button>
                      </mat-menu>
                    <button mat-icon-button *ngIf="role.id != 'dest' && injectDatas.editable" (click)="deleteItem(role.id,i)">
                        <mat-icon class="fa fa-times" color="warn"></mat-icon>
                    </button>
                    <mat-icon *ngIf="diffusion.item_type == 'entity_id'" mat-list-icon class="fa fa-sitemap fa-2x"
                        color="primary"></mat-icon>
                    <h4 *ngIf="diffusion.item_type == 'entity_id'" mat-line>{{diffusion.labelToDisplay}}</h4>
                    <p *ngIf="diffusion.item_type == 'entity_id'" mat-line style="opacity:0.5;"> &nbsp; </p>
                </mat-list-item>
            </div>
        </ng-container>
    </div>
</mat-list>