diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json index f9c75c249..805ed6543 100644 --- a/backend/i18n/frontend_en.json +++ b/backend/i18n/frontend_en.json @@ -239,6 +239,7 @@ "common.contents": "Contents", "common.continue": "Continue", "common.contributors": "Contributors", + "common.copy": "Copy", "common.create": "Create", "common.created": "Created", "common.daily": "Daily", @@ -278,6 +279,7 @@ "common.filters": "Filters", "common.folder": "Folder", "common.folders": "Folders", + "common.from": "From", "common.generalSettings": "Common", "common.generate": "Generate", "common.github": "Github", @@ -367,6 +369,7 @@ "common.tags": "Tags", "common.tagsAll": "All tags", "common.time": "Time", + "common.to": "To", "common.update": "Update", "common.upload": "Upload", "common.url": "URL", diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json index 7baf0d6cb..33bb9af2f 100644 --- a/backend/i18n/frontend_it.json +++ b/backend/i18n/frontend_it.json @@ -239,6 +239,7 @@ "common.contents": "Contenuti", "common.continue": "Continua", "common.contributors": "Collaboratori", + "common.copy": "Copy", "common.create": "Crea", "common.created": "Creato", "common.daily": "Daily", @@ -278,6 +279,7 @@ "common.filters": "Filtri", "common.folder": "Cartella", "common.folders": "Cartelle", + "common.from": "From", "common.generalSettings": "Impostazioni generali", "common.generate": "Genera", "common.github": "Github", @@ -367,6 +369,7 @@ "common.tags": "Tag", "common.tagsAll": "Tutti i tag", "common.time": "Ora", + "common.to": "To", "common.update": "Aggiorna", "common.upload": "Carica", "common.url": "URL", diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json index a8383f776..eba9442c9 100644 --- a/backend/i18n/frontend_nl.json +++ b/backend/i18n/frontend_nl.json @@ -239,6 +239,7 @@ "common.contents": "Inhoud", "common.continue": "Doorgaan", "common.contributors": "Bijdragers", + "common.copy": "Copy", "common.create": "Maken", "common.created": "Gemaakt", "common.daily": "Daily", @@ -278,6 +279,7 @@ "common.filters": "Filters", "common.folder": "Folder", "common.folders": "Mappen", + "common.from": "From", "common.generalSettings": "Algemeen", "common.generate": "Genereren", "common.github": "Github", @@ -367,6 +369,7 @@ "common.tags": "Tags", "common.tagsAll": "Alle tags", "common.time": "Tijd", + "common.to": "To", "common.update": "Update", "common.upload": "Upload", "common.url": "URL", diff --git a/backend/i18n/frontend_zh.json b/backend/i18n/frontend_zh.json index bf349ed5e..149d7e192 100644 --- a/backend/i18n/frontend_zh.json +++ b/backend/i18n/frontend_zh.json @@ -239,6 +239,7 @@ "common.contents": "内容", "common.continue": "继续", "common.contributors": "贡献者", + "common.copy": "Copy", "common.create": "创建", "common.created": "创建", "common.daily": "Daily", @@ -278,6 +279,7 @@ "common.filters": "过滤器", "common.folder": "文件夹", "common.folders": "文件夹", + "common.from": "From", "common.generalSettings": "通用", "common.generate": "生成", "common.github": "Github", @@ -367,6 +369,7 @@ "common.tags": "标签", "common.tagsAll": "所有标签", "common.time": "时间", + "common.to": "To", "common.update": "更新", "common.upload": "上传", "common.url": "URL", diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json index f9c75c249..805ed6543 100644 --- a/backend/i18n/source/frontend_en.json +++ b/backend/i18n/source/frontend_en.json @@ -239,6 +239,7 @@ "common.contents": "Contents", "common.continue": "Continue", "common.contributors": "Contributors", + "common.copy": "Copy", "common.create": "Create", "common.created": "Created", "common.daily": "Daily", @@ -278,6 +279,7 @@ "common.filters": "Filters", "common.folder": "Folder", "common.folders": "Folders", + "common.from": "From", "common.generalSettings": "Common", "common.generate": "Generate", "common.github": "Github", @@ -367,6 +369,7 @@ "common.tags": "Tags", "common.tagsAll": "All tags", "common.time": "Time", + "common.to": "To", "common.update": "Update", "common.upload": "Upload", "common.url": "URL", diff --git a/backend/src/Squidex/wwwroot/scripts/editor-references.html b/backend/src/Squidex/wwwroot/scripts/editor-references.html new file mode 100644 index 000000000..1fd828f43 --- /dev/null +++ b/backend/src/Squidex/wwwroot/scripts/editor-references.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/frontend/app/features/content/pages/content/editor/field-copy-button.component.scss b/frontend/app/features/content/pages/content/editor/field-copy-button.component.scss new file mode 100644 index 000000000..0e4b20578 --- /dev/null +++ b/frontend/app/features/content/pages/content/editor/field-copy-button.component.scss @@ -0,0 +1,3 @@ +.section { + padding: .25rem 1rem; +} \ No newline at end of file diff --git a/frontend/app/features/content/pages/content/editor/field-copy-button.component.ts b/frontend/app/features/content/pages/content/editor/field-copy-button.component.ts new file mode 100644 index 000000000..74064dfb4 --- /dev/null +++ b/frontend/app/features/content/pages/content/editor/field-copy-button.component.ts @@ -0,0 +1,61 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { AppLanguageDto, fadeAnimation, FieldForm, ModalModel } from '@app/shared'; + +@Component({ + selector: 'sqx-field-copy-button[formModel][languages]', + styleUrls: ['./field-copy-button.component.scss'], + templateUrl: './field-copy-button.component.html', + animations: [ + fadeAnimation, + ], +}) +export class FieldCopyButtonComponent implements OnChanges { + @Input() + public formModel: FieldForm; + + @Input() + public languages: ReadonlyArray; + + public languageCodes: ReadonlyArray; + + public copySource: string; + public copyTargets: ReadonlyArray; + + public dropdown = new ModalModel(); + + public get isLocalized() { + return this.formModel.field.isLocalizable && this.languages.length > 1; + } + + public ngOnChanges(changes: SimpleChanges) { + if (changes['languages']) { + this.setCopySource(this.languages[0]?.iso2Code); + } + } + + public setCopySource(language: string) { + this.copySource = language; + this.copyTargets = []; + + this.languageCodes = this.languages.map(x => x.iso2Code).filter(x => x !== language); + } + + public copy() { + if (this.copySource && this.copyTargets?.length > 0) { + const source = this.formModel.get(this.copySource).getRawValue(); + + for (const target of this.copyTargets) { + if (target !== this.copySource) { + this.formModel.get(target)?.setValue(source); + } + } + } + } +} diff --git a/frontend/app/features/content/pages/content/inspecting/content-inspection.component.html b/frontend/app/features/content/pages/content/inspecting/content-inspection.component.html index 531fdbbb8..8e8ccf938 100644 --- a/frontend/app/features/content/pages/content/inspecting/content-inspection.component.html +++ b/frontend/app/features/content/pages/content/inspecting/content-inspection.component.html @@ -1,3 +1,5 @@ + +
  • diff --git a/frontend/app/features/content/pages/content/inspecting/content-inspection.component.scss b/frontend/app/features/content/pages/content/inspecting/content-inspection.component.scss index ee8250bf4..dc83799a9 100644 --- a/frontend/app/features/content/pages/content/inspecting/content-inspection.component.scss +++ b/frontend/app/features/content/pages/content/inspecting/content-inspection.component.scss @@ -10,6 +10,12 @@ .editor { @include absolute(0, 0, 0, 0); } + + .form-bubble { + .form-alert { + @include absolute(0, 2rem, auto, auto); + } + } } .inner-menu, diff --git a/frontend/app/features/content/pages/content/inspecting/content-inspection.component.ts b/frontend/app/features/content/pages/content/inspecting/content-inspection.component.ts index 397ed21db..d053666d5 100644 --- a/frontend/app/features/content/pages/content/inspecting/content-inspection.component.ts +++ b/frontend/app/features/content/pages/content/inspecting/content-inspection.component.ts @@ -5,8 +5,8 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { AppLanguageDto, ContentDto, ContentsService, ContentsState, ErrorDto } from '@app/shared'; +import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; +import { AppLanguageDto, ContentDto, ContentsService, ContentsState, ErrorDto, ToolbarService } from '@app/shared'; import { BehaviorSubject, combineLatest, of } from 'rxjs'; import { filter, map, switchMap } from 'rxjs/operators'; @@ -17,7 +17,7 @@ type Mode = 'Content' | 'Data' | 'FlatData'; styleUrls: ['./content-inspection.component.scss'], templateUrl: './content-inspection.component.html', }) -export class ContentInspectionComponent implements OnChanges { +export class ContentInspectionComponent implements OnChanges, OnDestroy { private languageChanges$ = new BehaviorSubject(null); @Input() @@ -58,27 +58,53 @@ export class ContentInspectionComponent implements OnChanges { })); constructor( + private readonly changeDetector: ChangeDetectorRef, private readonly contentsService: ContentsService, private readonly contentsState: ContentsState, + private toolbar: ToolbarService, ) { } + public ngOnDestroy() { + this.toolbar.remove(this); + } + public ngOnChanges(changes: SimpleChanges) { if (changes['language']) { this.languageChanges$.next(this.language); } + + if (changes['content']) { + this.updateActions(); + } + } + + private updateActions() { + if (this.mode.value === 'Data' && this.content.canUpdate) { + this.toolbar.addButton(this, 'common.save', () => { + this.save(); + + this.changeDetector.detectChanges(); + }); + } else { + this.toolbar.remove(this); + } } public setData(data: any) { this.contentData = data; + + this.updateActions(); } public setMode(mode: Mode) { this.mode.next(mode); + + this.updateActions(); } - public save() { - if (!this.contentData || this.mode.value !== 'Data') { + private save() { + if (!this.contentData) { return; } diff --git a/frontend/app/features/content/pages/content/references/content-references.component.ts b/frontend/app/features/content/pages/content/references/content-references.component.ts index 22f27a3e9..7dd3cfd2f 100644 --- a/frontend/app/features/content/pages/content/references/content-references.component.ts +++ b/frontend/app/features/content/pages/content/references/content-references.component.ts @@ -5,8 +5,8 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer, Router2State } from '@app/shared'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer, Router2State, ToolbarService } from '@app/shared'; @Component({ selector: 'sqx-content-references[content][language][languages]', @@ -17,7 +17,7 @@ import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer, Router2State, ComponentContentsState, ], }) -export class ContentReferencesComponent implements OnChanges { +export class ContentReferencesComponent implements OnChanges, OnInit, OnDestroy { @Input() public content: ContentDto; @@ -33,9 +33,29 @@ export class ContentReferencesComponent implements OnChanges { constructor( public readonly contentsRoute: Router2State, public readonly contentsState: ComponentContentsState, + private readonly changeDetector: ChangeDetectorRef, + private readonly toolbar: ToolbarService, ) { } + public ngOnDestroy() { + this.toolbar.remove(this); + } + + public ngOnInit() { + this.toolbar.addButton(this, 'contents.validate', () => { + this.validate(); + + this.changeDetector.detectChanges(); + }); + + this.toolbar.addButton(this, 'contents.publishAll', () => { + this.publishAll(); + + this.changeDetector.detectChanges(); + }); + } + public ngOnChanges(changes: SimpleChanges) { if (changes['content'] || changes['mode']) { this.contentsState.schema = { name: this.content.schemaName }; @@ -56,11 +76,11 @@ export class ContentReferencesComponent implements OnChanges { } } - public validate() { + private validate() { this.contentsState.validate(this.contentsState.snapshot.contents); } - public publish() { + private publishAll() { this.contentsState.changeManyStatus(this.contentsState.snapshot.contents.filter(x => x.canPublish), 'Published'); } diff --git a/frontend/app/features/content/shared/forms/iframe-editor.component.html b/frontend/app/features/content/shared/forms/iframe-editor.component.html index 93f4d6cd5..ab6c6619c 100644 --- a/frontend/app/features/content/shared/forms/iframe-editor.component.html +++ b/frontend/app/features/content/shared/forms/iframe-editor.component.html @@ -1,6 +1,6 @@
    - +
    diff --git a/frontend/app/framework/angular/forms/editors/checkbox-group.component.html b/frontend/app/framework/angular/forms/editors/checkbox-group.component.html index c5a90c39d..4ac356b25 100644 --- a/frontend/app/framework/angular/forms/editors/checkbox-group.component.html +++ b/frontend/app/framework/angular/forms/editors/checkbox-group.component.html @@ -1,7 +1,7 @@
    -
    +
    ; // True when all checkboxes can be shown as single line. - isSingleLine?: boolean; + isSingleline?: boolean; } @Component({ @@ -43,6 +43,9 @@ export class CheckboxGroupComponent extends StatefulControlComponent; + @Input() + public layout: 'Auto' | 'Singletine' | 'Multiline' = 'Auto'; + @Input() public set disabled(value: boolean | undefined | null) { this.setDisabledState(value === true); @@ -87,6 +90,7 @@ export class CheckboxGroupComponent extends StatefulControlComponent= 0; } + + public trackByValue(_index: number, tag: TagValue) { + return tag.id; + } } let canvas: HTMLCanvasElement | null = null; diff --git a/frontend/app/framework/angular/toolbar.component.html b/frontend/app/framework/angular/toolbar.component.html new file mode 100644 index 000000000..af29d7976 --- /dev/null +++ b/frontend/app/framework/angular/toolbar.component.html @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/frontend/app/framework/angular/toolbar.component.scss b/frontend/app/framework/angular/toolbar.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/app/framework/angular/toolbar.component.ts b/frontend/app/framework/angular/toolbar.component.ts new file mode 100644 index 000000000..fc251cf8a --- /dev/null +++ b/frontend/app/framework/angular/toolbar.component.ts @@ -0,0 +1,22 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ToolbarService } from '@app/framework/internal'; + +@Component({ + selector: 'sqx-toolbar', + styleUrls: ['./toolbar.component.scss'], + templateUrl: './toolbar.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ToolbarComponent { + constructor( + public readonly toolbar: ToolbarService, + ) { + } +} diff --git a/frontend/app/framework/declarations.ts b/frontend/app/framework/declarations.ts index cd8fe0f4a..69ec14ac3 100644 --- a/frontend/app/framework/declarations.ts +++ b/frontend/app/framework/declarations.ts @@ -77,6 +77,7 @@ export * from './angular/sync-width.directive'; export * from './angular/tab-router-link.directive'; export * from './angular/template-wrapper.directive'; export * from './angular/title.component'; +export * from './angular/toolbar.component'; export * from './angular/video-player.component'; export * from './internal'; export * from './state'; diff --git a/frontend/app/framework/internal.ts b/frontend/app/framework/internal.ts index 29888d35b..284407380 100644 --- a/frontend/app/framework/internal.ts +++ b/frontend/app/framework/internal.ts @@ -15,6 +15,7 @@ export * from './services/clipboard.service'; export * from './services/dialog.service'; export * from './services/loading.service'; export * from './services/local-store.service'; +export * from './services/localizer.service'; export * from './services/message-bus.service'; export * from './services/onboarding.service'; export * from './services/resize.service'; @@ -22,7 +23,7 @@ export * from './services/resource-loader.service'; export * from './services/shortcut.service'; export * from './services/temp.service'; export * from './services/title.service'; -export * from './services/localizer.service'; +export * from './services/toolbar.service'; export * from './utils/array-helper'; export * from './utils/cookies'; export * from './utils/date-helper'; diff --git a/frontend/app/framework/module.ts b/frontend/app/framework/module.ts index fa3e7f860..150baffc7 100644 --- a/frontend/app/framework/module.ts +++ b/frontend/app/framework/module.ts @@ -11,7 +11,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { ColorPickerModule } from 'ngx-color-picker'; -import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, ConfirmClickDirective, ControlErrorsComponent, CopyDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, HighlightPipe, HoverBackgroundDirective, ImageSourceDirective, IndeterminateValueDirective, ISODatePipe, KeysPipe, KNumberPipe, LanguageSelectorComponent, LayoutComponent, LayoutContainerDirective, LightenPipe, ListViewComponent, LoadingInterceptor, LoadingService, LocalizedInputComponent, LocalStoreService, MarkdownInlinePipe, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MoneyPipe, MonthPipe, OnboardingService, OnboardingTooltipComponent, PagerComponent, ParentLinkDirective, PopupLinkDirective, ProgressBarComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutDirective, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, SyncScollingDirective, SyncWidthDirective, TabRouterlinkDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, TooltipDirective, TransformInputDirective, TranslatePipe, VideoPlayerComponent } from './declarations'; +import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, ConfirmClickDirective, ControlErrorsComponent, CopyDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, HighlightPipe, HoverBackgroundDirective, ImageSourceDirective, IndeterminateValueDirective, ISODatePipe, KeysPipe, KNumberPipe, LanguageSelectorComponent, LayoutComponent, LayoutContainerDirective, LightenPipe, ListViewComponent, LoadingInterceptor, LoadingService, LocalizedInputComponent, LocalStoreService, MarkdownInlinePipe, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MoneyPipe, MonthPipe, OnboardingService, OnboardingTooltipComponent, PagerComponent, ParentLinkDirective, PopupLinkDirective, ProgressBarComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutDirective, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, SyncScollingDirective, SyncWidthDirective, TabRouterlinkDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, ToolbarComponent, TooltipDirective, TransformInputDirective, TranslatePipe, VideoPlayerComponent } from './declarations'; @NgModule({ imports: [ @@ -94,6 +94,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc TagEditorComponent, TemplateWrapperDirective, TitleComponent, + ToolbarComponent, ToggleComponent, TooltipDirective, TransformInputDirective, @@ -176,6 +177,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc TagEditorComponent, TemplateWrapperDirective, TitleComponent, + ToolbarComponent, ToggleComponent, TooltipDirective, TransformInputDirective, diff --git a/frontend/app/framework/services/toolbar.service.spec.ts b/frontend/app/framework/services/toolbar.service.spec.ts new file mode 100644 index 000000000..8b182b0c3 --- /dev/null +++ b/frontend/app/framework/services/toolbar.service.spec.ts @@ -0,0 +1,113 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { ButtonItem, ToolbarService } from './toolbar.service'; + +describe('ToolbarService', () => { + it('should instantiate', () => { + const toolbarService = new ToolbarService(); + + expect(toolbarService).toBeDefined(); + }); + + it('should add button to toolbar', () => { + const toolbarService = new ToolbarService(); + + let buttons: ReadonlyArray; + let buttonsTriggered = 0; + + toolbarService.buttonsChanges.subscribe(result => { + buttons = result; + buttonsTriggered++; + }); + + toolbarService.addButton(undefined, 'button1', () => {}); + toolbarService.addButton(undefined, 'button2', () => {}); + + expect(buttons!.length).toBe(2); + expect(buttonsTriggered).toEqual(3); + }); + + it('should replace button in toolbar', () => { + const toolbarService = new ToolbarService(); + + let buttons: ReadonlyArray; + let buttonsTriggered = 0; + + toolbarService.buttonsChanges.subscribe(result => { + buttons = result; + buttonsTriggered++; + }); + + toolbarService.addButton(undefined, 'button1', () => {}); + toolbarService.addButton(undefined, 'button1', () => {}, { disabled: true }); + + expect(buttons!.length).toBe(1); + expect(buttonsTriggered).toEqual(3); + }); + + it('should not replace button in toolbar if nothing changed', () => { + const toolbarService = new ToolbarService(); + + let buttons: ReadonlyArray; + let buttonsTriggered = 0; + + toolbarService.buttonsChanges.subscribe(result => { + buttons = result; + buttonsTriggered++; + }); + + const action = () => {}; + + toolbarService.addButton(undefined, 'button1', action); + toolbarService.addButton(undefined, 'button1', action); + + expect(buttons!.length).toBe(1); + expect(buttonsTriggered).toEqual(2); + }); + + it('should remove buttons by owner', () => { + const toolbarService = new ToolbarService(); + + let buttons: ReadonlyArray; + let buttonsTriggered = 0; + + const owner1 = {}; + const owner2 = {}; + + toolbarService.buttonsChanges.subscribe(result => { + buttons = result; + buttonsTriggered++; + }); + + toolbarService.addButton(owner1, 'button1', () => {}); + toolbarService.addButton(owner2, 'button2', () => {}); + toolbarService.remove(owner1); + + expect(buttons!.length).toBe(1); + expect(buttonsTriggered).toEqual(4); + }); + + it('should remove all buttons', () => { + const toolbarService = new ToolbarService(); + + let buttons: ReadonlyArray; + let buttonsTriggered = 0; + + toolbarService.buttonsChanges.subscribe(result => { + buttons = result; + buttonsTriggered++; + }); + + toolbarService.addButton(undefined, 'button1', () => {}); + toolbarService.addButton(undefined, 'button2', () => {}); + toolbarService.removeAll(); + + expect(buttons!.length).toBe(0); + expect(buttonsTriggered).toEqual(4); + }); +}); diff --git a/frontend/app/framework/services/toolbar.service.ts b/frontend/app/framework/services/toolbar.service.ts new file mode 100644 index 000000000..79f30ac2c --- /dev/null +++ b/frontend/app/framework/services/toolbar.service.ts @@ -0,0 +1,55 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { Types } from './../utils/types'; + +export type ButtonItem = { owner: any; name: string; method: () => void } & ButtonOptions; +export type ButtonOptions = { disabled?: boolean; color?: string }; + +@Injectable() +export class ToolbarService { + private readonly buttons$ = new BehaviorSubject>([]); + + public get buttonsChanges(): Observable> { + return this.buttons$; + } + + public addButton(owner: any, name: string, method: () => void, options?: ButtonOptions) { + const newButton = { owner, name, method, disabled: options?.disabled, color: options?.color || 'primary' }; + + const buttons = this.buttons$.value; + const button = buttons.find(x => x.name === name); + + if (!button || !Types.equals(newButton, button)) { + const newButtons = this.buttons$.value.filter(x => x.name !== name); + + newButtons.push(newButton); + + this.buttons$.next(newButtons); + } + } + + public remove(owner: any) { + const buttons = this.buttons$.value; + + const newButtons = buttons.filter(x => x.owner !== owner); + + if (newButtons.length !== buttons.length) { + this.buttons$.next(newButtons); + } + } + + public removeAll() { + const buttons = this.buttons$.value; + + if (buttons.length > 0) { + this.buttons$.next([]); + } + } +} diff --git a/frontend/app/shared/state/contents.forms-helpers.ts b/frontend/app/shared/state/contents.forms-helpers.ts index 4769eaa7e..02c295d19 100644 --- a/frontend/app/shared/state/contents.forms-helpers.ts +++ b/frontend/app/shared/state/contents.forms-helpers.ts @@ -9,7 +9,7 @@ /* eslint-disable no-useless-return */ import { AbstractControl, ValidatorFn } from '@angular/forms'; -import { Types } from '@app/framework'; +import { getRawValue, Types } from '@app/framework'; import { BehaviorSubject, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { AppLanguageDto } from './../services/app-languages.service'; @@ -302,6 +302,16 @@ export abstract class AbstractContentForm { this.isRequired = field.properties.isRequired; } - public copyFrom(source: FieldForm, key: string) { - const target = this.get(key); - - if (!target) { - return; - } - - const value = source.get(key)?.form.value; - - target.prepareLoad(value); - target.form.reset(source.get(key)?.form.value); - } - - public copyAllFrom(source: FieldForm) { - const value = source.form.getRawValue(); - - this.prepareLoad(value); - - this.form.reset(value); - } - public get(language: string | LanguageDto) { if (this.field.isLocalizable) { return this.partitions[language['iso2Code'] || language]; diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss index 9ff1fc145..537110605 100644 --- a/frontend/app/theme/_forms.scss +++ b/frontend/app/theme/_forms.scss @@ -114,7 +114,6 @@ } .form-alert { - @include absolute(1.55rem, 0, auto, auto); font-size: .9rem; font-weight: normal; padding: 1rem;