Skip to content

Commit ac1ffc9

Browse files
mjabascal10mjabascal10
committed
refactor(import-rule): enhance step indicators and improve rule display logic
Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>
1 parent 7bf9918 commit ac1ffc9

File tree

2 files changed

+233
-106
lines changed

2 files changed

+233
-106
lines changed

‎frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.html‎

Lines changed: 162 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,117 @@
11
<app-utm-modal-header [name]="'Import rule(s)'"></app-utm-modal-header>
2+
23
<div class="modal-content d-flex flex-column p-3">
4+
35
<div class="form-body w-100">
6+
7+
<!-- STEPS -->
48
<div class="d-flex justify-content-center">
59
<div class="step-container d-flex justify-content-between mt-2 mb-4 w-75">
610

11+
<!-- STEP 0 -->
712
<div class="step">
813
<span class="text-blue-800 font-weight-bold">Import</span>
914
<div
10-
[ngClass]="isCompleted(RULE_FORM.STEP0) ? 'step-success': currentStep == RULE_FORM.STEP0 ? 'step-active' : 'step-inactive'"
11-
class="round-indicator">
15+
class="round-indicator"
16+
[ngClass]="{
17+
'step-success': isCompleted(RULE_FORM.STEP0),
18+
'step-active': currentStep === RULE_FORM.STEP0,
19+
'step-inactive': currentStep !== RULE_FORM.STEP0 && !isCompleted(RULE_FORM.STEP0)
20+
}">
1221
<i class="text-white font-size-sm"
1322
[ngClass]="isCompleted(RULE_FORM.STEP0) ? 'icon-checkmark3' : 'icon-file-upload'"></i>
1423
</div>
1524
</div>
16-
<div class="step-link"></div>
1725

26+
<div class="step-link"></div>
1827

28+
<!-- STEP 1 -->
1929
<div class="step">
2030
<span class="text-blue-800 font-weight-bold">Review</span>
2131
<div
22-
[ngClass]="isCompleted(RULE_FORM.STEP1) ? 'step-success': currentStep == RULE_FORM.STEP1 ? 'step-active' : 'step-inactive'"
23-
class="round-indicator">
24-
<i class="text-white font-size-sm top-0"
32+
class="round-indicator"
33+
[ngClass]="{
34+
'step-success': isCompleted(RULE_FORM.STEP1),
35+
'step-active': currentStep === RULE_FORM.STEP1,
36+
'step-inactive': currentStep !== RULE_FORM.STEP1 && !isCompleted(RULE_FORM.STEP1)
37+
}">
38+
<i class="text-white font-size-sm"
2539
[ngClass]="isCompleted(RULE_FORM.STEP1) ? 'icon-checkmark3' : 'icon-shield-check'"></i>
2640
</div>
2741
</div>
42+
2843
<div class="step-link"></div>
2944

45+
<!-- STEP 2 -->
3046
<div class="step">
3147
<span class="text-blue-800 font-weight-bold">Import</span>
3248
<div
33-
[ngClass]="isCompleted(RULE_FORM.STEP2) ? 'step-success' : currentStep == RULE_FORM.STEP2 ? 'step-active' : 'step-inactive'"
34-
class="round-indicator">
35-
<i class="text-white font-size-sm top-0"
49+
class="round-indicator"
50+
[ngClass]="{
51+
'step-success': isCompleted(RULE_FORM.STEP2),
52+
'step-active': currentStep === RULE_FORM.STEP2,
53+
'step-inactive': currentStep !== RULE_FORM.STEP2 && !isCompleted(RULE_FORM.STEP2)
54+
}">
55+
<i class="text-white font-size-sm"
3656
[ngClass]="isCompleted(RULE_FORM.STEP2) ? 'icon-checkmark3' : 'icon-upload10'"></i>
3757
</div>
3858
</div>
59+
3960
</div>
4061
</div>
4162

42-
<div [hidden]="currentStep != RULE_FORM.STEP0">
43-
<div class="d-flex mt-3 flex-column">
44-
<div class="alert alert-info alert-styled-right mb-2 info-dismissible w-100">
45-
<span class="font-weight-semibold">Info! </span>
46-
The rule import process requires a valid file with a <strong>.yml</strong> extension.
63+
<!-- STEP 0 -->
64+
<div *ngIf="currentStep === RULE_FORM.STEP0">
65+
<div class="d-flex mt-3 flex-column">
66+
<div class="alert alert-info alert-styled-right mb-2 w-100">
67+
<span class="font-weight-semibold">Info!</span>
68+
The rule import process requires a valid <strong>.yml</strong> file.
4769
</div>
4870
</div>
49-
<app-utm-file-upload (fileEmit)="onFileChange($event)"
50-
[validateFileSize]="true"
51-
[acceptTypes]="'.yml'">
71+
72+
<app-utm-file-upload
73+
(fileEmit)="onFileChange($event)"
74+
[validateFileSize]="true"
75+
[acceptTypes]="'.yml'">
5276
</app-utm-file-upload>
5377
</div>
5478

