From 801e9de6059d75725a25c112c06c77ca5884fbdb Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 10 Nov 2019 10:19:33 +0100 Subject: [PATCH] Rule wizard improved. --- frontend/app/_theme.html | 7 + .../pages/rules/rule-wizard.component.html | 179 ++++++++++-------- .../pages/rules/rule-wizard.component.ts | 47 ++--- .../client-connect-form.component.html | 11 +- .../client-connect-form.component.scss | 30 --- frontend/app/theme/_bootstrap.scss | 78 ++++++++ 6 files changed, 211 insertions(+), 141 deletions(-) diff --git a/frontend/app/_theme.html b/frontend/app/_theme.html index e9678a8bc..1e0a3e8c8 100644 --- a/frontend/app/_theme.html +++ b/frontend/app/_theme.html @@ -744,8 +744,15 @@
  1. Home
  2. Library
    3. +
  3. Others
  4. Data
+
    +
  1. Home
    2. +
  2. Library
    3. +
  3. Others
    4. +
  4. Data
    5. +
diff --git a/frontend/app/features/rules/pages/rules/rule-wizard.component.html b/frontend/app/features/rules/pages/rules/rule-wizard.component.html index 52f544f3f..ab3f9c66b 100644 --- a/frontend/app/features/rules/pages/rules/rule-wizard.component.html +++ b/frontend/app/features/rules/pages/rules/rule-wizard.component.html @@ -7,99 +7,120 @@ Edit Action - {{titles[step - 1]}} + Create new Rule -
- - The selection of the trigger type cannot be changed later. - + -
-
- + + + + The selection of the trigger type cannot be changed later. + + +
+
+
+ +
+
-
-
- - -
-

- {{triggerElement.display}} -

- - - - - - - - - - - - - - - - - + + + +

+ {{triggerElement.display}} +

+ + + + + + + + + + + + + + + + + + - - -
+ + + + + The selection of the action type cannot be changed later. + -
- - The selection of the action type cannot be changed later. - - -
-
- +
+
+
+ +
+
-
-
+ + +
+

+ {{actionElement.display}} +

- - -

- {{actionElement.display}} -

- - - - + + + +
-
- - - - - - +
+ diff --git a/frontend/app/features/rules/pages/rules/rule-wizard.component.ts b/frontend/app/features/rules/pages/rules/rule-wizard.component.ts index faf22eea9..29f62d5a4 100644 --- a/frontend/app/features/rules/pages/rules/rule-wizard.component.ts +++ b/frontend/app/features/rules/pages/rules/rule-wizard.component.ts @@ -21,13 +21,6 @@ const MODE_WIZARD = 'Wizard'; const MODE_EDIT_TRIGGER = 'EditTrigger'; const MODE_EDIT_ACTION = 'EditAction'; -const TITLES: ReadonlyArray = [ - '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(new FormGroup({})); - public actionType: string; public action: any = {}; public triggerForm = new Form(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(new FormGroup({})); + + this.step++; + } + public selectTriggerType(type: TriggerType) { - this.triggerType = type; + this.trigger = { triggerType: type }; + this.triggerForm = new Form(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); }); } diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.html b/frontend/app/features/settings/pages/clients/client-connect-form.component.html index d5fa6c8aa..574bc7bd1 100644 --- a/frontend/app/features/settings/pages/clients/client-connect-form.component.html +++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.html @@ -5,26 +5,25 @@