@tetacom/ng-components 1.0.24 → 1.0.25

package/src/component/toolbar/Toolbar.stories.ts

@@ -0,0 +1,110 @@
+import { Meta } from '@storybook/angular/types-6-0';
+import { withKnobs } from '@storybook/addon-knobs';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { ToolbarModule } from './toolbar.module';
+import { ButtonModule } from '../button/button.module';
+import { IconModule } from '../icon/icon.module';
+
+export default {
+  title: 'Component/Toolbar',
+  decorators: [withKnobs],
+  component: ToolbarComponent,
+  moduleMetadata: {
+    imports: [ToolbarModule],
+  },
+} as Meta;
+
+export const basicToolbar = () => ({
+  moduleMetadata: {
+    imports: [ToolbarModule, ButtonModule, IconModule],
+  },
+  props: {
+    data: treeData,
+  },
+  template: `<teta-toolbar [tetaIconSprite]="'assets/icons.svg'" [palette]="'primary'">
+  <button teta-button [palette]="'primary'" [square]="true">
+    <teta-icon [name]="'moreVertical'"></teta-icon>
+  </button>
+  <span class="margin-left-2">Скважины</span>
+</teta-toolbar>`,
+});
+
+const treeData = [
+  {
+    name: 'Тетакомовское м-р (4)',
+    icon: 'layer',
+    children: [
+      {
+        name: 'Скважины для тестирования',
+        icon: 'folder',
+        children: [
+          {
+            name: 'Тестовая скважина №1',
+            icon: 'well',
+            children: [],
+          },
+          {
+            name: 'Стресс-тест',
+            icon: 'well',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Test only (1)',
+    icon: 'layer',
+    children: [
+      {
+        name: 'Group (1)',
+        icon: 'folder',
+        children: [
+          {
+            name: 'well',
+            icon: 'well',
+            children: [
+              {
+                name: 'ГИС',
+                icon: 'map',
+                children: [],
+              },
+              {
+                name: 'Конструкция',
+                icon: 'tubes',
+                children: [],
+              },
+              {
+                name: 'D1',
+                icon: 'angle',
+                children: [],
+              },
+              {
+                name: 'Дизайн №1 copy',
+                icon: 'angle',
+                children: [
+                  {
+                    name: 'Зоны продуктивности',
+                    children: [],
+                  },
+                  {
+                    name: 'План закачки',
+                    children: [],
+                  },
+                  {
+                    name: 'Опции',
+                    children: [],
+                  },
+                  {
+                    name: 'Результаты',
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/component/toolbar/public-api.ts

@@ -0,0 +1,6 @@
+export * from './toolbar.module';
+
+/**
+ * Components
+ */
+export * from './toolbar/toolbar.component';

package/src/component/toolbar/toolbar/toolbar.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/component/toolbar/toolbar/toolbar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToolbarComponent } from './toolbar.component';
+
+describe('ToolbarComponent', () => {
+  let component: ToolbarComponent;
+  let fixture: ComponentFixture<ToolbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ToolbarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/component/toolbar/toolbar/toolbar.component.ts

@@ -0,0 +1,29 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'teta-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToolbarComponent implements OnInit {
+  @Input() palette: string;
+  @Input() class;
+
+  @HostBinding('class')
+  private get getClass() {
+    const result = [this.class, 'toolbar', 'toolbar_panel'];
+    if (this.palette) {
+      result.push(`toolbar-${this.palette}`);
+    }
+    return result.join(' ');
+  }
+
+  ngOnInit(): void {}
+}

package/src/component/toolbar/toolbar.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ToolbarComponent} from './toolbar/toolbar.component';
+
+@NgModule({
+  declarations: [ToolbarComponent],
+  exports: [ToolbarComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class ToolbarModule {
+}

package/src/component/tree/Tree.stories.ts

@@ -0,0 +1,93 @@
+import {Meta} from '@storybook/angular/types-6-0';
+import {withKnobs} from '@storybook/addon-knobs';
+import {TreeComponent} from './tree/tree.component';
+import {TreeModule} from './tree.module';
+import {TetaTemplateModule} from '../../directive/teta-template/teta-template.module';
+import {IconModule} from '../icon/icon.module';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+export default {
+  title: 'Component/Tree',
+  decorators: [withKnobs],
+  component: TreeComponent
+} as Meta;
+
+export const basicTree = () => ({
+  moduleMetadata: {
+    imports: [TreeModule, TetaTemplateModule, IconModule, BrowserAnimationsModule]
+  },
+  props: {
+    data: treeData
+  },
+  template: `<teta-tree [tetaIconSprite]="'assets/icons.svg'" style="width: 400px;" [data]="data">
+  <ng-template tetaTemplate let-item>
+    <teta-icon [name]="item.icon" class="fill-text-30 margin-right-2"></teta-icon> {{item.name}}
+  </ng-template>
+</teta-tree>`,
+});
+
+const treeData = [{
+  name: 'Тетакомовское м-р (4)',
+  icon: 'layers',
+  children: [
+    {
+      name: 'Скважины для тестирования',
+      icon: 'folder',
+      children: [
+        {
+          name: 'Тестовая скважина №1',
+          icon: 'well',
+          children: []
+        }, {
+          name: 'Стресс-тест',
+          icon: 'well',
+          children: []
+        }
+      ]
+    }
+  ]
+}, {
+  name: 'Test only (1)',
+  icon: 'layers',
+  children: [
+    {
+      name: 'Group (1)',
+      icon: 'folder',
+      children: [
+        {
+          name: 'well',
+          icon: 'well',
+          children: [{
+            name: 'ГИС',
+            icon: 'map',
+            children: []
+          }, {
+            name: 'Конструкция',
+            icon: 'tubes',
+            children: []
+          }, {
+            name: 'D1',
+            icon: 'angle',
+            children: []
+          }, {
+            name: 'Дизайн №1 copy',
+            icon: 'angle',
+            children: [{
+              name: 'Зоны продуктивности',
+              children: []
+            }, {
+              name: 'План закачки',
+              children: []
+            }, {
+              name: 'Опции',
+              children: []
+            }, {
+              name: 'Результаты',
+              children: []
+            }]
+          }]
+        }
+      ]
+    }
+  ]
+}];

package/src/component/tree/public-api.ts

@@ -0,0 +1,4 @@
+export * from './tree.module';
+export * from './tree/tree.component';
+export * from './tree-item-toggle/tree-item-toggle.component';
+export * from './tree.service';

package/src/component/tree/tree/tree.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngFor="let item of data">
+  <teta-tree-item [item]="item"
+                  [depth]="0"
+                  [padding]="padding"
+                  [childNodeName]="childNodeName"
+                  [noChildMode]="noChildMode"
+                  [template]="template?.template"></teta-tree-item>
+</ng-container>

package/src/component/tree/tree/tree.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TreeComponent } from './tree.component';
+
+describe('TreeComponent', () => {
+  let component: TreeComponent;
+  let fixture: ComponentFixture<TreeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TreeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TreeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/component/tree/tree/tree.component.ts

@@ -0,0 +1,92 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { ITreeData } from '../../../common/contract/i-tree-data';
+import { TreeService } from '../tree.service';
+import { TetaTemplateDirective } from '../../../directive/teta-template/teta-template.directive';
+import { filter, takeWhile } from 'rxjs/operators';
+
+@Component({
+  selector: 'teta-tree',
+  templateUrl: './tree.component.html',
+  styleUrls: ['./tree.component.scss'],
+  providers: [TreeService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeComponent
+  implements OnInit, AfterContentInit, OnChanges, OnDestroy
+{
+  @Input() data: ITreeData[];
+  @Output() service: EventEmitter<TreeService> =
+    new EventEmitter<TreeService>();
+  @Input() class;
+  @Input() padding = 8;
+  @Input() childNodeName = 'children';
+
+  @Input()
+  set openItems(items: ITreeData[]) {
+    this._openItems = items;
+    this._service.setOpenItems(items);
+  }
+
+  get noChildMode(): boolean {
+    const hasChildren = this.data.find(
+      (_) => _[this.childNodeName]?.length > 0
+    );
+    return !hasChildren;
+  }
+
+  @Output() openItemsChange = new EventEmitter();
+
+  @ContentChild(TetaTemplateDirective, { static: true })
+  template: TetaTemplateDirective;
+
+  private _openItems: ITreeData[];
+  private _alive = true;
+
+  constructor(private _service: TreeService, private _cdr: ChangeDetectorRef) {
+    this._service.openItems
+      .pipe(
+        takeWhile((_) => this._alive),
+        filter((_) => this._openItems !== _)
+      )
+      .subscribe((_) => this.openItemsChange.emit(_));
+  }
+
+  @Input()
+  set compareItems(func: (item: ITreeData) => any) {
+    this._service.compareItems = func;
+  }
+
+  @HostBinding('class')
+  private get getClass(): string {
+    const result = [this.class, 'tree'];
+    return result.join(' ');
+  }
+
+  ngOnInit(): void {
+    this.service.emit(this._service);
+  }
+
+  ngAfterContentInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this._cdr.detectChanges();
+  }
+
+  ngOnDestroy() {
+    this._alive = false;
+  }
+}

package/src/component/tree/tree-item/tree-item.component.html

@@ -0,0 +1,12 @@
+<div class="tree__item_content" [ngClass]="'tree__item_content-' + computedDepth" (click)="openItem()">
+  <ng-container
+    *ngTemplateOutlet="template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}"></ng-container>
+</div>
+<div [@children] class="tree__children" *ngIf="itemIsOpen && item[childNodeName]?.length > 0">
+  <teta-tree-item *ngFor="let child of item[childNodeName];"
+                  [item]="child"
+                  [template]="template"
+                  [padding]="padding"
+                  [childNodeName]="childNodeName"
+                  [depth]="depth + 1"></teta-tree-item>
+</div>

package/src/component/tree/tree-item/tree-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TreeItemComponent } from './tree-item.component';
+
+describe('TreeItemComponent', () => {
+  let component: TreeItemComponent;
+  let fixture: ComponentFixture<TreeItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TreeItemComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TreeItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/component/tree/tree-item/tree-item.component.ts

@@ -0,0 +1,84 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
+import { ITreeData } from '../../../common/contract/i-tree-data';
+import { TreeService } from '../tree.service';
+import { takeWhile } from 'rxjs/operators';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+/**
+ * TODO: Lazy загрузка дочерних элементов, Output onExpand, шаблон для иконки expand
+ */
+@Component({
+  selector: 'teta-tree-item',
+  templateUrl: './tree-item.component.html',
+  styleUrls: ['./tree-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('children', [
+      transition('void => *', [
+        style({ opacity: '0' }),
+        animate(200, style({ opacity: '1' })),
+      ]),
+      transition('* => void', [animate(200, style({ opacity: '0' }))]),
+    ]),
+  ],
+})
+export class TreeItemComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() item: ITreeData;
+  @Input() depth = 0;
+  @Input() padding = 16;
+  @Input() childNodeName = 'children';
+  @Input() template: TemplateRef<any>;
+  @Input() noChildMode: boolean;
+
+  @HostBinding('class.tree__item-container') private readonly treeItemClass =
+    true;
+
+  itemIsOpen = false;
+
+  private _alive = true;
+
+  get computedDepth(): number {
+    return (
+      this.depth +
+      (this.item[this.childNodeName]?.length > 0 ? 0 : this.noChildMode ? 1 : 2)
+    );
+  }
+
+  constructor(public service: TreeService, private _cdr: ChangeDetectorRef) {}
+
+  openItem() {
+    this.service.openItem(this.item);
+  }
+
+  ngOnInit(): void {
+    this.service.openItems
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((_) => {
+        const found = _?.find(
+          (x) =>
+            this.service.compareItems(x) ===
+            this.service.compareItems(this.item)
+        );
+        this.itemIsOpen = found != null;
+        this._cdr.markForCheck();
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {}
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+}

package/src/component/tree/tree-item-toggle/tree-item-toggle.component.html

@@ -0,0 +1,2 @@
+<teta-icon [name]="(open | async) ? 'arrowDownKey' : 'arrowRightKey'"
+           class="tree__icon"></teta-icon>

package/src/component/tree/tree-item-toggle/tree-item-toggle.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+}

package/src/component/tree/tree-item-toggle/tree-item-toggle.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TreeItemToggleComponent } from './tree-item-toggle.component';
+
+describe('TreeItemToggleComponent', () => {
+  let component: TreeItemToggleComponent;
+  let fixture: ComponentFixture<TreeItemToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TreeItemToggleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TreeItemToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/component/tree/tree-item-toggle/tree-item-toggle.component.ts

@@ -0,0 +1,37 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { TreeService } from '../tree.service';
+import { ITreeData } from '../../../common/contract/i-tree-data';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'teta-tree-item-toggle',
+  templateUrl: './tree-item-toggle.component.html',
+  styleUrls: ['./tree-item-toggle.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeItemToggleComponent implements OnInit {
+  @Input() item: ITreeData;
+  open: Observable<boolean>;
+
+  constructor(public service: TreeService, private _cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.open = this.service.openItems.pipe(
+      map((_) => {
+        const found = _?.find(
+          (x) =>
+            this.service.compareItems(x) ===
+            this.service.compareItems(this.item)
+        );
+        return found != null;
+      })
+    );
+  }
+}

package/src/component/tree/tree.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TreeComponent } from './tree/tree.component';
+import { TreeItemComponent } from './tree-item/tree-item.component';
+import { TetaTemplateModule } from '../../directive/teta-template/teta-template.module';
+import { IconModule } from '../icon/icon.module';
+import { TreeItemToggleComponent } from './tree-item-toggle/tree-item-toggle.component';
+
+@NgModule({
+  declarations: [TreeComponent, TreeItemComponent, TreeItemToggleComponent],
+  exports: [TreeComponent, TetaTemplateModule, TreeItemToggleComponent],
+  imports: [CommonModule, IconModule, TetaTemplateModule],
+})
+export class TreeModule {}

package/src/component/tree/tree.service.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {TreeService} from './tree.service';
+
+describe('TreeService', () => {
+  let service: TreeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TreeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});