Add table actions component

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';

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);
 }

projects/elonkit/src/ui/icons/icons.service.ts

@@ -29,7 +29,8 @@ export const ES_SVG_ICONS = {
     'play',
     'speed',
     'un-mute'
-  ] as const
+  ] as const,
+  'es-table-actions': ['close'] as const
 };
 
 @Injectable()

projects/elonkit/src/ui/locale/locales/en.ts

@@ -38,5 +38,8 @@ export const en = {
   avatar: {
     labelAvatar: 'Avatar',
     labelStatus: 'Status'
+  },
+  tableActions: {
+    title: 'Selected'
   }
 };

projects/elonkit/src/ui/locale/locales/ru.ts

@@ -38,5 +38,8 @@ export const ru = {
   avatar: {
     labelAvatar: 'Аватар',
     labelStatus: 'Статус'
+  },
+  tableActions: {
+    title: 'Выбрано'
   }
 };

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();
+  });
+});

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';

projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.html

@@ -0,0 +1,39 @@
+<div class="table-actions">
+  <table mat-table [dataSource]="dataSource" class="table-actions__story-table mat-elevation-z8">
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <es-table-actions [total]="total">
+    <button (click)="onAction()" class="table-actions__button" mat-icon-button>
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button (click)="onAction()" class="table-actions__button" mat-icon-button>
+      <mat-icon>save</mat-icon>
+    </button>
+  </es-table-actions>
+</div>
+

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;
+  }
+}

projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.component.ts

@@ -0,0 +1,35 @@
+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 {}
+}

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 {}

projects/elonkit/src/ui/table-actions/__stories__/table-actions-story-basic/table-actions-story-basic.source.ts

@@ -0,0 +1,78 @@
+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: `
+  <table mat-table [dataSource]="dataSource" class="table-actions__story-table mat-elevation-z8">
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <es-table-actions [total]="total">
+    <button (click)="onAction()" class="table-actions__button" mat-icon-button>
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button (click)="onAction()" class="table-actions__button" mat-icon-button>
+      <mat-icon>save</mat-icon>
+    </button>
+  </es-table-actions>
+  `
+};

projects/elonkit/src/ui/table-actions/__stories__/table-actions.stories.mdx

@@ -0,0 +1,50 @@
+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 {
+  TableActionsStoryBasicComponent,
+  TableActionsStoryBasicModule,
+  TABLE_ACTIONS_SOURCE
+} from './table-actions-story-basic';
+
+<Meta
+  title='UI/Table-Actions'
+  args={{
+    total: 10
+  }}
+  argTypes={{
+    total: {
+      control: 'number'
+    }
+  }}
+/>
+
+# 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
+
+<Canvas source={TABLE_ACTIONS_SOURCE}>
+  <Story name='Basic' height='400px'>
+    {((args) => ({
+      component: TableActionsStoryBasicComponent,
+      moduleMetadata: {
+        imports: [TableActionsStoryBasicModule, CoreModule]
+      },
+      props: {
+        ...args,
+        onAction: action('onAction')
+      }
+    })).bind({})}
+  </Story>
+</Canvas>
+
+## API
+
+<ArgsTable of={ESTableActionsComponent} />

projects/elonkit/src/ui/table-actions/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/elonkit/src/ui/table-actions/public-api.ts

@@ -0,0 +1,2 @@
+export * from './table-actions.module';
+export * from './table-actions.component';

projects/elonkit/src/ui/table-actions/table-actions.component.html

@@ -0,0 +1,14 @@
+<div class="es-table-actions">
+  <div class="es-table-actions__content">
+    <span class="es-table-actions__total es-h6">
+      {{(locale$ | async).tableActions.title}} {{total}}
+    </span>
+    <div class="es-table-actions__actions">
+      <ng-content></ng-content>
+      <div class="es-table-actions__separator"></div>
+      <button (click)="onCloseClick()" class="es-table-actions__action" mat-icon-button>
+        <mat-icon svgIcon="es-table-actions:close"></mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

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;
+  }
+}