mirror of https://github.com/Squidex/squidex.git
Sebastian
9 years ago
30 changed files with 639 additions and 85 deletions
@ -0,0 +1,106 @@ |
|||||
|
<div class="table-items-row"> |
||||
|
<div class="field-summary"> |
||||
|
<div class="row"> |
||||
|
<div class="col-xs-8"> |
||||
|
{{field.name}} |
||||
|
</div> |
||||
|
<div class="col-xs-4"> |
||||
|
<div class="float-xs-right"> |
||||
|
<button type="button" class="btn btn-secondary field-edit-button" [class.active]="isEditing" (click)="toggleEditing()"> |
||||
|
<i class="icon-settings"></i> |
||||
|
</button> |
||||
|
<button type="button" class="btn btn-simple"> |
||||
|
<i class="icon-dots"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="field-details" *ngIf="isEditing"> |
||||
|
<form [formGroup]="editForm" (submit)="save()"> |
||||
|
<div class="field-details-tabs clearfix"> |
||||
|
<ul class="nav nav-inline nav-field-tabs"> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">User Interface</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<div class="float-xs-right"> |
||||
|
<button type="reset" class="btn btn-link" (click)="cancel()">Cancel</button> |
||||
|
<button type="submit" class="btn btn-primary">Save</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="field-details-tab" *ngIf="selectedTab == 0"> |
||||
|
<div class="form-group row"> |
||||
|
<label for="field-label" class="col-xs-3 col-form-label">Label</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<div class="errors-box" *ngIf="editForm.get('label').invalid && editForm.get('label').touched" [@fade]> |
||||
|
<div class="errors"> |
||||
|
<span *ngIf="editForm.get('label').hasError('maxlength')"> |
||||
|
Label can not have more than 100 characters. |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<input type="text" class="form-control" id="field-label" maxlength="100" formControlName="label" /> |
||||
|
|
||||
|
<span class="form-hint"> |
||||
|
Define the display name for the field for documentation and user interfaces. |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row"> |
||||
|
<label for="field-hints" class="col-xs-3 col-form-label">Hints</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<div class="errors-box" *ngIf="editForm.get('hints').invalid && editForm.get('hints').touched" [@fade]> |
||||
|
<div class="errors"> |
||||
|
<span *ngIf="editForm.get('hints').hasError('maxlength')"> |
||||
|
Hints can not have more than 100 characters. |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<input type="text" class="form-control" id="field-hints" maxlength="100" formControlName="hints" /> |
||||
|
|
||||
|
<span class="form-hint"> |
||||
|
Define some hints for the user and editor for the field for documentation and user interfaces. |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="field-details-tab" *ngIf="selectedTab == 1"> |
||||
|
<div [ngSwitch]="field.properties.fieldType"> |
||||
|
<div *ngSwitchCase="'number'"> |
||||
|
asdsad |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'string'"> |
||||
|
<sqx-string-validation [editForm]="editForm" [properties]="field.properties"></sqx-string-validation> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="field-details-tab" *ngIf="selectedTab == 2"> |
||||
|
<div [ngSwitch]="field.properties.fieldType"> |
||||
|
<div *ngSwitchCase="'number'"> |
||||
|
asdsad |
||||
|
</div> |
||||
|
<div *ngSwitchCase="'string'"> |
||||
|
<sqx-string-ui [editForm]="editForm" [properties]="field.properties"></sqx-string-ui> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,78 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
$field-header: #e7ebef; |
||||
|
|
||||
|
.table-items-row { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.field { |
||||
|
&-summary { |
||||
|
padding: 15px 20px; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
|
||||
|
&-edit-button { |
||||
|
& { |
||||
|
color: $color-theme-blue; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: $color-theme-blue-dark; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background: $color-theme-blue; |
||||
|
border: 0; |
||||
|
color: $color-accent-dark; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-details { |
||||
|
& { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
&::before { |
||||
|
@include caret-top; |
||||
|
@include absolute(-10px, 90px, auto, auto); |
||||
|
border-color: transparent transparent $color-border; |
||||
|
border-width: 10px; |
||||
|
} |
||||
|
|
||||
|
&-tab { |
||||
|
padding: 15px 20px 20px; |
||||
|
} |
||||
|
|
||||
|
&-tabs { |
||||
|
background: $color-border; |
||||
|
position: relative; |
||||
|
padding: 15px 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav-field-tabs { |
||||
|
& { |
||||
|
@include absolute(auto, auto, 0, 20px); |
||||
|
} |
||||
|
|
||||
|
& .nav-link { |
||||
|
& { |
||||
|
color: $color-text; |
||||
|
cursor: pointer; |
||||
|
padding: 18px 10px; |
||||
|
border-bottom: 4px solid transparent; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
&.active, |
||||
|
&:hover { |
||||
|
border-color: $color-theme-blue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,109 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Observable} from 'rxjs'; |
||||
|
import { |
||||
|
createProperties, |
||||
|
fadeAnimation, |
||||
|
FieldDto, |
||||
|
FieldPropertiesDto |
||||
|
} from 'shared'; |
||||
|
|
||||
|
const ESCAPE_KEY = 27; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-field', |
||||
|
styleUrls: ['./field.component.scss'], |
||||
|
templateUrl: './field.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class FieldComponent implements OnInit { |
||||
|
private oldValue: any; |
||||
|
|
||||
|
@Input() |
||||
|
public field: FieldDto; |
||||
|
|
||||
|
@Output() |
||||
|
public saved = new EventEmitter<FieldDto>(); |
||||
|
|
||||
|
public isEditing: boolean = false; |
||||
|
public selectedTab = 0; |
||||
|
|
||||
|
public editForm: FormGroup = |
||||
|
this.formBuilder.group({ |
||||
|
label: ['', |
||||
|
[ |
||||
|
Validators.maxLength(100) |
||||
|
]], |
||||
|
hints: ['', |
||||
|
[ |
||||
|
Validators.maxLength(100) |
||||
|
]], |
||||
|
isRequired: [false] |
||||
|
}); |
||||
|
|
||||
|
constructor( |
||||
|
private readonly formBuilder: FormBuilder |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.resetForm(this.field.properties); |
||||
|
} |
||||
|
|
||||
|
public save() { |
||||
|
this.editForm.markAsTouched(); |
||||
|
|
||||
|
if (this.editForm.valid) { |
||||
|
const properties = createProperties(this.field.properties['fieldType'], this.editForm.value); |
||||
|
|
||||
|
const field = |
||||
|
new FieldDto( |
||||
|
this.field.name, |
||||
|
this.field.isHidden, |
||||
|
this.field.isHidden, |
||||
|
properties); |
||||
|
|
||||
|
this.saved.emit(field); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public cancel() { |
||||
|
this.resetForm(this.oldValue); |
||||
|
} |
||||
|
|
||||
|
public toggleEditing() { |
||||
|
this.isEditing = true; |
||||
|
} |
||||
|
|
||||
|
public selectTab(tab: number) { |
||||
|
this.selectedTab = tab; |
||||
|
} |
||||
|
|
||||
|
private resetForm(properties: any) { |
||||
|
this.editForm.reset(); |
||||
|
|
||||
|
for (let property in properties) { |
||||
|
if (properties.hasOwnProperty(property)) { |
||||
|
const controlName = property + ''; |
||||
|
|
||||
|
if (this.editForm.contains(controlName)) { |
||||
|
this.editForm.get(controlName).setValue(properties[property]); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.oldValue = Object.assign({}, this.editForm.value); |
||||
|
|
||||
|
this.isEditing = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,21 @@ |
|||||
|
<div [formGroup]="editForm"> |
||||
|
<div class="form-group row"> |
||||
|
<label for="field-input-placeholder" class="col-xs-3 col-form-label">Placeholder</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<div class="errors-box" *ngIf="editForm.get('placeholder').invalid && editForm.get('placeholder').touched" [@fade]> |
||||
|
<div class="errors"> |
||||
|
<span *ngIf="editForm.get('placeholder').hasError('maxlength')"> |
||||
|
Placeholder can not have more than 100 characters. |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<input type="text" class="form-control" id="field-input-placeholder" maxlength="100" formControlName="placeholder" /> |
||||
|
|
||||
|
<span class="form-hint"> |
||||
|
Define the placeholder for the input control. |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,34 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, Input, OnInit } from '@angular/core'; |
||||
|
import { FormControl, FormGroup, Validators } from '@angular/forms'; |
||||
|
|
||||
|
import { fadeAnimation, StringFieldPropertiesDto } from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-string-ui', |
||||
|
styleUrls: ['string-ui.component.scss'], |
||||
|
templateUrl: 'string-ui.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class StringUIComponent implements OnInit { |
||||
|
@Input() |
||||
|
public editForm: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
public properties: StringFieldPropertiesDto; |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.editForm.addControl('placeholder', |
||||
|
new FormControl('', [ |
||||
|
Validators.maxLength(100) |
||||
|
])); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,45 @@ |
|||||
|
<div [formGroup]="editForm"> |
||||
|
<div class="form-group row"> |
||||
|
<label for="field-required" class="col-xs-3">Required</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row"> |
||||
|
<label class="col-xs-3 col-form-label">Length</label> |
||||
|
|
||||
|
<div class="col-xs-3 minlength-col"> |
||||
|
<input type="number" class="form-control" id="field-min-length" formControlName="minLength" placeholder="Min Length" /> |
||||
|
|
||||
|
<label class="col-form-label minlength-label">-</label> |
||||
|
</div> |
||||
|
<div class="col-xs-3"> |
||||
|
<input type="number" class="form-control" id="field-max-length" formControlName="maxLength" placeholder="Max Length" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row"> |
||||
|
<label class="col-xs-3 col-form-label" for="field-pattern">Pattern</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<input type="text" class="form-control" id="field-pattern" formControlName="pattern" placeholder="Regex Pattern" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="form-group row" [class.hide]="hidePatternMessage | async"> |
||||
|
<label class="col-xs-3 col-form-label" for="field-pattern-message">Pattern Message</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<input type="text" class="form-control" id="field-pattern-message" formControlName="patternMessage" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="form-group row" [class.hide]="(hideDefaultValue | async)"> |
||||
|
<label class="col-xs-3 col-form-label" for="field-default-value">Default Value</label> |
||||
|
|
||||
|
<div class="col-xs-6"> |
||||
|
<input type="text" class="form-control" id="field-default-value" formControlName="defaultValue" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,16 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.minlength { |
||||
|
&-col { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
&-label { |
||||
|
@include absolute(0, -4px, auto, auto); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-check-input { |
||||
|
margin: 0; |
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, Input, OnInit } from '@angular/core'; |
||||
|
import { FormControl, FormGroup } from '@angular/forms'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
|
||||
|
import { StringFieldPropertiesDto } from 'shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-string-validation', |
||||
|
styleUrls: ['string-validation.component.scss'], |
||||
|
templateUrl: 'string-validation.component.html' |
||||
|
}) |
||||
|
export class StringValidationComponent implements OnInit { |
||||
|
@Input() |
||||
|
public editForm: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
public properties: StringFieldPropertiesDto; |
||||
|
|
||||
|
public hidePatternMessage: Observable<boolean>; |
||||
|
public hideDefaultValue: Observable<boolean>; |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.editForm.addControl('maxLength', |
||||
|
new FormControl()); |
||||
|
this.editForm.addControl('minLength', |
||||
|
new FormControl()); |
||||
|
this.editForm.addControl('pattern', |
||||
|
new FormControl()); |
||||
|
this.editForm.addControl('patternMessage', |
||||
|
new FormControl()); |
||||
|
this.editForm.addControl('defaultValue', |
||||
|
new FormControl()); |
||||
|
|
||||
|
this.hideDefaultValue = |
||||
|
Observable.of(false) |
||||
|
.merge(this.editForm.get('isRequired').valueChanges) |
||||
|
.map(x => !!x); |
||||
|
|
||||
|
this.hidePatternMessage = |
||||
|
Observable.of(false) |
||||
|
.merge(this.editForm.get('pattern').valueChanges) |
||||
|
.map(x => !x || x.trim().length === 0); |
||||
|
} |
||||
|
} |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue