Skip to content
Snippets Groups Projects
entities-administration.component.html 21.8 KiB
Newer Older
  • Learn to ignore specific revisions
  • <div class="admin-container" [class.admin-is-mobile]="mobileQuery.matches">
        <mat-toolbar color="primary" class="admin-toolbar">
            <button mat-button (click)="snav.toggle()">
                <mat-icon class="maarchLogo" [svgIcon]="mobileQuery.matches ? 'maarchLogoOnly' : 'maarchLogo'"></mat-icon>
            </button>
            <h1 class="admin-toolbar-title">{{lang.administration}} {{lang.entities}}
                <small [class.hide-for-mobile]="mobileQuery.matches">{{entities.length}} {{lang.entities}}</small>
            </h1>
            <span style="flex: 1 1 auto;"></span>
        </mat-toolbar>
        <mat-sidenav-container class="admin-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
            <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
                [opened]="mobileQuery.matches ? false : true">
    
    Alex ORLUC's avatar
     
    Alex ORLUC committed
                <menu-nav></menu-nav>
    
                <mat-divider></mat-divider>
                <mat-nav-list>
    
    Alex ORLUC's avatar
     
    Alex ORLUC committed
                    <h3 mat-subheader>{{lang.actions}}</h3>
    
                    <a mat-list-item (click)="prepareEntityAdd()">
                        <mat-icon color="primary" mat-list-icon class="fa fa-plus"></mat-icon>
                        <p mat-line>
                            {{lang.add}}
                        </p>
                    </a>
                </mat-nav-list>
    
    Alex ORLUC's avatar
     
    Alex ORLUC committed
                <mat-divider></mat-divider>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <mat-nav-list>
                    <h3 mat-subheader>Role(s) disponible(s)</h3>
                    <a mat-list-item *ngFor="let role of currentEntity.roles; let i = index">
                        <mat-icon color="primary" mat-list-icon style="margin-bottom: 20px;">
                            <mat-slide-toggle [(ngModel)]="role.available" [checked]="role.available" color="primary" [ngStyle]="{'opacity': role.available ? '' : '0.5'}" (change)="toggleRole(role)"></mat-slide-toggle>
                        </mat-icon>
                        <p mat-line>
                            {{role.label}}
                        </p>
                    </a>
                </mat-nav-list>
                <mat-divider></mat-divider>
    
    Alex ORLUC's avatar
     
    Alex ORLUC committed
                <menu-app></menu-app>
    
            </mat-sidenav>
            <mat-sidenav-content>
                <div *ngIf="loading" style="display:flex;height:100%;">
                    <mat-spinner style="margin:auto;"></mat-spinner>
                </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <mat-card *ngIf="!loading" class="card-app-content">
    
    
                    <mat-form-field>
                        <input matInput id="jstree_search" name="jstree_search" type="text" placeholder="{{lang.searchEntities}}">
                    </mat-form-field>
                    <div id="jstree"></div>
    
                </mat-card>
            </mat-sidenav-content>
            <mat-sidenav #snav2 [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
    
                position='end' [opened]="false" class="col-md-4 col-xs-11">
    
    
                <mat-nav-list>
                    <mat-tab-group>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.informations}}">
    
                            <form class="form-horizontal" #entityForm="ngForm" style="overflow:hidden;">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <mat-form-field>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            <input matInput [(ngModel)]="currentEntity.parent_entity_id" required name="parent_entity_id" id="parent_entity_id" title="{{lang.isLinkedTo}}" type="text"
                                                placeholder="{{lang.isLinkedTo}}" maxlength="32" disabled>
                                        </mat-form-field>
                                        <mat-form-field>
                                            <mat-select id="entity_type" name="entity_type" title="{{lang.entityType}}" placeholder="{{lang.entityType}}" [(ngModel)]="currentEntity.entity_type" maxlength="32"
    
                                                required>
                                                <mat-option *ngFor="let entity_type of entityTypeList" [value]="entity_type.id">
    
                                                    {{entity_type.label}}
                                                </mat-option>
                                            </mat-select>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <mat-form-field>
                                            <input matInput [(ngModel)]="currentEntity.entity_id" required name="entity_id" id="entity_id" title="{{lang.id}}" type="text"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                placeholder="{{lang.id}}" [disabled]="!creationMode" maxlength="32" pattern="^[\w.-]*$">
    
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <mat-form-field>
                                            <input matInput [(ngModel)]="currentEntity.entity_label" required name="entity_label" id="entity_label" title="{{lang.label}}"
                                                type="text" placeholder="{{lang.label}}" maxlength="255">
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <mat-form-field>
                                            <input matInput [(ngModel)]="currentEntity.short_label" required name="short_label" id="short_label" title="{{lang.shortLabel}}"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                type="text" placeholder="{{lang.shortLabel}}" maxlength="50">
    
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <mat-form-field>
                                            <input matInput [(ngModel)]="currentEntity.email" name="email" id="email" title="{{lang.email}}" type="text" placeholder="{{lang.email}}"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                maxlength="255" pattern="[^@\s]+@[^@\s]+">
    
                                        </mat-form-field>
                                    </div>
                                </div>
    
                                <mat-accordion>
                                    <mat-expansion-panel>
                                        <mat-expansion-panel-header>
                                            <mat-panel-title>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                {{lang.otherInformations}}
    
                                            </mat-panel-title>
                                        </mat-expansion-panel-header>
                                        <div class="form-group">
                                            <div class="col-sm-4">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.adrs_1" name="adrs_1" id="adrs_1" title="{{lang.address}}1" type="text" placeholder="{{lang.address}}1"
                                                        maxlength="255">
                                                </mat-form-field>
    
                                            </div>
                                            <div class="col-sm-4">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.adrs_2" name="adrs_2" id="adrs_2" title="{{lang.address}}2" type="text" placeholder="{{lang.address}}2"
                                                        maxlength="255">
                                                </mat-form-field>
                                            </div>
                                            <div class="col-sm-4">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.adrs_3" name="adrs_3" id="adrs_3" title="{{lang.address}}3" type="text" placeholder="{{lang.address}}3"
                                                        maxlength="255">
                                                </mat-form-field>
                                            </div>
                                        </div>
                                        <div class="form-group">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            <div class="col-sm-4">
    
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.zipcode" name="zipcode" id="zipcode" title="{{lang.zipcode}}" type="text" placeholder="{{lang.zipcode}}"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                        maxlength="32">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            <div class="col-sm-4">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.city" name="city" id="city" title="{{lang.city}}" type="text" placeholder="{{lang.city}}" maxlength="255">
                                                </mat-form-field>
                                            </div>
                                            <div class="col-sm-4">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                    <input matInput [(ngModel)]="currentEntity.country" name="country" id="country" title="{{lang.country}}" type="text" placeholder="{{lang.country}}" maxlength="255">
    
                                                </mat-form-field>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <mat-form-field>
    
                                                    <textarea matInput [(ngModel)]="currentEntity.entity_full_name" name="entity_full_name" id="entity_full_name" placeholder="{{lang.entityFullName}}"
                                                        title="{{lang.entityFullName}}" matTextareaAutosize matAutosizeMinRows="1"
                                                        matAutosizeMaxRows="5"></textarea>
    
                                                </mat-form-field>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.business_id" name="business_id" id="business_id" title="{{lang.siretCode}}" type="text"
                                                        placeholder="{{lang.siretCode}}" maxlength="255">
                                                </mat-form-field>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-6">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.archival_agency" name="archival_agency" id="archival_agency" title="{{lang.archivalAgency}}"
                                                        type="text" placeholder="{{lang.archivalAgency}}" maxlength="255">
                                                </mat-form-field>
                                            </div>
                                            <div class="col-sm-6">
                                                <mat-form-field>
                                                    <input matInput [(ngModel)]="currentEntity.archival_agreement" name="archival_agreement" id="archival_agreement" title="{{lang.archivalAgreement}}"
                                                        type="text" placeholder="{{lang.archivalAgreement}}" maxlength="255">
                                                </mat-form-field>
                                            </div>
                                        </div>
                                    </mat-expansion-panel>
                                </mat-accordion>
    
                                <div class="form-group">
                                    <div class="col-md-12 text-center" style="padding:10px;">
                                        <button mat-raised-button [disabled]="!entityForm.form.valid" color="primary" (click)="saveEntity()">{{lang.save}}</button>
    
                                        <button mat-raised-button *ngIf="!creationMode" [disabled]="!entityForm.form.valid || this.currentEntity.hasChildren" color="warn"
                                            (click)="removeEntity()">{{lang.delete}}</button>
    
                                        <button mat-raised-button *ngIf="creationMode" color="default" (click)="readMode()">{{lang.cancel}}</button>
                                    </div>
                                </div>
                            </form>
                        </mat-tab>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.diffusionList}}" *ngIf="!creationMode">
    
                            <div class="row" style="margin:0px;">
                                <div class="col-md-12">
                                    <mat-form-field>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                        <input #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)="addElemListModel(elem)">
                                                <p mat-line>
    
                                                    <span class="col-sm-1">
    
                                                        <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-sm-11">
                                                        {{ elem.idToDisplay }}
                                                        <small>{{ elem.otherInfo }}</small>
                                                    </span>
    
                                                </p>
                                            </mat-option>
                                        </mat-autocomplete>
                                    </mat-form-field>
                                    <mat-list>
    
                                        <span *ngFor="let role of currentEntity.roles; let i = index">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            <h3 *ngIf="role.available" mat-subheader style="font-weight:bold;" color="primary">{{role.label}}</h3>
    
                                            <span *ngIf="role.available" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="currentEntity.listTemplate[role.id]">
                                                <div style="min-height:30px;">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                    <mat-list-item disableRipple="true" *ngFor="let template of currentEntity.listTemplate[role.id]; let i = index" title="{{lang.move}}"
    
                                                        dnd-sortable (onDropSuccess)="updateDiffList(template,role.id)" [sortableIndex]="i"
    
                                                        [dragEnabled]="role.id != 'dest' && template.item_type != 'entity_id'">
                                                        <mat-icon color="primary" mat-list-icon [class]="template.item_type == 'entity_id' ? 'fa fa-sitemap' : 'fa fa-user'"></mat-icon>
    
                                                        <p mat-line>{{template.labelToDisplay}}
                                                            <small style="opacity:0.5;">{{template.descriptionToDisplay}}</small>
                                                        </p>
    
                                                        <button *ngIf="role.id != 'dest'" matTooltip="{{lang.delete}}" mat-icon-button color="warn" (click)="removeDiffList(i,role.id)">
    
                                                            <mat-icon class="fa fa-remove"></mat-icon>
                                                        </button>
                                                    </mat-list-item>
                                                </div>
    
                                            </span>
                                        </span>
                                    </mat-list>
                                </div>
                            </div>
                        </mat-tab>
    
                        <mat-tab label="{{lang.visa}}" *ngIf="!creationMode">
    
                            <div class="row" style="margin:0px;">
                                <div class="col-md-12">
                                    <mat-form-field>
    
                                        <input #autocompleteFilter type="text" placeholder="{{lang.addVisaSignUser}}" matInput [matAutocomplete]="auto" [formControl]="userCtrl">
    
                                        <mat-autocomplete #auto="matAutocomplete">
    
                                            <mat-option *ngFor="let elem of filteredUsers | async" [value]="elem.id" (click)="addElemListModelVisa(elem)">
                                                <p mat-line *ngIf="elem.type == 'user'">
                                                    <span class="col-xm-1">
    
                                                        <mat-icon color="primary" class="fa fa-user fa-2x" style="margin-right:0px;"></mat-icon>
    
                                                    </span>
                                                    <span class="col-xm-11">
                                                        {{ elem.idToDisplay }}
                                                        <small>{{ elem.otherInfo }}</small>
                                                    </span>
    
                                                </p>
                                            </mat-option>
                                        </mat-autocomplete>
                                    </mat-form-field>
                                    <mat-list>
                                        <span dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="currentEntity.visaTemplate">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            <mat-list-item disableRipple="true" *ngFor="let template of currentEntity.visaTemplate; let i = index" title="{{lang.move}}" dnd-sortable
    
                                                [sortableIndex]="i" (onDropSuccess)="updateDiffListVisa(template)">
    
                                                <mat-icon color="primary" [class]="template.item_mode == 'visa' ? 'fa fa-user' : 'fa fa-certificate'" mat-list-icon></mat-icon>
    
                                                <p mat-line>{{template.idToDisplay}}
    
                                                    <small style="opacity:0.5;">{{template.descriptionToDisplay}}</small>
                                                </p>
    
                                                <button matTooltip="{{lang.delete}}" mat-icon-button color="warn" (click)="removeDiffListVisa(template,i)">
    
                                                    <mat-icon class="fa fa-remove"></mat-icon>
                                                </button>
    
                                            </mat-list-item>
                                        </span>
                                    </mat-list>
                                </div>
                            </div>
                        </mat-tab>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.relatedUsers}}" *ngIf="!creationMode">
    
                            <div class="row" style="margin:0px;">
                                <div class="col-md-6 col-xs-6">
                                    <mat-form-field>
                                        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{lang.filterBy}}">
                                    </mat-form-field>
                                </div>
                                <div class="col-md-6 col-xs-6">
                                    <mat-paginator #paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]">
                                    </mat-paginator>
                                </div>
                            </div>
                            <mat-table #table [dataSource]="dataSource" matSort matSortActive="lastname" matSortDirection="asc">
                                <ng-container matColumnDef="firstname">
                                    <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.firstname}}</mat-header-cell>
                                    <mat-cell *matCellDef="let element"> {{element.firstname}} </mat-cell>
                                </ng-container>
                                <ng-container matColumnDef="lastname">
                                    <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.lastname}}</mat-header-cell>
                                    <mat-cell *matCellDef="let element"> {{element.lastname}} </mat-cell>
                                </ng-container>
                                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                                <mat-row *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/users/{{row.id}}" matTooltip="{{lang.view}}"
                                    style="cursor:pointer;"></mat-row>
                            </mat-table>
                        </mat-tab>
    
                    </mat-tab-group>
                </mat-nav-list>
            </mat-sidenav>
        </mat-sidenav-container>
    </div>