Skip to content

Commit

Permalink
feat(): update mix db
Browse files Browse the repository at this point in the history
  • Loading branch information
develite98 committed Nov 21, 2023
1 parent 8a2aa50 commit 4fda996
Show file tree
Hide file tree
Showing 18 changed files with 251 additions and 54 deletions.
Original file line number Diff line number Diff line change
@@ -1,55 +1,59 @@
<div role="presentation">
<div class="d-flex gap-2 align-items-center w-100">
<div *ngIf="params['dataType']"
class="text-highlight">
<div
*ngIf="params['dataType']"
class="text-highlight text-white"
[style.--bg-color]="dataTypeColors[params['dataType']]"
>
{{ params['dataType'] }}
</div>

<div *ngIf="params['displayName']"
class="header-title">
<div *ngIf="params['displayName']" class="header-title">
{{ params['displayName'] }}
</div>

<ng-container *ngIf="params.columnType === 'value'">
<tui-hosted-dropdown #dropdown
class="ms-auto"
[content]="content"
[tuiDropdownMaxHeight]="500">
<button type="button"
[icon]="arrow"
[pseudoHover]="dropdown.open || null"
[size]="'xs'"
tuiIconButton
appearance="flat"></button>
<tui-hosted-dropdown
#dropdown
class="ms-auto"
[content]="content"
[tuiDropdownMaxHeight]="500"
>
<button
type="button"
[icon]="arrow"
[pseudoHover]="dropdown.open || null"
[size]="'xs'"
tuiIconButton
appearance="flat"
></button>
</tui-hosted-dropdown>

<ng-template #content>
<tui-data-list class="list"
size="l">
<button (click)="pinColumn()"
tuiOption>
<tui-data-list class="list" size="l">
<button (click)="pinColumn()" tuiOption>
<div class="d-flex align-items-center">
<span class="mix-icon">push_pin</span>&nbsp;
{{ isPinned ? 'Unpin Column' : 'Pin Column' }}
</div>
</button>

<button (click)="parentComp.onHideColumn(params['displayName'])"
tuiOption>
<button
(click)="parentComp.onHideColumn(params['displayName'])"
tuiOption
>
<div class="d-flex align-items-center">
<span class="mix-icon">visibility_off</span>&nbsp; Hide Column
</div>
</button>

<button (click)="onSortRequested('asc', $event)"
tuiOption>
<button (click)="onSortRequested('asc', $event)" tuiOption>
<div class="d-flex align-items-center">
<span class="mix-icon">reorder</span>&nbsp; Sort Ascending
</div>
</button>

<button (click)="onSortRequested('desc', $event)"
tuiOption>
<button (click)="onSortRequested('desc', $event)" tuiOption>
<div class="d-flex align-items-center">
<span class="mix-icon">sort</span>&nbsp; Sort Descending
</div>
Expand All @@ -59,22 +63,27 @@
</ng-container>
</div>

