ngOnInit() {
    this.subscription = this.wbsService.wbsTreeNewChild$.subscribe(() => {
      this.addWbsChildNode();
    });
    this.subscription.add(
      this.wbsService.wbsTreeDeactivateNode$.subscribe(() => {
        this.deactivateWbsNode();
      })
    );
    this.subscription.add(
      this.wbsService.wbsTreeDeleteNode$.subscribe(() => {
        this.deleteWbsNode();
      })
    );
    const config = {
      appendTo: this.elementRef.nativeElement.firstElementChild,
      resizeToFitIncludesHeader: false,
      columns: [
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Name',
          type: 'tree',
          field: 'name',
          id: 'treeWbsName',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Short name',
          field: 'short_name',
          id: 'treeWbsShortName',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          headerRenderer: (renderData) => {
            renderData.headerElement.firstChild.style.whiteSpace =
              'pre-wrap';
            return renderData.column.text;
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Ref number',
          field: 'ref_number',
          id: 'treeWbsRefNum',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Can assign team?',
          field: 'can_assign_team',
          id: 'treeWbsCanAssignTeam',
          type: 'threestatecheckbox',
          listeners: {
            beforeToggle: () => false
          },
          htmlEncode: false,
          groupable: false,
          sortable: true,
          filterable: false
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Is work time reported?',
          field: 'is_work_time_reported',
          id: 'treeWbsIsWorkTimeReported',
          type: 'threestatecheckbox',
          listeners: {
            beforeToggle: () => false
          },
          groupable: false,
          sortable: true,
          filterable: false
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Planned HR',
          field: 'planned_hr',
          id: 'treeWbsPlannedHr',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Planned quantity',
          field: 'planned_quantity',
          id: 'treeWbsPlannedQty',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Planned budget',
          field: 'planned_budget',
          id: 'treeWbsPlannedBudget',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Percentage completed',
          field: 'percentage_completed',
          id: 'treeWbsPercentageCompleted',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          type: 'date',
          format: 'DD/MM/YYYY',
          text: 'Percentage completed date',
          field: 'percentageCompletedDate',
          id: 'treeWbsPercentageCompletedDate',
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              type: 'date',
              format: 'DD/MM/YYYY',
              placeholder: 'dd/mm/yyyy'
            },
            filterFn: ({ record, value }) => {
              if (record.data.percentage_completed_date) {
                const date = new Date(record.data.percentage_completed_date);
                return (
                  date.setHours(0, 0, 0, 0) === new Date(value).getTime()
                );
              } else {
                return false;
              }
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Percentage completed submitted by',
          field: 'percentage_completed_person_name',
          id: 'treeWbsPercentageCompletedSubmittedBy',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Total reported quantity',
          field: 'tot_reported_quantity',
          id: 'treeWbsTotReportedQty',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          type: 'date',
          format: 'DD/MM/YYYY',
          text: 'Total reported quantity date',
          field: 'totReportedQuantityDate',
          id: 'treeWbsTotReportedQtyDate',
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              type: 'date',
              format: 'DD/MM/YYYY',
              placeholder: 'dd/mm/yyyy'
            },
            filterFn: ({ record, value }) => {
              if (record.data.tot_reported_quantity_date) {
                const date = new Date(record.data.tot_reported_quantity_date);
                return (
                  date.setHours(0, 0, 0, 0) === new Date(value).getTime()
                );
              } else {
                return false;
              }
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Total reported quantity submitted by',
          field: 'tot_reported_quantity_person_name',
          id: 'treeWbsTotReportedQtySubmittedBy',
          renderer: (text) => {
            return text.value ? `${text.value}` : '';
          },
          groupable: false,
          sortable: true,
          filterable: {
            filterField: {
              autoComplete: 'new-password'
            }
          }
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Ask for quantity produced?',
          field: 'ask_for_quantity_produced',
          id: 'treeWbsAskForQuantityProduced',
          type: 'threestatecheckbox',
          listeners: {
            beforeToggle: () => false
          },
          groupable: false,
          sortable: true,
          filterable: false
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Ask for reported quantity?',
          field: 'ask_for_reported_quantity',
          id: 'treeWbsAskForReportedQty',
          type: 'threestatecheckbox',
          listeners: {
            beforeToggle: () => false
          },
          groupable: false,
          sortable: true,
          filterable: false
        },
        {
          enableCellContextMenu: false,
          editor: false,
          text: 'Display total reported quantity?',
          field: 'display_tot_reported_quantity',
          id: 'treeWbsDisplayTotalReportedQty',
          type: 'threestatecheckbox',
          listeners: {
            beforeToggle: () => false
          },
          groupable: false,
          sortable: true,
          filterable: false
        }
      ],
      features: {
        sort: true,
        filterBar: true,
        tree: true,
        cellTooltip: {
          hoverDelay: 500,
          hideDelay: 0
        },
        headerMenu: { items: { saveColumns: null, resetColumns: null } },
        search: true
      },
      rowHeight: 30
    }; // eo config
    this.applyDefaultConfig(config);
    this.gridName = 'WBSTREEGRID';
    this.handleDefaultColumnsState(config);
    this.grid = new Grid(config);
    this.applySchedulerLocale(this.i18NextService.language);
    this.grid.mask('Loading...');
    // this.handleGridState();
    if (this.grid.topRow) {
      this.grid.selectRow({
        record: this.grid.topRow.id
      });
    }
    this.wbsService.updateCurrentWbsNode(this.grid.selectedRecord);
    this.wbsService.updateTopWbsNode(this.grid.selectedRecord);
    this.checkChildrenProt(this.grid.selectedRecord,true,'wbs_id');
    // select another wbs in grid
    this.grid.addListener({
      selectionchange: () => {
        if (this.grid.selectedRecord) {
          this.wbsTreeOutput.emit(this.grid.selectedRecord);
          this.wbsService.updateCurrentWbsNode(this.grid.selectedRecord);
        }
      }
    });
    this.grid.addListener({
      celldblclick: () => {
        this.checkChildrenProt(this.grid.selectedRecord,true,'wbs_id');
      }
    });
    this.subscription.add(
      this.wbsService.currentWbsTreeListStore$.subscribe((wbsTreeListStore) => {
        if (this.grid) {
          this.grid.store = wbsTreeListStore;
          this.grid.unmask();
        }
      })
    );
    // grid config
  }