orders.container.ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { trigger, state, style } from '@angular/animations';

import { BehaviorSubject, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { untilDestroyed } from 'ngx-take-until-destroy';

import { PermissionsService } from '@app/core';
import { ModalComponent } from '@app/shared/components';
import { OrdersService } from './../../services/orders.service';
import {
  IOrder,
  OrderStatus,
  OrderStatuses,
  IOrderProduct,
} from './../../shared/models';
import { OrderDetailsComponent } from './../../components/order-details';
import { IOrderItem } from '@lib/models';

@Component({
  selector: 'app-admin-orders',
  templateUrl: './orders.container.html',
  styleUrls: ['./orders.container.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ display: 'none' })),
      state('expanded', style({ display: 'table-row' })),
    ]),
  ],
})
export class OrdersContainer implements OnInit, OnDestroy {
  @ViewChild(ModalComponent)
  public orderDetailsModal: ModalComponent;

  @ViewChild(OrderDetailsComponent)
  public orderDetailsComponent: OrderDetailsComponent;

  public orderStatus = OrderStatus;

  public displayedColumns = ['orderStatus', 'orderDate', 'price', 'payment'];
  public readonly OrderStatuses = OrderStatuses;

  public orderForm: FormGroup;

  public _orders$ = new BehaviorSubject<IOrder[]>([]);
  public expandedElement: any;

  public paginatorConfig = { total: 30, limit: 5 };
  public ordersExist = false;

  private _searchParams: any = {};
  private _activeRow: number;

  constructor(
    private _orderSvc: OrdersService,
    private _permissionService: PermissionsService,
  ) {}

  public ngOnInit() {
    this.loadData();
    this.initOrderForm();
  }

  public ngOnDestroy() {
    this._orders$.next();
    this._orders$.complete();
  }

  /**
   * The total sum of products in order
   *
   * @param{IOrderProduct[]} products - The array of products in order.
   * @returns{number} Sum of products.
   */
  public getPriceByProducts(products: IOrderProduct[]) {
    return products.reduce((current, order) => {
      return order.price * order.quantity + current;
    }, 0);
  }

  /**
   * The function calling method which open accept modal window (Modal Component).
   *
   * @param{IOrder} data - The data about order.
   */
  public showAcceptModal(data: IOrder) {
    this.orderDetailsModal.open();
    this.orderDetailsComponent.data = data;
    this.orderDetailsComponent.status =
      OrderDetailsComponent.ORDER_DETAILS_STATUS.accept;
  }

  public activateRow(row: any) {
    this.expandedElement = row;
    this._activeRow = row.id;
  }

  /**
   * The function calling method which open decline modal window (Modal Component).
   *
   * @param{IOrder} data - The data about order.
   */
  public showDeclineModal(data: IOrder) {
    this.orderDetailsModal.open();
    this.orderDetailsComponent.data = data;
    this.orderDetailsComponent.status =
      OrderDetailsComponent.ORDER_DETAILS_STATUS.decline;
  }

  /**
   * Load an orders in table
   *
   * @param{object} pageInfo - The offset and limit of pages from event.
   */
  public loadData(pageInfo = { offset: 0, limit: 10 }) {
    this._activeRow = null;
    this._orderSvc
      .getAll(pageInfo.offset, pageInfo.limit, this._searchParams)
      .pipe(
        switchMap(({ meta, data }) => {
          this.paginatorConfig = { total: meta.total, limit: meta.limit };
          const rows = [];

          data = data.map(order => {
            return { ...order, price: this.getPriceByProducts(order.products) };
          });

          data.forEach(order => rows.push(order, { detailRow: true, order }));

          return of(rows);
        }),
      )
      .pipe(untilDestroyed(this))
      .subscribe(rows => {
        this.ordersExist = rows && rows.length > 0;
        this._orders$.next(rows);
      });
  }

  /**
   * The function that determines user's rights for edit order field of this company
   *
   * @param{IOrderItem} order - The data of order's product, includes quantity, id, etc.
   */
  public canManage(order: IOrderItem): boolean {
    return this._permissionService.isSubsidiaryForUser(
      order.company,
      'company',
    );
  }

  /**
   * The function starts search by order status in table.
   *
   * @param{any} value - The status of order.
   */
  public onStatusChange(value: any) {
    this._searchParams.status = value ? value.key : null;
    this.loadData();
  }

  /**
   * The function starts search by company's name in table.
   *
   * @param{string} name - The name of company.
   */
  public searchByName(name: string) {
    this._searchParams.name = name;
    this.loadData();
  }

  public initOrderForm() {
    this.orderForm = new FormGroup({
      dateFrom: new FormControl(),
      dateTo: new FormControl(),
    });
  }

  /**
   * The function starts search by order in table starting any date.
   */
  public dateFromChange() {
    this._searchParams.dateFrom = this.orderForm.get('dateFrom').value;
    this.loadData();
  }

  /**
   * The function starts search by order status in table for any date.
   */
  public dateToChange() {
    this._searchParams.dateTo = this.orderForm.get('dateTo').value;
    this.loadData();
  }
}