Skip to content

Commit

Permalink
Moved saved queries in the separate component
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitriy Borzenko committed Nov 13, 2024
1 parent 4c58aad commit 8a9218a
Show file tree
Hide file tree
Showing 10 changed files with 148 additions and 173 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,76 +13,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Schema:</h2>

<div>
<h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
<cdk-accordion class="example-accordion">
<cdk-accordion-item
*ngFor="let item of savedQueries; let index = index"
#accordionItem="cdkAccordionItem"
class="example-accordion-item"
role="button"
tabindex="0"
[attr.id]="'accordion-header-' + index"
[attr.aria-expanded]="accordionItem.expanded"
[attr.aria-controls]="'accordion-body-' + index"
>
<div class="datatab-activity-item">
<div class="datatab-expanding-row">
<div class="datatab-expanding-row-header" (click)="accordionItem.toggle()">
<div class="datatab-expanding-row-header-content">
<div class="datatab-activity-row-summary">
<div class="datatab-activity-timestamp">{{ item.time }}</div>
<div class="datatab-activity-icon">
<div
class="ace-icon ace-icon-size-small cfc-color-active ace-icon-configuration ng-star-inserted"
>
<mat-icon class="datatab-activity-icon-size">query_stats</mat-icon>
</div>
</div>
<div class="datatab-activity-info-container">
<div
class="datatab-activity-title"
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
title=""
>
<span> {{ item.title }} </span>
</div>
</div>
</div>
</div>
<ng-template [ngIf]="!accordionItem.expanded">
<mat-icon>keyboard_arrow_down</mat-icon>
</ng-template>
<ng-template [ngIf]="accordionItem.expanded">
<mat-icon>keyboard_arrow_up</mat-icon>
</ng-template>
</div>
</div>
</div>

