subsku

subsku-details.component.ts

import { Component } from '@angular/core';
import { ComButtonComponent } from '../../../../common/button';
import {
  ComFormComponent,
  ComFormGroupComponent,
  ComFormInputComponent,
  ComFormActionsComponent,
  ComFormCheckboxComponent
} from '../../../../common/form';
import { ActivatedRoute } from '@angular/router';
import { ComPagerComponent } from '../../../../common/pager';
import { FormControl } from '@angular/forms';
import { ComLabelComponent } from '../../../../common/label';
import { StCurrentProgressComponent } from '../current-progress';
import { ComSelectComponent } from '../../../../common/select';
import { select } from 'ng2-redux';
import { Observable, Subscription } from 'rxjs/Rx';
import { StAttachmentsPopupComponent } from '../../../attachments-popup';
import { PagerPipe } from '../../../../shared/pipes/pager.pipe';
import { ProductModel } from '../../../../shared/models/product.model';

@Component({
  selector: 'st-subsku-details',
  template: require('./subsku-details.component.jade')(),
  styles: [require('./subsku-details.component.scss')],
  directives: [ComButtonComponent, ComFormComponent, ComPagerComponent,
    ComFormGroupComponent, ComFormInputComponent, ComFormActionsComponent,
    ComLabelComponent, StCurrentProgressComponent, ComSelectComponent,
    ComFormCheckboxComponent, StAttachmentsPopupComponent],
  pipes: [PagerPipe]
})
export class StSubskuDetailsComponent {
  @select(state => state.product) private productState$;

  private subscriptions: Subscription[] = [];
  private product$: Observable<any>;
  private variationsOptions$: Observable<any>;

  private cost: FormControl;
  private currency: FormControl;
  private differentCost: FormControl;

  private product: ProductModel;
  private variations: any[] = [];
  private currencies: string[] = ['$', '£', '€'];
  private currentPage: number = 1;
  private totalPages: number = 1;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.cost = new FormControl('');
    this.currency = new FormControl('');
    this.differentCost = new FormControl('');

    this.product$ = getItemFromState(this.productState$, ['product', 'item']);
    this.variationsOptions$ = getItemFromState(this.productState$, ['product', 'item', 'variations']);

    this.subscriptions.push(
      this.variationsOptions$.map((variations: any[]) => {
        variations.forEach((variation) => {
          variation.form = {
            ean: new FormControl(''),
            cost: new FormControl(''),
            currency: new FormControl('')
          };
        });
        return { variations, totalPages: variations.length / 20 };
      })
      .subscribe((result: any) => {
        Object.assign(this, result);
      })
    );

    this.subscriptions.push(
      this.product$.subscribe((product: ProductModel) => {
        this.product = product;
      })
    );

    this.subscriptions.push(
      this.activatedRoute.params.pluck('page').subscribe((currentPage: number) => {
        this.currentPage = currentPage || 1;
      })
    );
  }

  createLink(link: string): string {
    return `/dashboard/product-governance/products/${this.product.id}/edit/subskus/${link}`;
  }

  ngOnDestroy() {
    this.subscriptions.forEach((subscription: Subscription) => {
      subscription.unsubscribe();
    });
  }
}

function getItemFromState(targetState: Observable, attrs: string[]): Observable<any> {
  return targetState.map((item) => item.getIn(attrs))
    .filter((item) => !!item)
    .map((item) => item.toJS());
}