-
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.
(data-tab): changed Load more functionality
- Loading branch information
Oleksii Aleksandrov
committed
Aug 30, 2023
1 parent
e088bcf
commit 666c2cc
Showing
16 changed files
with
165 additions
and
127 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
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
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
26 changes: 26 additions & 0 deletions
26
src/app/dataset-view/additional-components/data-component/load-more/load-more.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 |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<button mat-button | ||
class="mr-4" | ||
[disabled]="isAllDataLoaded" | ||
[title]="isAllDataLoaded ? 'No more data to load' : 'Load more data'" | ||
(click)="loadMore()"> | ||
Load more data | ||
</button> | ||
|
||
<button mat-button | ||
class="mr-4 btn-toggle" | ||
[class.opened]="isHolderVisible" | ||
(click)="toggleOptions()"> | ||
Options | ||
<mat-icon fontIcon="chevron_right"></mat-icon> | ||
</button> | ||
|
||
<div class="d-flex align-items-center holder" [class.hidden]="!isHolderVisible"> | ||
<p class="mb-0 mr-4">Select number of rows to load:</p> | ||
<mat-button-toggle-group name="query-limits" [(ngModel)]="rowsNumber" class="mr-4"> | ||
<ng-container *ngFor="let option of ROWS_OPTIONS;"> | ||
<mat-button-toggle [checked]="option === rowsNumber" [value]="option">{{ option }}</mat-button-toggle> | ||
</ng-container> | ||
</mat-button-toggle-group> | ||
<p class="mb-0 mr-4">Or enter your number:</p> | ||
<input type="number" placeholder="Enter number of rows" [(ngModel)]="rowsNumber" class="form-control small-width"> | ||
</div> |
31 changes: 31 additions & 0 deletions
31
src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass
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,31 @@ | ||
:host | ||
display: flex | ||
align-items: center | ||
min-height: 46px | ||
|
||
.small-width | ||
width: 75px | ||
|
||
button | ||
border: 1px solid transparent | ||
transition: background-color .3s ease-in-out | ||
&:hover:not([disabled]) | ||
background-color: #C4C4C4 | ||
|
||
.btn-toggle | ||
mat-icon | ||
transform: rotate(00deg) | ||
transition: transform .3s ease-in-out | ||
|
||
&.opened | ||
border: 1px solid #000 | ||
|
||
mat-icon | ||
transform: rotate(-90deg) | ||
|
||
.holder | ||
opacity: 1 | ||
transition: opacity .3s ease-in-out | ||
|
||
&.hidden | ||
opacity: 0 |
32 changes: 32 additions & 0 deletions
32
src/app/dataset-view/additional-components/data-component/load-more/load-more.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 |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { Component, EventEmitter, Input, Output } from "@angular/core"; | ||
import AppValues from "../../../../common/app.values"; | ||
|
||
@Component({ | ||
selector: "app-load-more", | ||
templateUrl: "./load-more.component.html", | ||
styleUrls: ["./load-more.component.sass"], | ||
}) | ||
export class LoadMoreComponent { | ||
public rowsNumber: number = AppValues.SQL_QUERY_LIMIT; | ||
public isHolderVisible = false; | ||
|
||
@Input() public isAllDataLoaded = false; | ||
|
||
@Output() public loadMoreEmit = new EventEmitter<number>(); | ||
|
||
readonly ROWS_OPTIONS: number[] = [ | ||
AppValues.SQL_QUERY_LIMIT / 2, | ||
AppValues.SQL_QUERY_LIMIT, | ||
AppValues.SQL_QUERY_LIMIT * 2, | ||
]; | ||
|
||
public toggleOptions(): void { | ||
this.isHolderVisible = !this.isHolderVisible; | ||
} | ||
|
||
public loadMore(): void { | ||
if (!this.isAllDataLoaded) { | ||
this.loadMoreEmit.emit(this.rowsNumber); | ||
} | ||
} | ||
} |
Oops, something went wrong.