From c8c1864e5099221aa9992a96b1d3d07890ee822c Mon Sep 17 00:00:00 2001 From: Sumit-solytics Date: Tue, 5 Mar 2024 17:30:04 +0530 Subject: [PATCH] Parameters drawer added in details Section --- .../icons/pipeline/pipeline-no-code.svg | 12 ++ .../details-dialog.component.html | 57 ++++++++ .../details-dialog.component.scss | 128 ++++++++++++++++++ .../details-dialog.component.ts | 71 ++++++++++ .../edit-pipeline-page.component.html | 3 +- .../edit-pipeline-page.component.scss | 30 +--- .../pipelines/pipelines.module.ts | 18 ++- .../shared/ui-components/styles/icons.scss | 3 + 8 files changed, 294 insertions(+), 28 deletions(-) create mode 100644 src/app/webapp-common/assets/icons/pipeline/pipeline-no-code.svg create mode 100644 src/app/webapp-common/pipelines/details-dialog/details-dialog.component.html create mode 100644 src/app/webapp-common/pipelines/details-dialog/details-dialog.component.scss create mode 100644 src/app/webapp-common/pipelines/details-dialog/details-dialog.component.ts diff --git a/src/app/webapp-common/assets/icons/pipeline/pipeline-no-code.svg b/src/app/webapp-common/assets/icons/pipeline/pipeline-no-code.svg new file mode 100644 index 00000000..f9f66dc6 --- /dev/null +++ b/src/app/webapp-common/assets/icons/pipeline/pipeline-no-code.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.html b/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.html new file mode 100644 index 00000000..87d12148 --- /dev/null +++ b/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.html @@ -0,0 +1,57 @@ +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+

Name:  {{ parameter.name }}

