path-framework-weberm16
Version:
Path Application Framework
99 lines • 4.71 kB
HTML
<div [ngClass]="form.borderStyle == 2 ? 'modal-content' : ''">
<form (ngSubmit)="onSubmit()" #pathForm="ngForm" autocomplete="off" ngNativeValidate>
<div *ngIf="form.headerVisible" class="modal-header">
<button type="button" class="close" data-dismiss="modal" (click)="form.close(false)">×</button>
<h5 class="modal-title">{{form.title}}</h5>
</div>
<div class="modal-body">
<div *ngFor='let row of form.rows;' class="row" [hidden]="!row.isVisible()">
<div *ngFor='let field of row.fields;' [hidden]="!field.visible">
<div *ngIf="field.type == 'text'">
<path-textfield [field]="field"></path-textfield>
</div>
<div *ngIf="field.type == 'translation'">
<path-translationfield [field]="field"></path-translationfield>
</div>
<div *ngIf="field.type == 'number'">
<path-numberfield [field]="field"></path-numberfield>
</div>
<div *ngIf="field.type == 'label'">
<path-label-field [field]="field"></path-label-field>
</div>
<div *ngIf="field.type == 'fieldList'">
<path-field-list [field]="field"></path-field-list>
</div>
<div *ngIf="field.type == 'date'">
<path-datefield [field]="field"></path-datefield>
</div>
<div *ngIf="field.type == 'autocomplete'">
<path-autocomplete [field]="field"></path-autocomplete>
</div>
<div *ngIf="field.type == 'ProgressBarField'">
<path-progress-bar [field]="field"></path-progress-bar>
</div>
<div *ngIf="field.type == 'RadioGroupField'">
<path-radio-group [field]="field"></path-radio-group>
</div>
<div *ngIf="field.type == 'CheckboxGroupField'">
<path-checkbox-group [field]="field"></path-checkbox-group>
</div>
</div>
</div>
<!--Auf mobiler Version werden die Buttons im Modal-Body angezeigt, da ansonsten der Modal-Footer zu viel
Platz einnimmt, wenn die Tastatur geöffnet ist-->
<div [hidden]="!form.footerVisible" class="hide-on-desktop">
<div class="row">
<div class="col-md-12">
<div class="col-md-2 buttons-smartphone-left">
<span *ngFor='let field of form.fields' class="pull-left" [hidden]="!field.visible">
<span *ngIf="field.type == 'deleteButton'">
<input [disabled]="field.isReadonly()" type="button" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
<span *ngIf="field.type == 'previousButton'">
<input [disabled]="field.isReadonly()" type="button" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
</span>
</div>
<div class="col-md-10 buttons-smartphone-right">
<span *ngFor='let field of form.fields' [hidden]="!field.visible">
<span *ngIf="field.type == 'okButton'">
<input [disabled]="field.isReadonly()" type="submit" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
<span *ngIf="field.type == 'cancelButton'">
<input [disabled]="field.isReadonly()" type="button" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Auf der Desktop-Version wird der Modal-Footer normal angezeigt -->
<div class="hide-on-mobile">
<div [hidden]="!form.footerVisible" class="modal-footer">
<div class="row">
<div class="col-md-2">
<span *ngFor='let field of form.fields' class="pull-left" [hidden]="!field.visible">
<span *ngIf="field.type == 'deleteButton'">
<input [disabled]="field.isReadonly()" type="button" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
<span *ngIf="field.type == 'previousButton'">
<input [disabled]="field.isReadonly()" type="button" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
</span>
</div>
<div class="col-md-10">
<span *ngFor='let field of form.fields' [hidden]="!field.visible">
<span *ngIf="field.type == 'okButton'">
<input [disabled]="field.isReadonly()" type="submit" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
<span *ngIf="field.type == 'cancelButton'">
<input [disabled]="field.isReadonly()" type="button" class="btn btn-default btn-footer" (click)="field.onClick()" value="{{field.name}}"/>
</span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>