mirror of https://github.com/Squidex/squidex.git
Browse Source
* Refactor content-page actions. * Copy drop down. * File was not saved. * Getting rid of toolbar logic from content-page. * Better reuse of components. * Fix testspull/772/head
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
38 changed files with 570 additions and 137 deletions
@ -0,0 +1,83 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
|
|||
<!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js --> |
|||
<script src="editor-sdk.js"></script> |
|||
|
|||
<link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/build/app.css"> |
|||
|
|||
<style> |
|||
body { |
|||
height: 38px; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<select class="form-select" id="editor"> |
|||
<option></option> |
|||
</textarea> |
|||
|
|||
<script> |
|||
const element = document.getElementById('editor'); |
|||
|
|||
// When the field is instantiated it notifies the UI that it has been loaded. |
|||
// |
|||
// Furthermore it sends the current size to the parent. |
|||
const field = new SquidexFormField(); |
|||
|
|||
field.onInit(context => { |
|||
// Fetch the references with a custom filter. |
|||
fetch(`${context.apiUrl}/content/${context.appName}/references?filter=data/isActive/iv eq true`, { |
|||
headers: { |
|||
Authorization: `Bearer ${context.user.user.access_token}` |
|||
} |
|||
}) |
|||
.then(x => x.json()) |
|||
.then(x => { |
|||
for (var item of x.items) { |
|||
// Use the title field as option text. |
|||
element.add(new Option(item.data.title.iv, item.id)); |
|||
} |
|||
|
|||
// Update the value again for the new options. |
|||
updateValue(field.getValue()); |
|||
}) |
|||
}); |
|||
|
|||
// Handle the value change event and set the text to the editor. |
|||
field.onValueChanged(function (value) { |
|||
updateValue(value); |
|||
}); |
|||
|
|||
// Disable the editor when it should be disabled. |
|||
field.onDisabled(function (disabled) { |
|||
updateDisabled(disabled); |
|||
}); |
|||
|
|||
element.addEventListener('change', event => { |
|||
if (element.value) { |
|||
field.valueChanged([element.value]); |
|||
} else { |
|||
field.valueChanged([]); |
|||
} |
|||
}); |
|||
|
|||
function updateDisabled(disabled) { |
|||
element.disabled = disabled; |
|||
} |
|||
|
|||
function updateValue(value) { |
|||
if (Array.isArray(value) && value.length > 0) { |
|||
element.value = value[0]; |
|||
} else { |
|||
element.value = undefined; |
|||
} |
|||
} |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,37 @@ |
|||
<ng-container *ngIf="isLocalized"> |
|||
<button type="button" class="btn btn-outline-secondary btn-sm ms-1 dropdown-toggle" title="{{ 'common.copy' | sqxTranslate }}" (click)="dropdown.toggle()" #button tabindex="-1"> |
|||
<i class="icon-copy"></i> |
|||
</button> |
|||
|
|||
<ng-container *sqxModal="dropdown"> |
|||
<div class="dropdown-menu" [sqxAnchoredTo]="button" @fade> |
|||
<div class="section d-flex justify-content-end"> |
|||
<button type="button" class="btn btn-primary" (click)="copy()" tabindex="-1"> |
|||
{{ 'common.copy' | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="dropdown-divider"></div> |
|||
|
|||
<div class="section row"> |
|||
<label class="col-auto col-form-label" for="languageSource">{{ 'common.from' | sqxTranslate }}</label> |
|||
|
|||
<div class="col"> |
|||
<select class="form-select" id="languagesSource" |
|||
[ngModel]="copySource" |
|||
(ngModelChange)="setCopySource($event)"> |
|||
<option *ngFor="let language of languages" [ngValue]="language.iso2Code">{{language.iso2Code}}</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dropdown-divider"></div> |
|||
|
|||
<div class="section"> |
|||
<label>{{ 'common.to' | sqxTranslate }}</label> |
|||
|
|||
<sqx-checkbox-group [(ngModel)]="copyTargets" [values]="languageCodes" layout="Multiline"></sqx-checkbox-group> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</ng-container> |
|||
@ -0,0 +1,3 @@ |
|||
.section { |
|||
padding: .25rem 1rem; |
|||
} |
|||
@ -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<AppLanguageDto>; |
|||
|
|||
public languageCodes: ReadonlyArray<string>; |
|||
|
|||
public copySource: string; |
|||
public copyTargets: ReadonlyArray<string>; |
|||
|
|||
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); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<ng-container *ngIf="toolbar.buttonsChanges | async; let buttons"> |
|||
<button type="submit" class="btn btn-{{button.color}} ms-2" *ngFor="let button of buttons" (click)="button.method()" [disabled]="button.disabled"> |
|||
{{ button.name| sqxTranslate }} |
|||
</button> |
|||
</ng-container> |
|||
@ -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, |
|||
) { |
|||
} |
|||
} |
|||
@ -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<ButtonItem>; |
|||
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<ButtonItem>; |
|||
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<ButtonItem>; |
|||
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<ButtonItem>; |
|||
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<ButtonItem>; |
|||
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); |
|||
}); |
|||
}); |
|||
@ -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<ReadonlyArray<ButtonItem>>([]); |
|||
|
|||
public get buttonsChanges(): Observable<ReadonlyArray<ButtonItem>> { |
|||
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([]); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue