mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
7 years ago
37 changed files with 725 additions and 169 deletions
@ -0,0 +1,59 @@ |
|||||
|
<div class="step"> |
||||
|
<div class="row no-gutters"> |
||||
|
<div class="col-auto color pr-2"> |
||||
|
<sqx-color-picker mode="Circle" |
||||
|
[ngModel]="step.color" |
||||
|
(ngModelChange)="changeColor($event)"> |
||||
|
</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"> |
||||
|
<div class="col-auto"> |
||||
|
<i class="icon-arrow-right text-decent"></i> |
||||
|
</div> |
||||
|
<div class="col-3 pl-2"> |
||||
|
<div class="color-circle" [style.background]="'red'"></div> In Progress |
||||
|
</div> |
||||
|
<div class="col pl-2"> |
||||
|
<input class="form-control" placeholder="Expression" /> |
||||
|
</div> |
||||
|
<div class="col-auto pl-2"> |
||||
|
<button type="button" class="btn btn-text-danger" (click)="remove.emit()"> |
||||
|
<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"> |
||||
|
<ng-template let-target="$implicit"> |
||||
|
<span class="autocomplete-user"> |
||||
|
<div class="color-circle" [style.background]="target.color"></div> {{target.name}} |
||||
|
</span> |
||||
|
</ng-template> |
||||
|
</sqx-dropdown> |
||||
|
</div> |
||||
|
<div class="col pl-2"> |
||||
|
<button class="btn btn-success"> |
||||
|
Add Transition |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,28 @@ |
|||||
|
@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; |
||||
|
} |
||||
|
|
||||
|
.transition { |
||||
|
& { |
||||
|
padding-left: 1rem; |
||||
|
margin-top: .25rem; |
||||
|
margin-bottom: .5rem; |
||||
|
line-height: 2rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step { |
||||
|
& { |
||||
|
margin-bottom: 1rem; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,62 @@ |
|||||
|
/* |
||||
|
* 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 transitionRemove = new EventEmitter<WorkflowTransition>(); |
||||
|
|
||||
|
@Output() |
||||
|
public update = new EventEmitter<WorkflowStepValues>(); |
||||
|
|
||||
|
@Output() |
||||
|
public rename = new EventEmitter<string>(); |
||||
|
|
||||
|
@Output() |
||||
|
public remove = new EventEmitter(); |
||||
|
|
||||
|
public openSteps: WorkflowStep[]; |
||||
|
|
||||
|
public transitions: WorkflowTransitionView[]; |
||||
|
|
||||
|
public ngOnChanges(changes: SimpleChanges) { |
||||
|
if (changes['workflow'] || changes['step']) { |
||||
|
this.openSteps = this.workflow.getOpenSteps(this.step); |
||||
|
|
||||
|
this.transitions = this.workflow.getTransitions(this.step); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public changeName(name: string) { |
||||
|
this.rename.emit(name); |
||||
|
} |
||||
|
|
||||
|
public changeColor(color: string) { |
||||
|
this.update.emit({ color }); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,35 @@ |
|||||
|
<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" |
||||
|
[workflow]="workflow" |
||||
|
[step]="step" |
||||
|
(update)="updateStep(step, $event)" |
||||
|
(rename)="renameStep(step, $event)" |
||||
|
(remove)="removeStep(step)"> |
||||
|
</sqx-workflow-step> |
||||
|
|
||||
|
<button class="btn btn-success" (click)="addStep()"> |
||||
|
Add Step |
||||
|
</button> |
||||
|
</ng-container> |
||||
|
</sqx-panel> |
||||
@ -0,0 +1,2 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
@ -0,0 +1,48 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
WorkflowDto, |
||||
|
WorkflowStep, |
||||
|
WorkflowStepValues |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-workflows-page', |
||||
|
styleUrls: ['./workflows-page.component.scss'], |
||||
|
templateUrl: './workflows-page.component.html' |
||||
|
}) |
||||
|
export class WorkflowsPageComponent { |
||||
|
public workflow = new WorkflowDto().setStep('Published', { color: 'green' }); |
||||
|
|
||||
|
public reload() { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
public save() { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
public addStep() { |
||||
|
this.workflow = this.workflow.setStep(`Step${this.workflow.steps.length + 1}`, {}); |
||||
|
} |
||||
|
|
||||
|
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);
|
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,26 @@ |
|||||
|
<span> |
||||
|
<div class="selection"> |
||||
|
<input type="text" class="form-control" [disabled]="snapshot.isDisabled" (click)="open()" readonly (keydown)="onKeyDown($event)" #input |
||||
|
autocomplete="off" |
||||
|
autocorrect="off" |
||||
|
autocapitalize="off"> |
||||
|
|
||||
|
<div class="control-dropdown-item" *ngIf="snapshot.selectedItem"> |
||||
|
<ng-container *ngIf="!selectionTemplate">{{snapshot.selectedItem}}</ng-container> |
||||
|
|
||||
|
<ng-template *ngIf="selectionTemplate" [sqxTemplateWrapper]="selectionTemplate" [item]="snapshot.selectedItem"></ng-template> |
||||
|
</div> |
||||
|
|
||||
|
<i class="icon-caret-down"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="items-container"> |
||||
|
<div class="control-dropdown" #container *sqxModalView="dropdown" [sqxModalTarget]="input" position="bottomLeft"> |
||||
|
<div *ngFor="let item of items; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === snapshot.selectedIndex" (mousedown)="selectIndexAndClose(i)" [sqxScrollActive]="i === snapshot.selectedIndex" [container]="container"> |
||||
|
<ng-container *ngIf="!itemTemplate">{{item}}</ng-container> |
||||
|
|
||||
|
<ng-template *ngIf="itemTemplate" [sqxTemplateWrapper]="itemTemplate" [item]="item" [index]="i"></ng-template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</span> |
||||
@ -0,0 +1,38 @@ |
|||||
|
@import '_mixins'; |
||||
|
@import '_vars'; |
||||
|
|
||||
|
$color-input-disabled: #eef1f4; |
||||
|
|
||||
|
.form-control { |
||||
|
& { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
&[readonly] { |
||||
|
background: $color-input-background; |
||||
|
} |
||||
|
|
||||
|
&:disabled { |
||||
|
background: $color-input-disabled; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.selection { |
||||
|
& { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.control-dropdown-item { |
||||
|
@include absolute(0, 1rem, 0, 0); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.icon-caret-down { |
||||
|
@include absolute(30%, .4rem, auto, auto); |
||||
|
cursor: pointer; |
||||
|
font-size: .9rem; |
||||
|
font-weight: normal; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,130 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, forwardRef, Input, QueryList, TemplateRef } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
|
||||
|
import { Keys, ModalModel, StatefulControlComponent } from '@app/framework/internal'; |
||||
|
|
||||
|
export const SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { |
||||
|
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DropdownComponent), multi: true |
||||
|
}; |
||||
|
|
||||
|
interface State { |
||||
|
selectedItem: any; |
||||
|
selectedIndex: number; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-dropdown', |
||||
|
styleUrls: ['./dropdown.component.scss'], |
||||
|
templateUrl: './dropdown.component.html', |
||||
|
providers: [SQX_DROPDOWN_CONTROL_VALUE_ACCESSOR], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class DropdownComponent extends StatefulControlComponent<State, any[]> implements AfterContentInit, ControlValueAccessor { |
||||
|
@Input() |
||||
|
public items: any[] = []; |
||||
|
|
||||
|
@ContentChildren(TemplateRef) |
||||
|
public templates: QueryList<any>; |
||||
|
|
||||
|
public dropdown = new ModalModel(); |
||||
|
|
||||
|
public selectionTemplate: TemplateRef<any>; |
||||
|
|
||||
|
public itemTemplate: TemplateRef<any>; |
||||
|
|
||||
|
constructor(changeDetector: ChangeDetectorRef) { |
||||
|
super(changeDetector, { |
||||
|
selectedItem: undefined, |
||||
|
selectedIndex: -1 |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public ngAfterContentInit() { |
||||
|
if (this.templates.length === 1) { |
||||
|
this.itemTemplate = this.selectionTemplate = this.templates.first; |
||||
|
} else { |
||||
|
this.templates.forEach(template => { |
||||
|
if (template.name === 'selection') { |
||||
|
this.selectionTemplate = template; |
||||
|
} else { |
||||
|
this.itemTemplate = template; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public writeValue(obj: any) { |
||||
|
this.selectIndex(this.items && obj ? this.items.indexOf(obj) : 0); |
||||
|
} |
||||
|
|
||||
|
public onKeyDown(event: KeyboardEvent) { |
||||
|
switch (event.keyCode) { |
||||
|
case Keys.UP: |
||||
|
this.up(); |
||||
|
return false; |
||||
|
case Keys.DOWN: |
||||
|
this.down(); |
||||
|
return false; |
||||
|
case Keys.ESCAPE: |
||||
|
case Keys.ENTER: |
||||
|
if (this.dropdown.isOpen) { |
||||
|
this.close(); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
public open() { |
||||
|
this.dropdown.show(); |
||||
|
|
||||
|
this.callTouched(); |
||||
|
} |
||||
|
|
||||
|
public selectIndexAndClose(selectedIndex: number) { |
||||
|
this.selectIndex(selectedIndex); |
||||
|
|
||||
|
this.close(); |
||||
|
} |
||||
|
|
||||
|
private close() { |
||||
|
this.dropdown.hide(); |
||||
|
} |
||||
|
|
||||
|
public selectIndex(selectedIndex: number) { |
||||
|
if (selectedIndex < 0) { |
||||
|
selectedIndex = 0; |
||||
|
} |
||||
|
|
||||
|
const items = this.items || []; |
||||
|
|
||||
|
if (selectedIndex >= items.length) { |
||||
|
selectedIndex = items.length - 1; |
||||
|
} |
||||
|
|
||||
|
const value = items[selectedIndex]; |
||||
|
|
||||
|
if (value !== this.snapshot.selectedItem) { |
||||
|
selectedIndex = selectedIndex; |
||||
|
|
||||
|
this.next(s => ({ ...s, selectedIndex, selectedItem: value })); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
private up() { |
||||
|
this.selectIndex(this.snapshot.selectedIndex - 1); |
||||
|
} |
||||
|
|
||||
|
private down() { |
||||
|
this.selectIndex(this.snapshot.selectedIndex + 1); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
<div class="title"> |
||||
|
<form *ngIf="isRenaming; else noRenaming" class="form-inline" [formGroup]="renameForm" (ngSubmit)="rename()"> |
||||
|
<div class="form-group mr-1"> |
||||
|
<sqx-control-errors for="name"></sqx-control-errors> |
||||
|
|
||||
|
<input type="text" class="form-control form-underlined" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" /> |
||||
|
</div> |
||||
|
|
||||
|
<button type="submit" class="btn btn-primary" [disabled]="!renameForm.valid || !renameForm.dirty">Save</button> |
||||
|
|
||||
|
<button type="button" class="btn btn-text-secondary btn-cancel" (click)="toggleRename()"> |
||||
|
<i class="icon-close"></i> |
||||
|
</button> |
||||
|
</form> |
||||
|
|
||||
|
<ng-template #noRenaming> |
||||
|
<h3 class="title-name" (dblclick)="toggleRename()"> |
||||
|
{{name}} |
||||
|
</h3> |
||||
|
|
||||
|
<i class="title-edit icon-pencil" *ngIf="!disabled" (click)="toggleRename()"></i> |
||||
|
</ng-template> |
||||
|
</div> |
||||
@ -0,0 +1,33 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.title { |
||||
|
&-edit { |
||||
|
color: $color-border-dark; |
||||
|
display: none; |
||||
|
font-size: .9rem; |
||||
|
font-weight: normal; |
||||
|
padding: .6rem .25rem; |
||||
|
border: 0; |
||||
|
background: transparent; |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
|
||||
|
&-name { |
||||
|
padding: .375rem 0; |
||||
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
||||
|
font-size: 1.2rem; |
||||
|
font-weight: normal; |
||||
|
line-height: 1.5rem; |
||||
|
border-top: 1px solid transparent; |
||||
|
border-bottom: 1px solid transparent; |
||||
|
display: inline-block; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.title-edit { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,72 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Component, EventEmitter, Input, Output } from '@angular/core'; |
||||
|
import { FormBuilder, Validators } from '@angular/forms'; |
||||
|
|
||||
|
const ESCAPE_KEY = 27; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-editable-title', |
||||
|
styleUrls: ['./editable-title.component.scss'], |
||||
|
templateUrl: './editable-title.component.html' |
||||
|
}) |
||||
|
export class EditableTitleComponent { |
||||
|
@Input() |
||||
|
public disabled = false; |
||||
|
|
||||
|
@Input() |
||||
|
public name: string; |
||||
|
|
||||
|
@Output() |
||||
|
public nameChanged = new EventEmitter<string>(); |
||||
|
|
||||
|
public isRenaming = false; |
||||
|
|
||||
|
public renameForm = this.formBuilder.group({ |
||||
|
name: ['', |
||||
|
[ |
||||
|
Validators.required |
||||
|
] |
||||
|
] |
||||
|
}); |
||||
|
|
||||
|
constructor( |
||||
|
private readonly formBuilder: FormBuilder |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public onKeyDown(keyCode: number) { |
||||
|
if (keyCode === ESCAPE_KEY) { |
||||
|
this.toggleRename(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public toggleRename() { |
||||
|
if (this.disabled) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.renameForm.setValue({ name: this.name }); |
||||
|
|
||||
|
this.isRenaming = !this.isRenaming; |
||||
|
} |
||||
|
|
||||
|
public rename() { |
||||
|
if (this.disabled) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.renameForm.valid) { |
||||
|
const value = this.renameForm.value; |
||||
|
|
||||
|
this.nameChanged.emit(value.name); |
||||
|
|
||||
|
this.toggleRename(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
export module Keys { |
||||
|
export const COMMA = 188; |
||||
|
export const DELETE = 8; |
||||
|
export const ENTER = 13; |
||||
|
export const ESCAPE = 27; |
||||
|
export const DOWN = 40; |
||||
|
export const UP = 38; |
||||
|
} |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue