mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
44 changed files with 1081 additions and 634 deletions
@ -0,0 +1,44 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
|
||||
|
import { allParams } from 'framework'; |
||||
|
|
||||
|
import { SchemasState } from './../state/schemas.state'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class SchemaMustExistGuard implements CanActivate { |
||||
|
constructor( |
||||
|
private readonly schemasState: SchemasState, |
||||
|
private readonly router: Router |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { |
||||
|
const params = allParams(route); |
||||
|
|
||||
|
const schemaName = params['schemaName']; |
||||
|
|
||||
|
if (!schemaName) { |
||||
|
throw 'Route must contain schema name.'; |
||||
|
} |
||||
|
|
||||
|
const result = |
||||
|
this.schemasState.selectSchema(schemaName) |
||||
|
.do(dto => { |
||||
|
if (!dto) { |
||||
|
this.router.navigate(['/404']); |
||||
|
} |
||||
|
}) |
||||
|
.map(u => u !== null); |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,128 @@ |
|||||
|
<div class="modal-dialog modal-lg"> |
||||
|
<div class="modal-content" *ngIf="!editForm"> |
||||
|
<form [formGroup]="addFieldForm" (ngSubmit)="addField(false, false)"> |
||||
|
<div class="modal-header"> |
||||
|
<h4 class="modal-title"> |
||||
|
Create Field |
||||
|
</h4> |
||||
|
|
||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()"> |
||||
|
<span aria-hidden="true">×</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
<h3 class="wizard-title">Create Field</h3> |
||||
|
|
||||
|
<div *ngIf="addFieldError"> |
||||
|
<div class="form-alert form-alert-error" [innerHTML]="addFieldError"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<div class="row"> |
||||
|
<div class="col-4 type" *ngFor="let fieldType of fieldTypes"> |
||||
|
<label> |
||||
|
<input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" /> |
||||
|
|
||||
|
<div class="row no-gutters"> |
||||
|
<div class="col col-auto"> |
||||
|
<div class="type-icon" [class.active]="addFieldForm.controls.type.value === fieldType.type"> |
||||
|
<i class="icon-type-{{fieldType.type}}"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col"> |
||||
|
<div class="type-title">{{fieldType.type}}</div> |
||||
|
<div class="type-text text-muted">{{fieldType.description}}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<sqx-control-errors for="name" [submitted]="addFieldFormSubmitted"></sqx-control-errors> |
||||
|
|
||||
|
<input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter field name" sqxFocusOnInit /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group"> |
||||
|
<div class="form-check"> |
||||
|
<input class="form-check-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable" /> |
||||
|
<label class="form-check-label" for="isLocalizable"> |
||||
|
Localizable |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<small class="form-text text-muted"> |
||||
|
You can the field as localizable. It means that is dependent on the language, for example a city name. |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal-footer"> |
||||
|
<div class="clearfix"> |
||||
|
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button> |
||||
|
|
||||
|
<div class="float-right"> |
||||
|
<button class="btn btn-success" (click)="addField(false, false)">Create and close</button> |
||||
|
<button class="btn btn-success" (click)="addField(true, false)">Create and new field</button> |
||||
|
<button class="btn btn-success" (click)="addField(false, true)">Create and configure</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-content" *ngIf="editForm"> |
||||
|
<form [formGroup]="editForm"> |
||||
|
<div class="modal-header"> |
||||
|
|
||||
|
<h4 class="modal-title" *ngIf="editStep === 1"> |
||||
|
Step 1 of 3: Common Properties |
||||
|
</h4> |
||||
|
<h4 class="modal-title" *ngIf="editStep === 2"> |
||||
|
Step 2 of 3: Validation |
||||
|
</h4> |
||||
|
<h4 class="modal-title" *ngIf="editStep === 3"> |
||||
|
Step 3 of 3: Editing Settings |
||||
|
</h4> |
||||
|
|
||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="complete()"> |
||||
|
<span aria-hidden="true">×</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
<h3 class="wizard-title" *ngIf="editStep === 1">Common</h3> |
||||
|
<h3 class="wizard-title" *ngIf="editStep === 2">Validation</h3> |
||||
|
<h3 class="wizard-title" *ngIf="editStep === 3">Editing</h3> |
||||
|
|
||||
|
<div [class.hidden]="editStep !== 1"> |
||||
|
<sqx-field-form-common [editForm]="editForm" [editFormSubmitted]="editFormSubmitted" [showName]="false" [field]="editField"></sqx-field-form-common> |
||||
|
</div> |
||||
|
|
||||
|
<div [class.hidden]="editStep !== 2"> |
||||
|
<sqx-field-form-validation [editForm]="editForm" [field]="editField"></sqx-field-form-validation> |
||||
|
</div> |
||||
|
|
||||
|
<div [class.hidden]="editStep !== 3"> |
||||
|
<sqx-field-form-ui [editForm]="editForm" [field]="editField"></sqx-field-form-ui> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal-footer"> |
||||
|
<div class="clearfix"> |
||||
|
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button> |
||||
|
|
||||
|
<div class="float-right" *ngIf="editStep !== 2"> |
||||
|
<button class="btn btn-primary" (click)="next()">Next</button> |
||||
|
</div> |
||||
|
<div class="float-right" *ngIf="editStep === 2"> |
||||
|
<button class="btn btn-success" (click)="configureField(false)">Configure and close</button> |
||||
|
<button class="btn btn-success" (click)="configureField(true)">Configure and new field</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,65 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
$icon-size: 4.5rem; |
||||
|
|
||||
|
.form-check { |
||||
|
margin-top: .4rem; |
||||
|
margin-bottom: -.2rem; |
||||
|
} |
||||
|
|
||||
|
.type { |
||||
|
& { |
||||
|
margin-bottom: .5rem; |
||||
|
} |
||||
|
|
||||
|
&-title { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
&-text { |
||||
|
font-size: .9rem; |
||||
|
} |
||||
|
|
||||
|
&-icon { |
||||
|
& { |
||||
|
@include border-radius; |
||||
|
height: $icon-size; |
||||
|
color: $color-theme-blue; |
||||
|
cursor: pointer; |
||||
|
border: 1px solid $color-border; |
||||
|
background: transparent; |
||||
|
margin-right: .5rem; |
||||
|
line-height: $icon-size; |
||||
|
font-size: 1.75rem; |
||||
|
font-weight: normal; |
||||
|
text-align: center; |
||||
|
width: $icon-size; |
||||
|
} |
||||
|
|
||||
|
.radio-input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
& { |
||||
|
@include box-shadow(0, 0, 10px, .5); |
||||
|
background: $color-theme-blue; |
||||
|
border-color: $color-theme-blue; |
||||
|
color: $color-dark-foreground; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: $color-dark-foreground; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: $color-border-dark; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.radio-input { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,149 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, EventEmitter, Input, Output } from '@angular/core'; |
||||
|
import { FormBuilder, Validators, FormGroup } from '@angular/forms'; |
||||
|
|
||||
|
import { |
||||
|
AddFieldDto, |
||||
|
AppContext, |
||||
|
createProperties, |
||||
|
fadeAnimation, |
||||
|
FieldDto, |
||||
|
fieldTypes, |
||||
|
SchemaDetailsDto, |
||||
|
UpdateFieldDto, |
||||
|
ValidatorsEx |
||||
|
} from 'shared'; |
||||
|
|
||||
|
import { SchemasState } from './../../state/schemas.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-field-wizard', |
||||
|
styleUrls: ['./field-wizard.component.scss'], |
||||
|
templateUrl: './field-wizard.component.html', |
||||
|
providers: [ |
||||
|
AppContext |
||||
|
], |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class FieldWizardComponent { |
||||
|
public fieldTypes = fieldTypes; |
||||
|
|
||||
|
public editFormSubmitted = false; |
||||
|
public editStep = 0; |
||||
|
public editForm: FormGroup | null; |
||||
|
public editField: FieldDto | null; |
||||
|
|
||||
|
public addFieldError = ''; |
||||
|
public addFieldFormSubmitted = false; |
||||
|
public addFieldForm = |
||||
|
this.formBuilder.group({ |
||||
|
type: ['String', |
||||
|
[ |
||||
|
Validators.required |
||||
|
]], |
||||
|
name: ['', |
||||
|
[ |
||||
|
Validators.required, |
||||
|
Validators.maxLength(40), |
||||
|
ValidatorsEx.pattern('[a-zA-Z0-9]+(\\-[a-zA-Z0-9]+)*', 'Name must be a valid javascript name in camel case.') |
||||
|
]], |
||||
|
isLocalizable: [false] |
||||
|
}); |
||||
|
|
||||
|
@Input() |
||||
|
public schema: SchemaDetailsDto; |
||||
|
|
||||
|
@Output() |
||||
|
public completed = new EventEmitter(); |
||||
|
|
||||
|
constructor( |
||||
|
private readonly formBuilder: FormBuilder, |
||||
|
private readonly schemasState: SchemasState |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public complete() { |
||||
|
this.completed.emit(); |
||||
|
} |
||||
|
|
||||
|
public next() { |
||||
|
this.editStep++; |
||||
|
} |
||||
|
|
||||
|
public addField(next: boolean, configure: boolean) { |
||||
|
this.addFieldFormSubmitted = true; |
||||
|
|
||||
|
if (this.addFieldForm.valid) { |
||||
|
this.addFieldForm.disable(); |
||||
|
|
||||
|
const properties = createProperties(this.addFieldForm.controls['type'].value); |
||||
|
|
||||
|
const partitioning = |
||||
|
this.addFieldForm.controls['isLocalizable'].value ? |
||||
|
'language' : |
||||
|
'invariant'; |
||||
|
|
||||
|
const requestDto = new AddFieldDto(this.addFieldForm.controls['name'].value, partitioning, properties); |
||||
|
|
||||
|
this.schemasState.addField(this.schema, requestDto) |
||||
|
.subscribe(dto => { |
||||
|
this.resetFieldForm(); |
||||
|
|
||||
|
if (configure) { |
||||
|
this.editField = dto; |
||||
|
this.editStep = 1; |
||||
|
this.editForm = new FormGroup({}); |
||||
|
} else if (!next) { |
||||
|
this.complete(); |
||||
|
} |
||||
|
}, error => { |
||||
|
this.resetFieldForm(error.displayMessage); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public configureField(next: boolean) { |
||||
|
this.editFormSubmitted = true; |
||||
|
|
||||
|
if (this.editForm!.valid) { |
||||
|
const properties = createProperties(this.editField!.properties['fieldType'], this.editForm!.value); |
||||
|
|
||||
|
this.schemasState.updateField(this.schema, this.editField!, new UpdateFieldDto(properties)) |
||||
|
.subscribe(() => { |
||||
|
this.resetEditForm(); |
||||
|
|
||||
|
if (this.next) { |
||||
|
this.editField = null; |
||||
|
this.editForm = null; |
||||
|
this.editStep = 1; |
||||
|
} else { |
||||
|
this.complete(); |
||||
|
} |
||||
|
}, error => { |
||||
|
this.resetEditForm(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private resetEditForm() { |
||||
|
this.editForm!.enable(); |
||||
|
this.editForm!.reset(this.editField!.properties); |
||||
|
this.editFormSubmitted = false; |
||||
|
} |
||||
|
|
||||
|
private resetFieldForm(error = '') { |
||||
|
this.addFieldError = error; |
||||
|
this.addFieldForm.enable(); |
||||
|
this.addFieldForm.reset({ type: 'String' }); |
||||
|
this.addFieldFormSubmitted = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,56 @@ |
|||||
|
<div [formGroup]="editForm"> |
||||
|
<div class="form-group row" *ngIf="showName"> |
||||
|
<label class="col col-3 col-form-label" for="fieldName">Name</label> |
||||
|
|
||||
|
<div class="col col-6"> |
||||
|
<input type="text" class="form-control" id="fieldName" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" /> |
||||
|
|
||||
|
<small class="form-text text-muted"> |
||||
|
The name of the field in the API response. |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row"> |
||||
|
<label class="col col-3 col-form-label" for="fieldLabel">Label</label> |
||||
|
|
||||
|
<div class="col col-6"> |
||||
|
<sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors> |
||||
|
|
||||
|
<input type="text" class="form-control" id="fieldLabel" maxlength="100" formControlName="label" /> |
||||
|
|
||||
|
<small class="form-text text-muted"> |
||||
|
Define the display name for the field for documentation and user interfaces. |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row"> |
||||
|
<label class="col col-3 col-form-label" for="fieldHints">Hints</label> |
||||
|
|
||||
|
<div class="col col-6"> |
||||
|
<sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors> |
||||
|
|
||||
|
<input type="text" class="form-control" id="fieldHints" maxlength="100" formControlName="hints" /> |
||||
|
|
||||
|
<small class="form-text text-muted"> |
||||
|
Define some hints for the user and editor for the field for documentation and user interfaces. |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row"> |
||||
|
<div class="col col-9 offset-3"> |
||||
|
<div class="form-check"> |
||||
|
<input class="form-check-input" type="checkbox" id="fieldListfield" formControlName="isListField" /> |
||||
|
<label class="form-check-label" for="fieldListfield"> |
||||
|
List Field |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<small class="form-text text-muted"> |
||||
|
List fields are shown as a column in the content list. If no list field is defined, the first field is shown by default. |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,47 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; |
||||
|
import { FormControl, FormGroup, Validators } from '@angular/forms'; |
||||
|
|
||||
|
import { FieldDto } from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-field-form-common', |
||||
|
styleUrls: ['field-form-common.component.scss'], |
||||
|
templateUrl: 'field-form-common.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FieldFormCommonComponent implements OnInit { |
||||
|
@Input() |
||||
|
public editForm: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
public editFormSubmitted = false; |
||||
|
|
||||
|
@Input() |
||||
|
public showName = true; |
||||
|
|
||||
|
@Input() |
||||
|
public field: FieldDto; |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.editForm.setControl('label', |
||||
|
new FormControl(this.field.properties.label, |
||||
|
Validators.maxLength(100))); |
||||
|
|
||||
|
this.editForm.setControl('hints', |
||||
|
new FormControl(this.field.properties.label, |
||||
|
Validators.maxLength(100))); |
||||
|
|
||||
|
this.editForm.setControl('isRequired', |
||||
|
new FormControl(this.field.properties.isRequired)); |
||||
|
|
||||
|
this.editForm.setControl('isListField', |
||||
|
new FormControl(this.field.properties.isListField)); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
<div [ngSwitch]="field.properties.fieldType"> |
||||
|
<div *ngSwitchCase="'Number'"> |
||||
|
<sqx-number-ui [editForm]="editForm" [properties]="field.properties"></sqx-number-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'String'"> |
||||
|
<sqx-string-ui [editForm]="editForm" [properties]="field.properties"></sqx-string-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Boolean'"> |
||||
|
<sqx-boolean-ui [editForm]="editForm" [properties]="field.properties"></sqx-boolean-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'DateTime'"> |
||||
|
<sqx-date-time-ui [editForm]="editForm" [properties]="field.properties"></sqx-date-time-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Geolocation'"> |
||||
|
<sqx-geolocation-ui [editForm]="editForm" [properties]="field.properties"></sqx-geolocation-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Json'"> |
||||
|
<sqx-json-ui [editForm]="editForm" [properties]="field.properties"></sqx-json-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Assets'"> |
||||
|
<sqx-assets-ui [editForm]="editForm" [properties]="field.properties"></sqx-assets-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'References'"> |
||||
|
<sqx-references-ui [editForm]="editForm" [properties]="field.properties"></sqx-references-ui> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Tags'"> |
||||
|
<sqx-tags-ui [editForm]="editForm" [properties]="field.properties"></sqx-tags-ui> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,25 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; |
||||
|
import { FormGroup } from '@angular/forms'; |
||||
|
|
||||
|
import { FieldDto } from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-field-form-ui', |
||||
|
styleUrls: ['field-form-ui.component.scss'], |
||||
|
templateUrl: 'field-form-ui.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FieldFormUIComponent { |
||||
|
@Input() |
||||
|
public editForm: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
public field: FieldDto; |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
<div [ngSwitch]="field.properties.fieldType"> |
||||
|
<div *ngSwitchCase="'Number'"> |
||||
|
<sqx-number-validation [editForm]="editForm" [properties]="field.properties"></sqx-number-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'String'"> |
||||
|
<sqx-string-validation [editForm]="editForm" [properties]="field.properties"></sqx-string-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Boolean'"> |
||||
|
<sqx-boolean-validation [editForm]="editForm" [properties]="field.properties"></sqx-boolean-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'DateTime'"> |
||||
|
<sqx-date-time-validation [editForm]="editForm" [properties]="field.properties"></sqx-date-time-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Geolocation'"> |
||||
|
<sqx-geolocation-validation [editForm]="editForm" [properties]="field.properties"></sqx-geolocation-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Json'"> |
||||
|
<sqx-json-validation [editForm]="editForm" [properties]="field.properties"></sqx-json-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Assets'"> |
||||
|
<sqx-assets-validation [editForm]="editForm" [properties]="field.properties"></sqx-assets-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'References'"> |
||||
|
<sqx-references-validation [editForm]="editForm" [properties]="field.properties"></sqx-references-validation> |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'Tags'"> |
||||
|
<sqx-tags-validation [editForm]="editForm" [properties]="field.properties"></sqx-tags-validation> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,25 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; |
||||
|
import { FormGroup } from '@angular/forms'; |
||||
|
|
||||
|
import { FieldDto } from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-field-form-validation', |
||||
|
styleUrls: ['field-form-validation.component.scss'], |
||||
|
templateUrl: 'field-form-validation.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class FieldFormValidationComponent { |
||||
|
@Input() |
||||
|
public editForm: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
public field: FieldDto; |
||||
|
} |
||||
@ -0,0 +1,201 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { BehaviorSubject, Observable } from 'rxjs'; |
||||
|
|
||||
|
import 'framework/utils/rxjs-extensions'; |
||||
|
|
||||
|
import { |
||||
|
AddFieldDto, |
||||
|
AppsStoreService, |
||||
|
AuthService, |
||||
|
CreateSchemaDto, |
||||
|
DateTime, |
||||
|
DialogService, |
||||
|
ErrorDto, |
||||
|
FieldDto, |
||||
|
ImmutableArray, |
||||
|
Notification, |
||||
|
SchemaDto, |
||||
|
SchemaDetailsDto, |
||||
|
SchemasService, |
||||
|
UpdateFieldDto |
||||
|
} from 'shared'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class SchemasState { |
||||
|
public schemasItems = new BehaviorSubject<ImmutableArray<SchemaDto>>(ImmutableArray.empty()); |
||||
|
|
||||
|
public selectedSchema = new BehaviorSubject<SchemaDetailsDto | null>(null); |
||||
|
|
||||
|
private get app() { |
||||
|
return this.appsState.app$.value!.name; |
||||
|
} |
||||
|
|
||||
|
private get user() { |
||||
|
return this.authState.user!.token; |
||||
|
} |
||||
|
|
||||
|
constructor( |
||||
|
private readonly schemasService: SchemasService, |
||||
|
private readonly dialogs: DialogService, |
||||
|
private readonly authState: AuthService, |
||||
|
private readonly appsState: AppsStoreService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public selectSchema(id: string | null): Observable<boolean> { |
||||
|
const observable = |
||||
|
!id ? |
||||
|
Observable.of(null) : |
||||
|
Observable.of(<SchemaDetailsDto>this.schemasItems.value.find(x => x.id === id && x instanceof SchemaDetailsDto)) |
||||
|
.switchMap(schema => { |
||||
|
if (!schema) { |
||||
|
return this.schemasService.getSchema(this.appsState.app$.value!.name, id).catch(() => Observable.of(null)); |
||||
|
} else { |
||||
|
return Observable.of(schema); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return observable |
||||
|
.do(schema => { |
||||
|
this.selectedSchema.next(schema); |
||||
|
}) |
||||
|
.map(s => s !== null); |
||||
|
} |
||||
|
|
||||
|
public load(): Observable<any> { |
||||
|
return this.schemasService.getSchemas(this.app) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dtos => { |
||||
|
this.schemasItems.nextBy(v => ImmutableArray.of(dtos)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public create(request: CreateSchemaDto) { |
||||
|
return this.schemasService.postSchema(this.app, request, this.user, DateTime.now()) |
||||
|
.do(dto => { |
||||
|
this.schemasItems.nextBy(v => v.push(dto)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public addField(schema: SchemaDetailsDto, request: AddFieldDto): Observable<FieldDto> { |
||||
|
return this.schemasService.postField(this.app, schema.name, request, schema.version) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.addField(dto.payload, this.user, dto.version)); |
||||
|
}).map(d => d.payload); |
||||
|
} |
||||
|
|
||||
|
public publish(schema: SchemaDto): Observable<any> { |
||||
|
return this.schemasService.publishSchema(this.app, schema.name, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.publish(this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public unpublish(schema: SchemaDto): Observable<any> { |
||||
|
return this.schemasService.unpublishSchema(this.app, schema.name, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.unpublish(this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public enableField(schema: SchemaDetailsDto, field: FieldDto): Observable<any> { |
||||
|
return this.schemasService.enableField(this.app, schema.name, field.fieldId, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.updateField(field.enable(), this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public disableField(schema: SchemaDetailsDto, field: FieldDto): Observable<any> { |
||||
|
return this.schemasService.disableField(this.app, schema.name, field.fieldId, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.updateField(field.disable(), this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public lockField(schema: SchemaDetailsDto, field: FieldDto): Observable<any> { |
||||
|
return this.schemasService.lockField(this.app, schema.name, field.fieldId, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.updateField(field.lock(), this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public showField(schema: SchemaDetailsDto, field: FieldDto): Observable<any> { |
||||
|
return this.schemasService.showField(this.app, schema.name, field.fieldId, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.updateField(field.show(), this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public hideField(schema: SchemaDetailsDto, field: FieldDto): Observable<any> { |
||||
|
return this.schemasService.hideField(this.app, schema.name, field.fieldId, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.updateField(field.hide(), this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public deleteField(schema: SchemaDetailsDto, field: FieldDto): Observable<any> { |
||||
|
return this.schemasService.deleteField(this.app, schema.name, field.fieldId, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.removeField(field, this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public sortFields(schema: SchemaDetailsDto, fields: FieldDto[]): Observable<any> { |
||||
|
return this.schemasService.putFieldOrdering(this.app, schema.name, fields.map(t => t.fieldId), schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.replaceFields(fields, this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public updateField(schema: SchemaDetailsDto, field: FieldDto, request: UpdateFieldDto): Observable<any> { |
||||
|
return this.schemasService.putField(this.app, schema.name, field.fieldId, request, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.replaceSchema(schema.updateField(field.update(request.properties), this.user, dto.version)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public delete(schema: SchemaDto): Observable<any> { |
||||
|
return this.schemasService.deleteSchema(this.app, schema.name, schema.version) |
||||
|
.catch(error => this.notifyError(error)) |
||||
|
.do(dto => { |
||||
|
this.schemasItems.nextBy(v => v.filter(s => s.id !== schema.id)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private replaceSchema(schema: SchemaDto) { |
||||
|
this.schemasItems.nextBy(v => v.replaceBy('id', schema)); |
||||
|
|
||||
|
this.selectedSchema.nextBy(v => v !== null && v.id === schema.id ? <SchemaDetailsDto>schema : v); |
||||
|
} |
||||
|
|
||||
|
public trackBy(index: number, schema: SchemaDto): any { |
||||
|
return schema.id; |
||||
|
} |
||||
|
|
||||
|
private notifyError(error: string | ErrorDto) { |
||||
|
if (error instanceof ErrorDto) { |
||||
|
this.dialogs.notify(Notification.error(error.displayMessage)); |
||||
|
} else { |
||||
|
this.dialogs.notify(Notification.error(error)); |
||||
|
} |
||||
|
|
||||
|
return Observable.throw(error); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,65 @@ |
|||||
|
|
||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import 'framework/utils/rxjs-extensions'; |
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { BehaviorSubject, Observable } from 'rxjs'; |
||||
|
|
||||
|
import { DateTime, ImmutableArray } from 'framework'; |
||||
|
|
||||
|
import { |
||||
|
AppDto, |
||||
|
AppsService, |
||||
|
CreateAppDto |
||||
|
} from './../services/apps.service'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class AppsState { |
||||
|
public apps = new BehaviorSubject<ImmutableArray<AppDto>>(ImmutableArray.empty()); |
||||
|
|
||||
|
public selectedApp = new BehaviorSubject<AppDto | null>(null); |
||||
|
|
||||
|
constructor( |
||||
|
private readonly appsService: AppsService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public loadApps(): Observable<any> { |
||||
|
return this.appsService.getApps() |
||||
|
.do(dtos => { |
||||
|
this.apps.nextBy(v => ImmutableArray.of(dtos)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public selectApp(name: string | null): Observable<AppDto | null> { |
||||
|
const observable = |
||||
|
!name ? |
||||
|
Observable.of(null) : |
||||
|
Observable.of(this.apps.value.find(x => x.name === name) || null); |
||||
|
|
||||
|
return observable |
||||
|
.do(app => { |
||||
|
this.selectedApp.next(app); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public createApp(dto: CreateAppDto, now?: DateTime): Observable<AppDto> { |
||||
|
return this.appsService.postApp(dto) |
||||
|
.do(app => { |
||||
|
this.apps.nextBy(v => v.push(app)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public deleteApp(name: string): Observable<any> { |
||||
|
return this.appsService.deleteApp(name) |
||||
|
.do(app => { |
||||
|
this.apps.nextBy(v => v.filter(a => a.name !== name)); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 909 B |
Loading…
Reference in new issue