Rule wizard improved.

frontend/app/_theme.html

@@ -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>
 

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

@@ -7,30 +7,55 @@
             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">
+        <nav aria-label="breadcrumb" *ngIf="isWizard">
-            <sqx-form-alert marginTop="0">
+            <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>
+
+        <ng-container [ngSwitch]="step">
+            <ng-container *ngSwitchCase="1">
+                <sqx-form-alert>
                     The selection of the trigger type cannot be changed later.
                 </sqx-form-alert>
     
+                <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 *ngIf="step === 2 && schemas">
+            <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'">
                             <sqx-asset-changed-trigger
                                 [trigger]="trigger"
@@ -63,20 +88,20 @@
                     </ng-container>
                 </form>
             </ng-container>
-    
+            <ng-container *ngSwitchCase="3">
-        <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 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>
-    
+            </ng-container>
-        <ng-container *ngIf="step === 4">
+            <ng-container *ngSwitchCase="4">
                 <form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
                     <h3 class="wizard-title">
                         {{actionElement.display}}
@@ -91,15 +116,11 @@
                 </form>
             </ng-container>
         </ng-container>
+    </ng-container>
 
     <ng-container footer>
         <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="submit" class="float-right btn btn-primary" (click)="saveTrigger()" *ngIf="isEditable">Save</button>
             </ng-container>

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<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);
             });
     }

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

@@ -5,26 +5,25 @@
 
     <ng-container content>
         <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
                 </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"
+                <li class="breadcrumb-item" [class.active]="!isStart">
-                    [class.breadcrumb-item-active]="!isStart">
                     <i class="icon-checkmark"></i> Connect
                 </li>
             </ol>

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

@@ -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;

frontend/app/theme/_bootstrap.scss

@@ -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;