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
Unified 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"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</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> <li class="breadcrumb-item active">Data</li>
</ol> </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>
</div> </div>

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

@ -7,99 +7,120 @@
Edit Action Edit Action
</ng-container> </ng-container>
<ng-container *ngIf="mode === 'Wizard'"> <ng-container *ngIf="mode === 'Wizard'">
{{titles[step - 1]}} Create new Rule
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container content> <ng-container content>
<div class="row no-gutters" *ngIf="step === 1"> <nav aria-label="breadcrumb" *ngIf="isWizard">
<sqx-form-alert marginTop="0"> <ol class="breadcrumb steps">
The selection of the trigger type cannot be changed later. <li class="breadcrumb-item" [class.active]="step === 1" [class.done]="step > 1">
</sqx-form-alert> <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"> <ng-container [ngSwitch]="step">
<div class="rule-element" (click)="selectTriggerType(triggerType)"> <ng-container *ngSwitchCase="1">
<sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="ruleTriggers[triggerType]"></sqx-rule-element> <sqx-form-alert>
</div> The selection of the trigger type cannot be changed later.
</div> </sqx-form-alert>
</div>
<ng-container *ngIf="step === 2 && schemas"> <div class="row no-gutters">
<form [formGroup]="triggerForm.form" (ngSubmit)="saveTrigger()"> <div *ngFor="let triggerType of ruleTriggers | sqxKeys" class="col-12 col-md-6">
<h3 class="wizard-title"> <div class="rule-element" (click)="selectTriggerType(triggerType)">
{{triggerElement.display}} <sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="ruleTriggers[triggerType]"></sqx-rule-element>
</h3> </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 [ngSwitch]="trigger.triggerType">
<ng-container *ngSwitchCase="'AssetChanged'"> <ng-container *ngSwitchCase="'AssetChanged'">
<sqx-asset-changed-trigger <sqx-asset-changed-trigger
[trigger]="trigger" [trigger]="trigger"
[triggerForm]="triggerForm.form" [triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async"> [triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-asset-changed-trigger> </sqx-asset-changed-trigger>
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'ContentChanged'"> <ng-container *ngSwitchCase="'ContentChanged'">
<sqx-content-changed-trigger <sqx-content-changed-trigger
[schemas]="schemas" [schemas]="schemas"
[trigger]="trigger" [trigger]="trigger"
[triggerForm]="triggerForm.form" [triggerForm]="triggerForm.form"
[triggerFormSubmitted]="triggerForm.submitted | async"> [triggerFormSubmitted]="triggerForm.submitted | async">
</sqx-content-changed-trigger> </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>
<ng-container *ngSwitchCase="'SchemaChanged'"> </form>
<sqx-schema-changed-trigger </ng-container>
[trigger]="trigger" <ng-container *ngSwitchCase="3">
[triggerForm]="triggerForm.form" <sqx-form-alert marginTop="0">
[triggerFormSubmitted]="triggerForm.submitted | async"> The selection of the action type cannot be changed later.
</sqx-schema-changed-trigger> </sqx-form-alert>
</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>
<div *ngFor="let actionType of ruleActions | sqxKeys" class="col-12 col-md-6"> <div class="row no-gutters">
<div class="rule-element" (click)="selectActionType(actionType)"> <div *ngFor="let actionType of ruleActions | sqxKeys" class="col-12 col-md-6">
<sqx-rule-element [type]="actionType" [isSmall]="false" [element]="ruleActions[actionType]"></sqx-rule-element> <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>
</div> <ng-container *ngSwitchCase="4">
<form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
<ng-container *ngIf="step === 4"> <h3 class="wizard-title">
<form [formGroup]="actionForm.form" (ngSubmit)="saveAction()"> {{actionElement.display}}
<h3 class="wizard-title"> </h3>
{{actionElement.display}}
</h3>
<sqx-generic-action <sqx-generic-action
[definition]="actionElement" [definition]="actionElement"
[action]="action" [action]="action"
[actionForm]="actionForm.form" [actionForm]="actionForm.form"
[actionFormSubmitted]="actionForm.submitted | async"> [actionFormSubmitted]="actionForm.submitted | async">
</sqx-generic-action> </sqx-generic-action>
</form> </form>
</ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container footer> <ng-container footer>
<div> <div>
<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()">Next</button>
</ng-container>
<ng-container *ngIf="mode !== 'Wizard' && step === 2">
<button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">Cancel</button> <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> <button type="submit" class="float-right btn btn-primary" (click)="saveTrigger()" *ngIf="isEditable">Save</button>
</ng-container> </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_TRIGGER = 'EditTrigger';
const MODE_EDIT_ACTION = 'EditAction'; 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({ @Component({
selector: 'sqx-rule-wizard', selector: 'sqx-rule-wizard',
styleUrls: ['./rule-wizard.component.scss'], styleUrls: ['./rule-wizard.component.scss'],
@ -53,21 +46,21 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
public mode = MODE_WIZARD; public mode = MODE_WIZARD;
public actionForm = new Form<FormGroup, any>(new FormGroup({})); public actionForm = new Form<FormGroup, any>(new FormGroup({}));
public actionType: string;
public action: any = {}; public action: any = {};
public triggerForm = new Form<FormGroup, any>(new FormGroup({})); public triggerForm = new Form<FormGroup, any>(new FormGroup({}));
public triggerType: string;
public trigger: any = {}; public trigger: any = {};
public titles = TITLES; public get isWizard() {
return this.mode === MODE_WIZARD;
}
public get actionElement() { public get actionElement() {
return this.ruleActions[this.actionType]; return this.ruleActions[this.action.actionType];
} }
public get triggerElement() { public get triggerElement() {
return this.ruleTriggers[this.triggerType]; return this.ruleTriggers[this.trigger.triggerType];
} }
public isEditable: boolean; public isEditable: boolean;
@ -86,12 +79,10 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
this.step = 4; this.step = 4;
this.action = this.rule.action; this.action = this.rule.action;
this.actionType = this.rule.actionType;
} else if (this.mode === MODE_EDIT_TRIGGER) { } else if (this.mode === MODE_EDIT_TRIGGER) {
this.step = 2; this.step = 2;
this.trigger = this.rule.trigger; this.trigger = this.rule.trigger;
this.triggerType = this.rule.triggerType;
} }
} }
@ -105,27 +96,33 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
this.complete.emit(); 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) { public selectTriggerType(type: TriggerType) {
this.triggerType = type; this.trigger = { triggerType: type };
this.triggerForm = new Form<FormGroup, any>(new FormGroup({}));
if (type === 'Manual') { if (type === 'Manual') {
this.trigger = { triggerType: type };
this.step += 2; this.step += 2;
} else { } else {
this.step++; this.step++;
} }
} }
public selectActionType(type: string) {
this.actionType = type;
this.step++;
}
public saveTrigger() { public saveTrigger() {
const value = this.triggerForm.submit(); const value = this.triggerForm.submit();
if (value) { if (value) {
this.trigger = { ...value, triggerType: this.triggerType }; this.trigger = { ...value, triggerType: this.trigger.triggerType };
if (this.mode === MODE_WIZARD) { if (this.mode === MODE_WIZARD) {
this.step++; this.step++;
@ -139,7 +136,7 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
const value = this.actionForm.submit(); const value = this.actionForm.submit();
if (value) { if (value) {
this.action = { ...value, actionType: this.actionType }; this.action = { ...value, actionType: this.action.actionType };
if (this.mode === MODE_WIZARD) { if (this.mode === MODE_WIZARD) {
this.createRule(); this.createRule();
@ -155,11 +152,9 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
this.rulesState.create(requestDto) this.rulesState.create(requestDto)
.subscribe(() => { .subscribe(() => {
this.emitComplete(); this.emitComplete();
this.actionForm.submitCompleted();
this.triggerForm.submitCompleted();
}, error => { }, error => {
this.actionForm.submitFailed(error); this.actionForm.submitFailed(error);
this.triggerForm.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> <ng-container content>
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb steps">
<li class="breadcrumb-item breadcrumb-item-done"> <li class="breadcrumb-item done">
<i class="icon-checkmark"></i> Setup client <i class="icon-checkmark"></i> Setup client
</li> </li>
<ng-container *ngIf="isStart; else noStart"> <ng-container *ngIf="isStart; else noStart">
<li class="breadcrumb-item breadcrumb-item-active"> <li class="breadcrumb-item active">
<span> <span>
<i class="icon-checkmark"></i> Choose connection method <i class="icon-checkmark"></i> Choose connection method
</span> </span>
</li> </li>
</ng-container> </ng-container>
<ng-template #noStart> <ng-template #noStart>
<li class="breadcrumb-item breadcrumb-item-done"> <li class="breadcrumb-item done">
<a class="force" (click)="go('Start')"> <a class="force" (click)="go('Start')">
<i class="icon-checkmark"></i> Choose connection method <i class="icon-checkmark"></i> Choose connection method
</a> </a>
</li> </li>
</ng-template> </ng-template>
<li class="breadcrumb-item" <li class="breadcrumb-item" [class.active]="!isStart">
[class.breadcrumb-item-active]="!isStart">
<i class="icon-checkmark"></i> Connect <i class="icon-checkmark"></i> Connect
</li> </li>
</ol> </ol>

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

@ -1,36 +1,6 @@
@import '_vars'; @import '_vars';
@import '_mixins'; @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 { .badge {
@include circle(1.3rem); @include circle(1.3rem);
margin-right: .25rem; 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 { .dropdown-divider {
&:first-child { &:first-child {
display: none; display: none;

Write Preview
Loading…
Cancel
Save