73 lines
4.0 KiB
HTML
73 lines
4.0 KiB
HTML
<div class="container">
|
|
<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
|
|
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
|
<div class="row">
|
|
<div class="form-group col-md-12">
|
|
<label>Label</label>
|
|
<input type="text" class="form-control" formControlName="label">
|
|
<div *ngIf="form.get('label').invalid && (form.get('label').dirty || form.get('label').touched)">
|
|
<div *ngIf="form.get('label').errors.required" class="alert alert-danger">
|
|
Label is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-group" style="margin-top:10px;">
|
|
<div *ngFor="let section of dataModel.sections; let i=index;" class="panel panel-default">
|
|
<div class="panel-heading clearfix">
|
|
<a *ngIf="form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
|
|
style="padding-top: 7.5px;">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</a>
|
|
<a *ngIf="!form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
|
|
style="padding-top: 7.5px;">{{i + 1}}. Section {{i + 1}}</a>
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
|
|
<span class="glyphicon glyphicon-erase"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="{{'s' + i}}" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"></section-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-group" style="margin-top:10px;">
|
|
<div *ngFor="let page of dataModel.pages; let i=index;" class="panel panel-default">
|
|
<div class="panel-heading clearfix">
|
|
<a *ngIf="form.get('pages').at(i).get('title').value" data-toggle="collapse" href="#{{'p' + i}}" class="panel-title pull-left"
|
|
style="padding-top: 7.5px;">{{i + 1}}.{{form.get('pages').at(i).get('title').value}}</a>
|
|
<a *ngIf="!form.get('pages').at(i).get('title').value" data-toggle="collapse" href="#{{'p' + i}}" class="panel-title pull-left"
|
|
style="padding-top: 7.5px;">{{i + 1}}. Page{{i + 1}}</a>
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeletePage(i);">
|
|
<span class="glyphicon glyphicon-erase"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="{{'p' + i}}" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<page-form [form]="form.get('pages').at(i)" [dataModel]="page"></page-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:20px; padding-left: 15px;" class="row">
|
|
<a (click)="addSection()" style="cursor: pointer">
|
|
Add Section +
|
|
</a>
|
|
</div>
|
|
|
|
<div style="margin-top:20px; padding-left: 15px;" class="row">
|
|
<a (click)="addPage()" style="cursor: pointer">
|
|
Add Page +
|
|
</a>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" style="margin-top:20px;" type="submit" [disabled]="!form.valid">Save</button>
|
|
</form>
|
|
</div>
|
|
</div> |