Newer
Older
<mat-sidenav-container autosize class="maarch-container">
<mat-sidenav-content>
<div class="bg-head">
<div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
<div class="bg-head-title-label">
Alex ORLUC
committed
<header-left></header-left>
</div>
<div class="bg-head-title-tool">
<header-right></header-right>
</div>
<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>
</div>
<mat-card *ngIf="!loading" class="card-app-content">
<mat-tab-group>
<mat-tab [label]="lang.usableFields">
<div class="alert-message alert-message-info" role="alert" *ngIf="customFields.length === 0"
[innerHTML]="lang.noCustomFieldInfo">
</div>
<mat-accordion>
<mat-expansion-panel *ngFor="let custom of customFields;index as indexCustom">
<mat-expansion-panel-header>
<mat-panel-title color="primary">
{{custom.label}}
</mat-panel-title>
<mat-panel-description>
{{lang[custom.type + 'Input']}}
</mat-panel-description>
</mat-expansion-panel-header>
<div class="col-md-12">
<mat-form-field>
<input matInput name="id" [(ngModel)]="custom.id" disabled
[placeholder]="lang.technicalId" [value]="custom.id">
</mat-form-field>
<mat-form-field>
<input matInput name="label" [(ngModel)]="custom.label"
[placeholder]="lang.label" [value]="custom.label">
</mat-form-field>
</div>
<div class="col-md-12" style="display: flex;align-items: center;">
<div>
<button *ngIf="!custom.SQLMode && 'banAutocomplete' !== custom.type"
mat-mini-fab color="primary" (click)="switchSQLMode(custom)">
<mat-icon class="fas fa-database" style="height: auto;"></mat-icon>
</button>
</div>
<div style="flex:1;"
*ngIf="['select', 'radio', 'checkbox'].indexOf(custom.type) > -1">
<mat-expansion-panel *ngIf="!custom.SQLMode" class="customFieldValues"
<mat-expansion-panel-header>
<mat-panel-title [matBadge]="custom.values.length"
matBadgeSize="small">
{{lang.valuesList}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="actionValuesCustom">
<div style="flex: 1;">
<button mat-raised-button color="primary"
(click)="addValue(indexCustom)">
{{lang.addValue}}</button>
</div>
<div>
<button mat-mini-fab color="default"
*ngIf="custom.values.length > 0"
(click)="sortValues(custom)" [title]="lang.orderValues">
<mat-icon color="primary" class="fas fa-sort-alpha-down"
style="height:auto;"></mat-icon>
</button>
</div>
</div>
<div class="col-md-12">
<mat-form-field *ngFor="let value of custom.values;let i=index;"
floatLabel="never">
<input matInput [(ngModel)]="value.label"
[placeholder]="this.lang.newValue">
<button color="warn" mat-icon-button matSuffix
[title]="lang.delete" (click)="removeValue(custom, i)">
<mat-icon class="fa fa-trash"></mat-icon>
</button>
</mat-form-field>
</div>
</mat-expansion-panel>
</div>
</div>
<div *ngIf="custom.SQLMode" class="col-md-12"
style="display: flex;align-items: center;">
<div>
<button mat-mini-fab color="primary" (click)="switchSQLMode(custom)">
<mat-icon class="fas fa-list-ol" style="height: auto;"></mat-icon>
</button>
</div>
<div style="flex:1;">
<mat-expansion-panel *ngIf="custom.SQLMode" class="customFieldValues"
<mat-expansion-panel-header>
<mat-panel-title>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="col-md-12">
<div style="display: flex;flex-direction: column;">
<mat-label>{{lang.targetTable}}</mat-label>
<mat-select [(ngModel)]="custom.values.table" required>
<mat-option *ngFor="let table of availaibleTables | keyvalue"
[value]="table.key">
{{table.key}}
<ng-container *ngIf="!functionsService.empty(lang[table.key])">
({{lang[table.key]}})
</ng-container>
</mat-option>
</mat-select>
</mat-form-field>
<div style="width:100%;padding-bottom: 20px;" *ngIf="['string', 'integer', 'date'].indexOf(custom.type) === -1 && custom.values.table">
<mat-label
style="font-size: 75%;color: rgba(0,0,0,0.54);width: 100%;display: block;">
{{lang.targetLabel}} *</mat-label>
<span *ngFor="let item of custom.values.label;let i=index">
<input style="min-width: 8px;"
[style.width.px]="(item.delimiterStart.length + 1) * 8"
[(ngModel)]="item.delimiterStart" />
<mat-chip (removed)="removeColumnLabel(custom.values.label, i)">
{{item.column}}
<mat-icon matChipRemove class="fa fa-times-circle">
</mat-icon>
</mat-chip>
<input style="min-width: 8px;"
[style.width.px]="(item.delimiterEnd.length + 1) * 8"
[(ngModel)]="item.delimiterEnd" />
</span>
<button mat-button [matMenuTriggerFor]="menu" color="primary">
<i class="fa fa-plus-circle"></i> {{lang.addColumn}}
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item
*ngFor="let column of availaibleTables[custom.values.table]" (click)="addColumnLabel(custom.values.label, column)">{{column}}</button>
</mat-menu>
</div>
<mat-form-field *ngIf="custom.values.table">
<mat-label>{{lang.targetIdentifier}}</mat-label>
<mat-select [(ngModel)]="custom.values.key" required>
<mat-option *ngFor="let column of availaibleTables[custom.values.table]"
[value]="column">
{{column}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-form-field>
<mat-label>{{lang.clause}}</mat-label>
<textarea matInput [(ngModel)]="custom.values.clause"
placeholder="Ex. status='OK'" required></textarea>
</mat-expansion-panel>
</div>
</div>
<div class="col-md-12 text-center">
<button mat-raised-button color="primary"
(click)="updateCustomField(custom,indexCustom)"
[disabled]="isModified(custom,indexCustom) || !isValidField(custom)">{{lang.update}}</button>
<button mat-raised-button color="warn"
(click)="removeCustomField(indexCustom)">{{lang.delete}}</button>
</div>
</mat-expansion-panel>
</mat-accordion>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
</div>
</mat-sidenav-content>
<mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()"
fixedTopGap="56" position='end' opened class="col-md-4 col-sm-12 customFielsdPanel">
<mat-tab-group>
<mat-tab [label]="lang.customFieldsTypesAvailable">
<div class="customFieldsTypesItem" *ngFor="let customField of customFieldsTypes">
<div class="addCustomFieldTypeContainer">
<button mat-icon-button color="primary" (click)="addCustomField(customField)"
[title]="lang.add">
<mat-icon class="fas fa-plus-circle fa-2x"></mat-icon>
</button>
</div>
<div style="flex:1;">
<div style="color: rgba(0,0,0,0.54);">{{customField.label}} :</div>
<ng-container *ngIf="customField.type === 'string' || customField.type === 'banAutocomplete'">
<mat-form-field class="input-form" floatLabel="never">
<textarea matInput [placeholder]="lang[customField.type + 'Input']" matTextareaAutosize
matAutosizeMinRows="1" cdkAutosizeMaxRows="6" disabled></textarea>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'integer'">
<mat-form-field class="input-form" floatLabel="never">
<input type="number" matInput [placeholder]="lang[customField.type + 'Input']" disabled>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'select'">
<mat-form-field class="input-form" floatLabel="never">
<mat-select [placeholder]="lang[customField.type + 'Input']" disabled>
<mat-option *ngFor="let sample of sampleIncrement" [value]="sample">
{{lang.choice}} {{sample}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'date'">
<mat-form-field class="input-form" floatLabel="never">
<input matInput [matDatepicker]="picker"
[placeholder]="lang[customField.type + 'Input']" (click)="picker.open()" disabled>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'radio'">
<mat-radio-group class="radio-form" color="primary" disabled>
<mat-radio-button *ngFor="let sample of sampleIncrement" [value]="sample">
{{lang.choice}} {{sample}}
</mat-radio-button>
</mat-radio-group>
</ng-container>
<ng-container *ngIf="customField.type === 'checkbox'">
<div class="input-form checkbox-form">
<mat-selection-list #sampleList class="div-list" disabled>
<mat-list-option *ngFor="let sample of sampleIncrement" [value]="sample"
checkboxPosition="before">
{{lang.choice}} {{sample}}
</mat-list-option>
</mat-selection-list>
</div>
<mat-chip-list class="checkbox-selected-list">
<mat-chip *ngFor="let chip of sampleList.selectedOptions.selected">
{{lang.selectedValue}}
</mat-chip>
</mat-chip-list>
</ng-container>
</div>
</mat-tab>
</mat-tab-group>
</mat-sidenav>
</mat-sidenav-container>