<div
class="example-accordion-item-body pt-3 pb-3"
role="region"
[style.display]="accordionItem.expanded ? '' : 'none'"
[attr.id]="'accordion-body-' + index"
[attr.aria-labelledby]="'accordion-header-' + index"
>
{{ item.title }} <br />
<code style="display: block; white-space: pre-wrap">{{ item.query }}</code>
<div class="d-inline">
<div class="btn-group-parent float-none">
<button
mat-icon-button
data-test-id="runSqlQueryRequestCode"
name="run sql button"
(click)="runSQLRequest({ query: item.query })"
class="sql-run-button rounded-2 btn-group-item btn d-flex justify-content-center align-items-center"
>
<span>Run</span><mat-icon>play_arrow</mat-icon>
</button>
</div>
</div>
</div>
</cdk-accordion-item>
</cdk-accordion>
<app-saved-queries-section></app-saved-queries-section>
</div>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit
import { Location } from "@angular/common";
import { Observable } from "rxjs";
import AppValues from "src/app/common/app.values";
import DataTabValues from "./mock.data";
import { DatasetFlowType, DatasetKind, OffsetInterval } from "../../../api/kamu.graphql.interface";
import { OverviewUpdate } from "src/app/dataset-view/dataset.subscriptions.interface";
import { DatasetRequestBySql } from "../../../interface/dataset.interface";
Expand All @@ -21,7 +20,6 @@ import { NavigationService } from "src/app/services/navigation.service";
@Component({
selector: "app-data",
templateUrl: "./data.component.html",
styleUrls: ["./data.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DataComponent extends BaseComponent implements OnInit {
Expand All @@ -30,7 +28,6 @@ export class DataComponent extends BaseComponent implements OnInit {
@Input() public resultTime: number;
@Output() public runSQLRequestEmit = new EventEmitter<DatasetRequestBySql>();

public savedQueries = DataTabValues.savedQueries;
public sqlRequestCode = `select\n *\nfrom `;

private offsetColumnName = AppValues.DEFAULT_OFFSET_COLUMN_NAME;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<cdk-accordion class="example-accordion">
<cdk-accordion-item
[disabled]="true"
*ngFor="let item of savedQueries; let index = index"
#accordionItem="cdkAccordionItem"
class="example-accordion-item"
role="button"
tabindex="0"
[attr.id]="'accordion-header-' + index"
[attr.aria-expanded]="accordionItem.expanded"
[attr.aria-controls]="'accordion-body-' + index"
>
<div class="datatab-activity-item">
<div class="datatab-expanding-row">
<div class="datatab-expanding-row-header" (click)="accordionItem.toggle()">
<div class="datatab-expanding-row-header-content">
<div class="datatab-activity-row-summary">
<div class="datatab-activity-timestamp">{{ item.time }}</div>
<div class="datatab-activity-icon">
<div
class="ace-icon ace-icon-size-small cfc-color-active ace-icon-configuration ng-star-inserted"
>
<mat-icon class="datatab-activity-icon-size">query_stats</mat-icon>
</div>
</div>
<div class="datatab-activity-info-container">
<div
class="datatab-activity-title"
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
title=""
>
<span> {{ item.title }} </span>
</div>
</div>
</div>
</div>
<ng-template [ngIf]="!accordionItem.expanded">
<mat-icon>keyboard_arrow_down</mat-icon>
</ng-template>
<ng-template [ngIf]="accordionItem.expanded">
<mat-icon>keyboard_arrow_up</mat-icon>
</ng-template>
</div>
</div>
</div>

<div
class="example-accordion-item-body pt-3 pb-3"
role="region"
[style.display]="accordionItem.expanded ? '' : 'none'"
[attr.id]="'accordion-body-' + index"
[attr.aria-labelledby]="'accordion-header-' + index"
>
{{ item.title }} <br />
<code style="display: block; white-space: pre-wrap">{{ item.query }}</code>
<div class="d-inline">
<div class="btn-group-parent float-none">
<button
mat-icon-button
data-test-id="runSqlQueryRequestCode"
name="run sql button"
class="sql-run-button rounded-2 btn-group-item btn d-flex justify-content-center align-items-center"
>
<span>Run</span><mat-icon>play_arrow</mat-icon>
</button>
</div>
</div>
</div>
</cdk-accordion-item>
</cdk-accordion>
Original file line number Diff line number Diff line change
Expand Up @@ -52,46 +52,3 @@
}
}
}

.sql-query-editor-header {
h2 {
width: max-content;
display: inline-block;
}

.btn-group-parent {
float: right;

.btn-group-item span {
font-size: 17px;
font-weight: 600;
}
}
}

.sql-run-button {
color: #1a7f37;
width: min-content;
padding: 5px 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.share-query-button {
color: #1a7f37;
padding: 5px 10px;
font-weight: 700;
background: #f6f8fa;

.button-text {
font-size: 16px;
}
}

.lh-130 {
line-height: 130%;
}

.no-pointer {
cursor: not-allowed;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { SavedQueriesSectionComponent } from "./saved-queries-section.component";

describe("SavedQueriesSectionComponent", () => {
let component: SavedQueriesSectionComponent;
let fixture: ComponentFixture<SavedQueriesSectionComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [SavedQueriesSectionComponent],
});
fixture = TestBed.createComponent(SavedQueriesSectionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it("should create", () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { ChangeDetectionStrategy, Component } from "@angular/core";
import DataTabValues from "../mock.data";

@Component({
selector: "app-saved-queries-section",
templateUrl: "./saved-queries-section.component.html",
styleUrls: ["./saved-queries-section.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SavedQueriesSectionComponent {
public savedQueries = DataTabValues.savedQueries;
}
3 changes: 3 additions & 0 deletions src/app/dataset-view/dataset.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ import { AngularMultiSelectModule } from "angular2-multiselect-dropdown";
import { MatTabsModule } from "@angular/material/tabs";
import { MatChipsModule } from "@angular/material/chips";
import { QueryAndResultSectionsComponent } from "./additional-components/data-component/query-and-result-sections/query-and-result-sections.component";
import { SavedQueriesSectionComponent } from "./additional-components/data-component/saved-queries-section/saved-queries-section.component";

@NgModule({
imports: [
Expand Down Expand Up @@ -169,6 +170,7 @@ import { QueryAndResultSectionsComponent } from "./additional-components/data-co
RequestTimerComponent,
LoadMoreComponent,
QueryAndResultSectionsComponent,
SavedQueriesSectionComponent,
],
declarations: [
DatasetViewHeaderComponent,
Expand Down Expand Up @@ -213,6 +215,7 @@ import { QueryAndResultSectionsComponent } from "./additional-components/data-co
AddDataModalComponent,
FileFromUrlModalComponent,
QueryAndResultSectionsComponent,
SavedQueriesSectionComponent,
],
})
export class DatasetModule {
Expand Down
10 changes: 8 additions & 2 deletions src/app/query/global-query/global-query.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="query-container py-4">
<div class="box p-4 schemes-container">
<div class="d-flex flex-column">
<label for="global-query-search-dataset" class="form-label d-block fw-500"> Search</label>
<h2 class="mb-1">Search:</h2>
<div class="d-flex flex-row position-relative w-100">
<input
type="text"
Expand Down Expand Up @@ -38,7 +38,7 @@
</ng-template>

<div class="search-datasets mt-4">
<label for="global-query-search-dataset" class="form-label d-block fw-500"> Dataset schemes</label>
<h2>Dataset schemes:</h2>
<mat-divider class="px-2 mt-2 mb-4"></mat-divider>

<cdk-accordion
Expand Down Expand Up @@ -100,6 +100,12 @@
<p class="text-center mt-4">No datasets selected</p>
</ng-template>
</div>

<div class="mt-100">
<h2>Saved queries:</h2>
<mat-divider class="px-2 mt-2 mb-4"></mat-divider>
<app-saved-queries-section></app-saved-queries-section>
</div>
</div>
<div class="search-result-container__content">
<app-query-and-result-sections
Expand Down
51 changes: 8 additions & 43 deletions src/app/query/global-query/global-query.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
margin-left: auto;
}

h2 {
margin: 0;
}

.query-container {
display: grid;
align-items: start;
Expand All @@ -15,49 +19,6 @@
min-height: 393px;
}

.sql-query-editor-header {
h2 {
width: max-content;
display: inline-block;
}

.btn-group-parent {
float: right;

.btn-group-item span {
font-size: 17px;
font-weight: 600;
}
}
}

.sql-run-button {
color: #1a7f37;
width: min-content;
padding: 5px 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.share-query-button {
color: #1a7f37;
padding: 5px 10px;
font-weight: 700;
background: #f6f8fa;

.button-text {
font-size: 16px;
}
}

.lh-130 {
line-height: 130%;
}

.no-pointer {
cursor: not-allowed;
}

.search-result-item {
overflow: hidden;
text-overflow: ellipsis;
Expand Down Expand Up @@ -116,3 +77,7 @@
}
}
}

.mt-100 {
margin-top: 100px;
}
Loading

0 comments on commit 8a9218a

Please sign in to comment.