list-administration.component.html

<mat-form-field class="eventList" appearance="outline">
    <mat-label>{{lang.eventList}}</mat-label>
    <mat-select [(ngModel)]="selectedListEvent" (selectionChange)="changeEventList($event)">
        <mat-option *ngFor="let event of listEvent" [value]="event.value">
            {{lang[event.id]}}
        </mat-option>
    </mat-select>
</mat-form-field>
<div style="display: grid;grid-template-columns: 1fr auto;grid-gap: 10px;align-items: center;" *ngIf="selectedListEvent === 'processDocument'">
    <mat-form-field class="eventList" appearance="outline">
        <mat-label>{{lang.tabProcessPosition}}</mat-label>
        <mat-select [(ngModel)]="selectedProcessTool.defaultTab">
            <mat-option *ngFor="let tool of processTool | sortBy: 'label'" [value]="tool.id">
                {{tool.label}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-slide-toggle color="primary" [(ngModel)]="selectedProcessTool.canUpdate">{{lang.canUpdateData}}</mat-slide-toggle>
</div>

<hr />
<mat-toolbar class="editorTool">
    <span>
        <button color="primary" *ngIf="displayMode=='label'" mat-icon-button (click)="toggleData()"
            title="{{lang.preview}}">
            <mat-icon fontSet="fas" fontIcon="fa-eye"></mat-icon>
        </button>
        <button color="primary" *ngIf="displayMode=='sample'" mat-icon-button (click)="toggleData()"
            title="{{lang.edition}}">
            <mat-icon fontSet="fas" fontIcon="fa-edit"></mat-icon>
        </button>
    </span>
    <span class="area">
        <form>
            <mat-form-field appearance="outline" floatLabel="never">
                <input id="availableData" name="availableData" type="text" matInput [formControl]="dataControl"
                    placeholder="{{lang.availableDatas}}" [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addData($event)">
                    <mat-option *ngFor="let item of filteredDataOptions | async" [value]="item" class="dataList">
                        <span class="optionContent">
                            <span class="dataIcon">
                                <i color="primary" class="fa {{item.icon}} fa-2x"></i>
                            </span>
                            <span class="dataLabel">
                                {{item.label}}
                            </span>
                        </span>
                    </mat-option>
                </mat-autocomplete>
            </mat-form-field>
        </form>
    </span>
    <span>
        <button color="warn" mat-button (click)="removeAllData()" style="float:right;"
            [disabled]="displayMode=='sample'">
            {{lang.eraseAll}}
        </button>
    </span>
</mat-toolbar>
<mat-card>
    <ng-container *ngIf="(displayedSecondaryData.length > 0 && displayMode=='sample') || displayMode=='label'">
        <mat-toolbar class="secondaryInformations example-list" cdkDropListOrientation="horizontal" cdkDropList
            [cdkDropListData]="displayedSecondaryData" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let item of displayedSecondaryData;let itData=index">
                <span class="example-box" *ngIf="item.value != 'getFolders'" cdkDrag>
                    <button *ngIf="displayMode=='label'" color="primary" mat-icon-button [matMenuTriggerFor]="menu">
                        <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="removeData(item,itData)">
                            <mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas"
                                fontIcon="fa-trash fa-2x"></mat-icon>
                            <span>{{lang.delete}}</span>
                        </button>
                        <mat-divider></mat-divider>
                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('boldFontData') > -1" mat-menu-item
                            (click)="setStyle(item,'boldFontData')">
                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-bold fa-2x">
                            </mat-icon>
                            <span>{{lang.fontBold}}</span>
                        </button>
                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_leftData') > -1" mat-menu-item
                            (click)="setStyle(item,'align_leftData')">
                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-align-left fa-2x">
                            </mat-icon>
                            <span>{{lang.alignLeft}}</span>
                        </button>
                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_centerData') > -1" mat-menu-item
                            (click)="setStyle(item,'align_centerData')">
                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-align-center fa-2x">
                            </mat-icon>
                            <span>{{lang.alignCenter}}</span>
                        </button>
                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_rightData') > -1" mat-menu-item
                            (click)="setStyle(item,'align_rightData')">
                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-align-right fa-2x">
                            </mat-icon>
                            <span>{{lang.alignRight}}</span>
                        </button>
                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('bigFontData') > -1" mat-menu-item
                            (click)="setStyle(item,'bigFontData')">
                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-text-height fa-2x">
                            </mat-icon>
                            <span>{{lang.fontBig}}</span>
                        </button>
                    </mat-menu>
                    <span style="width:100%;" [class]="item.cssClasses.join(' ')">
                        <i class="fa {{item.icon}}"></i>&nbsp;
                        <span class="secondaryInformations_label" [innerHTML]="item[displayMode]"></span>
                    </span>
                </span>
            </ng-container>
        </mat-toolbar>
    </ng-container>
    <div class="resultRow newRow">
        <span class="resultCol" *ngFor="let item of displayedMainData;let i=index" [class]="item.cssClasses.join(' ')">
            <span *ngIf="i == 0">
                <mat-icon *ngIf="displayMode=='label'" color="primary" class="fm fm-letter fm-2x"></mat-icon>
                <mat-icon *ngIf="displayMode=='sample'" color="warn" class="fm fm-letter-status-inprogress fm-2x">
                </mat-icon><br />
                <span class="resultCol_chrono">{{item[displayMode]}}</span>
            </span>
            <span *ngIf="i == 1">
                {{item[displayMode]}}
            </span>
        </span>
        <mat-button-toggle-group class="actions" multiple>
            <button color="primary" mat-icon-button title="{{lang.notes}}" [disabled]="displayMode == 'label'">
                <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas" matBadge="2"
                    fontIcon="fa-comments fa-2x"></mat-icon>
            </button>
            <button color="primary" mat-icon-button title="{{lang.attachments}}" [disabled]="displayMode == 'label'">
                <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas" matBadge="7"
                    fontIcon="fa-paperclip fa-2x"></mat-icon>
            </button>
            <button color="primary" mat-icon-button title="{{lang.diffusionList}}" [disabled]="displayMode == 'label'">
                <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x"></mat-icon>
            </button>
            <button color="primary" mat-icon-button title="{{lang.linkDetails}}" [disabled]="displayMode == 'label'">
                <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
            </button>
        </mat-button-toggle-group>
    </div>
    <div *ngFor="let item of displayedSecondaryData;let itData=index" class="folder-info">
        <ng-container *ngIf="item.value=='getFolders'">
            <button *ngIf="displayMode=='label'" color="primary" mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
            </button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="removeData(item,itData)">
                    <mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas" fontIcon="fa-trash fa-2x">
                    </mat-icon>
                    <span>{{lang.delete}}</span>
                </button>
            </mat-menu>
            <span class="badge badge-folder"><i class="fa fa-folder"></i>
                {{item[displayMode]}}</span>
        </ng-container>
    </div>
</mat-card>
<div class="row">
    <div class="col-md-12 text-center" style="margin-top:30px;">
        <button color="primary" mat-raised-button (click)="saveTemplate()" [disabled]="checkModif()">
            {{lang.validate}}
        </button>
        <button color="default" mat-raised-button (click)="cancelModification()" [disabled]="checkModif()">
            {{lang.cancel}}
        </button>
    </div>
</div>