diff --git a/src/Squidex/Controllers/Api/Schemas/Models/Converters/SchemaConverter.cs b/src/Squidex/Controllers/Api/Schemas/Models/Converters/SchemaConverter.cs index c7a96fed8..4259f8a45 100644 --- a/src/Squidex/Controllers/Api/Schemas/Models/Converters/SchemaConverter.cs +++ b/src/Squidex/Controllers/Api/Schemas/Models/Converters/SchemaConverter.cs @@ -8,6 +8,7 @@ using System; using System.Collections.Generic; +using System.Linq; using Squidex.Core.Schemas; using Squidex.Infrastructure.Reflection; using Squidex.Read.Schemas.Repositories; @@ -20,11 +21,11 @@ namespace Squidex.Controllers.Api.Schemas.Models.Converters { { typeof(NumberFieldProperties), - p => SimpleMapper.Map((NumberFieldProperties)p, new NumberFieldPropertiesDto()) + p => Convert((NumberFieldProperties)p) }, { typeof(StringFieldProperties), - p => SimpleMapper.Map((StringFieldProperties)p, new StringFieldPropertiesDto()) + p => Convert((StringFieldProperties)p) } }; @@ -38,22 +39,41 @@ namespace Squidex.Controllers.Api.Schemas.Models.Converters dto.Fields = new List(); - foreach (var field in entity.Schema.Fields.Values) + foreach (var kvp in entity.Schema.Fields) { - var fieldPropertiesDto = Factories[field.RawProperties.GetType()](field.RawProperties); + var fieldPropertiesDto = + Factories[kvp.Value.RawProperties.GetType()](kvp.Value.RawProperties); - var fieldDto = new FieldDto - { - Name = field.Name, - IsHidden = field.IsHidden, - IsDisabled = field.IsDisabled, - Properties = fieldPropertiesDto - }; + var fieldDto = SimpleMapper.Map(kvp.Value, new FieldDto { FieldId = kvp.Key, Properties = fieldPropertiesDto }); dto.Fields.Add(fieldDto); } return dto; } + + private static FieldPropertiesDto Convert(StringFieldProperties source) + { + var result = SimpleMapper.Map(source, new StringFieldPropertiesDto()); + + if (source.AllowedValues != null) + { + result.AllowedValues = source.AllowedValues.ToArray(); + } + + return result; + } + + private static FieldPropertiesDto Convert(NumberFieldProperties source) + { + var result = SimpleMapper.Map(source, new NumberFieldPropertiesDto()); + + if (source.AllowedValues != null) + { + result.AllowedValues = source.AllowedValues.ToArray(); + } + + return result; + } } } diff --git a/src/Squidex/Controllers/Api/Schemas/Models/FieldDto.cs b/src/Squidex/Controllers/Api/Schemas/Models/FieldDto.cs index ff6ffbd93..5e8e8a519 100644 --- a/src/Squidex/Controllers/Api/Schemas/Models/FieldDto.cs +++ b/src/Squidex/Controllers/Api/Schemas/Models/FieldDto.cs @@ -12,6 +12,11 @@ namespace Squidex.Controllers.Api.Schemas.Models { public sealed class FieldDto { + /// + /// The id of the field. + /// + public long FieldId { get; set; } + /// /// The name of the field. Must be unique within the schema. /// diff --git a/src/Squidex/Controllers/Api/Schemas/Models/NumberFieldPropertiesDto.cs b/src/Squidex/Controllers/Api/Schemas/Models/NumberFieldPropertiesDto.cs index dd76e51f9..d72fa070b 100644 --- a/src/Squidex/Controllers/Api/Schemas/Models/NumberFieldPropertiesDto.cs +++ b/src/Squidex/Controllers/Api/Schemas/Models/NumberFieldPropertiesDto.cs @@ -6,6 +6,9 @@ // All rights reserved. // ========================================================================== +using System.Collections.Immutable; +using Newtonsoft.Json; +using Newtonsoft.Json.Converters; using NJsonSchema.Annotations; using Squidex.Core.Schemas; using Squidex.Infrastructure.Reflection; @@ -38,11 +41,19 @@ namespace Squidex.Controllers.Api.Schemas.Models /// /// The editor that is used to manage this field. /// + [JsonConverter(typeof(StringEnumConverter))] public NumberFieldEditor Editor { get; set; } public override FieldProperties ToProperties() { - return SimpleMapper.Map(this, new NumberFieldProperties()); + var result = SimpleMapper.Map(this, new NumberFieldProperties()); + + if (AllowedValues != null) + { + result.AllowedValues = ImmutableList.Create(AllowedValues); + } + + return result; } } } diff --git a/src/Squidex/Controllers/Api/Schemas/Models/StringFieldPropertiesDto.cs b/src/Squidex/Controllers/Api/Schemas/Models/StringFieldPropertiesDto.cs index 2490e11ef..15c2c5a70 100644 --- a/src/Squidex/Controllers/Api/Schemas/Models/StringFieldPropertiesDto.cs +++ b/src/Squidex/Controllers/Api/Schemas/Models/StringFieldPropertiesDto.cs @@ -6,6 +6,9 @@ // All rights reserved. // ========================================================================== +using System.Collections.Immutable; +using Newtonsoft.Json; +using Newtonsoft.Json.Converters; using NJsonSchema.Annotations; using Squidex.Core.Schemas; using Squidex.Infrastructure.Reflection; @@ -48,11 +51,19 @@ namespace Squidex.Controllers.Api.Schemas.Models /// /// The editor that is used to manage this field. /// + [JsonConverter(typeof(StringEnumConverter))] public StringFieldEditor Editor { get; set; } public override FieldProperties ToProperties() { - return SimpleMapper.Map(this, new StringFieldProperties()); + var result = SimpleMapper.Map(this, new StringFieldProperties()); + + if (AllowedValues != null) + { + result.AllowedValues = ImmutableList.Create(AllowedValues); + } + + return result; } } } diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.html b/src/Squidex/app/features/schemas/pages/schema/field.component.html index 3cae35de4..d4fb5e795 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html @@ -1,17 +1,48 @@ -
+
-
- {{field.name}} +
+ + + + {{displayName}} + {{field.properties.hints}} + +
+
+
+ Enabled + Disabled +
-
+
- + +
+ +
+ + Enable + + + Disable + + + Hide + + + Show + + + Delete + +
+
@@ -38,7 +69,7 @@
-
+
@@ -80,24 +111,24 @@
-
+
- +
- +
-
+
- +
- +
diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.scss b/src/Squidex/app/features/schemas/pages/schema/field.component.scss index f88dcd70b..9901dade6 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.scss +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.scss @@ -7,6 +7,31 @@ $field-header: #e7ebef; padding: 0; } +.dropdown { + & { + display: inline-block; + } + + &-menu { + @include absolute(100%, 0, auto, auto); + } + + &-item { + cursor: pointer; + } +} + +.btn-simple { + & { + color: $color-border-dark; + } + + &:hover, + &.active { + color: $color-text; + } +} + .field { &-summary { padding: 15px 20px; @@ -14,11 +39,11 @@ $field-header: #e7ebef; } &-icon { - color: darken($color-border, 15%); + margin-right: 1rem; + color: $color-border-dark; font-size: 1.2rem; font-weight: normal; vertical-align: middle; - margin-right: 1rem; } &-edit-button { @@ -37,6 +62,21 @@ $field-header: #e7ebef; } } + &-name { + @include truncate; + } + + &-hidden { + color: $color-border-dark; + } + + &-hints { + color: lighten($color-text, 50%); + font-weight: normal; + font-size: .95rem; + margin-left: .3rem; + } + &-details { & { position: relative; @@ -59,6 +99,12 @@ $field-header: #e7ebef; padding: 15px 20px; } } + + .tag { + @include opacity(.9); + min-width: 60px; + max-width: 90px; + } } .nav-field-tabs { diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.ts b/src/Squidex/app/features/schemas/pages/schema/field.component.ts index f511d5ed3..545b536ee 100644 --- a/src/Squidex/app/features/schemas/pages/schema/field.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/field.component.ts @@ -11,7 +11,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { createProperties, fadeAnimation, - FieldDto + FieldDto, + ModalView } from 'shared'; @Component({ @@ -23,17 +24,36 @@ import { ] }) export class FieldComponent implements OnInit { - private oldValue: any; + public dropdown = new ModalView(false, true); @Input() public field: FieldDto; + @Output() + public hidden = new EventEmitter(); + + @Output() + public shown = new EventEmitter(); + @Output() public saved = new EventEmitter(); + @Output() + public enabled = new EventEmitter(); + + @Output() + public disabled = new EventEmitter(); + + @Output() + public deleted = new EventEmitter(); + public isEditing: boolean = false; public selectedTab = 0; + public get displayName() { + return this.field.properties.label && this.field.properties.label.length > 0 ? this.field.properties.label : this.field.name; + } + public editForm: FormGroup = this.formBuilder.group({ label: ['', @@ -53,7 +73,7 @@ export class FieldComponent implements OnInit { } public ngOnInit() { - this.resetForm(this.field.properties); + this.resetForm(); } public save() { @@ -64,6 +84,7 @@ export class FieldComponent implements OnInit { const field = new FieldDto( + this.field.fieldId, this.field.name, this.field.isHidden, this.field.isHidden, @@ -74,7 +95,7 @@ export class FieldComponent implements OnInit { } public cancel() { - this.resetForm(this.oldValue); + this.resetForm(); } public toggleEditing() { @@ -85,20 +106,8 @@ export class FieldComponent implements OnInit { 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); + private resetForm() { + this.editForm.reset(this.field.properties); this.isEditing = false; } diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html index d52f2035a..7eb8a43b0 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html @@ -1,9 +1,9 @@ - +
-

{{schemaName | async}}

+

{{schemaName}}

@@ -13,7 +13,13 @@
- +
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts index 75db9e310..1a62d84ec 100644 --- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts @@ -5,24 +5,23 @@ * Copyright (c) Sebastian Stehle. All rights reserved */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; +import { Subscription } from 'rxjs'; import { AddFieldDto, AppComponentBase, AppsStoreService, + createProperties, FieldDto, - FieldPropertiesDto, HistoryChannelUpdated, ImmutableArray, MessageBus, NotificationService, - NumberFieldPropertiesDto, SchemasService, - StringFieldPropertiesDto, + UpdateFieldDto, UsersProviderService } from 'shared'; @@ -31,12 +30,15 @@ import { styleUrls: ['./schema-page.component.scss'], templateUrl: './schema-page.component.html' }) -export class SchemaPageComponent extends AppComponentBase implements OnInit { +export class SchemaPageComponent extends AppComponentBase implements OnDestroy, OnInit { + private routerSubscription: Subscription; + public fieldTypes: string[] = [ 'string', 'number' ]; + public schemaName: string; public schemaFields = ImmutableArray.empty(); public addFieldForm: FormGroup = @@ -53,10 +55,6 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { ]] }); - public get schemaName(): Observable { - return this.route.params.map(p => p['schemaName']); - } - constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService, private readonly schemasService: SchemasService, private readonly messageBus: MessageBus, @@ -66,14 +64,23 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { super(apps, notifications, users); } + public ngOnDestroy() { + this.routerSubscription.unsubscribe(); + } + public ngOnInit() { - this.load(); + this.routerSubscription = + this.route.params.map(p => p['schemaName']).subscribe(name => { + this.schemaName = name; + + this.reset(); + this.load(); + }); } public load() { - this.schemaName.combineLatest(this.appName(), (schemaName, appName) => { return { schemaName, appName }; }) - .do(() => this.reset()) - .switchMap(p => this.schemasService.getSchema(p.appName, p.schemaName)).retry(2) + this.appName() + .switchMap(app => this.schemasService.getSchema(app, this.schemaName)).retry(2) .subscribe(dto => { this.schemaFields = ImmutableArray.of(dto.fields); }, error => { @@ -81,8 +88,66 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { }); } - public updateField(field: FieldDto, newField: FieldDto) { - this.updateFields(this.schemaFields.replace(field, newField)); + public enableField(field: FieldDto) { + this.appName() + .switchMap(app => this.schemasService.enableField(app, this.schemaName, field.fieldId)).retry(2) + .subscribe(() => { + this.updateField(field, new FieldDto(field.fieldId, field.name, field.isHidden, false, field.properties)); + }, error => { + this.notifyError(error); + }); + } + + public disableField(field: FieldDto) { + this.appName() + .switchMap(app => this.schemasService.disableField(app, this.schemaName, field.fieldId)).retry(2) + .subscribe(() => { + this.updateField(field, new FieldDto(field.fieldId, field.name, field.isHidden, true, field.properties)); + }, error => { + this.notifyError(error); + }); + } + + public showField(field: FieldDto) { + this.appName() + .switchMap(app => this.schemasService.showField(app, this.schemaName, field.fieldId)).retry(2) + .subscribe(() => { + this.updateField(field, new FieldDto(field.fieldId, field.name, false, field.isDisabled, field.properties)); + }, error => { + this.notifyError(error); + }); + } + + public hideField(field: FieldDto) { + this.appName() + .switchMap(app => this.schemasService.hideField(app, this.schemaName, field.fieldId)).retry(2) + .subscribe(() => { + this.updateField(field, new FieldDto(field.fieldId, field.name, true, field.isDisabled, field.properties)); + }, error => { + this.notifyError(error); + }); + } + + public deleteField(field: FieldDto) { + this.appName() + .switchMap(app => this.schemasService.deleteField(app, this.schemaName, field.fieldId)).retry(2) + .subscribe(() => { + this.updateFields(this.schemaFields.remove(field)); + }, error => { + this.notifyError(error); + }); + } + + public saveField(field: FieldDto, newField: FieldDto) { + const request = new UpdateFieldDto(newField.properties); + + this.appName() + .switchMap(app => this.schemasService.putField(app, this.schemaName, field.fieldId, request)).retry(2) + .subscribe(() => { + this.updateField(field, new FieldDto(field.fieldId, field.name, newField.isHidden, field.isDisabled, newField.properties)); + }, error => { + this.notifyError(error); + }); } public addField() { @@ -91,15 +156,7 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { if (this.addFieldForm.valid) { this.addFieldForm.disable(); - let properties: FieldPropertiesDto; - - switch (this.addFieldForm.get('type').value) { - case 'string': - properties = new StringFieldPropertiesDto(); - break; - case 'number': - properties = new NumberFieldPropertiesDto(); - } + const properties = createProperties(this.addFieldForm.get('type').value); const dto = new AddFieldDto(this.addFieldForm.get('name').value, properties); @@ -108,10 +165,17 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { this.addFieldForm.enable(); }; - this.schemaName.combineLatest(this.appName(), (schemaName, appName) => { return { schemaName, appName }; }) - .switchMap(p => this.schemasService.postField(p.appName, p.schemaName, dto)) + this.appName() + .switchMap(app => this.schemasService.postField(app, this.schemaName, dto)) .subscribe(dto => { - this.updateFields(this.schemaFields.push(new FieldDto(this.addFieldForm.get('name').value, false, false, properties))); + const newField = + new FieldDto(parseInt(dto.id, 10), + this.addFieldForm.get('name').value, + false, + false, + properties); + + this.updateFields(this.schemaFields.push(newField)); reset(); }, error => { this.notifyError(error); @@ -124,6 +188,10 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit { this.schemaFields = ImmutableArray.empty(); } + public updateField(field: FieldDto, newField: FieldDto) { + this.updateFields(this.schemaFields.replace(field, newField)); + } + private updateFields(fields: ImmutableArray) { this.schemaFields = fields; diff --git a/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts b/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts index 17c468255..b14fd900a 100644 --- a/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.ts @@ -9,7 +9,11 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Observable, Subscription } from 'rxjs'; -import { fadeAnimation, FloatConverter } from 'shared'; +import { + fadeAnimation, + FloatConverter, + NumberFieldPropertiesDto +} from 'shared'; @Component({ selector: 'sqx-number-ui', @@ -25,24 +29,27 @@ export class NumberUIComponent implements OnDestroy, OnInit { @Input() public editForm: FormGroup; + @Input() + public properties: NumberFieldPropertiesDto; + public converter = new FloatConverter(); public hideAllowedValues: Observable; public ngOnInit() { this.editForm.addControl('editor', - new FormControl('Input', [ + new FormControl(this.properties.editor, [ Validators.required ])); this.editForm.addControl('placeholder', - new FormControl('', [ + new FormControl(this.properties.placeholder, [ Validators.maxLength(100) ])); this.editForm.addControl('allowedValues', - new FormControl(undefined, [])); + new FormControl(this.properties.allowedValues, [])); this.hideAllowedValues = - Observable.of(false) + Observable.of(this.properties.editor) .merge(this.editForm.get('editor').valueChanges) .map(x => !x || x === 'Input' || x === 'Textarea'); diff --git a/src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts b/src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts index e4609291c..482f15833 100644 --- a/src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts +++ b/src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.ts @@ -9,6 +9,8 @@ import { Component, Input, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { Observable } from 'rxjs'; +import { NumberFieldPropertiesDto } from 'shared'; + @Component({ selector: 'sqx-number-validation', styleUrls: ['number-validation.component.scss'], @@ -18,22 +20,23 @@ export class NumberValidationComponent implements OnInit { @Input() public editForm: FormGroup; + @Input() + public properties: NumberFieldPropertiesDto; + public hideDefaultValue: Observable; public ngOnInit() { this.editForm.addControl('maxValue', - new FormControl()); + new FormControl(this.properties.maxValue)); + this.editForm.addControl('minValue', - new FormControl()); - this.editForm.addControl('pattern', - new FormControl()); - this.editForm.addControl('patternMessage', - new FormControl()); + new FormControl(this.properties.minValue)); + this.editForm.addControl('defaultValue', - new FormControl()); + new FormControl(this.properties.defaultValue)); this.hideDefaultValue = - Observable.of(false) + Observable.of(this.properties.isRequired) .merge(this.editForm.get('isRequired').valueChanges) .map(x => !!x); } diff --git a/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html index b46b31457..d35e3fa3b 100644 --- a/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html +++ b/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html @@ -29,12 +29,12 @@ Input -