Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sb stepper #1480

Merged
merged 7 commits into from
Jul 25, 2024
Merged

Sb stepper #1480

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5b3a609
stepper demo
shayan-roshan Jun 10, 2024
2d067ef
lint fix
shayan-roshan Jun 10, 2024
bcdd8a4
removed comment
shayan-roshan Jun 10, 2024
1fdc4af
update actions key
shayan-roshan Jun 10, 2024
732ba09
fix formly label and 'X' Icon
shayan-roshan Jul 23, 2024
adf6a84
fixed label value
shayan-roshan Jul 24, 2024
ff7e228
removed double negative
shayan-roshan Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions ...lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<div class="grid-row">
<div class="desktop:grid-col-4 tablet-lg:grid-col-12 mobile-lg:grid-col-12 margin-bottom-3 margin-right-2">
<sds-side-toolbar [responsiveButtonText]="'Select Step'" (responsiveDialog)="onDialogOpen($event)">
<ng-template #toolbarContent>
<div class="sds-card" *ngIf="!!responseDialog">
cwolf10 marked this conversation as resolved.
Show resolved Hide resolved
<div class="sds-card__header sds-card__header--accent-cool grid-row">
<button
id="cancelButton"
class="sds-button sds-button--circular sds-button--white"
(click)="onCancelClicked()"
aria-label="Cancel Select Step"
>
<usa-icon [icon]="'chevron-left'"></usa-icon>
</button>
<div class="margin-x-auto">
<h2 class="sds-card__title margin-top-1 margin-left-neg-2">Select Step</h2>
</div>
</div>
</div>

<div class="sds-card">
<div class="sds-card__body sds-card__body--accent-cool">
<ul class="usa-sidenav usa-sidenav--styled">
<li
*ngFor="let step of stepTemplates; let i = index"
class="usa-sidenav__item"
[ngClass]="{
'usa-current': selectedStep?.id === step.id
}"
>
<ng-container [ngTemplateOutlet]="sidenavItem" [ngTemplateOutletContext]="{ $implicit: step }">
</ng-container>
<ng-container [ngTemplateOutlet]="subPanelTemplate" [ngTemplateOutletContext]="{ $implicit: step }">
</ng-container>
</li>
</ul>
</div>
</div>
</ng-template>
</sds-side-toolbar>
</div>

<div class="grid-col-fill">
<div [ngTemplateOutlet]="selectedStep ? selectedStep.content : null"></div>
</div>
</div>
<hr style="width: 100%;" class="fine" />
cwolf10 marked this conversation as resolved.
Show resolved Hide resolved
<div class="grid-row grid-gap margin-top-4">
<div class="flex-10 flex-justify-start">
<button class="usa-button usa-button--base usa-button--outline usa-button-pill text-ink space-x-1">
<usa-icon size="lg" [icon]="'x'"></usa-icon> Cancel
</button>
</div>
<div class="flex-justify-end display-flex">
<button sdsStepperPrevious class="usa-button bg-primary-lighter usa-button-pill space-x-1">
<usa-icon size="md" [icon]="'chevron-left'"></usa-icon> Previous
</button>
<button *ngIf="showSubmitButton()" class="usa-button bg-primary-lighter radius-pill" (click)="submitClicked()">
Submit
</button>
<button *ngIf="showReviewButton()" sdsStepperNext class="usa-button usa-button-pill space-x-1">
Review<usa-icon size="md" [icon]="'chevron-right'"></usa-icon>
</button>
<button
*ngIf="showNextButton()"
sdsStepperNext
[attr.id]="id + '-nextBtn'"
class="usa-button usa-button-pill space-x-1"
>
Next <usa-icon size="md" [icon]="'chevron-right'"></usa-icon>
</button>
</div>
</div>

<ng-template #subPanelTemplate let-panelItem>
<div *ngFor="let pItem of getDisplayedSteps(panelItem.children); let i = index">
<ul class="usa-sidenav usa-sidenav--styled bg-base-lighter margin-x-0">
<li class="usa-sidenav__item padding-left-3" [ngClass]="{ 'usa-current': selectedStep?.id === pItem.id }">
<ng-container [ngTemplateOutlet]="sidenavItem" [ngTemplateOutletContext]="{ $implicit: pItem }"></ng-container>
</li>
</ul>
</div>
</ng-template>

<ng-template #sidenavItem let-step>
<ng-container [ngSwitch]="step.editable">
<span *ngSwitchCase="false">
<span class="padding-x-2 padding-y-1 display-block text-bold">
{{ step.text }}
</span>
</span>
<a
*ngSwitchDefault
href="javascript:void(0);"
[sdsStepperNav]="step"
(click)="onSideNavClick()"
class="display-flex justify-content-space-between"
[ngClass]="{ 'usa-sidenav__item--disabled': step.disabled || (step.isReview && _isReviewAndSubmitDisabled) }"
>
<span>
{{ step.text }}
</span>
<ng-container [ngTemplateOutlet]="sidenavIcon" [ngTemplateOutletContext]="{ $implicit: step }"></ng-container>
</a>
</ng-container>
</ng-template>

<ng-template #sidenavIcon let-step>
<span>
<ng-container [ngSwitch]="step.valid">
<usa-icon *ngSwitchCase="true" [icon]="'check-circle-fill'" class="text-primary"></usa-icon>
<usa-icon *ngSwitchCase="false" [icon]="'slash-circle-fill'" class="text-error"></usa-icon>
<usa-icon *ngSwitchDefault [icon]="'circle'"></usa-icon>
</ng-container>
</span>
</ng-template>
58 changes: 58 additions & 0 deletions ...c/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Component, EventEmitter, Output } from '@angular/core';
import { SdsDialogRef } from '@gsa-sam/components';
import { SdsStepper } from '@gsa-sam/sam-formly';
import { FormlyForm } from '@ngx-formly/core';

@Component({
selector: `custom-stepper-demo`,
templateUrl: `./custom-stepper.component.html`,
providers: [{ provide: SdsStepper, useExisting: CustomStepperDemo }],
styles: [
'.justify-content-space-between {justify-content: space-between; }',
'.usa-sidenav__item--disabled {cursor: default; hover:none; opacity: 60%; pointer-events: none}',
],
})
export class CustomStepperDemo extends SdsStepper {
@Output()
submittedData = new EventEmitter<FormlyForm>();

responseDialog: SdsDialogRef<any>;

onDialogOpen($event) {
this.responseDialog = $event;
}

onCancelClicked() {
this.responseDialog.close();
this.responseDialog = undefined;
}

onSideNavClick() {
if (!this.responseDialog) {
return;
}
this.responseDialog.close();
this.responseDialog = undefined;
}

showReviewButton() {
const nextStep = this.flatSteps[this.selectedStepIndex + 1];

return nextStep && nextStep.isReview;
}

showSubmitButton() {
const lastStepIndex = this.flatSteps.length - 1;
const isLastStep = this.selectedStepIndex == lastStepIndex;

return isLastStep;
}

showNextButton() {
return !this.showReviewButton() && !this.showSubmitButton();
}

submitClicked() {
this.submittedData.emit(this.model);
}
}
160 changes: 160 additions & 0 deletions ...book/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<button class="usa-button margin-bottom-3" (click)="toggleLinearMode()">
Toggle Linear Mode
</button>

<custom-stepper-demo
#stepper
[queryParamKey]="'sdsAdvancedStepper'"
[model]="model"
[stepValidityMap]="stepValidityMap"
(stepChange)="onStepChange($event)"
[linear]="linear"
[validateStepsOnInit]="validateStepsOnInit"
(saveData)="onSaveData($event)"
(submittedData)="handleSubmit($event)"
>
<sds-step
id="welcome"
text="Welcome"
[stepTemplate]="gatherInformation"
[stepValidationFn]="stepMap.welcome.validationFn"
>
</sds-step>

<sds-step id="entityDetails" text="Entity Details" [editable]="false">
<sds-step id="permission" text="permission" [fieldConfig]="stepMap.permission.fieldConfig">
<h1 sdsStepHeader class="margin-top-0">
permission
cwolf10 marked this conversation as resolved.
Show resolved Hide resolved
<hr />
</h1>
</sds-step>

<sds-step
id="registrationPurpose"
text="Purpose of Registration"
[fieldConfig]="stepMap.registrationPurpose.fieldConfig"
>
<h1 sdsStepHeader class="margin-top-0">
Purpose of Registration
<hr />
</h1>
</sds-step>

<sds-step id="entityInformation" text="Entity Information" [fieldConfig]="stepMap.enitityInformation.fieldConfig">
<h1 sdsStepHeader class="margin-top-0">
Enter Entity Information
<hr />
</h1>
</sds-step>

<sds-step id="reportDetails" text="Report Details" [fieldConfig]="stepMap.reportDetails.fieldConfig">
<h1 sdsStepHeader class="margin-top-0">
Report Details
<hr />
</h1>
</sds-step>
</sds-step>

<sds-step id="taxPayerInfoForm" text="Taxpayer Details" [fieldConfig]="stepMap.taxpayerInformation.fieldConfig">
<h1 sdsStepHeader class="margin-top-0">
Enter Taxpayer Details
<hr />
</h1>
</sds-step>

<sds-step
id="addSubawardee"
text="Add Subawardee"
[stepTemplate]="subawardeeStep"
[stepValidationFn]="stepMap.subawardee.validationFn"
>
</sds-step>

<sds-step
id="review"
text="Review and Submit"
[isReview]="true"
[stepTemplate]="reviewTemplate"
[stepValidationFn]="stepMap.review.validationFn"
>
</sds-step>
</custom-stepper-demo>

<!-- Custom Templates -->
<ng-template #gatherInformation>
<h1 class="margin-top-0">
Gather Your Information
</h1>
<div class="sds-card">
<div class="sds-card__header">
<h2>
U.S. REGISTRANTS:
</h2>
</div>
<div class="sds-card__body">
<ul class="usa-list usa-list--unstyled">
<li class="margin-bottom-4">
<h3>Entity Details</h3>
<ul class="usa-list">
<li>Purpose of Registration</li>
<li>Legal Business Name</li>
<li>Physical Address</li>
</ul>
</li>
<li class="margin-bottom-4">
<h3>Taxpayer Information</h3>
<ul class="usa-list">
<li>Taxpayer Identification Number (TIN)</li>
<li>Taxpayer Name</li>
</ul>
<span class="display-block text-small">
Review your tax documents from the IRS (such as a 1099 or w2 form) to find your Taxpayer information.
</span>
</li>
<li class="margin-bottom-4">
<h3>Banking Information</h3>
<ul class="usa-list">
<li>Routing Number</li>
<li>Account Number</li>
</ul>
<span class="display-block text-small">
Account type (checking or savings) to set up Electronic Funds Transfer (ETF)
</span>
</li>
</ul>
</div>
</div>
</ng-template>

<ng-template #subawardeeStep>
<ng-container *ngIf="!showLoading; else loading">
<h1 class="margin-top-0">
Subawardee Data
<hr />
</h1>
<subawardee-demo (subawardeeUpdate)="updateSubawardee($event)" [subawardees]="model.subawardee"></subawardee-demo>
</ng-container>
<ng-template #loading>
<div class="grid-container padding-left-0">
<div class="sds-load grid-row">
<div class="grid-col-5 sds-load__title"></div>
</div>
<div class="sds-load margin-top-1">
<div class="tablet:grid-col-fill sds-load__element"></div>
</div>
<div class="sds-load margin-top-1">
<div class="grid-col-8 height-4 sds-load__content"></div>
</div>
</div>
</ng-template>
</ng-template>

<ng-template #reviewTemplate>
<h1 class="margin-top-0">
Review and Submit
<hr />
</h1>

<formly-form [fields]="[stepMap.review.fieldConfig]" [model]="model"></formly-form>
<subawardee-demo [displayInput]="false" [subawardees]="model.subawardee"></subawardee-demo>
</ng-template>
Loading