tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Rule wizard improved.

pull/442/head
Sebastian 6 years ago
parent
ff4118e1f8
commit
801e9de605
6 changed files with 211 additions and 141 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      frontend/app/_theme.html
  2. 175
      frontend/app/features/rules/pages/rules/rule-wizard.component.html
  3. 47
      frontend/app/features/rules/pages/rules/rule-wizard.component.ts
  4. 11
      frontend/app/features/settings/pages/clients/client-connect-form.component.html
  5. 30
      frontend/app/features/settings/pages/clients/client-connect-form.component.scss
  6. 78
      frontend/app/theme/_bootstrap.scss

7
frontend/app/_theme.html
View File

@ -744,8 +744,15 @@
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item done"><a href="#">Others</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
<ol class="breadcrumb steps">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item done"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Others</li>
<li class="breadcrumb-item">Data</li>
</ol>
</div>
</div>

175
frontend/app/features/rules/pages/rules/rule-wizard.component.html
View File

@ -7,99 +7,120 @@
Edit Action
</ng-container>
<ng-container *ngIf="mode === 'Wizard'">
{{titles[step - 1]}}
Create new Rule
</ng-container>
</ng-container>
<ng-container content>
<div class="row no-gutters" *ngIf="step === 1">
<sqx-form-alert marginTop="0">
The selection of the trigger type cannot be changed later.
</sqx-form-alert>
<nav aria-label="breadcrumb" *ngIf="isWizard">
<ol class="breadcrumb steps">
<li class="breadcrumb-item" [class.active]="step === 1" [class.done]="step > 1">
<a class="force" (click)="go(1)" [class.disabled]="step <= 1">
<i class="icon-checkmark"></i> Select Trigger
</a>
</li>
<li class="breadcrumb-item" [class.active]="step === 2" [class.done]="step > 2">
<a class="force" (click)="go(2)" [class.disabled]="step <= 2">
<i class="icon-checkmark"></i> Edit Trigger
</a>
</li>
<li class="breadcrumb-item" [class.active]="step === 3" [class.done]="step > 3">
<a class="force" (click)="go(3)" [class.disabled]="step <= 3">
<i class="icon-checkmark"></i> Select Action
</a>
</li>
<li class="breadcrumb-item" [class.active]="step === 4">
<i class="icon-checkmark"></i> Edit Action
</li>
</ol>
</nav>
<div *ngFor="let triggerType of ruleTriggers | sqxKeys" class="col-12 col-md-6">
<div class="rule-element" (click)="selectTriggerType(triggerType)">
<sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="ruleTriggers[triggerType]"></sqx-rule-element>
</div>
</div>
</div>
<ng-container [ngSwitch]="step">
<ng-container *ngSwitchCase="1">
<sqx-form-alert>
The selection of the trigger type cannot be changed later.
</sqx-form-alert>
<ng-container *ngIf="step === 2 && schemas">
<form [formGroup]="triggerForm.form" (ngSubmit)="saveTrigger()">
<h3 class="wizard-title">
{{triggerElement.display}}
</h3>
<div class="row no-gutters">
<div *ngFor="let triggerType of ruleTriggers | sqxKeys" class="col-12 col-md-6">
<div class="rule-element" (click)="selectTriggerType(triggerType)">
<sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="ruleTriggers[triggerType]"></sqx-rule-element>
</div>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="2">
<form [formGroup]="triggerForm.form" (ngSubmit)="saveTrigger()">
<h3 class="wizard-title">
{{triggerElement.display}}
</h3>
<ng-container [ngSwitch]="triggerType">
<ng-container *ngSwitchCase="'AssetChanged'">
<sqx-asset-changed-trigger
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-asset-changed-trigger>
</ng-container>
<ng-container *ngSwitchCase="'ContentChanged'">
<sqx-content-changed-trigger
[schemas]="schemas"
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-content-changed-trigger>
<ng-container [ngSwitch]="trigger.triggerType">
<ng-container *ngSwitchCase="'AssetChanged'">
<sqx-asset-changed-trigger
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-asset-changed-trigger>
</ng-container>
<ng-container *ngSwitchCase="'ContentChanged'">
<sqx-content-changed-trigger
[schemas]="schemas"
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-content-changed-trigger>
</ng-container>
<ng-container *ngSwitchCase="'SchemaChanged'">
<sqx-schema-changed-trigger
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-schema-changed-trigger>
</ng-container>
<ng-container *ngSwitchCase="'Usage'">
<sqx-usage-trigger
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-usage-trigger>
</ng-container>
</ng-container>
<ng-container *ngSwitchCase="'SchemaChanged'">
<sqx-schema-changed-trigger
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-schema-changed-trigger>
</ng-container>
<ng-container *ngSwitchCase="'Usage'">
<sqx-usage-trigger
[trigger]="trigger"
[triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-usage-trigger>
</ng-container>
</ng-container>
</form>
</ng-container>
<div class="row no-gutters" *ngIf="step === 3">
<sqx-form-alert marginTop="0">
The selection of the action type cannot be changed later.
</sqx-form-alert>
</form>
</ng-container>
<ng-container *ngSwitchCase="3">
<sqx-form-alert marginTop="0">
The selection of the action type cannot be changed later.
</sqx-form-alert>
<div *ngFor="let actionType of ruleActions | sqxKeys" class="col-12 col-md-6">
<div class="rule-element" (click)="selectActionType(actionType)">
<sqx-rule-element [type]="actionType" [isSmall]="false" [element]="ruleActions[actionType]"></sqx-rule-element>
<div class="row no-gutters">
<div *ngFor="let actionType of ruleActions | sqxKeys" class="col-12 col-md-6">
<div class="rule-element" (click)="selectActionType(actionType)">
<sqx-rule-element [type]="actionType" [isSmall]="false" [element]="ruleActions[actionType]"></sqx-rule-element>
</div>
</div>
</div>
</div>
</div>
<ng-container *ngIf="step === 4">
<form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
<h3 class="wizard-title">
{{actionElement.display}}
</h3>
</ng-container>
<ng-container *ngSwitchCase="4">
<form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
<h3 class="wizard-title">
{{actionElement.display}}
</h3>
<sqx-generic-action
[definition]="actionElement"
[action]="action"
[actionForm]="actionForm.form"
[actionFormSubmitted]="actionForm.submitted | async">
</sqx-generic-action>
</form>
<sqx-generic-action
[definition]="actionElement"
[action]="action"
[actionForm]="actionForm.form"
[actionFormSubmitted]="actionForm.submitted | async">
</sqx-generic-action>
</form>
</ng-container>
</ng-container>
</ng-container>
<ng-container footer>
<div>
<ng-container *ngIf="mode === 'Wizard' && step === 2">
<button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">Cancel</button>
<button type="submit" class="float-right btn btn-primary" (click)="saveTrigger()">Next</button>
</ng-container>
<ng-container *ngIf="mode !== 'Wizard' && step === 2">
<ng-container *ngIf="step === 2">
<button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">Cancel</button>
<button type="submit" class="float-right btn btn-primary" (click)="saveTrigger()" *ngIf="isEditable">Save</button>
</ng-container>

47
frontend/app/features/rules/pages/rules/rule-wizard.component.ts
View File

@ -21,13 +21,6 @@ const MODE_WIZARD = 'Wizard';
const MODE_EDIT_TRIGGER = 'EditTrigger';
const MODE_EDIT_ACTION = 'EditAction';
const TITLES: ReadonlyArray<string> = [
'Step 1 of 4: Select Trigger',
'Step 2 of 4: Configure Trigger',
'Step 3 of 4: Select Action',
'Step 4 of 4: Configure Action'
];
@Component({
selector: 'sqx-rule-wizard',
styleUrls: ['./rule-wizard.component.scss'],
@ -53,21 +46,21 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
public mode = MODE_WIZARD;
public actionForm = new Form<FormGroup, any>(new FormGroup({}));
public actionType: string;
public action: any = {};
public triggerForm = new Form<FormGroup, any>(new FormGroup({}));
public triggerType: string;
public trigger: any = {};
public titles = TITLES;
public get isWizard() {
return this.mode === MODE_WIZARD;
}
public get actionElement() {
return this.ruleActions[this.actionType];
return this.ruleActions[this.action.actionType];
}
public get triggerElement() {
return this.ruleTriggers[this.triggerType];
return this.ruleTriggers[this.trigger.triggerType];
}
public isEditable: boolean;
@ -86,12 +79,10 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
this.step = 4;
this.action = this.rule.action;
this.actionType = this.rule.actionType;
} else if (this.mode === MODE_EDIT_TRIGGER) {
this.step = 2;
this.trigger = this.rule.trigger;
this.triggerType = this.rule.triggerType;
}
}
@ -105,27 +96,33 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
this.complete.emit();
}
public go(step: number) {
this.step = step;
}
public selectActionType(type: string) {
this.action = { actionType: type };
this.actionForm = new Form<FormGroup, any>(new FormGroup({}));
this.step++;
}
public selectTriggerType(type: TriggerType) {
this.triggerType = type;
this.trigger = { triggerType: type };
this.triggerForm = new Form<FormGroup, any>(new FormGroup({}));
if (type === 'Manual') {
this.trigger = { triggerType: type };
this.step += 2;
} else {
this.step++;
}
}
public selectActionType(type: string) {
this.actionType = type;
this.step++;
}
public saveTrigger() {
const value = this.triggerForm.submit();
if (value) {
this.trigger = { ...value, triggerType: this.triggerType };
this.trigger = { ...value, triggerType: this.trigger.triggerType };
if (this.mode === MODE_WIZARD) {
this.step++;
@ -139,7 +136,7 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
const value = this.actionForm.submit();
if (value) {
this.action = { ...value, actionType: this.actionType };
this.action = { ...value, actionType: this.action.actionType };
if (this.mode === MODE_WIZARD) {
this.createRule();
@ -155,11 +152,9 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
this.rulesState.create(requestDto)
.subscribe(() => {
this.emitComplete();
this.actionForm.submitCompleted();
this.triggerForm.submitCompleted();
}, error => {
this.actionForm.submitFailed(error);
this.triggerForm.submitFailed(error);
});
}

11
frontend/app/features/settings/pages/clients/client-connect-form.component.html
View File

@ -5,26 +5,25 @@
<ng-container content>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item breadcrumb-item-done">
<ol class="breadcrumb steps">
<li class="breadcrumb-item done">
<i class="icon-checkmark"></i> Setup client
</li>
<ng-container *ngIf="isStart; else noStart">
<li class="breadcrumb-item breadcrumb-item-active">
<li class="breadcrumb-item active">
<span>
<i class="icon-checkmark"></i> Choose connection method
</span>
</li>
</ng-container>
<ng-template #noStart>
<li class="breadcrumb-item breadcrumb-item-done">
<li class="breadcrumb-item done">
<a class="force" (click)="go('Start')">
<i class="icon-checkmark"></i> Choose connection method
</a>
</li>
</ng-template>
<li class="breadcrumb-item"
[class.breadcrumb-item-active]="!isStart">
<li class="breadcrumb-item" [class.active]="!isStart">
<i class="icon-checkmark"></i> Connect
</li>
</ol>

30
frontend/app/features/settings/pages/clients/client-connect-form.component.scss
View File

@ -1,36 +1,6 @@
@import '_vars';
@import '_mixins';
.breadcrumb {
& {
margin-bottom: 2rem;
background: none;
border: 1px solid $color-border;
}
&-item {
i {
display: none;
}
&::before {
color: darken($color-border, 10%);
}
&-done {
color: $color-theme-green;
a {
color: $color-theme-green !important;
}
i {
display: inline-block;
}
}
}
}
.badge {
@include circle(1.3rem);
margin-right: .25rem;

78
frontend/app/theme/_bootstrap.scss
View File

@ -198,6 +198,84 @@ a {
}
}
//
// Breadcrump
//
.breadcrumb {
& {
margin-bottom: 2rem;
background: none;
border: 1px solid $color-border;
}
&.steps {
& {
padding: 0;
}
.breadcrumb-item {
& {
padding: .75rem 2rem .75rem 1rem;
background: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="7" height="20"%3e%3cpath d="M0 0l7 10-7 10" fill="none" stroke="%23e4e7e9" stroke-width=".5"/%3e%3c/svg%3e');
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
color: $color-text-decent;
a {
color: $color-text-decent !important;
}
}
&.active {
color: $color-text;
a {
color: $color-text !important;
}
}
&.done {
color: $color-theme-green;
a {
color: $color-theme-green !important;
}
}
&:last-child {
background: none;
}
&::before {
content: none;
}
}
}
&-item {
i {
display: none;
}
&::before {
color: darken($color-border, 10%);
}
&.done {
color: $color-theme-green;
a {
color: $color-theme-green !important;
}
i {
display: inline-block;
}
}
}
}
.dropdown-divider {
&:first-child {
display: none;

Write Preview
Loading…
Cancel
Save