Skip to content

Commit 14f5e8c

Browse files
aarthy-dkaarthy-dk
committed
feat(wizards): make steppers clickable
1 parent 2512c9e commit 14f5e8c

3 files changed

Lines changed: 43 additions & 18 deletions

File tree

‎testgen/ui/components/frontend/js/components/wizard_progress_indicator.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@
1414
*
1515
* @param {WizardStepMeta[]} steps
1616
* @param {CurrentStep} currentStep
17-
* @returns
17+
* @param {function(string)?} onStepClick
18+
* @returns
1819
*/
1920
import van from '../van.min.js';
2021
import { colorMap } from '../display_utils.js';
2122

2223
const { div, i, span } = van.tags;
2324

24-
const WizardProgressIndicator = (steps, currentStep) => {
25+
const WizardProgressIndicator = (steps, currentStep, onStepClick) => {
2526
const currentPhysicalIndex = steps.findIndex(s => s.includedSteps.includes(currentStep.name));
2627
const progressWidth = van.state('0px');
2728

@@ -50,8 +51,12 @@ const WizardProgressIndicator = (steps, currentStep) => {
5051
z-index: -4;
5152
`;
5253

53-
const currentStepIndicator = (title, stepIndex) => div(
54-
{ class: `flex-column fx-align-flex-center fx-gap-1 step-icon-current`, style: 'position: relative;' },
54+
const currentStepIndicator = (title, stepIndex, step) => div(
55+
{
56+
class: `flex-column fx-align-flex-center fx-gap-1 step-icon-current`,
57+
style: `position: relative; ${onStepClick ? 'cursor: pointer;' : ''}`,
58+
onclick: () => onStepClick?.(step.includedSteps[0]),
59+
},
5560
stepIndex === 0
5661
? div({ style: 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' }, '')
5762
: '',
@@ -66,7 +71,10 @@ const WizardProgressIndicator = (steps, currentStep) => {
6671
);
6772

6873
const pendingStepIndicator = (title, stepIndex) => div(
69-
{ class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`, style: 'position: relative;' },
74+
{
75+
class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`,
76+
style: 'position: relative; cursor: default;',
77+
},
7078
stepIndex === 0
7179
? div({ style: 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' }, '')
7280
: '',
@@ -80,8 +88,12 @@ const WizardProgressIndicator = (steps, currentStep) => {
8088
span({}, title),
8189
);
8290

83-
const completedStepIndicator = (title, stepIndex) => div(
84-
{ class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`, style: 'position: relative;' },
91+
const completedStepIndicator = (title, stepIndex, step) => div(
92+
{
93+
class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`,
94+
style: `position: relative; ${onStepClick ? 'cursor: pointer;' : ''}`,
95+
onclick: () => onStepClick?.(step.includedSteps[0]),
96+
},
8597
stepIndex === 0
8698
? div({ style: 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' }, '')
8799
: '',
@@ -134,9 +146,9 @@ const WizardProgressIndicator = (steps, currentStep) => {
134146
...steps.map((step, physicalIdx) => {
135147
if (step.index < currentStep.index) {
136148
if (step.skipped) return skippedStepIndicator(step.title, physicalIdx);
137-
return completedStepIndicator(step.title, physicalIdx);
149+
return completedStepIndicator(step.title, physicalIdx, step);
138150
} else if (step.includedSteps.includes(currentStep.name)) {
139-
return currentStepIndicator(step.title, physicalIdx);
151+
return currentStepIndicator(step.title, physicalIdx, step);
140152
} else {
141153
return pendingStepIndicator(step.title, physicalIdx);
142154
}

‎testgen/ui/components/frontend/js/pages/table_group_wizard.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ const TableGroupWizard = (props) => {
180180
index: stepIndex,
181181
name: steps[stepIndex],
182182
},
183+
(stepName) => setStep(steps.indexOf(stepName)),
183184
);
184185
},
185186
WizardStep(0, currentStepIndex, () => {

‎testgen/ui/static/js/components/wizard_progress_indicator.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@
1414
*
1515
* @param {WizardStepMeta[]} steps
1616
* @param {CurrentStep} currentStep
17-
* @returns
17+
* @param {function(string)?} onStepClick
18+
* @returns
1819
*/
1920
import van from '../van.min.js';
2021
import { colorMap } from '../display_utils.js';
2122

2223
const { div, i, span } = van.tags;
2324

24-
const WizardProgressIndicator = (steps, currentStep) => {
25+
const WizardProgressIndicator = (steps, currentStep, onStepClick) => {
2526
const currentPhysicalIndex = steps.findIndex(s => s.includedSteps.includes(currentStep.name));
2627
const progressWidth = van.state('0px');
2728

@@ -50,8 +51,12 @@ const WizardProgressIndicator = (steps, currentStep) => {
5051
z-index: -4;
5152
`;
5253

53-
const currentStepIndicator = (title, stepIndex) => div(
54-
{ class: `flex-column fx-align-flex-center fx-gap-1 step-icon-current`, style: 'position: relative;' },
54+
const currentStepIndicator = (title, stepIndex, step) => div(
55+
{
56+
class: `flex-column fx-align-flex-center fx-gap-1 step-icon-current`,
57+
style: `position: relative; ${onStepClick ? 'cursor: pointer;' : ''}`,
58+
onclick: () => onStepClick?.(step.includedSteps[0]),
59+
},
5560
stepIndex === 0
5661
? div({ style: 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' }, '')
5762
: '',
@@ -66,7 +71,10 @@ const WizardProgressIndicator = (steps, currentStep) => {
6671
);
6772

6873
const pendingStepIndicator = (title, stepIndex) => div(
69-
{ class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`, style: 'position: relative;' },
74+
{
75+
class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`,
76+
style: 'position: relative; cursor: default;',
77+
},
7078
stepIndex === 0
7179
? div({ style: 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' }, '')
7280
: '',
@@ -80,8 +88,12 @@ const WizardProgressIndicator = (steps, currentStep) => {
8088
span({}, title),
8189
);
8290

83-
const completedStepIndicator = (title, stepIndex) => div(
84-
{ class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`, style: 'position: relative;' },
91+
const completedStepIndicator = (title, stepIndex, step) => div(
92+
{
93+
class: `flex-column fx-align-flex-center fx-gap-1 ${currentPhysicalIndex === stepIndex ? 'step-icon-current' : 'text-secondary'}`,
94+
style: `position: relative; ${onStepClick ? 'cursor: pointer;' : ''}`,
95+
onclick: () => onStepClick?.(step.includedSteps[0]),
96+
},
8597
stepIndex === 0
8698
? div({ style: 'position: absolute; width: 50%; height: 50%; left: 0px; background: var(--dk-dialog-background); z-index: -1;' }, '')
8799
: '',
@@ -134,9 +146,9 @@ const WizardProgressIndicator = (steps, currentStep) => {
134146
...steps.map((step, physicalIdx) => {
135147
if (step.index < currentStep.index) {
136148
if (step.skipped) return skippedStepIndicator(step.title, physicalIdx);
137-
return completedStepIndicator(step.title, physicalIdx);
149+
return completedStepIndicator(step.title, physicalIdx, step);
138150
} else if (step.includedSteps.includes(currentStep.name)) {
139-
return currentStepIndicator(step.title, physicalIdx);
151+
return currentStepIndicator(step.title, physicalIdx, step);
140152
} else {
141153
return pendingStepIndicator(step.title, physicalIdx);
142154
}

0 commit comments

Comments
 (0)