mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
10 changed files with 277 additions and 7 deletions
@ -0,0 +1,65 @@ |
|||
<form [formGroup]="editForm.form" (ngSubmit)="saveSchema()"> |
|||
<sqx-modal-dialog (closed)="complete()" large="true"> |
|||
<ng-container title> |
|||
Preview Urls |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<h3 class="wizard-title">Preview Urls define where the content is used</h3> |
|||
|
|||
<div class="content"> |
|||
<div class="form-group row no-gutters" *ngFor="let form of editForm.form.controls; let i = index"> |
|||
<div class="col pr-1"> |
|||
<sqx-control-errors [for]="form.get('name')" fieldName="Name" [submitted]="editForm.submitted | async"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="Name, e.g. Web, Mobile" /> |
|||
</div> |
|||
|
|||
<div class="col pr-1"> |
|||
<sqx-control-errors [for]="form.get('url')" fieldName="Url" [submitted]="editForm.submitted | async"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" maxlength="1000" [formControl]="form.get('url')" placeholder="Url" /> |
|||
</div> |
|||
|
|||
<div class="col-auto col-options"> |
|||
<button type="button" class="btn btn-link btn-delete btn-danger" |
|||
(sqxConfirmClick)="editForm.remove(i)" |
|||
confirmTitle="Remove url" |
|||
confirmText="Do you really want to remove this url?"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group row no-gutters" [formGroup]="addForm.form"> |
|||
<div class="col pr-1"> |
|||
<sqx-control-errors for="name" fieldName="Name" [submitted]="addForm.submitted | async"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" maxlength="1000" formControlName="name" placeholder="Name, e.g. Web, Mobile" /> |
|||
</div> |
|||
|
|||
<div class="col pr-1"> |
|||
<sqx-control-errors for="url" fieldName="Url" [submitted]="addForm.submitted | async"></sqx-control-errors> |
|||
|
|||
<input type="text" class="form-control" maxlength="1000" formControlName="url" placeholder="Url" /> |
|||
</div> |
|||
|
|||
<div class="col-auto col-options"> |
|||
<button type="button" class="btn btn-success" (click)="add()"> |
|||
<i class="icon-add"></i> |
|||
</button> |
|||
|
|||
<button type="button" class="btn btn-link btn-secondary" (click)="cancelAdd()"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container footer> |
|||
<button type="reset" class="float-left btn btn-secondary" (click)="complete()" [disabled]="editForm.submitted | async">Cancel</button> |
|||
<button type="submit" class="float-right btn btn-primary">Save</button> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
</form> |
|||
@ -0,0 +1,23 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.content { |
|||
min-height: 200px; |
|||
} |
|||
|
|||
.col-options { |
|||
min-width: 6rem; |
|||
} |
|||
|
|||
.btn-delete { |
|||
margin-left: 42px; |
|||
} |
|||
|
|||
.wizard-title { |
|||
background: $color-border; |
|||
margin: -1rem; |
|||
margin-bottom: 1rem; |
|||
font-weight: 400; |
|||
font-size: 1.05rem; |
|||
padding: 1rem; |
|||
} |
|||
@ -0,0 +1,74 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
|||
import { FormBuilder } from '@angular/forms'; |
|||
|
|||
import { |
|||
AddPreviewUrlForm, |
|||
ConfigurePreviewUrlsForm, |
|||
SchemaDetailsDto, |
|||
SchemasState |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-schema-preview-urls-form', |
|||
styleUrls: ['./schema-preview-urls-form.component.scss'], |
|||
templateUrl: './schema-preview-urls-form.component.html' |
|||
}) |
|||
export class SchemaPreviewUrlsFormComponent implements OnInit { |
|||
@Output() |
|||
public completed = new EventEmitter(); |
|||
|
|||
@Input() |
|||
public schema: SchemaDetailsDto; |
|||
|
|||
public addForm = new AddPreviewUrlForm(this.formBuilder); |
|||
|
|||
public editForm = new ConfigurePreviewUrlsForm(this.formBuilder); |
|||
|
|||
constructor( |
|||
private readonly formBuilder: FormBuilder, |
|||
private readonly schemasState: SchemasState |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.editForm.load(this.schema.previewUrls); |
|||
} |
|||
|
|||
public complete() { |
|||
this.completed.emit(); |
|||
} |
|||
|
|||
public cancelAdd() { |
|||
this.addForm.submitCompleted({}); |
|||
} |
|||
|
|||
public add() { |
|||
const value = this.addForm.submit(); |
|||
|
|||
if (value) { |
|||
this.editForm.add(value); |
|||
|
|||
this.addForm.submitCompleted({}); |
|||
} |
|||
} |
|||
|
|||
public saveSchema() { |
|||
const value = this.editForm.submit(); |
|||
|
|||
if (value) { |
|||
this.schemasState.configurePreviewUrls(this.schema, value) |
|||
.subscribe(() => { |
|||
this.complete(); |
|||
}, error => { |
|||
this.editForm.submitFailed(error); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue