tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of github.com:Avd6977/squidex 

* Style fixings
* Code styling fixes.
pull/334/head
Sebastian Stehle 7 years ago
parent
eb22baa6c2 0ceb14ff9b
commit
a8f0e1917e
5 changed files with 177 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 151
      src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html
  2. 5
      src/Squidex/app/features/schemas/pages/schema/field-wizard.component.scss
  3. 57
      src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts
  4. 12
      src/Squidex/app/features/schemas/pages/schema/field.component.ts
  5. 26
      src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.ts

151
src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html
View File

@ -1,68 +1,107 @@
<form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
<sqx-modal-dialog (closed)="complete()" large="true">
<ng-container title>
<ng-container *ngIf="parent; else noParent">
Add Nested Field
</ng-container>
<ng-template #noParent>
Add Field
</ng-template>
<sqx-modal-dialog (closed)="complete()" large="true">
<ng-container title>
<ng-container *ngIf="parent; else noParent">
Add Nested Field
</ng-container>
<ng-container content>
<sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
<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.form.controls['type'].value === fieldType.type">
<i class="icon-type-{{fieldType.type}}"></i>
<ng-template #noParent>
{{isEditing ? 'Edit' : 'Add'}} Field
</ng-template>
</ng-container>
<ng-container content>
<ng-container *ngIf="!isEditing; else notEditing">
<form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
<sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
<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.form.controls['type'].value === fieldType.type">
<i class="icon-type-{{fieldType.type}}"></i>
</div>
</div>
<div class="col-lg">
<div class="type-title">{{fieldType.type}}</div>
<div class="type-text text-muted">{{fieldType.description}}</div>
</div>
</div>
<div class="col-lg">
<div class="type-title">{{fieldType.type}}</div>
<div class="type-text text-muted">{{fieldType.description}}</div>
</div>
</div>
</label>
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<sqx-control-errors for="name" submitOnly="true" [submitted]="addFieldForm.submitted | async"></sqx-control-errors>
<input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput placeholder="Enter field name" sqxFocusOnInit />
</div>
<div class="form-group" *ngIf="!parent">
<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 class="form-group">
<sqx-control-errors for="name" submitOnly="true" [submitted]="addFieldForm.submitted | async"></sqx-control-errors>
<input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput
placeholder="Enter field name" sqxFocusOnInit />
</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 class="form-group" *ngIf="!parent">
<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>
</form>
</ng-container>
<ng-container footer>
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
<ng-template #notEditing>
<form [formGroup]="editForm.form" class="edit-form" (ngSubmit)="save()">
<div class="table-items-row-details-tabs clearfix">
<ul class="nav nav-tabs2">
<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">Editing</a>
</li>
</ul>
</div>
<div class="float-right">
<button class="btn btn-success mr-1" (click)="addField(false)">Create and close</button>
<button class="btn btn-success" (click)="addField(true)">Create and new field</button>
</div>
</ng-container>
</sqx-modal-dialog>
</form>
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
<sqx-field-form-common [editForm]="editForm.form" [editFormSubmitted]="editForm.submitted | async" [field]="field"></sqx-field-form-common>
</div>
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
<sqx-field-form-validation [patterns]="patternsState.patterns | async" [editForm]="editForm.form" [field]="field"></sqx-field-form-validation>
</div>
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
<sqx-field-form-ui [editForm]="editForm.form" [field]="field"></sqx-field-form-ui>
</div>
</form>
</ng-template>
</ng-container>
<ng-container footer>
<button type="reset" class="float-left btn btn-secondary" (click)="complete()">Cancel</button>
<div class="float-right" *ngIf="!isEditing">
<button class="btn btn-outline-success mr-1" (click)="addField(false, false)">Create and close</button>
<button class="btn btn-success mr-1" (click)="addField(true, false)">Create and add field</button>
<button class="btn btn-success" (click)="addField(false, true)">Create and edit field</button>
</div>
<div class="float-right" *ngIf="isEditing">
<button class="btn btn-success mr-1" (click)="save(true)">Save and add field</button>
<button class="btn btn-primary" (click)="save()">Save and close</button>
</div>
</ng-container>
</sqx-modal-dialog>

5
src/Squidex/app/features/schemas/pages/schema/field-wizard.component.scss
View File

