mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
6 years ago
committed by
GitHub
GitHub
33 changed files with 401 additions and 161 deletions
@ -0,0 +1,19 @@ |
|||
// ==========================================================================
|
|||
// Squidex Headless CMS
|
|||
// ==========================================================================
|
|||
// Copyright (c) Squidex UG (haftungsbeschraenkt)
|
|||
// All rights reserved. Licensed under the MIT license.
|
|||
// ==========================================================================
|
|||
|
|||
using Microsoft.AspNetCore.Authorization; |
|||
|
|||
namespace Squidex.Web |
|||
{ |
|||
public class ApiPermissionOrAnonymousAttribute : ApiPermissionAttribute, IAllowAnonymous |
|||
{ |
|||
public ApiPermissionOrAnonymousAttribute(params string[] ids) |
|||
: base(ids) |
|||
{ |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<sqx-list-view [isLoaded]="isLoaded"> |
|||
<ng-container content> |
|||
<div #chartContainer></div> |
|||
</ng-container> |
|||
</sqx-list-view> |
|||
@ -0,0 +1,3 @@ |
|||
div { |
|||
height: 500px; |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core'; |
|||
import { ResourceLoaderService, WorkflowDto } from '@app/shared'; |
|||
|
|||
declare var vis: any; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-workflow-diagram', |
|||
styleUrls: ['./workflow-diagram.component.scss'], |
|||
templateUrl: './workflow-diagram.component.html' |
|||
}) |
|||
export class WorkflowDiagramComponent implements AfterViewInit, OnDestroy, OnChanges { |
|||
private network: any; |
|||
|
|||
@ViewChild('chartContainer', { static: false }) |
|||
public chartContainer: ElementRef; |
|||
|
|||
@Input() |
|||
public workflow: WorkflowDto; |
|||
|
|||
public isLoaded = false; |
|||
|
|||
constructor( |
|||
private readonly resourceLoader: ResourceLoaderService |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.network?.destroy(); |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
this.updateNetwork(); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.updateNetwork(); |
|||
} |
|||
|
|||
private updateNetwork() { |
|||
if (this.chartContainer?.nativeElement && this.workflow) { |
|||
this.resourceLoader.loadLocalScript('dependencies/vis-network.min.js') |
|||
.then(() => { |
|||
this.network?.destroy(); |
|||
|
|||
const nodes = new vis.DataSet(); |
|||
|
|||
for (const step of this.workflow.steps) { |
|||
let label = `<b>${step.name}</b>`; |
|||
|
|||
if (step.noUpdate) { |
|||
label += `\nPrevent updates`; |
|||
|
|||
if (step.noUpdateExpression) { |
|||
label += `\nwhen (${step.noUpdateExpression})`; |
|||
} |
|||
|
|||
if (step.noUpdateRoles && step.noUpdateRoles.length > 0) { |
|||
label += `\nfor ${step.noUpdateRoles.join(', ')}`; |
|||
} |
|||
} |
|||
|
|||
if (step.name === 'Published') { |
|||
label += `\nAvailable in the API`; |
|||
} |
|||
|
|||
const node: any = { id: step.name, label, color: step.color }; |
|||
|
|||
nodes.add(node); |
|||
} |
|||
|
|||
if (this.workflow.initial) { |
|||
nodes.add({ id: 0, color: '#000', label: 'Start', shape: 'dot', size: 3 }); |
|||
} |
|||
|
|||
const edges = new vis.DataSet(); |
|||
|
|||
for (const transition of this.workflow.transitions) { |
|||
let label = ''; |
|||
|
|||
if (transition.expression) { |
|||
label += `\nwhen (${transition.expression})`; |
|||
} |
|||
|
|||
if (transition.roles && transition.roles.length > 0) { |
|||
label += `\nfor ${transition.roles.join(', ')}`; |
|||
} |
|||
|
|||
const edge: any = { ...transition, label }; |
|||
|
|||
edges.add(edge); |
|||
} |
|||
|
|||
if (this.workflow.initial) { |
|||
edges.add({ from: 0, to: this.workflow.initial }); |
|||
} |
|||
|
|||
this.network = new vis.Network(this.chartContainer.nativeElement, { edges, nodes }, GRAPH_OPTIONS); |
|||
this.network.stabilize(); |
|||
this.network.fit(); |
|||
|
|||
this.isLoaded = true; |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
const GRAPH_OPTIONS = { |
|||
nodes: { |
|||
borderWidth: 2, |
|||
font: { |
|||
multi: true, align: 'left', |
|||
ital: { |
|||
size: 16 |
|||
}, |
|||
bold: { |
|||
size: 20 |
|||
}, |
|||
size: 16 |
|||
}, |
|||
shape: 'dot', |
|||
shadow: true |
|||
}, |
|||
edges: { |
|||
arrows: 'to', |
|||
font: { |
|||
multi: true, |
|||
ital: { |
|||
size: 16 |
|||
}, |
|||
size: 16 |
|||
}, |
|||
color: 'gray' |
|||
}, |
|||
layout: { |
|||
randomSeed: 2 |
|||
}, |
|||
physics: { |
|||
enabled: false, |
|||
repulsion: { |
|||
nodeDistance: 300 |
|||
}, |
|||
solver: 'repulsion' |
|||
} |
|||
}; |
|||
Loading…
Reference in new issue