-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Dmitriy Borzenko
committed
Jul 19, 2023
1 parent
20071a4
commit b524c9e
Showing
8 changed files
with
258 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 102 additions & 1 deletion
103
...ta-component/components/add-polling-source/steps/prepare-step/prepare-step.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,102 @@ | ||
| <p>prepare-step works!</p> | ||
| <h2 class="text-center">Prepare</h2> | ||
| <div class="d-flex justify-content-center flex-column align-items-center mt-4"> | ||
| <p class="text-center mt-2"> | ||
| Defines how raw data is prepared before reading. You can add | ||
| <a class="prepare-item" (click)="addPipe()">Pipe</a> and | ||
| <a class="prepare-item" (click)="addDecompress()"> Decompress</a> steps. | ||
| </p> | ||
| </div> | ||
| <div [formArrayName]="sectionName"> | ||
| <div *ngFor="let item of sectionForm.controls; index as i"> | ||
| <ng-container *ngIf="item.value.kind === 'pipe'" [formGroupName]="i"> | ||
| <div | ||
| class="p-4 border rounded-3 m-4 w-50 mx-auto position-relative" | ||
| > | ||
| <h3 class="text-center">Pipe</h3> | ||
| <div> | ||
| <label class="form-label"> Command </label> | ||
| </div> | ||
| <input class="form-control" formControlName="command" /> | ||
| <div class="buttons-section d-flex flex-row"> | ||
| <button | ||
| class="no-button" | ||
| title="Move down" | ||
| attr.data-test-id="move-down-query-{{ i }}" | ||
| (click)="swap(i, 1)" | ||
| [disabled]="isLastItem(i)" | ||
| > | ||
| <mat-icon class="fs-4 hover">expand_more</mat-icon> | ||
| </button> | ||
| <button | ||
| class="no-button" | ||
| title="Move up" | ||
| attr.data-test-id="move-up-query-{{ i }}" | ||
| (click)="swap(i, -1)" | ||
| [disabled]="isFirstItem(i)" | ||
| > | ||
| <mat-icon class="fs-4 mx-2 hover">expand_less</mat-icon> | ||
| </button> | ||
| <button | ||
| class="no-button" | ||
| title="Delete query" | ||
| attr.data-test-id="remove-query-{{ i }}" | ||
| (click)="delete(i)" | ||
| > | ||
| <mat-icon class="fs-4 hover">delete</mat-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </ng-container> | ||
| <ng-container | ||
| *ngIf="item.value.kind === 'decompress'" | ||
| [formGroupName]="i" | ||
| > | ||
| <div | ||
| class="p-4 border rounded-3 m-4 w-50 mx-auto position-relative" | ||
| > | ||
| <h3 class="text-center">Decompress</h3> | ||
| <div class="mb-3"> | ||
| <label class="form-label" | ||
| >Format <span class="text-danger">*</span></label | ||
| > | ||
| <select class="form-select" formControlName="format"> | ||
| <option value="zip">ZIP</option> | ||
| <option value="gzip">GZIP</option> | ||
| </select> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label class="form-label">Path</label> | ||
| <input class="form-control" formControlName="subPath" /> | ||
| </div> | ||
| <div class="buttons-section d-flex flex-row"> | ||
| <button | ||
| class="no-button" | ||
| title="Move down" | ||
| attr.data-test-id="move-down-query-{{ i }}" | ||
| (click)="swap(i, 1)" | ||
| [disabled]="isLastItem(i)" | ||
| > | ||
| <mat-icon class="fs-4 hover">expand_more</mat-icon> | ||
| </button> | ||
| <button | ||
| class="no-button" | ||
| title="Move up" | ||
| attr.data-test-id="move-up-query-{{ i }}" | ||
| (click)="swap(i, -1)" | ||
| [disabled]="isFirstItem(i)" | ||
| > | ||
| <mat-icon class="fs-4 mx-2 hover">expand_less</mat-icon> | ||
| </button> | ||
| <button | ||
| class="no-button" | ||
| title="Delete query" | ||
| attr.data-test-id="remove-query-{{ i }}" | ||
| (click)="delete(i)" | ||
| > | ||
| <mat-icon class="fs-4 hover">delete</mat-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .prepare-item | ||
| color: #0d6efd | ||
| text-decoration: none | ||
|
|
||
| .buttons-section | ||
| position: absolute | ||
| top: 20px | ||
| right: 30px |
112 changes: 110 additions & 2 deletions
112
...data-component/components/add-polling-source/steps/prepare-step/prepare-step.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,117 @@ | ||
| import { ChangeDetectionStrategy, Component } from "@angular/core"; | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| Component, | ||
| Input, | ||
| OnInit, | ||
| } from "@angular/core"; | ||
| import { | ||
| ControlContainer, | ||
| FormArray, | ||
| FormBuilder, | ||
| FormGroup, | ||
| FormGroupDirective, | ||
| } from "@angular/forms"; | ||
| import { MaybeNull } from "src/app/common/app.types"; | ||
| import { BaseComponent } from "src/app/common/base.component"; | ||
| import { SetPollingSourceSection } from "src/app/shared/shared.types"; | ||
| import { EditFormType, PrepareKind } from "../../add-polling-source-form.types"; | ||
| import { EditPollingSourceService } from "../../edit-polling-source.service"; | ||
|
|
||
| @Component({ | ||
| selector: "app-prepare-step", | ||
| templateUrl: "./prepare-step.component.html", | ||
| styleUrls: ["./prepare-step.component.sass"], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| viewProviders: [ | ||
| { provide: ControlContainer, useExisting: FormGroupDirective }, | ||
| ], | ||
| }) | ||
| export class PrepareStepComponent {} | ||
| export class PrepareStepComponent extends BaseComponent implements OnInit { | ||
| @Input() public eventYamlByHash: MaybeNull<string> = null; | ||
| @Input() public sectionName: SetPollingSourceSection; | ||
| public parentForm: FormGroup; | ||
| public setPollingSourceEvent: MaybeNull<EditFormType> = null; | ||
|
|
||
| constructor( | ||
| private rootFormGroupDirective: FormGroupDirective, | ||
| private fb: FormBuilder, | ||
| private editService: EditPollingSourceService, | ||
| ) { | ||
| super(); | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.parentForm = this.rootFormGroupDirective.form; | ||
| if (this.eventYamlByHash) { | ||
| this.setPollingSourceEvent = this.editService.parseEventFromYaml( | ||
| this.eventYamlByHash, | ||
| ); | ||
| this.initExistingPrepareStep(this.setPollingSourceEvent); | ||
| } | ||
| } | ||
|
|
||
| private initExistingPrepareStep(event: EditFormType): void { | ||
| let group: FormGroup; | ||
| if (event.prepare && this.sectionForm.length === 0) { | ||
| event.prepare.forEach((item) => { | ||
| if ( | ||
| item.kind === PrepareKind.PIPE && | ||
| Array.isArray(item.command) | ||
| ) { | ||
| group = this.fb.group({ | ||
| kind: this.fb.control(PrepareKind.PIPE), | ||
| command: this.fb.control(item.command.join(" ")), | ||
| }); | ||
| } else if (item.kind === PrepareKind.DECOMPRESS) { | ||
| group = this.fb.group({ | ||
| kind: this.fb.control(PrepareKind.DECOMPRESS), | ||
| format: this.fb.control(item.format), | ||
| subPath: this.fb.control(item.subPath), | ||
| }); | ||
| } | ||
| this.sectionForm.push(group); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| public get sectionForm(): FormArray { | ||
| return this.parentForm.get(this.sectionName) as FormArray; | ||
| } | ||
|
|
||
| public addPipe(): void { | ||
| this.sectionForm.push( | ||
| this.fb.group({ | ||
| kind: this.fb.control(PrepareKind.PIPE), | ||
| command: this.fb.control(""), | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| public addDecompress(): void { | ||
| this.sectionForm.push( | ||
| this.fb.group({ | ||
| kind: this.fb.control(PrepareKind.DECOMPRESS), | ||
| format: this.fb.control(""), | ||
| subPath: this.fb.control(""), | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| public delete(index: number): void { | ||
| this.sectionForm.removeAt(index); | ||
| } | ||
|
|
||
| public swap(index: number, direction: number): void { | ||
| const current = this.sectionForm.at(index); | ||
| this.sectionForm.removeAt(index); | ||
| this.sectionForm.insert(index + direction, current); | ||
| } | ||
|
|
||
| public isLastItem(index: number): boolean { | ||
| return index === this.sectionForm.length - 1; | ||
| } | ||
|
|
||
| public isFirstItem(index: number): boolean { | ||
| return index === 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| input | ||
| text-overflow: ellipsis |