@ -15,6 +15,11 @@ $icon-size: 4.5rem;
margin-bottom: 1rem;
}
.edit-form {
margin: -1rem;
margin-bottom: 0;
}
.type {
& {
margin-bottom: .5rem;

57
src/Squidex/app/features/schemas/pages/schema/field-wizard.component.ts
View File

@ -10,11 +10,16 @@ import { FormBuilder } from '@angular/forms';
import {
AddFieldForm,
createProperties,
EditFieldForm,
FieldDto,
fieldTypes,
PatternsState,
RootFieldDto,
SchemaDetailsDto,
SchemasState,
Types
Types,
UpdateFieldDto
} from '@app/shared';
@Component({
@ -36,14 +41,20 @@ export class FieldWizardComponent implements OnInit {
public completed = new EventEmitter();
public fieldTypes = fieldTypes;
public field: FieldDto;
public addFieldForm = new AddFieldForm(this.formBuilder);
public editForm = new EditFieldForm(this.formBuilder);
public isEditing = false;
public selectedTab = 0;
constructor(
private readonly formBuilder: FormBuilder,
private readonly schemasState: SchemasState
) {
}
private readonly schemasState: SchemasState,
public readonly patternsState: PatternsState
) {}
public ngOnInit() {
if (this.parent) {
@ -55,18 +66,24 @@ export class FieldWizardComponent implements OnInit {
this.completed.emit();
}
public addField(next: boolean) {
public addField(addNew: boolean, edit: boolean) {
const value = this.addFieldForm.submit();
if (value) {
this.schemasState.addField(this.schema, value, this.parent)
.subscribe(() => {
.subscribe(dto => {
this.field = dto;
this.addFieldForm.submitCompleted({ type: fieldTypes[0].type });
if (next) {
if (addNew) {
if (Types.isFunction(this.nameInput.nativeElement.focus)) {
this.nameInput.nativeElement.focus();
}
} else if (edit) {
this.selectTab(0);
this.isEditing = true;
} else {
this.complete();
}
@ -75,5 +92,29 @@ export class FieldWizardComponent implements OnInit {
});
}
}
}
public selectTab(tab: number) {
this.selectedTab = tab;
}
public save(addNew: boolean) {
const value = this.editForm.submit();
if (value) {
const properties = createProperties(this.field.properties['fieldType'], value);
this.schemasState.updateField(this.schema, this.field as RootFieldDto, new UpdateFieldDto(properties))
.subscribe(() => {
this.editForm.submitCompleted();
if (addNew) {
this.isEditing = false;
} else {
this.complete();
}
}, error => {
this.editForm.submitFailed(error);
});
}
}
}

12
src/Squidex/app/features/schemas/pages/schema/field.component.ts
View File

@ -68,11 +68,13 @@ export class FieldComponent implements OnChanges {
this.editForm.form.disable();
}
}
}
if (changes['schema']) {
this.isEditing = false;
public toggleEditing() {
this.isEditing = !this.isEditing;
this.selectedTab = 0;
if (this.isEditing) {
this.editForm.load(this.field.properties);
}
}
@ -80,10 +82,6 @@ export class FieldComponent implements OnChanges {
this.selectedTab = tab;
}
public toggleEditing() {
this.isEditing = !this.isEditing;
}
public cancel() {
this.isEditing = false;

26
src/Squidex/app/features/schemas/pages/schema/forms/field-form-common.component.ts
View File

@ -5,8 +5,8 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Component, Input, OnChanges } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { FieldDto } from '@app/shared';
@ -15,7 +15,7 @@ import { FieldDto } from '@app/shared';
styleUrls: ['field-form-common.component.scss'],
templateUrl: 'field-form-common.component.html'
})
export class FieldFormCommonComponent {
export class FieldFormCommonComponent implements OnChanges {
@Input()
public editForm: FormGroup;
@ -27,4 +27,24 @@ export class FieldFormCommonComponent {
@Input()
public field: FieldDto;
public ngOnChanges() {
this.editForm.setControl('isRequired',
new FormControl(this.field.properties.isRequired));
this.editForm.setControl('isListField',
new FormControl(this.field.properties.isListField));
this.editForm.setControl('editorUrl',
new FormControl(this.field.properties.editorUrl));
this.editForm.setControl('hints',
new FormControl(this.field.properties.hints));
this.editForm.setControl('placeholder',
new FormControl(this.field.properties.placeholder));
this.editForm.setControl('label',
new FormControl(this.field.properties.label));
}
}
Write Preview
Loading…
Cancel
Save