mirror of https://github.com/Squidex/squidex.git
24 changed files with 338 additions and 76 deletions
@ -0,0 +1,31 @@ |
|||||
|
<form [formGroup]="editForm" (ngSubmit)="saveSchema()"> |
||||
|
<div class="modal-header"> |
||||
|
<h4 class="modal-title">Scripts</h4> |
||||
|
|
||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="cancel()"> |
||||
|
<span aria-hidden="true">×</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
<ul class="nav nav-tabs"> |
||||
|
<li class="nav-item" *ngFor="let script of scripts"> |
||||
|
<a class="nav-link" [class.active]="selectedField === 'script' + script" (click)="selectField('script' + script)">{{script}}</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<div *ngFor="let script of scripts"> |
||||
|
<div *ngIf="selectedField === 'script' + script"> |
||||
|
<sqx-jscript-editor name="script" [formControlName]="'script' + script"></sqx-jscript-editor> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
<button type="reset" class="float-left btn btn-secondary" (click)="cancel()" [disabled]="editFormSubmitted">Cancel</button> |
||||
|
<button type="submit" class="float-right btn btn-primary">Save</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
|
||||
@ -0,0 +1,10 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.nav-link { |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.nav-tabs { |
||||
|
border: 0; |
||||
|
} |
||||
@ -0,0 +1,118 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { FormBuilder } from '@angular/forms'; |
||||
|
|
||||
|
import { |
||||
|
ComponentBase, |
||||
|
DialogService, |
||||
|
SchemaDetailsDto, |
||||
|
SchemasService, |
||||
|
UpdateSchemaScriptsDto |
||||
|
} from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-schema-scripts-form', |
||||
|
styleUrls: ['./schema-scripts-form.component.scss'], |
||||
|
templateUrl: './schema-scripts-form.component.html' |
||||
|
}) |
||||
|
export class SchemaScriptsFormComponent extends ComponentBase implements OnInit { |
||||
|
@Output() |
||||
|
public saved = new EventEmitter<UpdateSchemaScriptsDto>(); |
||||
|
|
||||
|
@Output() |
||||
|
public cancelled = new EventEmitter(); |
||||
|
|
||||
|
@Input() |
||||
|
public schema: SchemaDetailsDto; |
||||
|
|
||||
|
@Input() |
||||
|
public appName: string; |
||||
|
|
||||
|
public selectedField = 'scriptQuery'; |
||||
|
|
||||
|
public scripts = [ |
||||
|
'Query', |
||||
|
'Create', |
||||
|
'Update', |
||||
|
'Delete', |
||||
|
'Publish', |
||||
|
'Unpublish' |
||||
|
]; |
||||
|
|
||||
|
public editForm = |
||||
|
this.formBuilder.group({ |
||||
|
scriptQuery: '', |
||||
|
scriptCreate: '', |
||||
|
scriptUpdate: '', |
||||
|
scriptDelete: '', |
||||
|
scriptPublish: '', |
||||
|
scriptUnpublish: '' |
||||
|
}); |
||||
|
|
||||
|
constructor(dialogs: DialogService, |
||||
|
private readonly schemas: SchemasService, |
||||
|
private readonly formBuilder: FormBuilder |
||||
|
) { |
||||
|
super(dialogs); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.editForm.patchValue(this.schema); |
||||
|
} |
||||
|
|
||||
|
public cancel() { |
||||
|
this.emitCancelled(); |
||||
|
this.resetEditForm(); |
||||
|
} |
||||
|
|
||||
|
public saveSchema() { |
||||
|
if (this.editForm.valid) { |
||||
|
this.editForm.disable(); |
||||
|
|
||||
|
const requestDto = |
||||
|
new UpdateSchemaScriptsDto( |
||||
|
this.editForm.controls['scriptQuery'].value, |
||||
|
this.editForm.controls['scriptCreate'].value, |
||||
|
this.editForm.controls['scriptUpdate'].value, |
||||
|
this.editForm.controls['scriptDelete'].value, |
||||
|
this.editForm.controls['scriptPublish'].value, |
||||
|
this.editForm.controls['scriptUnpublish'].value); |
||||
|
|
||||
|
this.schemas.putSchemaScripts(this.appName, this.schema.name, requestDto, this.schema.version) |
||||
|
.subscribe(dto => { |
||||
|
this.emitSaved(requestDto); |
||||
|
this.resetEditForm(); |
||||
|
}, error => { |
||||
|
this.notifyError(error); |
||||
|
this.enableEditForm(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private emitCancelled() { |
||||
|
this.cancelled.emit(); |
||||
|
} |
||||
|
|
||||
|
private emitSaved(requestDto: UpdateSchemaScriptsDto) { |
||||
|
this.saved.emit(requestDto); |
||||
|
} |
||||
|
|
||||
|
public selectField(field: string) { |
||||
|
this.selectedField = field; |
||||
|
} |
||||
|
|
||||
|
private enableEditForm() { |
||||
|
this.editForm.enable(); |
||||
|
} |
||||
|
|
||||
|
private resetEditForm() { |
||||
|
this.editForm.reset(); |
||||
|
this.editForm.enable(); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue