Skip to content

Commit

Permalink
Add navigator.
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitriy Borzenko committed Jul 21, 2023
1 parent 3a6d937 commit 22baf18
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 88 deletions.
191 changes: 104 additions & 87 deletions ...onents/metadata-component/components/add-polling-source/add-polling-source.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,110 @@
<div class="mt-4">
<div class="border border-1 mt-4 px-2 py-4 rounded-3">
<form [formGroup]="pollingSourceForm">
<ng-container *ngIf="currentStep === steps.FETCH">
<app-base-step
[sectionStepRadioData]="FETCH_STEP_RADIO_DATA"
[sectionFormData]="FETCH_FORM_DATA"
[defaultKind]="FETCH_DEFAULT_KIND"
[sectionName]="steps.FETCH"
[eventYamlByHash]="eventYamlByHash"
eventHistory
></app-base-step>
<app-stepper-navigation
[prevStep]="null"
[nextStep]="steps.PREPARE"
[validStep]="fetchForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</ng-container>
<ng-container *ngIf="currentStep === steps.PREPARE">
<app-prepare-step
[eventYamlByHash]="eventYamlByHash"
[sectionName]="steps.PREPARE"
></app-prepare-step>
<app-stepper-navigation
[prevStep]="steps.FETCH"
[nextStep]="steps.READ"
[validStep]="prepareForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</ng-container>

<ng-container *ngIf="currentStep === steps.READ">
<app-base-step
[sectionStepRadioData]="READ_STEP_RADIO_DATA"
[sectionFormData]="READ_FORM_DATA"
[defaultKind]="READ_DEFAULT_KIND"
[sectionName]="steps.READ"
[eventYamlByHash]="eventYamlByHash"
></app-base-step>
<app-stepper-navigation
[prevStep]="steps.PREPARE"
[nextStep]="steps.PREPROCESS"
[validStep]="readForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</ng-container>
<ng-container *ngIf="currentStep === steps.PREPROCESS">
<app-preprocess-step
[eventYamlByHash]="eventYamlByHash"
[preprocessValue]="preprocessStepValue"
[showPreprocessStep]="showPreprocessStep"
(showPreprocessStepEmitter)="
onShowPreprcessStep($event)
"
></app-preprocess-step>
<app-stepper-navigation
[prevStep]="steps.READ"
[nextStep]="steps.MERGE"
[validStep]="fetchForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</ng-container>
<ng-container *ngIf="currentStep === steps.MERGE">
<app-base-step
[sectionStepRadioData]="MERGE_STEP_RADIO_DATA"
[sectionFormData]="MERGE_FORM_DATA"
[defaultKind]="MERGE_DEFAULT_KIND"
[sectionName]="steps.MERGE"
[eventYamlByHash]="eventYamlByHash"
>
<div
*ngIf="errorMessage"
class="alert alert-danger mt-2"
role="alert"
>
<p class="text-danger fs-6">
Error:<br />{{ errorMessage }}
</p>
</div></app-base-step
>
<app-stepper-navigation
[prevStep]="steps.PREPROCESS"
[nextStep]="null"
[validStep]="mergeForm.valid"
(changeStepEmitter)="changeStep($event)"
(saveEventEmitter)="onSubmit()"
(editYamlEmitter)="onEditYaml()"
></app-stepper-navigation>
</ng-container>
<mat-stepper [linear]="true" #stepper>
<mat-step [stepControl]="fetchForm">
<ng-template matStepLabel>Fetch</ng-template>
<div class="container-step">
<app-base-step
[sectionStepRadioData]="FETCH_STEP_RADIO_DATA"
[sectionFormData]="FETCH_FORM_DATA"
[defaultKind]="FETCH_DEFAULT_KIND"
[sectionName]="steps.FETCH"
[eventYamlByHash]="eventYamlByHash"
eventHistory
></app-base-step>
<app-stepper-navigation
[prevStep]="null"
[nextStep]="steps.PREPARE"
[validStep]="fetchForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</div>
</mat-step>
<mat-step [stepControl]="prepareForm" [optional]="false">
<ng-template matStepLabel>Prepare</ng-template>
<div class="container-step">
<app-prepare-step
[eventYamlByHash]="eventYamlByHash"
[sectionName]="steps.PREPARE"
></app-prepare-step>
<app-stepper-navigation
[prevStep]="steps.FETCH"
[nextStep]="steps.READ"
[validStep]="prepareForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</div>
</mat-step>
<mat-step [stepControl]="readForm">
<ng-template matStepLabel>Read</ng-template>
<div class="container-step">
<app-base-step
[sectionStepRadioData]="READ_STEP_RADIO_DATA"
[sectionFormData]="READ_FORM_DATA"
[defaultKind]="READ_DEFAULT_KIND"
[sectionName]="steps.READ"
[eventYamlByHash]="eventYamlByHash"
></app-base-step>
<app-stepper-navigation
[prevStep]="steps.PREPARE"
[nextStep]="steps.PREPROCESS"
[validStep]="readForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Preprocess</ng-template>
<div class="container-step">
<app-preprocess-step
[eventYamlByHash]="eventYamlByHash"
[preprocessValue]="preprocessStepValue"
[showPreprocessStep]="showPreprocessStep"
(showPreprocessStepEmitter)="
onShowPreprcessStep($event)
"
></app-preprocess-step>
<app-stepper-navigation
[prevStep]="steps.READ"
[nextStep]="steps.MERGE"
[validStep]="fetchForm.valid"
(changeStepEmitter)="changeStep($event)"
></app-stepper-navigation>
</div>
</mat-step>
<mat-step [stepControl]="mergeForm">
<ng-template matStepLabel>Merge</ng-template>
<div class="container-step">
<app-base-step
[sectionStepRadioData]="MERGE_STEP_RADIO_DATA"
[sectionFormData]="MERGE_FORM_DATA"
[defaultKind]="MERGE_DEFAULT_KIND"
[sectionName]="steps.MERGE"
[eventYamlByHash]="eventYamlByHash"
>
<div
*ngIf="errorMessage"
class="alert alert-danger mt-2"
role="alert"
>
<p class="text-danger fs-6">
Error:<br />{{ errorMessage }}
</p>
</div></app-base-step
>
<app-stepper-navigation
[prevStep]="steps.PREPROCESS"
[nextStep]="null"
[validStep]="mergeForm.valid"
[validAllSteps]="pollingSourceForm.valid"
(changeStepEmitter)="changeStep($event)"
(saveEventEmitter)="onSubmit()"
(editYamlEmitter)="onEditYaml()"
></app-stepper-navigation>
</div>
</mat-step>
</mat-stepper>
</form>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions ...onents/metadata-component/components/add-polling-source/add-polling-source.component.sass
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@

.container-step
margin-top: 40px

.layout
max-width: 1200px
width: 100%
Expand Down
6 changes: 5 additions & 1 deletion ...onents/metadata-component/components/stepper-navigation/stepper-navigation.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<button
*ngIf="prevStep"
type="button"
mat-button
matStepperPrevious
class="btn btn-primary me-4"
(click)="changeStep(prevStep)"
>
Expand All @@ -11,6 +13,8 @@
*ngIf="nextStep"
type="button"
class="btn btn-primary"
mat-button
matStepperNext
[disabled]="!validStep"
data-test-id="next-button"
(click)="changeStep(nextStep)"
Expand All @@ -23,7 +27,7 @@
(click)="saveEvent()"
class="button-save"
data-test-id="save-button"
[disabled]="!validStep"
[disabled]="!validStep || !validAllSteps"
>
Save
</button>
Expand Down
1 change: 1 addition & 0 deletions ...nts/metadata-component/components/stepper-navigation/stepper-navigation.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ describe("StepperNavigationComponent", () => {
component.prevStep = SetPollingSourceSection.READ;
component.validStep = true;
component.nextStep = null;
component.validAllSteps = true;
fixture.detectChanges();
emitClickOnElementByDataTestId(fixture, "save-button");
expect(changeStepEmitterSpy).toHaveBeenCalledWith();
Expand Down
1 change: 1 addition & 0 deletions ...mponents/metadata-component/components/stepper-navigation/stepper-navigation.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export class StepperNavigationComponent {
@Input() public nextStep: MaybeNull<SetPollingSourceSection> = null;
@Input() public prevStep: MaybeNull<SetPollingSourceSection> = null;
@Input() public validStep?: boolean;
@Input() public validAllSteps? = false;
@Output() public changeStepEmitter =
new EventEmitter<SetPollingSourceSection>();
@Output() public saveEventEmitter = new EventEmitter<null>();
Expand Down
2 changes: 2 additions & 0 deletions src/app/dataset-view/dataset.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ import { EngineSectionComponent } from "./additional-components/metadata-compone
import { QueriesSectionComponent } from "./additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component";
import { PageNotFoundComponent } from "../components/page-not-found/page-not-found.component";
import { AddPollingSourceComponent } from "./additional-components/metadata-component/components/add-polling-source/add-polling-source.component";
import { MatStepperModule } from "@angular/material/stepper";
@NgModule({
imports: [
CommonModule,
Expand Down Expand Up @@ -99,6 +100,7 @@ import { AddPollingSourceComponent } from "./additional-components/metadata-comp
OwlNativeDateTimeModule,
OwlMomentDateTimeModule,
MatTreeModule,
MatStepperModule,
],
exports: [
DatasetViewHeaderComponent,
Expand Down
14 changes: 14 additions & 0 deletions src/styles.sass
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@

@import '@angular/material/theming'
@include mat-core()
@import "bootstrap-icons/font/bootstrap-icons.css"
/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap'
@import "assets/styles/var"
@import "@danielmoncada/angular-datetime-picker/assets/style/picker.min.css"

// Use the desired palette
$palette: mat-palette($mat-indigo)
// Create the theme
$theme: mat-light-theme($palette, $palette)

// Include component specific mixin
@include mat-stepper-theme($theme)

// Or wrap inside another selector to scope the styles to only one specific component
app-add-polling-source
@include mat-stepper-theme($theme)

body
font-size: 14px
overflow-x: hidden
Expand Down

0 comments on commit 22baf18

Please sign in to comment.