Skip to content
Snippets Groups Projects
contacts-groups-administration.component.html 6.76 KiB
Newer Older
  • Learn to ignore specific revisions
  • Alex ORLUC's avatar
    Alex ORLUC committed
    <mat-sidenav-container autosize class="maarch-container">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            <mat-nav-list>
                <h3 mat-subheader>{{lang.actions}}</h3>
                <a mat-list-item routerLink="/administration/contacts/contacts-groups/new">
                    <mat-icon color="primary" mat-list-icon class="fa fa-plus"></mat-icon>
                    <p mat-line>
                        {{lang.add}}
                    </p>
                </a>
            </mat-nav-list>
            <mat-divider></mat-divider>
            <mat-nav-list>
                <a mat-list-item *ngFor="let menu of subMenus" [class.active]="menu.current" [routerLink]="menu.route">
                    <mat-icon color="primary" mat-list-icon [class]="menu.icon"></mat-icon>
                    <p mat-line>
                        {{menu.label}}
                    </p>
                </a>
            </mat-nav-list>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        <mat-sidenav-content>
            <div class="bg-head">
                <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                    <div class="bg-head-title-label">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    </div>
                    <div class="bg-head-title-tool">
                        <header-right></header-right>
                    </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
                </div>
            </div>
            <div class="container" [class.fullContainer]="appService.getViewMode()">
                <div class="container-content">
                    <div *ngIf="loading" style="display:flex;height:100%;">
                        <mat-spinner style="margin:auto;"></mat-spinner>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    <mat-card *ngIf="!loading" class="card-app-content">
                        <div class="row">
                            <div class="col-md-6 col-xs-6">
                                <mat-form-field>
    
                                    <input matInput [formControl]="adminService.getFilterField()" placeholder="{{lang.filterBy}}">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                </mat-form-field>
                            </div>
                            <div class="col-md-6 col-xs-6">
                                <mat-paginator #paginator [length]="100" [hidePageSize]="true" [pageSize]="10">
                                </mat-paginator>
                            </div>
                        </div>
    
                        <mat-table #table [dataSource]="adminService.getDataSource()" [matSortActive]="adminService.getFilter('sort')" [matSortDirection]="adminService.getFilter('sortDirection')" matSort>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                            <ng-container matColumnDef="label">
                                <mat-header-cell *matHeaderCellDef mat-sort-header
                                    [class.hide-for-mobile]="appService.getViewMode()" style="flex:2;">{{lang.label}}
                                </mat-header-cell>
                                <mat-cell *matCellDef="let element" [class.hide-for-mobile]="appService.getViewMode()"
                                    style="flex:2;">{{element.label}}</mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="description">
                                <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:2;">{{lang.description}}
                                </mat-header-cell>
                                <mat-cell *matCellDef="let element" style="flex:2;"> {{element.description}} </mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="nbContacts">
                                <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:1;">
                                    {{lang.relatedContactNumber}}
                                </mat-header-cell>
                                <mat-cell *matCellDef="let element" style="flex:1;">
                                    <span *ngIf="element.nbContacts == 0">{{element.nbContacts}}</span>
                                    <span *ngIf="element.nbContacts > 0" color="primary"
                                        style="font-weight:bold;">{{element.nbContacts}}</span>
                                </mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="public">
                                <mat-header-cell *matHeaderCellDef mat-sort-header
                                    [class.hide-for-mobile]="appService.getViewMode()" style="flex:1;">{{lang.public}}
                                </mat-header-cell>
                                <mat-cell *matCellDef="let element" [class.hide-for-mobile]="appService.getViewMode()"
                                    style="flex:1;">
                                    <span *ngIf="!element.public"> {{lang.no}} </span>
                                    <span *ngIf="element.public"> {{lang.yes}} </span>
                                </mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="owner">
                                <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:1;">{{lang.createdBy}}
                                </mat-header-cell>
                                <mat-cell *matCellDef="let element" style="flex:1;"> {{element.labelledOwner}} </mat-cell>
                            </ng-container>
                            <ng-container matColumnDef="actions">
                                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                                <mat-cell *matCellDef="let element" style="justify-content: flex-end;">
                                    <button mat-icon-button color="warn" matTooltip="{{lang.delete}}"
                                        (click)="$event.stopPropagation();deleteContactsGroup(element.position)">
                                        <mat-icon class="fa fa-trash-alt fa-2x" aria-hidden="true"></mat-icon>
                                    </button>
                                </mat-cell>
                            </ng-container>
                            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                            <mat-row *matRowDef="let row; columns: displayedColumns;"
                                routerLink="/administration/contacts/contacts-groups/{{row.id}}" style="cursor:pointer;"
                                matTooltip="{{lang.view}}"></mat-row>
                        </mat-table>
                        <div class="mat-paginator"
                            style="min-height:48px;min-height: 48px;display: flex;justify-content: end;align-items: center;padding-right: 20px;">
    
                            {{contactsGroups.length}} {{lang.contactsGroupsAlt}}</div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    </mat-card>
                </div>
            </div>
        </mat-sidenav-content>
        <mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            position='end'>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
        </mat-sidenav>
    
    </mat-sidenav-container>