mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
19 changed files with 488 additions and 190 deletions
@ -0,0 +1,70 @@ |
|||
<div class="table-items-row table-items-row-expandable workflow"> |
|||
<div class="table-items-row-summary"> |
|||
<div class="row no-gutters"> |
|||
<div class="col"> |
|||
{{workflow.displayName}} |
|||
</div> |
|||
<div class="col-options"> |
|||
<div class="float-right"> |
|||
<button type="button" class="btn btn-secondary table-items-edit-button mr-1" [class.active]="isEditing" (click)="toggleEditing()"> |
|||
<i class="icon-settings"></i> |
|||
</button> |
|||
|
|||
<button type="button" class="btn btn-text-danger" |
|||
[disabled]="!workflow.canDelete" |
|||
(sqxConfirmClick)="remove()" |
|||
confirmTitle="Remove workflow" |
|||
confirmText="Do you really want to remove the workflow?"> |
|||
<i class="icon-bin2"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-items-row-details" *ngIf="isEditing"> |
|||
<div class="table-items-row-details-tabs clearfix"> |
|||
<div class="float-right"> |
|||
<button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button> |
|||
<button type="submit" class="btn btn-primary" *ngIf="isEditable" (click)="save()">Save</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="table-items-row-details-tab"> |
|||
<sqx-form-error [error]="error"></sqx-form-error> |
|||
|
|||
<div class="form-group row"> |
|||
<label class="col-form-label" for="{{workflow.id}}_name">Name</label> |
|||
|
|||
<div class="col-6"> |
|||
<input class="form-control" id="{{workflow.id}}_name" |
|||
[ngModelOptions]="onBlur" |
|||
[ngModel]="workflow.name" |
|||
(ngModelChange)="rename($event)" /> |
|||
|
|||
<sqx-form-hint> |
|||
Optional name for the workflow. |
|||
</sqx-form-hint> |
|||
</div> |
|||
</div> |
|||
|
|||
<sqx-workflow-step *ngFor="let step of workflow.steps; trackBy: trackByStep" |
|||
[workflow]="workflow" |
|||
[disabled]="!workflow.canUpdate" |
|||
[roles]="roles" |
|||
[step]="step" |
|||
(makeInitial)="setInitial(step)" |
|||
(rename)="renameStep(step, $event)" |
|||
(remove)="removeStep(step)" |
|||
(transitionAdd)="addTransiton(step, $event)" |
|||
(transitionRemove)="removeTransition(step, $event)" |
|||
(transitionUpdate)="updateTransition($event)" |
|||
(update)="updateStep(step, $event)"> |
|||
</sqx-workflow-step> |
|||
|
|||
<button class="btn btn-success" (click)="addStep()" *ngIf="workflow.canUpdate"> |
|||
Add Step |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.table-items-row-details { |
|||
&::before { |
|||
right: 4.55rem; |
|||
} |
|||
} |
|||
|
|||
.col-form-label { |
|||
min-width: 4rem; |
|||
max-width: 4rem; |
|||
text-align: left; |
|||
} |
|||
|
|||
.form-group { |
|||
margin-bottom: 2rem; |
|||
margin-left: 2rem; |
|||
max-width: 60rem; |
|||
} |
|||
|
|||
.btn-success { |
|||
margin-bottom: 1rem; |
|||
margin-left: 2rem; |
|||
} |
|||
@ -0,0 +1,120 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Component, Input, OnChanges } from '@angular/core'; |
|||
|
|||
import { |
|||
ErrorDto, |
|||
MathHelper, |
|||
RoleDto, |
|||
WorkflowDto, |
|||
WorkflowsState, |
|||
WorkflowStep, |
|||
WorkflowStepValues, |
|||
WorkflowTransition, |
|||
WorkflowTransitionValues |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-workflow', |
|||
styleUrls: ['./workflow.component.scss'], |
|||
templateUrl: './workflow.component.html' |
|||
}) |
|||
export class WorkflowComponent implements OnChanges { |
|||
@Input() |
|||
public workflow: WorkflowDto; |
|||
|
|||
@Input() |
|||
public roles: RoleDto[]; |
|||
|
|||
public error: ErrorDto | null; |
|||
|
|||
public onBlur = { updateOn: 'blur' }; |
|||
|
|||
public isEditing = false; |
|||
public isEditable = false; |
|||
|
|||
constructor( |
|||
private readonly workflowsState: WorkflowsState |
|||
) { |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
this.isEditable = this.workflow.canUpdate; |
|||
} |
|||
|
|||
public toggleEditing() { |
|||
this.isEditing = !this.isEditing; |
|||
} |
|||
|
|||
public remove() { |
|||
this.workflowsState.delete(this.workflow); |
|||
} |
|||
|
|||
public save() { |
|||
if (!this.isEditable) { |
|||
return; |
|||
} |
|||
|
|||
this.workflowsState.update(this.workflow) |
|||
.subscribe(() => { |
|||
this.error = null; |
|||
}, error => { |
|||
this.error = error; |
|||
}); |
|||
} |
|||
|
|||
public addStep() { |
|||
let index = this.workflow.steps.length; |
|||
|
|||
for (let i = index; i < index + 100; i++) { |
|||
const name = `Step${i}`; |
|||
|
|||
if (!this.workflow.getStep(name)) { |
|||
this.workflow = this.workflow.setStep(name, { color: MathHelper.randomColor() }); |
|||
return; |
|||
} |
|||
} |
|||
} |
|||
|
|||
public rename(name: string) { |
|||
this.workflow = this.workflow.rename(name); |
|||
} |
|||
|
|||
public setInitial(step: WorkflowStep) { |
|||
this.workflow = this.workflow.setInitial(step.name); |
|||
} |
|||
|
|||
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 updateTransition(update: { transition: WorkflowTransition, values: WorkflowTransitionValues }) { |
|||
this.workflow = this.workflow.setTransition(update.transition.from, update.transition.to, update.values); |
|||
} |
|||
|
|||
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(step: WorkflowStep) { |
|||
return step.name; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,24 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|||
|
|||
import { Form, hasNoValue$ } from '@app/framework'; |
|||
|
|||
export class AddWorkflowForm extends Form<FormGroup, { name: string}> { |
|||
public hasNoName = hasNoValue$(this.form.controls['name']); |
|||
|
|||
constructor(formBuilder: FormBuilder) { |
|||
super(formBuilder.group({ |
|||
name: ['', |
|||
[ |
|||
Validators.required |
|||
] |
|||
] |
|||
})); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue