mirror of https://github.com/Squidex/squidex.git
Sebastian
4 years ago
65 changed files with 1153 additions and 691 deletions
@ -0,0 +1,53 @@ |
|||
<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> |
|||
|
|||
<style> |
|||
.editor { |
|||
border: 1px solid #eee; |
|||
border-radius: 4px; |
|||
height: 500px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
</head> |
|||
|
|||
<body style="margin: 0px; padding: 0px;"> |
|||
<textarea name="content" class="editor" id="editor"></textarea> |
|||
|
|||
<script> |
|||
var 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. |
|||
var field = new SquidexFormField(); |
|||
|
|||
field.onValueChanged(function (value) { |
|||
if (value) { |
|||
element.value = JSON.stringify(value); |
|||
} else { |
|||
element.value = ''; |
|||
} |
|||
}); |
|||
|
|||
field.onDisabled(function (disabled) { |
|||
element.disabled = disabled; |
|||
}); |
|||
|
|||
element.addEventListener('change', function () { |
|||
var value = element.value; |
|||
|
|||
if (value) { |
|||
field.valueChanged(JSON.parse(value)); |
|||
} else { |
|||
field.valueChanged(undefined); |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
Before Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 429 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 703 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 102 KiB |
@ -0,0 +1,153 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { FormControl, FormGroup } from '@angular/forms'; |
|||
import { FormArrayTemplate, TemplatedFormArray } from './templated-form-array'; |
|||
|
|||
describe('TemplatedFormArray', () => { |
|||
class Template implements FormArrayTemplate { |
|||
public clearCalled = 0; |
|||
public removeCalled: number[] = []; |
|||
|
|||
public createControl() { |
|||
return new FormGroup({ |
|||
value: new FormControl(), |
|||
}); |
|||
} |
|||
|
|||
public clearControls() { |
|||
this.clearCalled++; |
|||
} |
|||
|
|||
public removeControl(index: number) { |
|||
this.removeCalled.push(index); |
|||
} |
|||
} |
|||
|
|||
let formTemplate: Template; |
|||
let formArray: TemplatedFormArray; |
|||
|
|||
beforeEach(() => { |
|||
formTemplate = new Template(); |
|||
formArray = new TemplatedFormArray(formTemplate); |
|||
}); |
|||
|
|||
type Test = [ (value: any) => void, string]; |
|||
|
|||
const methods: Test[] = [ |
|||
[x => formArray.setValue(x), 'setValue'], |
|||
[x => formArray.patchValue(x), 'patchValue'], |
|||
[x => formArray.reset(x), 'reset'], |
|||
]; |
|||
|
|||
methods.forEach(([method, name]) => { |
|||
it(`Should call template to construct items for ${name}`, () => { |
|||
const value1 = [{ |
|||
value: 1, |
|||
}, { |
|||
value: 2, |
|||
}]; |
|||
|
|||
method(value1); |
|||
|
|||
expect(formArray.value).toEqual(value1); |
|||
}); |
|||
|
|||
it(`Should call template to remove items for ${name}`, () => { |
|||
const value1 = [{ |
|||
value: 1, |
|||
}, { |
|||
value: 2, |
|||
}, { |
|||
value: 3, |
|||
}, { |
|||
value: 4, |
|||
}]; |
|||
|
|||
const value2 = [{ |
|||
value: 1, |
|||
}, { |
|||
value: 2, |
|||
}]; |
|||
|
|||
method(value1); |
|||
method(value2); |
|||
|
|||
expect(formArray.value).toEqual(value2); |
|||
expect(formTemplate.clearCalled).toEqual(0); |
|||
expect(formTemplate.removeCalled).toEqual([3, 2]); |
|||
}); |
|||
|
|||
it(`Should call template to clear items with undefined for ${name}`, () => { |
|||
const value1 = [{ |
|||
value: 1, |
|||
}, { |
|||
value: 2, |
|||
}]; |
|||
|
|||
method(value1); |
|||
method(undefined); |
|||
|
|||
expect(formArray.value).toEqual(undefined); |
|||
expect(formTemplate.clearCalled).toEqual(1); |
|||
expect(formTemplate.removeCalled).toEqual([]); |
|||
}); |
|||
|
|||
it(`Should call template to clear items with empty array for ${name}`, () => { |
|||
const value1 = [{ |
|||
value: 1, |
|||
}, { |
|||
value: 2, |
|||
}]; |
|||
|
|||
method(value1); |
|||
method([]); |
|||
|
|||
expect(formArray.value).toEqual([]); |
|||
expect(formTemplate.clearCalled).toEqual(1); |
|||
expect(formTemplate.removeCalled).toEqual([]); |
|||
}); |
|||
}); |
|||
|
|||
it('should add control', () => { |
|||
formArray.add(); |
|||
formArray.add(); |
|||
|
|||
expect(formArray.value).toEqual([{ |
|||
value: null, |
|||
}, { |
|||
value: null, |
|||
}]); |
|||
}); |
|||
|
|||
it('should call template when cleared', () => { |
|||
formArray.add(); |
|||
formArray.clear(); |
|||
|
|||
expect(formTemplate.clearCalled).toEqual(1); |
|||
}); |
|||
|
|||
it('should not call template when clearing empty form', () => { |
|||
formArray.clear(); |
|||
|
|||
expect(formTemplate.clearCalled).toEqual(0); |
|||
}); |
|||
|
|||
it('should call template when item removed', () => { |
|||
formArray.add(); |
|||
formArray.removeAt(0); |
|||
|
|||
expect(formTemplate.removeCalled).toEqual([0]); |
|||
}); |
|||
|
|||
it('should not call template when item to remove out of bounds', () => { |
|||
formArray.add(); |
|||
formArray.removeAt(1); |
|||
|
|||
expect(formTemplate.removeCalled).toEqual([]); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,86 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { AbstractControl, AbstractControlOptions, AsyncValidatorFn, ValidatorFn } from '@angular/forms'; |
|||
import { Types } from '@app/framework/internal'; |
|||
import { UndefinableFormArray } from './undefinable-form-array'; |
|||
|
|||
export interface FormArrayTemplate { |
|||
createControl(value: any, initialValue?: any): AbstractControl; |
|||
|
|||
removeControl?(index: number, control: AbstractControl) : void; |
|||
|
|||
clearControls?(): void; |
|||
} |
|||
|
|||
export class TemplatedFormArray extends UndefinableFormArray { |
|||
constructor(public readonly template: FormArrayTemplate, |
|||
validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null, |
|||
) { |
|||
super([], validatorOrOpts, asyncValidator); |
|||
} |
|||
|
|||
public setValue(value?: any[], options?: { onlySelf?: boolean; emitEvent?: boolean }) { |
|||
this.prepare(value); |
|||
|
|||
super.setValue(value, options); |
|||
} |
|||
|
|||
public patchValue(value?: any[], options?: { onlySelf?: boolean; emitEvent?: boolean }) { |
|||
this.prepare(value); |
|||
|
|||
super.patchValue(value, options); |
|||
} |
|||
|
|||
public reset(value?: any[], options?: { onlySelf?: boolean; emitEvent?: boolean }) { |
|||
this.prepare(value); |
|||
|
|||
super.reset(value, options); |
|||
} |
|||
|
|||
public add(initialValue?: any) { |
|||
const control = this.template.createControl({}, initialValue); |
|||
|
|||
this.push(control); |
|||
|
|||
return control; |
|||
} |
|||
|
|||
public removeAt(index: number, options?: { emitEvent?: boolean }) { |
|||
if (this.template.removeControl && index >= 0 && index < this.controls.length) { |
|||
this.template.removeControl(index, this.controls[index]); |
|||
} |
|||
|
|||
super.removeAt(index, options); |
|||
} |
|||
|
|||
public clear(options?: { emitEvent?: boolean }) { |
|||
if (this.template.clearControls && this.controls.length > 0) { |
|||
this.template.clearControls(); |
|||
} |
|||
|
|||
super.clear(options); |
|||
} |
|||
|
|||
private prepare(value?: any[]) { |
|||
if (Types.isArray(value) && value.length > 0) { |
|||
let index = this.controls.length; |
|||
|
|||
while (this.controls.length < value.length) { |
|||
this.add(value[index]); |
|||
|
|||
index++; |
|||
} |
|||
|
|||
while (this.controls.length > value.length) { |
|||
this.removeAt(this.controls.length - 1, { emitEvent: false }); |
|||
} |
|||
} else { |
|||
this.clear(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { FormControl, FormGroup } from '@angular/forms'; |
|||
import { FormGroupTemplate, TemplatedFormGroup } from './templated-form-group'; |
|||
|
|||
describe('TemplatedFormGroup', () => { |
|||
class Template implements FormGroupTemplate { |
|||
public clearCalled = 0; |
|||
public removeCalled: number[] = []; |
|||
|
|||
public setControls(form: FormGroup) { |
|||
form.setControl('value', new FormControl()); |
|||
} |
|||
|
|||
public clearControls() { |
|||
this.clearCalled++; |
|||
} |
|||
} |
|||
|
|||
let formTemplate: Template; |
|||
let formArray: TemplatedFormGroup; |
|||
|
|||
beforeEach(() => { |
|||
formTemplate = new Template(); |
|||
formArray = new TemplatedFormGroup(formTemplate); |
|||
}); |
|||
|
|||
type Test = [ (value: any) => void, string]; |
|||
|
|||
const methods: Test[] = [ |
|||
[x => formArray.setValue(x), 'setValue'], |
|||
[x => formArray.patchValue(x), 'patchValue'], |
|||
[x => formArray.reset(x), 'reset'], |
|||
]; |
|||
|
|||
methods.forEach(([method, name]) => { |
|||
it(`Should call template to construct controls for ${name}`, () => { |
|||
const value1 = { |
|||
value: 1, |
|||
}; |
|||
|
|||
method(value1); |
|||
|
|||
expect(formArray.value).toEqual(value1); |
|||
}); |
|||
it(`Should call template to clear items with for ${name}`, () => { |
|||
const value1 = { |
|||
value: 1, |
|||
}; |
|||
|
|||
method(value1); |
|||
method(undefined); |
|||
|
|||
expect(formArray.value).toEqual(undefined); |
|||
expect(formTemplate.clearCalled).toEqual(1); |
|||
expect(formTemplate.removeCalled).toEqual([]); |
|||
}); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,50 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { AbstractControlOptions, AsyncValidatorFn, FormGroup, ValidatorFn } from '@angular/forms'; |
|||
import { Types } from '@app/framework/internal'; |
|||
import { UndefinableFormGroup } from './undefinable-form-group'; |
|||
|
|||
export interface FormGroupTemplate { |
|||
setControls(form: FormGroup, value: any): void; |
|||
|
|||
clearControls?(): void; |
|||
} |
|||
|
|||
export class TemplatedFormGroup extends UndefinableFormGroup { |
|||
constructor(public readonly template: FormGroupTemplate, |
|||
validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null, |
|||
) { |
|||
super({}, validatorOrOpts, asyncValidator); |
|||
} |
|||
|
|||
public setValue(value?: {}, options?: { onlySelf?: boolean; emitEvent?: boolean }) { |
|||
this.build(value); |
|||
|
|||
super.setValue(value, options); |
|||
} |
|||
|
|||
public patchValue(value?: {}, options?: { onlySelf?: boolean; emitEvent?: boolean }) { |
|||
this.build(value); |
|||
|
|||
super.patchValue(value, options); |
|||
} |
|||
|
|||
public reset(value?: {}, options?: { onlySelf?: boolean; emitEvent?: boolean }) { |
|||
this.build(value); |
|||
|
|||
super.reset(value, options); |
|||
} |
|||
|
|||
public build(value?: {}) { |
|||
if (Types.isObject(value)) { |
|||
this.template?.setControls(this, value); |
|||
} else if (this.template?.clearControls) { |
|||
this.template?.clearControls(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,157 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
/* eslint-disable @typescript-eslint/no-implied-eval */ |
|||
/* eslint-disable no-useless-return */ |
|||
|
|||
import { Types } from '@app/framework'; |
|||
import { FieldRule, SchemaDto } from './../services/schemas.service'; |
|||
|
|||
export type RuleContext = { data: any; user?: any }; |
|||
export type RuleForm = { fieldPath: string }; |
|||
|
|||
export interface CompiledRules { |
|||
get rules(): ReadonlyArray<CompiledRule>; |
|||
} |
|||
|
|||
export interface RulesProvider { |
|||
compileRules(schema: SchemaDto): ReadonlyArray<CompiledRule>; |
|||
|
|||
getRules(form: RuleForm): CompiledRules; |
|||
} |
|||
|
|||
export class CompiledRule { |
|||
private readonly function: Function; |
|||
|
|||
public get field() { |
|||
return this.rule.field; |
|||
} |
|||
|
|||
public get action() { |
|||
return this.rule.action; |
|||
} |
|||
|
|||
constructor( |
|||
private readonly rule: FieldRule, |
|||
private readonly useItemData: boolean, |
|||
) { |
|||
try { |
|||
this.function = new Function(`return function(user, ctx, data, itemData) { return ${rule.condition} }`)(); |
|||
} catch { |
|||
this.function = () => false; |
|||
} |
|||
} |
|||
|
|||
public eval(context: RuleContext, itemData: any) { |
|||
try { |
|||
const data = this.useItemData ? itemData || context.data : context.data; |
|||
|
|||
return this.function(context.user, context, data, itemData); |
|||
} catch { |
|||
return false; |
|||
} |
|||
} |
|||
} |
|||
const EMPTY_RULES: CompiledRule[] = []; |
|||
const EMPTY_RULES_STATIC = { rules: EMPTY_RULES }; |
|||
|
|||
class ComponentRules implements ComponentRules { |
|||
private previouSchema: SchemaDto; |
|||
private compiledRules: ReadonlyArray<CompiledRule> = []; |
|||
|
|||
public get rules() { |
|||
const schema = this.schema(); |
|||
|
|||
if (schema !== this.previouSchema) { |
|||
if (schema) { |
|||
this.compiledRules = Types.fastMerge(this.parent.getRules(this.form).rules, this.getRelativeRules(this.form, schema)); |
|||
} else { |
|||
this.compiledRules = EMPTY_RULES; |
|||
} |
|||
} |
|||
|
|||
return this.compiledRules; |
|||
} |
|||
|
|||
constructor( |
|||
private readonly form: RuleForm, |
|||
private readonly parentPath: string, |
|||
private readonly parent: RulesProvider, |
|||
private readonly schema: () => SchemaDto | undefined, |
|||
) { |
|||
} |
|||
|
|||
private getRelativeRules(form: RuleForm, schema: SchemaDto) { |
|||
const rules = this.parent.compileRules(schema); |
|||
|
|||
if (rules.length === 0) { |
|||
return EMPTY_RULES; |
|||
} |
|||
|
|||
const pathField = form.fieldPath.substr(this.parentPath.length + 1); |
|||
const pathSimplified = pathField.replace('.iv.', '.'); |
|||
|
|||
return rules.filter(x => x.field === pathField || x.field === pathSimplified); |
|||
} |
|||
} |
|||
|
|||
export class ComponentRulesProvider implements RulesProvider { |
|||
constructor( |
|||
private readonly parentPath: string, |
|||
private readonly parent: RulesProvider, |
|||
private readonly schema: () => SchemaDto | undefined, |
|||
) { |
|||
} |
|||
|
|||
public compileRules(schema: SchemaDto) { |
|||
return this.parent.compileRules(schema); |
|||
} |
|||
|
|||
public getRules(form: RuleForm) { |
|||
return new ComponentRules(form, this.parentPath, this.parent, this.schema); |
|||
} |
|||
} |
|||
|
|||
export class RootRulesProvider implements RulesProvider { |
|||
private readonly rulesCache: { [id: string]: ReadonlyArray<CompiledRule> } = {}; |
|||
private readonly rules: ReadonlyArray<CompiledRule>; |
|||
|
|||
constructor(schema: SchemaDto) { |
|||
this.rules = this.compileRules(schema); |
|||
} |
|||
|
|||
public compileRules(schema: SchemaDto) { |
|||
if (!schema) { |
|||
return EMPTY_RULES; |
|||
} |
|||
|
|||
let result = this.rulesCache[schema.id]; |
|||
|
|||
if (!result) { |
|||
result = schema.fieldRules.map(x => new CompiledRule(x, true)); |
|||
|
|||
this.rulesCache[schema.id] = result; |
|||
} |
|||
|
|||
return result; |
|||
} |
|||
|
|||
public getRules(form: RuleForm) { |
|||
const allRules = this.rules; |
|||
|
|||
if (allRules.length === 0) { |
|||
return EMPTY_RULES_STATIC; |
|||
} |
|||
|
|||
const pathField = form.fieldPath; |
|||
const pathSimplified = pathField.replace('.iv.', '.'); |
|||
|
|||
const rules = allRules.filter(x => x.field === pathField || x.field === pathSimplified); |
|||
|
|||
return { rules }; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue