Skip to content

Commit 1256a26

Browse files
asithadeasithade
authored
feat(committees): refactor to multi-step wizard workflow (#197)
* feat(committees): refactor to multi-step wizard workflow - Convert committee-manage to PrimeNG Stepper with 4 steps: 1. Category Selection 2. Basic Info 3. Settings 4. Members - Create new sub-components for each wizard step - Add reusable card-selector shared component - Add committee category configurations with icons, descriptions - Refactor meeting-type-selection to use card-selector - Add CardSelectorOption and MemberPendingChanges interfaces - Remove unused committee-form component - Remove unused interfaces: CommitteeSettings, CommitteeSummary, CommitteeValidationError, CommitteeValidationResult - Remove unused getValidCommitteeCategories function - Fix user service queries to use SUB instead of LF_USERNAME LFXV2-879 LFXV2-880 Signed-off-by: Asitha de Silva <[email protected]> * refactor(committees): improve code quality and remove unused code - Remove unused inline-member-form component - Convert form signal to regular class property (no state changes) - Extract isVotingMember() helper to reduce code duplication - Add boundary checks to getStepTitle() method - Add takeUntilDestroyed to form subscriptions in members manager LFXV2-879 Signed-off-by: Asitha de Silva <[email protected]> --------- Signed-off-by: Asitha de Silva <[email protected]>
1 parent 1218bd5 commit 1256a26

29 files changed

+1870
-450
lines changed

‎apps/lfx-one/src/app/modules/committees/committee-manage/committee-manage.component.html‎

Lines changed: 150 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Copyright The Linux Foundation and each contributor to LFX. -->
22
<!-- SPDX-License-Identifier: MIT -->
33

4-
<div class="container py-6 px-8">
4+
<div class="max-w-4xl mx-auto px-8" id="committee-manage">
55
<!-- Back Navigation -->
66
<div class="mb-4">
77
<a routerLink="/groups" class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors">
@@ -10,19 +10,155 @@
1010
</a>
1111
</div>
1212

13-
<!-- Header -->
14-
<div class="mb-6">
15-
<h1 class="text-xl font-semibold text-gray-900">{{ isEditMode() ? 'Edit ' : 'Create ' }} {{ committeeLabel }}</h1>
16-
</div>
13+
<div class="bg-white rounded-lg border border-slate-200 shadow-sm">
14+
<!-- Header -->
15+
<div class="border-b border-slate-200 p-6">
16+
<div class="flex items-center justify-between">
17+
<h1 data-testid="committee-manage-title">
18+
{{ isEditMode() ? 'Edit ' + committeeLabel : 'Create ' + committeeLabel }}
19+
</h1>
20+
<div class="text-sm text-slate-500" data-testid="committee-manage-step-indicator">Step {{ currentStep() }} of {{ totalSteps }}</div>
21+
</div>
22+
</div>
23+
24+
<!-- Content -->
25+
<div class="p-8">
26+
<!-- Stepper Layout -->
27+
<p-stepper
28+
[value]="currentStep()"
29+
(valueChange)="goToStep($event)"
30+
[linear]="!isEditMode()"
31+
styleClass="committee-manage-stepper"
32+
data-testid="committee-manage-stepper">
33+
<p-step-list>
34+
<p-step [value]="1" data-testid="committee-manage-step-1"></p-step>
35+
<p-step [value]="2" data-testid="committee-manage-step-2"></p-step>
36+
<p-step [value]="3" data-testid="committee-manage-step-3"></p-step>
37+
<p-step [value]="4" data-testid="committee-manage-step-4"></p-step>
38+
</p-step-list>
39+
40+
<p-step-panels>
41+
<!-- Step 1: Category Selection -->
42+
<p-step-panel [value]="1" data-testid="committee-manage-panel-1">
43+
<ng-template #content let-activateCallback="activateCallback">
44+
<lfx-committee-category-selection [form]="form"></lfx-committee-category-selection>
45+
</ng-template>
46+
</p-step-panel>
47+
48+
<!-- Step 2: Basic Information -->
49+
<p-step-panel [value]="2" data-testid="committee-manage-panel-2">
50+
<ng-template #content let-activateCallback="activateCallback">
51+
<lfx-committee-basic-info [form]="form" [committeeId]="committeeId()"></lfx-committee-basic-info>
52+
</ng-template>
53+
</p-step-panel>
54+
55+
<!-- Step 3: Settings -->
56+
<p-step-panel [value]="3" data-testid="committee-manage-panel-3">
57+
<ng-template #content let-activateCallback="activateCallback">
58+
<lfx-committee-settings [form]="form"></lfx-committee-settings>
59+
</ng-template>
60+
</p-step-panel>
1761

18-
<!-- Form Card -->
19-
<div class="bg-white rounded-lg p-4 md:p-8 shadow-md">
20-
<lfx-committee-form
21-
[form]="form"
22-
[isEditMode]="isEditMode()"
23-
[committeeId]="committeeId()"
24-
[submitting]="submitting()"
25-
(formSubmit)="onSubmit()"
26-
(formCancel)="onCancel()" />
62+
<!-- Step 4: Add Members -->
63+
<p-step-panel [value]="4" data-testid="committee-manage-panel-4">
64+
<ng-template #content let-activateCallback="activateCallback">
65+
@if (committeeId()) {
66+
<lfx-committee-members-manager
67+
[committeeId]="committeeId()"
68+
[memberUpdates]="memberUpdates()"
69+
(memberUpdatesChange)="onMemberUpdatesChange($event)">
70+
</lfx-committee-members-manager>
71+
} @else {
72+
<div class="text-center py-8 text-gray-500">
73+
<p>{{ committeeLabel }} must be created before managing members.</p>
74+
</div>
75+
}
76+
</ng-template>
77+
</p-step-panel>
78+
</p-step-panels>
79+
</p-stepper>
80+
</div>
81+
82+
<!-- Footer Navigation -->
83+
<div class="border-t border-slate-200 p-6">
84+
<div class="flex justify-between">
85+
<!-- Previous Button -->
86+
@if (!isLastStep()) {
87+
<lfx-button
88+
label="Previous"
89+
icon="fa-light fa-arrow-left"
90+
severity="secondary"
91+
[outlined]="true"
92+
size="small"
93+
[disabled]="isFirstStep()"
94+
(onClick)="previousStep()"
95+
data-testid="committee-manage-previous-btn">
96+
</lfx-button>
97+
} @else {
98+
<div></div>
99+
}
100+
101+
<!-- Next / Submit / Done Buttons -->
102+
<div class="flex gap-2">
103+
@if (!isEditMode()) {
104+
<lfx-button
105+
[label]="isLastStep() ? 'Skip For Now' : 'Cancel'"
106+
severity="secondary"
107+
[outlined]="true"
108+
size="small"
109+
(onClick)="onCancel()"
110+
data-testid="committee-manage-cancel-btn">
111+
</lfx-button>
112+
}
113+
114+
@if (!isLastFormStep() && !isLastStep()) {
115+
<!-- Steps 1-2: Next Button -->
116+
<lfx-button
117+
label="Next"
118+
icon="fa-light fa-arrow-right"
119+
iconPos="right"
120+
size="small"
121+
[disabled]="!canProceed()"
122+
(onClick)="nextStep()"
123+
data-testid="committee-manage-next-btn">
124+
</lfx-button>
125+
} @else if (isLastFormStep() && !isEditMode()) {
126+
<!-- Step 3 Create Mode: Create Committee Button -->
127+
<lfx-button
128+
[label]="'Create ' + committeeLabel"
129+
icon="fa-light fa-check"
130+
iconPos="right"
131+
size="small"
132+
[loading]="submitting()"
133+
[disabled]="!canProceed() || submitting()"
134+
(onClick)="onSubmit()"
135+
data-testid="committee-manage-submit-btn">
136+
</lfx-button>
137+
} @else if (isLastFormStep() && isEditMode()) {
138+
<!-- Step 3 Edit Mode: Next Button -->
139+
<lfx-button label="Next" icon="fa-light fa-arrow-right" iconPos="right" size="small" (onClick)="nextStep()" data-testid="committee-manage-next-btn">
140+
</lfx-button>
141+
} @else if (isLastStep() && !isEditMode()) {
142+
<!-- Step 4 Create Mode: Done Button -->
143+
<lfx-button label="Done" icon="fa-light fa-check" iconPos="right" size="small" (onClick)="onDone()" data-testid="committee-manage-done-btn">
144+
</lfx-button>
145+
} @else {
146+
<!-- Step 4 Edit Mode: Update Committee Button -->
147+
<lfx-button
148+
[label]="'Update ' + committeeLabel"
149+
icon="fa-light fa-check"
150+
iconPos="right"
151+
size="small"
152+
[loading]="submitting()"
153+
[disabled]="submitting()"
154+
(onClick)="onSubmitAll()"
155+
data-testid="committee-manage-update-btn">
156+
</lfx-button>
157+
}
158+
</div>
159+
</div>
160+
</div>
27161
</div>
28162
</div>
163+
164+
<p-confirmDialog></p-confirmDialog>

0 commit comments

Comments
 (0)