+
Value:  + +
+ +
+
+ +
+ + NO PARAMETER +
+ + +
+ {{ pipelineCode }} +
+ +
+ + NO CODE +
+ +
+ + \ No newline at end of file diff --git a/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.scss b/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.scss new file mode 100644 index 00000000..77d43718 --- /dev/null +++ b/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.scss @@ -0,0 +1,128 @@ +// // :host { +// // display: block; +// // width: 100%; +@import "variables"; +mat-drawer{ + display: grid; +} +.drawer-container { + position: fixed; + bottom: 0; + transition: bottom 0.35s, visibility 0.35s, height ease-in-out 0.5s; + height: 60vh; /* Default height */ + width: calc(100% - 64px); /* Assuming full width */ + right: 0; + overflow: hidden; + z-index: 2; +} + +.drawer-container.maximized { + position: fixed; + bottom: 0; + transition: bottom 0.35s, visibility 0.35s, height ease-in-out 0.5s; + height: 100vh; /* Default height */ + width: calc(100% - 64px); /* Assuming full width */ + right: 0; + overflow: hidden; + z-index: 2; +} +.drawer-container.closing { + height: 0; + transition: bottom 0.35s, visibility 0.35s, ease-in-out 0.5s; /* Apply transition when closing */ +} +.drawer { + width: 100vw; // Make drawer cover the entire viewport width + bottom: 0; // Position drawer at the bottom of the screen +} +.console-button { + display: block; + position: absolute; + left: 24px; + top: 24px; + z-index: 2; +} +.dialog-container { + position: fixed; + bottom: 0; + right: 0; + width: 100%; + height: 40%; /* Adjust as needed */ + max-height: 100%; + background-color: #141722; + transition: bottom 0.35s, visibility 0.35s, height ease-in-out 0.5s; /* Add transition for smooth animation */ + z-index: -1 !important; +} +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid #202432; + background-color: #202432; +} + +.tabs-content { + padding: 10px; + background-color: #141722; + color:#9fabc9; + height: 100%; + width: 100%; +} +.full-width-textarea { + width: 100%; + background-color: #384161; +} +.parameter-data{ + background-color: #202432; + padding: 5px; +} +.parameter-input { + display: flex; + align-items: center; +} +.toggle-button { + border: none; + outline: none; + cursor: pointer; + background-color: #2c3246; + padding: 15px 25px; + transition: background-color 0.3s; + color: white; + margin-right: -3px; +} +.toggle-button:last-child { + margin-right: 0; /* Remove margin for the last button */ +} +.toggle-button:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.toggle-button:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +.toggle-button.active { + background-color: #384161; /* Adjust the background color for active state */ +} + +.no-data-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; +} + +.no-data-icon { + font-size: 6rem; + color: #ccc; +} + +.no-data-text { + margin-top: 15px; + font-size: 1.5rem; + color: #aaa; +} +// /* Add more styles as needed */ +// // } diff --git a/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.ts b/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.ts new file mode 100644 index 00000000..aed926e2 --- /dev/null +++ b/src/app/webapp-common/pipelines/details-dialog/details-dialog.component.ts @@ -0,0 +1,71 @@ +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { MatDrawer } from '@angular/material/sidenav'; +import { Store } from '@ngrx/store'; +import { cloneDeep } from 'lodash'; +import { + updatePipeline, +} from "../pipelines.actions"; +@Component({ + selector: 'sm-details-dialog', + templateUrl: './details-dialog.component.html', + styleUrls: ['./details-dialog.component.scss'] +}) +export class DetailsDialogComponent implements OnInit { + @ViewChild('drawer') drawer: MatDrawer; + @Input() pipelineId: string; + @Input() pipelineData: any; + currentTab: 'parameter' | 'code' = 'parameter'; // Default tab + isMaximized: boolean = false; + isDrawerClosing: boolean = false; + pipelineParameters: string = ''; + pipelineCode: string = ''; + parameterValue!: string; + + constructor(private store: Store) { } + + ngOnInit(): void { + this.pipelineParameters = this.pipelineData?.parameters; + this.pipelineCode = ''; + } + + openDetailsDrawer(): void { + this.drawer.open(); + } + + toggleMaximize(): void { + this.isMaximized = !this.isMaximized; + } + + close(): void { + this.isDrawerClosing = true; + this.drawer.close(); + this.isMaximized = false; + setTimeout(() => { + this.isDrawerClosing = false; + }, 50); + } + + toggleTab(tab: 'parameter' | 'code'): void { + this.currentTab = tab; + } + + onInputChange(newValue: any, parameter: any): void { + // Update the parameter value when the input changes + this.parameterValue = newValue; + } + updateParameterValue(parameter: any): void { + // Perform deep clone to avoid mutating original object + const updatedPipelineData = cloneDeep(this.pipelineData); + + // Find the index of the parameter in the parameters array + const index = updatedPipelineData.parameters.findIndex(p => p.id === parameter.id); + + // Update the parameter value if found + if (index !== -1) { + updatedPipelineData.parameters[index].value = this.parameterValue; + } + // Dispatch action to update pipeline data in the store + this.store.dispatch(updatePipeline({ changes: updatedPipelineData })); + } + +} diff --git a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html index a28f951e..11719b78 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html +++ b/src/app/webapp-common/pipelines/edit-pipeline-page/edit-pipeline-page.component.html @@ -7,7 +7,8 @@ (deleteStep)="stepDelete($event)" [ioOptions]="selectedStepInputOutputOptions" (stepParamsChanged)="selectedStepParamsChanged($event)"/> - + + ({ PipelineSettingDialogComponent, PipelineSettingFormComponent, PipelineStepInfoComponent, + DetailsDialogComponent, ], imports: [ CommonModule, @@ -142,8 +149,10 @@ const getInitState = (userPreferences: UserPreferences) => ({ LabeledFormFieldDirective, SearchTextDirective, UniqueNameValidatorDirective, - - + MatTabsModule, + MatIconModule, + MatDialogModule, + MatButtonToggleModule, MarkdownEditorComponent, SearchComponent, TagListComponent, @@ -171,7 +180,8 @@ const getInitState = (userPreferences: UserPreferences) => ({ FilterPipe, FileSizePipe, RegexPipe, - FilterMonitorMetricPipe + FilterMonitorMetricPipe, + SimpleDatasetVersionPreviewComponent, ], exports: [PipelinesPageComponent, EditPipelinePageComponent], providers: [ diff --git a/src/app/webapp-common/shared/ui-components/styles/icons.scss b/src/app/webapp-common/shared/ui-components/styles/icons.scss index 5652ea16..6737c4f5 100755 --- a/src/app/webapp-common/shared/ui-components/styles/icons.scss +++ b/src/app/webapp-common/shared/ui-components/styles/icons.scss @@ -608,6 +608,9 @@ .i-pipeline-compile { @include icon('#{$assets-icons-path}/pipeline/pipeline-compile.svg'); } +.i-pipeline-no-code { + @include icon('#{$assets-icons-path}/pipeline/pipeline-no-code.svg'); +} .i-pipeline-add-new-step { @include icon('#{$assets-icons-path}/pipeline/pipeline-add-new-step.svg');