From 2a9fe732aad1f0a6b0a4d1dc46a1d83975de9cfe Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 24 Mar 2021 10:26:28 +0300 Subject: [PATCH 1/5] feat(table-actions): add table actions component --- .../assets/elonkit/es-table-actions/close.svg | 3 + projects/elonkit/src/public-api.ts | 1 + projects/elonkit/src/theming/theming.scss | 2 + .../elonkit/src/ui/icons/icons.service.ts | 3 + .../table-actions-story-basic/index.ts | 3 + .../table-actions-story-basic.component.html | 41 ++++++++++ .../table-actions-story-basic.component.scss | 16 ++++ .../table-actions-story-basic.component.ts | 36 +++++++++ .../table-actions-story-basic.module.ts | 14 ++++ .../table-actions-story-basic.source.ts | 34 ++++++++ .../__stories__/table-actions.stories.mdx | 78 +++++++++++++++++++ .../elonkit/src/ui/table-actions/index.ts | 1 + .../src/ui/table-actions/public-api.ts | 2 + .../table-actions.component.html | 15 ++++ .../table-actions.component.scss | 32 ++++++++ .../table-actions/table-actions.component.ts | 59 ++++++++++++++ .../ui/table-actions/table-actions.module.ts | 14 ++++ .../ui/table-actions/table-actions.theme.scss | 16 ++++ .../ui/table-actions/table-actions.types.ts | 3 + 19 files changed, 373 insertions(+) create mode 100644 projects/elonkit/src/assets/elonkit/es-table-actions/close.svg create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/index.ts create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.scss create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.module.ts create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts create mode 100644 projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx create mode 100644 projects/elonkit/src/ui/table-actions/index.ts create mode 100644 projects/elonkit/src/ui/table-actions/public-api.ts create mode 100644 projects/elonkit/src/ui/table-actions/table-actions.component.html create mode 100644 projects/elonkit/src/ui/table-actions/table-actions.component.scss create mode 100644 projects/elonkit/src/ui/table-actions/table-actions.component.ts create mode 100644 projects/elonkit/src/ui/table-actions/table-actions.module.ts create mode 100644 projects/elonkit/src/ui/table-actions/table-actions.theme.scss create mode 100644 projects/elonkit/src/ui/table-actions/table-actions.types.ts diff --git a/projects/elonkit/src/assets/elonkit/es-table-actions/close.svg b/projects/elonkit/src/assets/elonkit/es-table-actions/close.svg new file mode 100644 index 00000000..21193df5 --- /dev/null +++ b/projects/elonkit/src/assets/elonkit/es-table-actions/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/projects/elonkit/src/public-api.ts b/projects/elonkit/src/public-api.ts index 6a001935..ddd120f4 100644 --- a/projects/elonkit/src/public-api.ts +++ b/projects/elonkit/src/public-api.ts @@ -11,6 +11,7 @@ export * from './ui/inline-form-field'; export * from './ui/paginator'; export * from './ui/timepicker'; export * from './ui/tooltip'; +export * from './ui/table-actions'; export * from './ui/icons'; export * from './ui/locale'; diff --git a/projects/elonkit/src/theming/theming.scss b/projects/elonkit/src/theming/theming.scss index 230d0de4..23f8119c 100644 --- a/projects/elonkit/src/theming/theming.scss +++ b/projects/elonkit/src/theming/theming.scss @@ -9,6 +9,7 @@ @import '../ui/paginator/paginator.component.theme'; @import '../ui/surface/surface.component.theme'; @import '../ui/tooltip/tooltip.component.theme'; +@import '../ui/table-actions/table-actions.theme'; @function es-make-theme($es-theme) { $result: $es-theme; @@ -45,4 +46,5 @@ @include es-paginator-theme($theme, $es-theme); @include es-surface-theme($theme, $es-theme); @include es-tooltip-theme($theme, $es-theme); + @include es-table-actions-theme($theme, $es-theme); } diff --git a/projects/elonkit/src/ui/icons/icons.service.ts b/projects/elonkit/src/ui/icons/icons.service.ts index d51c54bd..d6cfbd85 100644 --- a/projects/elonkit/src/ui/icons/icons.service.ts +++ b/projects/elonkit/src/ui/icons/icons.service.ts @@ -29,6 +29,9 @@ export const ES_SVG_ICONS = { 'play', 'speed', 'un-mute' + ] as const, + 'es-table-actions': [ + 'close', ] as const }; diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/index.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/index.ts new file mode 100644 index 00000000..50edd9f6 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/index.ts @@ -0,0 +1,3 @@ +export { TABLE_ACTIONS_SOURCE } from './table-actions-story-basic.source'; +export { TableActionsStoryBasicComponent } from './table-actions-story-basic.component'; +export { TableActionsStoryBasicModule } from './table-actions-story-basic.module'; diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html new file mode 100644 index 00000000..8485d116 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html @@ -0,0 +1,41 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+
+ + +
+ +
+ diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.scss b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.scss new file mode 100644 index 00000000..6d671976 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.scss @@ -0,0 +1,16 @@ +.table-actions { + padding: 30px; + width: 80%; + + .mat-elevation-z8 { + box-shadow: none; + } + + &__story-table { + width: 100%; + } + + &__button { + opacity: 0.6; + } +} diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts new file mode 100644 index 00000000..64cd3956 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts @@ -0,0 +1,36 @@ +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, + { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, + { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, + { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, + { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, + { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, + { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, + { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, + { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, + { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' } +]; + +@Component({ + selector: 'es-table-actions-basic', + templateUrl: './table-actions-story-basic.component.html', + styleUrls: ['./table-actions-story-basic.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class TableActionsStoryBasicComponent { + public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + public dataSource = ELEMENT_DATA; + public total = 10; + + public onAction():void {} +} diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.module.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.module.ts new file mode 100644 index 00000000..388c8681 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatTableModule } from '@angular/material/table'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { TableActionsStoryBasicComponent } from './table-actions-story-basic.component'; +import { ESTableActionsModule } from '../../'; + +@NgModule({ + declarations: [TableActionsStoryBasicComponent], + imports: [CommonModule, ESTableActionsModule, MatTableModule, MatIconModule, MatButtonModule], + exports: [TableActionsStoryBasicComponent] +}) +export class TableActionsStoryBasicModule {} diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts new file mode 100644 index 00000000..43da3b66 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts @@ -0,0 +1,34 @@ +export const TABLE_ACTIONS_SOURCE = { + html: ` + + + + No. + {{element.position}} + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + + > + ` +}; diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx b/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx new file mode 100644 index 00000000..b701f38f --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx @@ -0,0 +1,78 @@ +import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Canvas } from '~storybook/components'; + +import { action } from '@storybook/addon-actions'; +import { CoreModule } from '~storybook/core.module'; +import { ESTableActionsComponent } from '..'; + +import { ES_TABLE_ACTIONS_DEFAULT_OPTIONS } from ''; + +import { + TableActionsStoryBasicComponent, + TableActionsStoryBasicModule, + TABLE_ACTIONS_SOURCE +} from './table-actions-story-basic'; + + + +# Table actions + +Table actions + +## Demos + + + + {((args) => ({ + component: TableActionsStoryBasicComponent, + moduleMetadata: { + imports: [TableActionsStoryBasicModule, CoreModule] + }, + props: { + ...args, + onAction: action('onAction') + } + })).bind({})} + + + +## API + + + +## Interfaces + +```ts +export interface ESTableActionsDefaultOptions { + total?: number; +} +``` + +## Constants + +Injection token that can be used to configure the default options for all components within an app. + +```ts +import { ES_TABLE_ACTIONS_DEFAULT_OPTIONS } from '@elonsoft/elonkit/ui/table-actions'; + +@NgModule({ + providers: [ + { + provide: ES_TABLE_ACTIONS_DEFAULT_OPTIONS, + useValue: { + total: 10, + } + } + ] +}) +``` diff --git a/projects/elonkit/src/ui/table-actions/index.ts b/projects/elonkit/src/ui/table-actions/index.ts new file mode 100644 index 00000000..7e1a213e --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/projects/elonkit/src/ui/table-actions/public-api.ts b/projects/elonkit/src/ui/table-actions/public-api.ts new file mode 100644 index 00000000..15f02407 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/public-api.ts @@ -0,0 +1,2 @@ +export * from './table-actions.module'; +export * from './table-actions.component'; diff --git a/projects/elonkit/src/ui/table-actions/table-actions.component.html b/projects/elonkit/src/ui/table-actions/table-actions.component.html new file mode 100644 index 00000000..352bc69c --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/table-actions.component.html @@ -0,0 +1,15 @@ +
+ +
+ + Выбрано {{total}} + +
+ +
+ +
+
+
diff --git a/projects/elonkit/src/ui/table-actions/table-actions.component.scss b/projects/elonkit/src/ui/table-actions/table-actions.component.scss new file mode 100644 index 00000000..76dabfd0 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/table-actions.component.scss @@ -0,0 +1,32 @@ +.es-table-actions { + box-sizing: border-box; + + &__content { + align-items: center; + box-sizing: border-box; + display: flex; + justify-content: space-between; + padding: 8px 16px; + width: 100%; + + span { + font-size: 16px; + } + } + + &__total { + padding-left: 8px; + } + + &__actions { + align-items: center; + display: flex; + } + + &__separator { + height: 40px; + margin-left: 8px; + margin-right: 8px; + width: 1px; + } +} diff --git a/projects/elonkit/src/ui/table-actions/table-actions.component.ts b/projects/elonkit/src/ui/table-actions/table-actions.component.ts new file mode 100644 index 00000000..6459b137 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/table-actions.component.ts @@ -0,0 +1,59 @@ +import { + Component, + ChangeDetectionStrategy, + ChangeDetectorRef, + ViewEncapsulation, + Input, + InjectionToken, + Output, + Optional, + Inject, + EventEmitter +} from '@angular/core'; + +import { ESTableActionsDefaultOptions } from './table-actions.types'; + +export const ES_TABLE_ACTIONS_DEFAULT_OPTIONS = new InjectionToken( + 'ES_TABLE_ACTIONS_DEFAULT_OPTIONS' +); + +@Component({ + selector: 'es-table-actions', + templateUrl: './table-actions.component.html', + styleUrls: ['./table-actions.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class ESTableActionsComponent { + + private _total; + + /** + * Total number of selected rows + */ + @Input() + public get total(): ESTableActionsDefaultOptions { + return this._total; + } + public set total(value: ESTableActionsDefaultOptions) { + this._total = value || this.defaultOptions?.total || null; + } + + /** + * Event emitted when user clicks close button. + */ + @Output() public closed = new EventEmitter(); + + /** + * Emit closed button click + */ + public onCloseClick(): void { + this.closed.emit(); + } + + constructor( + @Optional() + @Inject(ES_TABLE_ACTIONS_DEFAULT_OPTIONS) + private defaultOptions: ESTableActionsDefaultOptions, + ) {} +} diff --git a/projects/elonkit/src/ui/table-actions/table-actions.module.ts b/projects/elonkit/src/ui/table-actions/table-actions.module.ts new file mode 100644 index 00000000..ffcd54af --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/table-actions.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { ESTableActionsComponent } from './table-actions.component'; +import { HttpClientModule } from '@angular/common/http'; + +@NgModule({ + imports: [CommonModule, MatButtonModule, MatIconModule, HttpClientModule], + exports: [ESTableActionsComponent], + declarations: [ESTableActionsComponent] +}) +export class ESTableActionsModule {} diff --git a/projects/elonkit/src/ui/table-actions/table-actions.theme.scss b/projects/elonkit/src/ui/table-actions/table-actions.theme.scss new file mode 100644 index 00000000..6f0abd56 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/table-actions.theme.scss @@ -0,0 +1,16 @@ +@mixin es-table-actions-theme($theme, $elonkit-theme) { + $accent: map-get($theme, accent); + $mono-a: map-get($elonkit-theme, mono-a); + + .es-table-actions { + background-color: mat-color($accent, A100); + + &__total { + color: mat-color($mono-a, 500); + } + + &__separator { + background-color: mat-color($mono-a, A100); + } + } +} diff --git a/projects/elonkit/src/ui/table-actions/table-actions.types.ts b/projects/elonkit/src/ui/table-actions/table-actions.types.ts new file mode 100644 index 00000000..d09ffe66 --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/table-actions.types.ts @@ -0,0 +1,3 @@ +export interface ESTableActionsDefaultOptions { + total?: number; +} From 31b6df0f98b1039c18d9d2dc7d4ecf1bd4db8e29 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 24 Mar 2021 15:33:35 +0300 Subject: [PATCH 2/5] fix(table-actions): fix tests and docs --- projects/elonkit/src/ui/locale/locales/en.ts | 3 ++ projects/elonkit/src/ui/locale/locales/ru.ts | 3 ++ .../__specs__/table-actions.spec.ts | 31 ++++++++++++++ .../table-actions-story-basic.component.ts | 3 +- .../table-actions-story-basic.source.ts | 38 +++++++++++++++++ .../__stories__/table-actions.stories.mdx | 32 +-------------- .../table-actions.component.html | 2 +- .../table-actions/table-actions.component.ts | 41 +++++++++++-------- .../ui/table-actions/table-actions.types.ts | 3 -- 9 files changed, 103 insertions(+), 53 deletions(-) create mode 100644 projects/elonkit/src/ui/table-actions/__specs__/table-actions.spec.ts delete mode 100644 projects/elonkit/src/ui/table-actions/table-actions.types.ts diff --git a/projects/elonkit/src/ui/locale/locales/en.ts b/projects/elonkit/src/ui/locale/locales/en.ts index 6828736b..92e12f82 100644 --- a/projects/elonkit/src/ui/locale/locales/en.ts +++ b/projects/elonkit/src/ui/locale/locales/en.ts @@ -38,5 +38,8 @@ export const en = { avatar: { labelAvatar: 'Avatar', labelStatus: 'Status' + }, + tableActions: { + title: 'Selected' } }; diff --git a/projects/elonkit/src/ui/locale/locales/ru.ts b/projects/elonkit/src/ui/locale/locales/ru.ts index d6613ed8..f4c8faa5 100644 --- a/projects/elonkit/src/ui/locale/locales/ru.ts +++ b/projects/elonkit/src/ui/locale/locales/ru.ts @@ -38,5 +38,8 @@ export const ru = { avatar: { labelAvatar: 'Аватар', labelStatus: 'Статус' + }, + tableActions: { + title: 'Выбрано' } }; diff --git a/projects/elonkit/src/ui/table-actions/__specs__/table-actions.spec.ts b/projects/elonkit/src/ui/table-actions/__specs__/table-actions.spec.ts new file mode 100644 index 00000000..8dabe58b --- /dev/null +++ b/projects/elonkit/src/ui/table-actions/__specs__/table-actions.spec.ts @@ -0,0 +1,31 @@ +import { render } from '@testing-library/angular'; +import { ESLocaleService, en, ru } from '../../locale'; +import { ESTableActionsComponent, ESTableActionsModule } from '../'; + +describe('Table Actions', () => { + it('Should change locale', async () => { + const localeService = new ESLocaleService(); + localeService.register('ru', ru); + localeService.use('ru'); + + const component = await render(ESTableActionsComponent, { + imports: [ESTableActionsModule], + providers: [{ provide: ESLocaleService, useValue: localeService }], + excludeComponentDeclaration: true + }); + + expect(component.getByText(ru.tableActions.title)).toBeInTheDocument(); + }); + + it('Should accept total input', async () => { + const component = await render(ESTableActionsComponent, { + imports: [ESTableActionsModule], + componentProperties: { + total: 15 + }, + excludeComponentDeclaration: true + }); + + expect(component.getAllByText('Selected 15')).not.toBeNull(); + }); +}); diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts index 64cd3956..d18f20ab 100644 --- a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts @@ -26,11 +26,10 @@ const ELEMENT_DATA: PeriodicElement[] = [ styleUrls: ['./table-actions-story-basic.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) - export class TableActionsStoryBasicComponent { public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; public dataSource = ELEMENT_DATA; public total = 10; - public onAction():void {} + public onAction(): void {} } diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts index 43da3b66..501c0413 100644 --- a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts @@ -1,4 +1,42 @@ export const TABLE_ACTIONS_SOURCE = { + ts: ` + import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; + + export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; + } + + const ELEMENT_DATA: PeriodicElement[] = [ + { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, + { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, + { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, + { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, + { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, + { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, + { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, + { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, + { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, + { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' } + ]; + + @Component({ + selector: 'es-table-actions-basic', + templateUrl: './table-actions-story-basic.component.html', + styleUrls: ['./table-actions-story-basic.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush + }) + + export class TableActionsStoryBasicComponent { + public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + public dataSource = ELEMENT_DATA; + public total = 10; + + public onAction():void {} + } + `, html: ` diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx b/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx index b701f38f..8e6ce983 100644 --- a/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx @@ -5,8 +5,6 @@ import { action } from '@storybook/addon-actions'; import { CoreModule } from '~storybook/core.module'; import { ESTableActionsComponent } from '..'; -import { ES_TABLE_ACTIONS_DEFAULT_OPTIONS } from ''; - import { TableActionsStoryBasicComponent, TableActionsStoryBasicModule, @@ -27,7 +25,8 @@ import { # Table actions -Table actions +Table actions component. Show tables selected elements and provide actions on them. +All actions buttons, besides close button, could be passing via ng-content. ## Demos @@ -49,30 +48,3 @@ Table actions ## API - -## Interfaces - -```ts -export interface ESTableActionsDefaultOptions { - total?: number; -} -``` - -## Constants - -Injection token that can be used to configure the default options for all components within an app. - -```ts -import { ES_TABLE_ACTIONS_DEFAULT_OPTIONS } from '@elonsoft/elonkit/ui/table-actions'; - -@NgModule({ - providers: [ - { - provide: ES_TABLE_ACTIONS_DEFAULT_OPTIONS, - useValue: { - total: 10, - } - } - ] -}) -``` diff --git a/projects/elonkit/src/ui/table-actions/table-actions.component.html b/projects/elonkit/src/ui/table-actions/table-actions.component.html index 352bc69c..b8122cad 100644 --- a/projects/elonkit/src/ui/table-actions/table-actions.component.html +++ b/projects/elonkit/src/ui/table-actions/table-actions.component.html @@ -2,7 +2,7 @@
- Выбрано {{total}} + {{(locale$ | async).tableActions.title}} {{total}}
diff --git a/projects/elonkit/src/ui/table-actions/table-actions.component.ts b/projects/elonkit/src/ui/table-actions/table-actions.component.ts index 6459b137..d68998d4 100644 --- a/projects/elonkit/src/ui/table-actions/table-actions.component.ts +++ b/projects/elonkit/src/ui/table-actions/table-actions.component.ts @@ -1,21 +1,15 @@ import { Component, ChangeDetectionStrategy, - ChangeDetectorRef, ViewEncapsulation, Input, - InjectionToken, Output, - Optional, - Inject, EventEmitter } from '@angular/core'; -import { ESTableActionsDefaultOptions } from './table-actions.types'; +import { ESLocaleService, ESLocale } from '../locale'; -export const ES_TABLE_ACTIONS_DEFAULT_OPTIONS = new InjectionToken( - 'ES_TABLE_ACTIONS_DEFAULT_OPTIONS' -); +import { Observable } from 'rxjs'; @Component({ selector: 'es-table-actions', @@ -25,18 +19,17 @@ export const ES_TABLE_ACTIONS_DEFAULT_OPTIONS = new InjectionToken; + constructor( - @Optional() - @Inject(ES_TABLE_ACTIONS_DEFAULT_OPTIONS) - private defaultOptions: ESTableActionsDefaultOptions, - ) {} + /** + * @internal + * @ignore + */ + public localeService: ESLocaleService + ) { + this.locale$ = this.localeService.locale(); + } } diff --git a/projects/elonkit/src/ui/table-actions/table-actions.types.ts b/projects/elonkit/src/ui/table-actions/table-actions.types.ts deleted file mode 100644 index d09ffe66..00000000 --- a/projects/elonkit/src/ui/table-actions/table-actions.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface ESTableActionsDefaultOptions { - total?: number; -} From 8b985d1c51691690518b56ae9b14799eb6b215e0 Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 29 Mar 2021 14:17:08 +0300 Subject: [PATCH 3/5] fix(table-actions): fix story --- .../table-actions-story-basic.component.html | 64 +++++++++---------- .../table-actions-story-basic.source.ts | 58 +++++++++-------- .../table-actions.component.html | 3 +- 3 files changed, 64 insertions(+), 61 deletions(-) diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html index 8485d116..4ec83a87 100644 --- a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html @@ -1,41 +1,39 @@
- - - - - - - +
No. {{element.position}}
+ + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - -
No. {{element.position}} Name {{element.name}} Name {{element.name}} Weight {{element.weight}} Weight {{element.weight}} Symbol {{element.symbol}} Symbol {{element.symbol}}
-
- - -
+ + + + + +
diff --git a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts index 501c0413..6427f04b 100644 --- a/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts +++ b/projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts @@ -38,35 +38,41 @@ export const TABLE_ACTIONS_SOURCE = { } `, html: ` - - - - No. - {{element.position}} - + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - -
No. {{element.position}} Name {{element.name}} Name {{element.name}} Weight {{element.weight}} Weight {{element.weight}} Symbol {{element.symbol}} Symbol {{element.symbol}}
- > + + + + + + + ` }; diff --git a/projects/elonkit/src/ui/table-actions/table-actions.component.html b/projects/elonkit/src/ui/table-actions/table-actions.component.html index b8122cad..fc38f48f 100644 --- a/projects/elonkit/src/ui/table-actions/table-actions.component.html +++ b/projects/elonkit/src/ui/table-actions/table-actions.component.html @@ -1,11 +1,10 @@
-
{{(locale$ | async).tableActions.title}} {{total}}
- +