55-
<div [hidden]="currentStep === RULE_FORM.STEP0">
79+
<!-- STEP 1 -->
80+
<div *ngIf="currentStep === RULE_FORM.STEP1" class="position-relative">
81+
82+
<div *ngIf="loading"
83+
class="position-absolute d-flex justify-content-center align-items-center loader w-100 h-100">
84+
<app-utm-spinner [loading]="loading" label="Loading"></app-utm-spinner>
85+
</div>
86+
5687
<div class="rule-items mt-3 wm-200px">
5788

58-
<div *ngIf="loading" class="position-absolute d-flex justify-content-center align-items-center loader w-100 h-100 ">
59-
<app-utm-spinner [loading]="loading" label="Loading"></app-utm-spinner>
60-
</div>
89+
<div *ngFor="let rule of rules; let i = index"
90+
class="p-2 border rounded mb-2 d-flex flex-column"
91+
style="background: #f8f8f8">
92+
93+
<!-- HEADER -->
94+
<div (click)="showRule(rule)"
95+
class="d-flex align-items-center justify-content-between w-100 cursor-pointer">
6196

62-
<div style="background: #f8f8f8" *ngFor="let rule of rules; let i = index"
63-
class="p-2 border rounded mb-2 d-flex flex-column">
97+
<div class="rule-filename"
98+
[ngClass]="{
99+
'text-success': rule.status === 'valid',
100+
'text-danger': rule.status === 'error'
101+
}">
64102

65-
<div (click)="showRule(rule)" class="d-flex align-items-center justify-content-between w-100 cursor-pointer">
66-
<div [ngClass]="{'text-success': rule.status === 'valid', 'text-danger': rule.status === 'error'}" class="rule-filename">
67-
<span (click)="showRule(rule)" class="cursor-pointer opacity-75">
68-
<i [ngClass]="{'icon-arrow-down32' : !rule.showDetail, 'icon-arrow-up32' : rule.showDetail}"
69-
class="font-size-sm"></i>
103+
<span class="cursor-pointer opacity-75">
104+
<i class="font-size-sm"
105+
[ngClass]="rule.showDetail ? 'icon-arrow-up32' : 'icon-arrow-down32'"></i>
70106
</span>
107+
71108
<span class="ml-2">
72-
<strong>{{ rule.rule.name + ' ' }}</strong>
73-
<small>({{ rule.status }} )</small>
109+
<strong>{{ rule.rule.name }}</strong>
110+
<small>({{ rule.status }})</small>
74111
</span>
75112
</div>
76113

77-
<div *ngIf="!rule.isLoading " class="d-flex">
114+
<div *ngIf="!rule.isLoading" class="d-flex">
78115
<div (click)="deleteRule(i)" class="cursor-pointer opacity-75 ml-2">
79116
<i *ngIf="rule.status === 'valid'" class="icon-cross2 font-size-sm"></i>
80117
<i *ngIf="rule.status === 'error'" class="icon-warning2 font-size-sm"></i>
@@ -83,46 +120,124 @@
83120
</div>
84121

85122
<div *ngIf="rule.isLoading" class="d-flex">
86-
<div class="cursor-pointer opacity-75 ml-2">
123+
<div class="cursor-pointer opacity-75 ml-2">
87124
<i class="icon-spinner spinner"></i>
88125
</div>
89126
</div>
90127

91128
</div>
92129

