mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
16 changed files with 29 additions and 616 deletions
@ -1,63 +0,0 @@ |
|||
<div class="step"> |
|||
<div class="row no-gutters"> |
|||
<div class="col-auto color pr-2"> |
|||
<sqx-color-picker mode="Circle" |
|||
[ngModelOptions]="onBlur" |
|||
[ngModel]="step.color" |
|||
(ngModelChange)="changeColor($event)" |
|||
[disabled]="step.isLocked"> |
|||
</sqx-color-picker> |
|||
</div> |
|||
<div class="col"> |
|||
<sqx-editable-title |
|||
[name]="step.name" |
|||
(nameChanged)="changeName($event)" |
|||
[disabled]="step.isLocked"> |
|||
</sqx-editable-title> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button type="button" class="btn btn-text-danger" (click)="remove.emit()" *ngIf="!step.isLocked"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row transition no-gutters" *ngFor="let transition of transitions"> |
|||
<div class="col-auto"> |
|||
<i class="icon-arrow-right text-decent"></i> |
|||
</div> |
|||
<div class="col-3 pl-2"> |
|||
<div class="transition-to"> |
|||
<div class="color-circle" [style.background]="transition.step.color"></div> {{transition.to}} |
|||
</div> |
|||
</div> |
|||
<div class="col pl-2"> |
|||
<button class="btn btn-block btn-outline-secondary dashed"> |
|||
Add Expression |
|||
</button> |
|||
</div> |
|||
<div class="col-auto pl-2"> |
|||
<button type="button" class="btn btn-text-danger" (click)="transitionRemove.emit(transition)"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row transition no-gutters" *ngIf="openSteps.length > 0"> |
|||
<div class="col-auto"> |
|||
<i class="icon-arrow-right text-decent"></i> |
|||
</div> |
|||
<div class="col-3 pl-2"> |
|||
<sqx-dropdown [items]="openSteps" [(ngModel)]="openStep"> |
|||
<ng-template let-target="$implicit"> |
|||
<div class="color-circle" [style.background]="target.color"></div> {{target.name}} |
|||
</ng-template> |
|||
</sqx-dropdown> |
|||
</div> |
|||
<div class="col pl-2"> |
|||
<button class="btn btn-outline-secondary" (click)="transitionAdd.emit(openStep)"> |
|||
<i class="icon-plus"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,39 +0,0 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.color { |
|||
line-height: 2.8rem; |
|||
} |
|||
|
|||
.color-circle { |
|||
@include circle(12px); |
|||
border: 1px solid $color-border-dark; |
|||
background: $color-border; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.dashed { |
|||
border-style: dashed; |
|||
} |
|||
|
|||
.transition { |
|||
& { |
|||
padding-left: 1rem; |
|||
margin-top: .25rem; |
|||
margin-bottom: .5rem; |
|||
line-height: 2rem; |
|||
} |
|||
|
|||
&-to { |
|||
padding: .5rem .75rem; |
|||
background: transparent; |
|||
border: 1px solid transparent; |
|||
line-height: 1.2rem; |
|||
} |
|||
} |
|||
|
|||
.step { |
|||
& { |
|||
margin-bottom: 1rem; |
|||
} |
|||
} |
|||
@ -1,69 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; |
|||
|
|||
import { |
|||
WorkflowDto, |
|||
WorkflowStep, |
|||
WorkflowStepValues, |
|||
WorkflowTransition, |
|||
WorkflowTransitionView |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-workflow-step', |
|||
styleUrls: ['./workflow-step.component.scss'], |
|||
templateUrl: './workflow-step.component.html' |
|||
}) |
|||
export class WorkflowStepComponent implements OnChanges { |
|||
@Input() |
|||
public workflow: WorkflowDto; |
|||
|
|||
@Input() |
|||
public step: WorkflowStep; |
|||
|
|||
@Output() |
|||
public transitionAdd = new EventEmitter<WorkflowStep>(); |
|||
|
|||
@Output() |
|||
public transitionRemove = new EventEmitter<WorkflowTransition>(); |
|||
|
|||
@Output() |
|||
public update = new EventEmitter<WorkflowStepValues>(); |
|||
|
|||
@Output() |
|||
public rename = new EventEmitter<string>(); |
|||
|
|||
@Output() |
|||
public remove = new EventEmitter(); |
|||
|
|||
public onBlur = { updateOn: 'blur' }; |
|||
|
|||
public openSteps: WorkflowStep[]; |
|||
public openStep: WorkflowStep; |
|||
|
|||
public transitions: WorkflowTransitionView[]; |
|||
|
|||
public ngOnChanges(changes: SimpleChanges) { |
|||
if (changes['workflow'] || changes['step'] || false) { |
|||
this.openSteps = this.workflow.getOpenSteps(this.step); |
|||
this.openStep = this.openSteps[0]; |
|||
|
|||
this.transitions = this.workflow.getTransitions(this.step); |
|||
} |
|||
} |
|||
|
|||
public changeName(name: string) { |
|||
this.rename.emit(name); |
|||
} |
|||
|
|||
public changeColor(color: string) { |
|||
this.update.emit({ color }); |
|||
} |
|||
} |
|||
|
|||
@ -1,37 +0,0 @@ |
|||
<sqx-panel desiredWidth="50rem" isBlank="true" [isLazyLoaded]="false"> |
|||
<ng-container title> |
|||
Workflows |
|||
</ng-container> |
|||
|
|||
<ng-container menu> |
|||
<button type="button" class="btn btn-text-secondary" (click)="reload()" title="Refresh roles (CTRL + SHIFT + R)"> |
|||
<i class="icon-reset"></i> Refresh |
|||
</button> |
|||
|
|||
<sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut> |
|||
|
|||
<ng-container> |
|||
<button type="button" class="btn btn-primary" (click)="save()" title="Save (CTRL + S)"> |
|||
Save |
|||
</button> |
|||
|
|||
<sqx-shortcut keys="ctrl+s" (trigger)="save()"></sqx-shortcut> |
|||
</ng-container> |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<sqx-workflow-step *ngFor="let step of workflow.steps; trackBy: trackByStep" |
|||
[workflow]="workflow" |
|||
[step]="step" |
|||
(rename)="renameStep(step, $event)" |
|||
(remove)="removeStep(step)" |
|||
(transitionAdd)="addTransiton(step, $event)" |
|||
(transitionRemove)="removeTransition(step, $event)" |
|||
(update)="updateStep(step, $event)"> |
|||
</sqx-workflow-step> |
|||
|
|||
<button class="btn btn-success" (click)="addStep()"> |
|||
Add Step |
|||
</button> |
|||
</ng-container> |
|||
</sqx-panel> |
|||
@ -1,2 +0,0 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@ -1,65 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Component, OnInit } from '@angular/core'; |
|||
|
|||
import { |
|||
WorkflowDto, |
|||
WorkflowStep, |
|||
WorkflowStepValues, |
|||
WorkflowTransition |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-workflows-page', |
|||
styleUrls: ['./workflows-page.component.scss'], |
|||
templateUrl: './workflows-page.component.html' |
|||
}) |
|||
export class WorkflowsPageComponent implements OnInit { |
|||
public workflow: WorkflowDto; |
|||
|
|||
public ngOnInit() { |
|||
this.workflow = new WorkflowDto().setStep('Published', { color: 'green', isLocked: true }); |
|||
} |
|||
|
|||
public reload() { |
|||
return; |
|||
} |
|||
|
|||
public save() { |
|||
return; |
|||
} |
|||
|
|||
public addStep() { |
|||
this.workflow = this.workflow.setStep(`Step${this.workflow.steps.length + 1}`, {}); |
|||
} |
|||
|
|||
public addTransiton(from: WorkflowStep, to: WorkflowStep) { |
|||
this.workflow = this.workflow.setTransition(from.name, to.name, {}); |
|||
} |
|||
|
|||
public removeTransition(from: WorkflowStep, transition: WorkflowTransition) { |
|||
this.workflow = this.workflow.removeTransition(from.name, transition.to); |
|||
} |
|||
|
|||
public updateStep(step: WorkflowStep, values: WorkflowStepValues) { |
|||
this.workflow = this.workflow.setStep(step.name, values); |
|||
} |
|||
|
|||
public renameStep(step: WorkflowStep, newName: string) { |
|||
this.workflow = this.workflow.renameStep(step.name, newName); |
|||
} |
|||
|
|||
public removeStep(step: WorkflowStep) { |
|||
this.workflow = this.workflow.removeStep(step.name); |
|||
} |
|||
|
|||
public trackByStep(index: number, step: WorkflowStep) { |
|||
return step.name; |
|||
} |
|||
} |
|||
|
|||
@ -1,188 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { WorkflowDto } from '@app/shared/internal'; |
|||
|
|||
describe('Workflow', () => { |
|||
it('should create empty workflow', () => { |
|||
const workflow = new WorkflowDto(); |
|||
|
|||
expect(workflow.name).toEqual('Default'); |
|||
}); |
|||
|
|||
it('should add step to workflow', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '1', color: '#00ff00' } |
|||
], |
|||
transitions: [], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should override settings if step already exists', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }) |
|||
.setStep('1', { color: 'red' }); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '1', color: 'red' } |
|||
], |
|||
transitions: [], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should not remove step if locked', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00', isLocked: true }) |
|||
.setStep('2', { color: '#ff0000' }) |
|||
.setTransition('1', '2', { expression: '1 === 2' }) |
|||
.removeStep('1'); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '1', color: '#00ff00', isLocked: true }, |
|||
{ name: '2', color: '#ff0000' } |
|||
], |
|||
transitions: [ |
|||
{ from: '1', to: '2', expression: '1 === 2' } |
|||
], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should remove step', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }) |
|||
.setStep('2', { color: '#ff0000' }) |
|||
.setStep('3', { color: '#0000ff' }) |
|||
.setTransition('1', '2', { expression: '1 === 2' }) |
|||
.setTransition('1', '3', { expression: '1 === 3' }) |
|||
.setTransition('2', '3', { expression: '2 === 3' }) |
|||
.removeStep('1'); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '2', color: '#ff0000' }, |
|||
{ name: '3', color: '#0000ff' } |
|||
], |
|||
transitions: [ |
|||
{ from: '2', to: '3', expression: '2 === 3' } |
|||
], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should rename step', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }) |
|||
.setStep('2', { color: '#ff0000' }) |
|||
.setStep('3', { color: '#0000ff' }) |
|||
.setTransition('1', '2', { expression: '1 === 2' }) |
|||
.setTransition('2', '1', { expression: '2 === 1' }) |
|||
.setTransition('2', '3', { expression: '2 === 3' }) |
|||
.renameStep('1', '4'); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '4', color: '#00ff00' }, |
|||
{ name: '2', color: '#ff0000' }, |
|||
{ name: '3', color: '#0000ff' } |
|||
], |
|||
transitions: [ |
|||
{ from: '4', to: '2', expression: '1 === 2' }, |
|||
{ from: '2', to: '4', expression: '2 === 1' }, |
|||
{ from: '2', to: '3', expression: '2 === 3' } |
|||
], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should add transitions to workflow', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }) |
|||
.setStep('2', { color: '#ff0000' }) |
|||
.setTransition('1', '2', { expression: '1 === 2' }) |
|||
.setTransition('2', '1', { expression: '2 === 1' }); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '1', color: '#00ff00' }, |
|||
{ name: '2', color: '#ff0000' } |
|||
], |
|||
transitions: [ |
|||
{ from: '1', to: '2', expression: '1 === 2' }, |
|||
{ from: '2', to: '1', expression: '2 === 1' } |
|||
], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should add remove transition from workflow', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }) |
|||
.setStep('2', { color: '#ff0000' }) |
|||
.setTransition('1', '2', { expression: '1 === 1' }) |
|||
.setTransition('2', '1', { expression: '2 === 1' }) |
|||
.removeTransition('1', '2'); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '1', color: '#00ff00' }, |
|||
{ name: '2', color: '#ff0000' } |
|||
], |
|||
transitions: [ |
|||
{ from: '2', to: '1', expression: '2 === 1' } |
|||
], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
|
|||
it('should override settings if transition already exists', () => { |
|||
const workflow = |
|||
new WorkflowDto() |
|||
.setStep('1', { color: '#00ff00' }) |
|||
.setStep('2', { color: '#ff0000' }) |
|||
.setTransition('1', '2', { expression: '1 === 2' }) |
|||
.setTransition('1', '2', { expression: '1 !== 2' }); |
|||
|
|||
expect(simplify(workflow)).toEqual({ |
|||
_links: {}, |
|||
steps: [ |
|||
{ name: '1', color: '#00ff00' }, |
|||
{ name: '2', color: '#ff0000' } |
|||
], |
|||
transitions: [ |
|||
{ from: '1', to: '2', expression: '1 !== 2' } |
|||
], |
|||
name: 'Default' |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
function simplify(value: any) { |
|||
return JSON.parse(JSON.stringify(value)); |
|||
} |
|||
@ -1,121 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { |
|||
compareStringsAsc, |
|||
Model, |
|||
ResourceLinks |
|||
} from '@app/framework'; |
|||
|
|||
export class WorkflowDto extends Model<WorkflowDto> { |
|||
public readonly _links: ResourceLinks; |
|||
|
|||
constructor(links: ResourceLinks = {}, |
|||
public readonly name: string = 'Default', |
|||
public readonly steps: WorkflowStep[] = [], |
|||
public readonly transitions: WorkflowTransition[] = [] |
|||
) { |
|||
super(); |
|||
|
|||
this._links = links; |
|||
} |
|||
|
|||
public onCloned() { |
|||
this.steps.sort((a, b) => compareStringsAsc(a.name, b.name)); |
|||
} |
|||
|
|||
public getOpenSteps(step: WorkflowStep) { |
|||
return this.steps.filter(x => x.name !== step.name && !this.transitions.find(y => y.from === step.name && y.to === x.name)); |
|||
} |
|||
|
|||
public getTransitions(step: WorkflowStep): WorkflowTransitionView[] { |
|||
return this.transitions.filter(x => x.from === step.name).map(x => ({ step: this.getStep(x.to), ...x })); |
|||
} |
|||
|
|||
public getStep(name: string): WorkflowStep { |
|||
return this.steps.find(x => x.name === name)!; |
|||
} |
|||
|
|||
public setStep(name: string, values: Partial<WorkflowStepValues>) { |
|||
const steps = [...this.steps.filter(s => s.name !== name), { name, ...values }]; |
|||
|
|||
return this.with({ steps }); |
|||
} |
|||
|
|||
public removeStep(name: string) { |
|||
const steps = this.steps.filter(s => s.name !== name || s.isLocked); |
|||
|
|||
const transitions = |
|||
steps.length !== this.steps.length ? |
|||
this.transitions.filter(t => t.from !== name && t.to !== name) : |
|||
this.transitions; |
|||
|
|||
return this.with({ steps, transitions }); |
|||
} |
|||
|
|||
public renameStep(name: string, newName: string) { |
|||
const steps = this.steps.map(step => { |
|||
if (step.name === name) { |
|||
return { ...step, name: newName }; |
|||
} |
|||
|
|||
return step; |
|||
}); |
|||
|
|||
const transitions = this.transitions.map(transition => { |
|||
if (transition.from === name || transition.to === name) { |
|||
let newTransition = { ...transition }; |
|||
|
|||
if (newTransition.from === name) { |
|||
newTransition.from = newName; |
|||
} |
|||
|
|||
if (newTransition.to === name) { |
|||
newTransition.to = newName; |
|||
} |
|||
|
|||
return newTransition; |
|||
} |
|||
|
|||
return transition; |
|||
}); |
|||
|
|||
return this.with({ steps, transitions }); |
|||
} |
|||
|
|||
public removeTransition(from: string, to: string) { |
|||
const transitions = this.transitions.filter(t => t.from !== from || t.to !== to); |
|||
|
|||
return this.with({ transitions }); |
|||
} |
|||
|
|||
public setTransition(from: string, to: string, values: Partial<WorkflowTransitionValues>) { |
|||
const stepFrom = this.steps.find(s => s.name === from); |
|||
|
|||
if (!stepFrom) { |
|||
return this; |
|||
} |
|||
|
|||
const stepTo = this.steps.find(s => s.name === to); |
|||
|
|||
if (!stepTo) { |
|||
return this; |
|||
} |
|||
|
|||
const transitions = [...this.transitions.filter(t => t.from !== from || t.to !== to), { from, to, ...values }]; |
|||
|
|||
return this.with({ transitions }); |
|||
} |
|||
} |
|||
|
|||
export type WorkflowStepValues = { color?: string; isLocked?: boolean; }; |
|||
export type WorkflowStep = { name: string } & WorkflowStepValues; |
|||
|
|||
export type WorkflowTransitionValues = { expression?: string }; |
|||
export type WorkflowTransition = { from: string; to: string } & WorkflowTransitionValues; |
|||
|
|||
export type WorkflowTransitionView = { step: WorkflowStep } & WorkflowTransition; |
|||
Loading…
Reference in new issue