diff --git a/frontend/src/app/features/rules/pages/rules/rule.component.html b/frontend/src/app/features/rules/pages/rules/rule.component.html index 2771ba252..991650598 100644 --- a/frontend/src/app/features/rules/pages/rules/rule.component.html +++ b/frontend/src/app/features/rules/pages/rules/rule.component.html @@ -2,12 +2,13 @@
- +
diff --git a/frontend/src/app/features/settings/pages/clients/client.component.html b/frontend/src/app/features/settings/pages/clients/client.component.html index f9b98d175..a5afdae21 100644 --- a/frontend/src/app/features/settings/pages/clients/client.component.html +++ b/frontend/src/app/features/settings/pages/clients/client.component.html @@ -1,8 +1,12 @@
-
+
- +
@@ -10,7 +14,7 @@ {{ 'clients.connect' | sqxTranslate }}
-
+
- - + +
+
+
+ + +
- +
+ +
+
+ +
+
+ - -
-

- {{name || fallback}} + +
+
+

+ {{inputTitle || displayFallback}}

- -
- -
\ No newline at end of file +
+ +
+
+ +
+

+ \ No newline at end of file diff --git a/frontend/src/app/framework/angular/forms/editable-title.component.scss b/frontend/src/app/framework/angular/forms/editable-title.component.scss index 5579d5550..eb5b6f36c 100644 --- a/frontend/src/app/framework/angular/forms/editable-title.component.scss +++ b/frontend/src/app/framework/angular/forms/editable-title.component.scss @@ -1,34 +1,36 @@ @import 'mixins'; @import 'vars'; -.title { - @include hover-visible('.title-edit', inline); - position: relative; - - &-edit { - @include absolute(0, 0, null, null); - color: darken($color-border-dark, 20%); - cursor: pointer; - padding: .6rem .25rem; - } +:host { + display: block; +} - &-name { - display: inline; - font-size: 1.2rem; - font-weight: normal; - padding-right: 1.75rem; - } +.title-view { + @include hover-visible('.title-edit', block); - &-view { - @include truncate; - border-bottom: 1px solid transparent; - border-top: 0; - padding: .375rem 0; - position: absolute; + .col { + overflow: hidden; } } +.btn-placeholder { + padding-left: 0; + padding-right: 0; + width: 0; +} + +.row { + flex-wrap: nowrap; +} + h3 { + margin: 0; + + &.sm { + font-size: 1rem; + font-weight: normal; + } + &.fallback { color: $color-text-decent; } diff --git a/frontend/src/app/framework/angular/forms/editable-title.component.ts b/frontend/src/app/framework/angular/forms/editable-title.component.ts index 9c2a0a114..2d69fb0ab 100644 --- a/frontend/src/app/framework/angular/forms/editable-title.component.ts +++ b/frontend/src/app/framework/angular/forms/editable-title.component.ts @@ -6,42 +6,41 @@ */ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { UntypedFormControl, Validators } from '@angular/forms'; +import { FormControl, ValidatorFn, Validators } from '@angular/forms'; import { Keys } from '@app/framework/internal'; @Component({ - selector: 'sqx-editable-title[name]', + selector: 'sqx-editable-title[inputTitle]', styleUrls: ['./editable-title.component.scss'], templateUrl: './editable-title.component.html', }) export class EditableTitleComponent { @Output() - public nameChange = new EventEmitter(); + public inputTitleChange = new EventEmitter(); @Input() - public disabled?: boolean | null; + public inputTitle!: string; @Input() - public fallback = ''; + public inputTitleLength = 20; @Input() - public name!: string; + public inputTitleRequired = true; @Input() - public maxLength = 20; + public disabled?: boolean | null; @Input() - public set isRequired(value: boolean) { - const validator = - value ? - Validators.required : - Validators.nullValidator; + public closeButton = true; - this.renameForm.setValidators(validator); - } + @Input() + public size: 'sm' | 'md' | 'lg' = 'md'; + + @Input() + public displayFallback = ''; public renaming = false; - public renameForm = new UntypedFormControl(); + public renameForm = new FormControl(''); public onKeyDown(event: KeyboardEvent) { if (Keys.isEscape(event)) { @@ -54,7 +53,21 @@ export class EditableTitleComponent { return; } - this.renameForm.setValue(this.name || ''); + if (!this.renaming) { + let validators: ValidatorFn[] = []; + + if (this.inputTitleLength) { + validators.push(Validators.maxLength(this.inputTitleLength)); + } + + if (this.inputTitleRequired) { + validators.push(Validators.required); + } + + this.renameForm.setValidators(validators); + } + + this.renameForm.setValue(this.inputTitle || ''); this.renaming = !this.renaming; } @@ -64,10 +77,10 @@ export class EditableTitleComponent { } if (this.renameForm.valid) { - const name = this.renameForm.value; + const text = this.renameForm.value || ''; - this.nameChange.emit(name); - this.name = name; + this.inputTitleChange.emit(text); + this.inputTitle = text; this.renaming = false; } diff --git a/frontend/src/app/framework/angular/forms/editable-title.stories.ts b/frontend/src/app/framework/angular/forms/editable-title.stories.ts new file mode 100644 index 000000000..7f1ec2d0b --- /dev/null +++ b/frontend/src/app/framework/angular/forms/editable-title.stories.ts @@ -0,0 +1,134 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { moduleMetadata } from '@storybook/angular'; +import { Meta, Story } from '@storybook/angular/types-6-0'; +import { EditableTitleComponent, LocalizerService, SqxFrameworkModule } from '@app/framework'; + +export default { + title: 'Framework/EditableTitle', + component: EditableTitleComponent, + argTypes: { + inputTitle: { + control: 'inputTitle', + }, + closeButton: { + control: 'boolean', + }, + inputTitleRequired: { + control: 'boolean', + }, + inputTitleLength: { + control: 'number', + }, + size: { + control: 'select', + options: [ + 'sm', + 'md', + 'lg', + ], + }, + }, + args: { + closeButton: true, + inputTitleLength: 30, + inputTitleRequired: true, + }, + decorators: [ + moduleMetadata({ + imports: [ + BrowserAnimationsModule, + FormsModule, + ReactiveFormsModule, + SqxFrameworkModule, + SqxFrameworkModule.forRoot(), + ], + providers: [ + { provide: LocalizerService, useValue: new LocalizerService({}) }, + ], + }), + ], +} as Meta; + +const Template: Story = (args: EditableTitleComponent) => ({ + props: args, + template: ` +
+
+
+ + +
+
+ +
+
+
+ `, +}); + +export const Default = Template.bind({}); + +Default.args = { + inputTitle: 'My Title', + size: 'md', +}; + +export const DefaultNoCloseButton = Template.bind({}); + +DefaultNoCloseButton.args = { + inputTitle: 'My Title', + size: 'md', + closeButton: false, +}; + +export const Small = Template.bind({}); + +Small.args = { + inputTitle: 'My Title', + size: 'sm', +}; + +export const SmallNoCloseButton = Template.bind({}); + +SmallNoCloseButton.args = { + inputTitle: 'My Title', + size: 'sm', + closeButton: false, +}; + +export const Large = Template.bind({}); + +Large.args = { + inputTitle: 'My Title', + size: 'lg', +}; + +export const LargeNoCloseButton = Template.bind({}); + +LargeNoCloseButton.args = { + inputTitle: 'My Title', + size: 'lg', + closeButton: false, +}; + +export const LongTitle = Template.bind({}); + +LongTitle.args = { + inputTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + size: 'md', +}; \ No newline at end of file diff --git a/frontend/src/app/shared/components/schema-category.component.html b/frontend/src/app/shared/components/schema-category.component.html index 0f914a115..2ad60eb6e 100644 --- a/frontend/src/app/shared/components/schema-category.component.html +++ b/frontend/src/app/shared/components/schema-category.component.html @@ -6,16 +6,21 @@ (cdkDropListDropped)="changeCategory($event)">
  • -
    +
    -
    -
    - {{schemaCategory.displayName | sqxTranslate}} -
    +
    + +
    diff --git a/frontend/src/app/shared/components/schema-category.component.scss b/frontend/src/app/shared/components/schema-category.component.scss index 542d20fa3..140a16f43 100644 --- a/frontend/src/app/shared/components/schema-category.component.scss +++ b/frontend/src/app/shared/components/schema-category.component.scss @@ -3,10 +3,6 @@ $drag-margin: -8px; -.col { - overflow: hidden; -} - .btn { width: 2rem; @@ -59,6 +55,7 @@ $drag-margin: -8px; .nav-heading { margin-left: -1rem; margin-top: 0; + max-width: none; } .nav-collapsed { @@ -69,6 +66,14 @@ $drag-margin: -8px; margin-top: 1rem; } +.nav-category { + max-width: 100%; +} + +.nav-panel { + max-width: 100%; +} + .nav-item { align-items: center; @@ -81,12 +86,6 @@ $drag-margin: -8px; margin-bottom: 1px; } -.nav-category, -.nav-panel, -sqx-schema-category { - max-width: 100%; -} - .categories { padding: 0; padding-left: 1rem; diff --git a/frontend/src/app/shared/components/schema-category.component.ts b/frontend/src/app/shared/components/schema-category.component.ts index d922c2a41..a741db883 100644 --- a/frontend/src/app/shared/components/schema-category.component.ts +++ b/frontend/src/app/shared/components/schema-category.component.ts @@ -65,6 +65,12 @@ export class SchemaCategoryComponent implements OnChanges { } } + public changeName(name: string) { + if (name !== this.schemaCategory.displayName) { + this.schemasState.renameCategory(this.schemaCategory.displayName, name); + } + } + public changeCategory(drag: CdkDragDrop) { if (drag.previousContainer !== drag.container) { this.schemasState.changeCategory(drag.item.data, this.schemaCategory.name); diff --git a/frontend/src/app/shared/state/schemas.state.spec.ts b/frontend/src/app/shared/state/schemas.state.spec.ts index 34c58793b..da0b1fc4f 100644 --- a/frontend/src/app/shared/state/schemas.state.spec.ts +++ b/frontend/src/app/shared/state/schemas.state.spec.ts @@ -474,6 +474,18 @@ describe('SchemasState', () => { expect(schemasState.snapshot.schemas).toEqual([updated, schema2]); expect(schemasState.snapshot.selectedSchema).toEqual(updated); }); + + it('should update schema with matching category', () => { + const updated = createSchema(1, '_new'); + + schemasService.setup(x => x.putCategory(app, schema1, { name: 'new-name' }, version)) + .returns(() => of(updated)).verifiable(); + + schemasState.renameCategory('schema-category1', 'new-name').subscribe(); + + expect(schemasState.snapshot.schemas).toEqual([updated, schema2]); + expect(schemasState.snapshot.selectedSchema).toEqual(updated); + }); }); }); diff --git a/frontend/src/app/shared/state/schemas.state.ts b/frontend/src/app/shared/state/schemas.state.ts index 03515172f..7368997ef 100644 --- a/frontend/src/app/shared/state/schemas.state.ts +++ b/frontend/src/app/shared/state/schemas.state.ts @@ -6,7 +6,7 @@ */ import { Injectable } from '@angular/core'; -import { EMPTY, Observable, of } from 'rxjs'; +import { EMPTY, forkJoin, Observable, of } from 'rxjs'; import { catchError, finalize, tap } from 'rxjs/operators'; import { DialogService, LoadingState, shareMapSubscribed, shareSubscribed, State, Version } from '@app/framework'; import { AddFieldDto, CreateSchemaDto, FieldDto, FieldRule, NestedFieldDto, RootFieldDto, SchemaDto, SchemasService, UpdateFieldDto, UpdateSchemaDto, UpdateUIFields } from './../services/schemas.service'; @@ -186,6 +186,31 @@ export class SchemasState extends State { }, 'Category Removed'); } + public renameCategory(oldName: string, name: string) { + const schemas = this.snapshot.schemas.filter(x => x.category === oldName); + + return forkJoin(schemas.map(s => this.schemasService.putCategory(this.appName, s, { name }, s.version))).pipe( + tap(updated => { + this.next(s => { + let { schemas, selectedSchema } = s; + + for (const schema of updated) { + schemas = schemas.replacedBy('id', schema).sortedByString(x => x.displayName); + + selectedSchema = + schema && + selectedSchema && + selectedSchema.id === schema.id ? + schema : + selectedSchema; + } + + return { ...s, schemas, selectedSchema }; + }, 'Updated'); + }), + shareSubscribed(this.dialogs)); + } + public publish(schema: SchemaDto): Observable { return this.schemasService.publishSchema(this.appName, schema, schema.version).pipe( tap(updated => {