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