<div class="ag-header-cell-label"
role="presentation"
ref="eLabel">
<span class="ag-header-cell-text"
ref="eText"></span>
<span class="ag-header-icon ag-header-label-icon ag-sort-order"
aria-hidden="true"
ref="eSortOrder"></span>
<span class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon"
aria-hidden="true"
ref="eSortAsc"></span>
<span class="ag-header-icon ag-header-label-icon ag-sort-descending-icon"
aria-hidden="true"
ref="eSortDesc"></span>
<span class="ag-header-icon ag-header-label-icon ag-sort-none-icon"
aria-hidden="true"
ref="eSortNone"></span>
<div class="ag-header-cell-label" role="presentation" ref="eLabel">
<span class="ag-header-cell-text" ref="eText"></span>
<span
class="ag-header-icon ag-header-label-icon ag-sort-order"
aria-hidden="true"
ref="eSortOrder"
></span>
<span
class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon"
aria-hidden="true"
ref="eSortAsc"
></span>
<span
class="ag-header-icon ag-header-label-icon ag-sort-descending-icon"
aria-hidden="true"
ref="eSortDesc"
></span>
<span
class="ag-header-icon ag-header-label-icon ag-sort-none-icon"
aria-hidden="true"
ref="eSortNone"
></span>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
Component,
ViewEncapsulation,
} from '@angular/core';
import { DataType } from '@mixcore/lib/model';
import { DataType, DataTypeColors } from '@mixcore/lib/model';
import {
TuiButtonModule,
TuiDataListModule,
Expand Down Expand Up @@ -44,6 +44,7 @@ export class CustomHeaderComponent implements IHeaderAngularComp {

readonly drinks = ['Cola', 'Tea', 'Coffee', 'Slurm'];
readonly arrow = TUI_ARROW;
readonly dataTypeColors = DataTypeColors;

public agInit(params: IHeaderParams & ICustomHeaderParams): void {
this.params = params;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<ng-container *ngIf="store.vm$ | async as vm">
<div
class="database-inline-select"
tpPlacement="bottom-start"
[tp]="dbSelect"
tpVariation="popper"
>
<div class="text-xl text-600">
{{
getSelectedDbName(vm.data, selectedItemId, selectedItemName)
?.displayName
}}
</div>
<span class="mix-icon text-600 text-xxl">arrow_drop_down</span>
</div>

<ng-template #dbSelect let-hide>
@for (item of vm.data; track item) {
<div
class="mix-menu-item d-flex justify-content-between"
(click)="selectDb(item); hide()"
>
<div class="text-500">{{ item.displayName }}</div>
<div class="text-sub text-s">{{ item.columns.length }} cols</div>
</div>
}
</ng-template>
</ng-container>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.database-inline-select {
display: flex;
gap: 2px;
align-items: center;
cursor: pointer;
border-bottom: 1px solid var(--border-color-default);

&:hover {
color: var(--primary-color);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { CommonModule } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
inject,
} from '@angular/core';
import { MixDatabase } from '@mixcore/lib/model';
import { DatabaseStore } from '@mixcore/share/stores';
import { TippyDirective } from '@ngneat/helipopper';
import { tuiPure } from '@taiga-ui/cdk';

@Component({
selector: 'mix-database-inline-select',
standalone: true,
imports: [CommonModule, TippyDirective],
templateUrl: './database-inline-select.component.html',
styleUrl: './database-inline-select.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatabaseInlineSelectComponent {
public store = inject(DatabaseStore);

@Input() public selectedItemId?: number;
@Input() public selectedItemName?: string;
@Output() public selectedItemChange = new EventEmitter<MixDatabase>();

@tuiPure
public getSelectedDbName(
db: MixDatabase[],
selectedItemId?: number,
selectedItemName?: string
) {
return db.find(
(x) => x.id === selectedItemId || x.systemName === selectedItemName
);
}

public selectDb(mixDb: MixDatabase) {
this.selectedItemId = mixDb.id;
this.selectedItemChange.emit(mixDb);
}
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<div class="w-100 h-100 d-flex flex-column align-items-center pt-2">
<div class="w-100 h-100 d-flex flex-column align-items-center pt-2 gap-2">
<mix-button
title="Row height"
[size]="'s'"
[iconBtn]="true"
type="outline"
tpPlacement="bottom-start"
[tp]="sizeOtpTpl"
tpVariation="popper"
>
Expand All @@ -16,4 +18,34 @@
</div>
}
</ng-template>

<mix-button
title="Share your table"
[size]="'s'"
[iconBtn]="true"
type="outline"
commingSoon="Share your database"
>
<span class="mix-icon">share</span>
</mix-button>

<mix-button
title="Database logs"
[size]="'s'"
[iconBtn]="true"
type="outline"
commingSoon="Show database logs"
>
<span class="mix-icon">history</span>
</mix-button>

<mix-button
title="Add new table"
[size]="'s'"
[iconBtn]="true"
(click)="addNewDb.emit()"
type="outline"
>
<span class="mix-icon">add</span>
</mix-button>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,26 @@ import {
EventEmitter,
Output,
} from '@angular/core';
import { ComingSoomDirective } from '@mixcore/share/directives';
import { MixButtonComponent } from '@mixcore/ui/button';
import { TippyDirective } from '@ngneat/helipopper';

@Component({
selector: 'mix-vertical-toolbar',
standalone: true,
imports: [CommonModule, MixButtonComponent, TippyDirective],
imports: [
CommonModule,
MixButtonComponent,
TippyDirective,
ComingSoomDirective,
],
templateUrl: './database-vertical-toolbar.component.html',
styleUrl: './database-vertical-toolbar.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatabaseVerticalToolbarComponent {
@Output() public rowHeightChange = new EventEmitter<number>();
@Output() public addNewDb = new EventEmitter();

public sizeOptions = [
{
Expand All @@ -36,7 +43,7 @@ export class DatabaseVerticalToolbarComponent {
},
{
value: 3,
label: 'Big rpw height',
label: 'Big row height',
},
];
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div class="data-table-page__action-bar">
<mix-vertical-toolbar
(rowHeightChange)="rowHeightChange($event)"
(addNewDb)="onSetupDb(true)"
></mix-vertical-toolbar>
</div>

Expand All @@ -24,7 +25,16 @@
[description]="'QUERY ON'"
[loading]="vm.status === 'Loading' && vm.db === undefined"
[title]="vm.db?.displayName || 'Db Data'"
[titleTpl]="titleTpl"
>
<ng-template #titleTpl
><mix-database-inline-select
[selectedItemId]="vm.db?.id"
[selectedItemName]="dbSysName"
(selectedItemChange)="selectedTableChange($event)"
></mix-database-inline-select
></ng-template>

<div class="toolbar-separator"></div>
<mix-action-collapse
[actionMaps]="actionMaps"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import { ListPageKit } from '../../../shares/kits/list-page-kit.component';
import { DatabaseDataStore } from '../../../stores/database-data.store';
import { CustomActionCellComponent } from './components/custom-action-cell/custom-action-cell.component';
import { CustomHeaderComponent } from './components/custom-header/custom-header.component';
import { DatabaseInlineSelectComponent } from './components/database-inline-select/database-inline-select.component';
import { DatabaseVerticalToolbarComponent } from './components/vertical-toolbar/database-vertical-toolbar.component';
@Component({
selector: 'mix-database-data',
Expand All @@ -75,6 +76,7 @@ import { DatabaseVerticalToolbarComponent } from './components/vertical-toolbar/
ReactiveFormsModule,
DynamicFilterComponent,
DatabaseVerticalToolbarComponent,
DatabaseInlineSelectComponent,
],
templateUrl: './database-data.component.html',
styleUrls: ['./database-data.component.scss'],
Expand Down Expand Up @@ -250,7 +252,15 @@ export class DatabaseDataComponent
});
}

public onSetupDb() {
public onSetupDb(isCreate = false) {
if (isCreate) {
this.router.navigateByUrl(
`${CMS_ROUTES.portal.database.fullPath}/create`
);

return;
}

this.store.vm$
.pipe(take(1))
.subscribe((vm) =>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<div class="sub-toolbar">
<div class="sub-toolbar__title">
<div class="sub-toolbar__description">{{ description }}</div>
<mix-skeleton-loading *ngIf="loading; else titleTpl"
type="inline"></mix-skeleton-loading>
@if(titleTpl) {
<ng-container *ngTemplateOutlet="titleTpl"></ng-container>
} @else {
<mix-skeleton-loading
*ngIf="loading; else titleTpl"
type="inline"
></mix-skeleton-loading>
<ng-template #titleTpl>
<div>{{ title }}</div>
</ng-template>
}
</div>

<div class="sub-toolbar__action">
Expand Down
Loading

1 comment on commit 4fda996

@vercel
Copy link

@vercel vercel bot commented on 4fda996 Nov 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.