93-
<div *ngIf="rule.showDetail" [ngClass]="{'alert-danger' : !rule.valid, 'alert-success': rule.valid}" class="alert mt-2 py-2 pl-3 w-100">
94-
<app-utm-json-detail-view [errors]="rule.errors" [rowDocument]="rule.rule"></app-utm-json-detail-view>
130+
<!-- DETAILS -->
131+
<div *ngIf="rule.showDetail"
132+
class="alert mt-2 py-2 pl-3 w-100"
133+
[ngClass]="{
134+
'alert-danger': !rule.valid,
135+
'alert-success': rule.valid
136+
}">
137+
138+
<app-utm-json-detail-view
139+
[errors]="rule.errors"
140+
[rowDocument]="rule.rule">
141+
</app-utm-json-detail-view>
142+
143+
</div>
144+
145+
</div>
146+
147+
</div>
148+
</div>
149+
150+
<!-- STEP 2 -->
151+
<div *ngIf="currentStep === RULE_FORM.STEP2">
152+
153+
<div class="d-flex mt-3 flex-column">
154+
<div class="alert alert-info alert-styled-right mb-2 w-100">
155+
<span class="font-weight-semibold">Info!</span>
156+
You are about to import {{ validRulesCount() }} valid rule(s).
157+
</div>
158+
</div>
159+
160+
<div *ngFor="let rule of rules; let i = index"
161+
class="p-2 border rounded mb-2"
162+
style="background: #f8f8f8; margin-top: 10px">
163+
164+
<div (click)="showRule(rule)"
165+
class="d-flex align-items-center justify-content-between w-100 cursor-pointer">
166+
167+
<div class="rule-filename"
168+
[ngClass]="{
169+
'text-success': rule.status === 'valid',
170+
'text-danger': rule.status === 'error'
171+
}">
172+
173+
<span class="cursor-pointer opacity-75">
174+
<i class="font-size-sm"
175+
[ngClass]="rule.showDetail ? 'icon-arrow-up32' : 'icon-arrow-down32'"></i>
176+
</span>
177+
178+
<span class="ml-2">
179+
<strong>{{ rule.rule.name }}</strong>
180+
<small>({{ rule.status }})</small>
181+
</span>
182+
</div>
183+
184+
<div *ngIf="!rule.isLoading" class="d-flex">
185+
<div (click)="deleteRule(i)" class="cursor-pointer opacity-75 ml-2">
186+
<i *ngIf="rule.status === 'valid'" class="icon-cross2 font-size-sm"></i>
187+
<i *ngIf="rule.status === 'error'" class="icon-warning2 font-size-sm"></i>
188+
<i *ngIf="rule.status === 'saved'" class="icon-check2 font-size-sm"></i>
189+
</div>
95190
</div>
191+
96192
</div>
193+
194+
97195
</div>
98196
</div>
197+
99198
</div>
100-
<div *ngIf="files.length > 0" class="button-container d-flex justify-content-end pr-3 w-100">
101-
<button *ngIf="currentStep != RULE_FORM.STEP2 && currentStep != RULE_FORM.STEP2" (click)="activeModal.close()"
199+
200+
<!-- FOOTER -->
201+
<div *ngIf="files.length > 0"
202+
class="button-container d-flex justify-content-end pr-3 w-100">
203+
204+
<!-- CANCEL -->
205+
<button *ngIf="currentStep === RULE_FORM.STEP0"
206+
(click)="activeModal.close()"
102207
class="btn utm-button utm-button-grey mr-2">
103-
<i class="icon-cancel-circle2 top-0"></i>&nbsp; Cancel
208+
<i class="icon-cancel-circle2"></i>&nbsp; Cancel
104209
</button>
105210

106-
<button *ngIf="currentStep == RULE_FORM.STEP1" (click)="back()" class="btn utm-button utm-button-primary mr-2">
107-
<i class="icon-arrow-left32 top-0"></i>
108-
Back
211+
<!-- BACK -->
212+
<button *ngIf="currentStep !== RULE_FORM.STEP0 && !isImportFinished"
213+
(click)="back()"
214+
class="btn utm-button utm-button-primary mr-2">
215+
<i class="icon-arrow-left32"></i> Back
109216
</button>
110217

111-
<button *ngIf="currentStep != RULE_FORM.STEP2 && currentStep != RULE_FORM.STEP2" (click)="next()"
112-
[disabled]="loading"
218+
<!-- NEXT -->
219+
<button *ngIf="currentStep !== RULE_FORM.STEP2"
220+
(click)="next()"
221+
[disabled]="loading"
113222
class="btn utm-button utm-button-primary">
114-
Next
115-
<i class="icon-arrow-right32"></i>&nbsp;
223+
Next <i class="icon-arrow-right32"></i>
116224
</button>
117225

118-
<button *ngIf="currentStep == RULE_FORM.STEP2" (click)="saveRule()"
226+
<!-- IMPORT -->
227+
<button *ngIf="currentStep === RULE_FORM.STEP2 && !isImportFinished"
228+
[disabled]="validRulesCount() == 0 || loading"
229+
(click)="saveRule()"
119230
class="btn utm-button utm-button-primary">
120-
<i [ngClass]="loading ? 'icon-spinner spinner' : 'icon-grid-alt top-0'"></i>&nbsp; Import rules
231+
<i [ngClass]="loading ? 'icon-spinner spinner' : 'icon-grid-alt'"></i>&nbsp; Import rules
121232
</button>
122233

123-
<button *ngIf="currentStep == RULE_FORM.STEP2" (click)="close()"
234+
<!-- CLOSE -->
235+
<button *ngIf="currentStep === RULE_FORM.STEP2 && isImportFinished"
236+
(click)="close()"
124237
class="btn utm-button utm-button-primary ml-2">
125238
Close
126239
</button>
240+
127241
</div>
242+
128243
</div>

0 commit comments

Comments
 (0)