<commit_before>import {
  Component, NgModule, OnInit, Input, Output, ContentChildren, ContentChild, QueryList,
  ViewChild, ViewChildren, TemplateRef, EventEmitter, ViewEncapsulation
} from '@angular/core';

import { Field, FieldOpItem, GroupOpItem, GroupOpType, QueryGroup, QueryMode } from './query.types';
import { ValueInputTemplateDirective } from './directives/value-input-template.directive';
import { FieldDirective } from './directives/field.directive';
import { ToolbarTemplateDirective } from './directives/toolbar-template.directive';
import { translateTemplates, translateFields } from './utils/field-helper';
import { translateQueryGroup } from './utils/query-helper';
import { PlainComponent } from './plain/plain.component';
import { AdvancedComponent } from './advanced/advanced.component';
import { QueryConfigurationService } from './services/configuration.service';

@Component({
  selector: 'ngx-query',
  template: `
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="pull-left">
        <h3 class="panel-title">{{title}}</h3>
      </div>
      <div class="btn-toolbar pull-right">

        <div class="btn-group btn-group-xs" *ngIf="queryTemplates.length>1">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="glyphicon glyphicon-retweet"></i> {{currentQueryTemplate.name}}
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li *ngFor="let item of queryTemplates"><a href="javascript:" (click)="queryTemplateChanged(item)">{{item.name}}</a></li>
          </ul>
        </div>

        <div class="btn-group  btn-group-xs" *ngIf="showModeButtons">
          <button type="button" class="btn" (click)="showPlainPanel()"
            [ngClass]="{'btn-primary': mode===plainMode, 'btn-default': mode!==plainMode}">
            <i class="glyphicon glyphicon-filter"></i> {{config.labels.buttons.quick}}</button>
          <button type="button" class="btn" (click)="showAdvancedPanel()"
            [ngClass]="{'btn-primary': mode===advancedMode, 'btn-default': mode!==advancedMode}">
            <i class="glyphicon glyphicon-fire"></i> {{config.labels.buttons.advanced}}</button>
        </div>

        <div class="btn-group btn-group-xs">
          <button type="button" class="btn btn-default" (click)="resetQueryTemplate()">
            <i class="glyphicon glyphicon-repeat"></i> {{config.labels.buttons.reset}}</button>
          <button type="button" class="btn btn-primary" (click)="executeQuery()">
            <i class="glyphicon glyphicon-search"></i> {{config.labels.buttons.search}}</button>
        </div>

        <ng-container *ngIf="toolbarTemplate" [ngTemplateOutlet]="toolbarTemplate"
                    [ngOutletContext]="{toolbar: toolbar}"></ng-container>

      </div>
      <div class="clearfix"></div>
    </div>
    <div class="panel-body">
      <ngx-query-plain [class.hide]="mode!==plainMode" #planQuery
        [queryTemplate]="currentQueryTemplate.template">
      </ngx-query-plain>
      <ngx-query-advanced [class.hide]="mode!==advancedMode" #advancedQuery
        [queryTemplate]="currentQueryTemplate.template" [fields]="tempFields">
      </ngx-query-advanced>
    </div>
  </div>

  <!-- Value Input Templates -->
  <ng-template ngx-query-value-input-template dataType="any" let-rule="rule" let-dataIndex="dataIndex">
    <input type="text" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="string" let-rule="rule" let-dataIndex="dataIndex">
    <input type="text" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="boolean" let-rule="rule" let-dataIndex="dataIndex">
    <div class="checkbox">
      <label>
        <input type="checkbox" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
      </label>
    </div>
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="number" let-rule="rule" let-dataIndex="dataIndex">
    <input type="number" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template  dataType="date" let-rule="rule" let-dataIndex="dataIndex">
    <input type="date" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="datetime" let-rule="rule" let-dataIndex="dataIndex">
    <input type="date" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <!-- Value Input Templates -->
  `,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'ngx-query'
  }
})
export class QueryComponent {

  @Output() query: EventEmitter<any> = new EventEmitter();

  @Input() title: string;
  @Input() mode: QueryMode = QueryMode.plain;
  @Input() showModeButtons: boolean = true;
  @ContentChildren(FieldDirective)
  set fieldTemplates(val: QueryList<FieldDirective>) {
    this._fieldTemplates = val;

    if (val) {
      // only set this if results were brought back
      const arr: FieldDirective[] = val.toArray();

      if (arr.length) {
        // translate them to normal objects
        this.fields = translateTemplates(arr);

        if (this._queryTemplates) {
          this.queryTemplates = this._queryTemplates;
        }
      }
    }
  }
  get fieldTemplates(): QueryList<FieldDirective> {
    return this._fieldTemplates;
  }
  @Input()
  set fields(val: Field[]) {
    this.translateFields(val, this._valueInputTemplates);
    this.tempFields = val;
  }
  get fields(): Field[] {
    return this.tempFields;
  }
  @Input()
  set queryTemplates(val: Array<{ name: string, template: QueryGroup }>) {

    this._queryTemplates = val;

    this._queryTemplates.forEach(queryTemplate => {
      this.translateQueryGroup(queryTemplate.template, this.tempFields);
    });

    this.queryTemplateChanged(this._queryTemplates[0]);
  }
  get queryTemplates(): Array<{ name: string, template: QueryGroup }> {
    return this._queryTemplates;
  }
  @ContentChild(ToolbarTemplateDirective, { read: TemplateRef })
  toolbarTemplate: TemplateRef<any>;
  @Input() toolbar: any;

  tempFields: Array<Field>;
  currentQueryTemplate: { name: string, template: QueryGroup };
  readonly plainMode: QueryMode = QueryMode.plain;
  readonly advancedMode: QueryMode = QueryMode.advanced;

  private _fieldTemplates: QueryList<FieldDirective>;
  private _valueInputTemplates: Array<ValueInputTemplateDirective>;

  private _queryTemplates: Array<{ name: string, template: QueryGroup }> = [];<commit_msg>fix: fix a bug<commit_after>import {
  Component, NgModule, OnInit, Input, Output, ContentChildren, ContentChild, QueryList,
  ViewChild, ViewChildren, TemplateRef, EventEmitter, ViewEncapsulation
} from '@angular/core';

import { Field, FieldOpItem, GroupOpItem, GroupOpType, QueryGroup, QueryMode } from './query.types';
import { ValueInputTemplateDirective } from './directives/value-input-template.directive';
import { FieldDirective } from './directives/field.directive';
import { ToolbarTemplateDirective } from './directives/toolbar-template.directive';
import { translateTemplates, translateFields } from './utils/field-helper';
import { translateQueryGroup } from './utils/query-helper';
import { PlainComponent } from './plain/plain.component';
import { AdvancedComponent } from './advanced/advanced.component';
import { QueryConfigurationService } from './services/configuration.service';

@Component({
  selector: 'ngx-query',
  template: `
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="pull-left">
        <h3 class="panel-title">{{title}}</h3>
      </div>
      <div class="btn-toolbar pull-right">

        <div class="btn-group btn-group-xs" *ngIf="queryTemplates.length>1">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="glyphicon glyphicon-retweet"></i> {{currentQueryTemplate.name}}
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li *ngFor="let item of queryTemplates"><a href="javascript:" (click)="queryTemplateChanged(item)">{{item.name}}</a></li>
          </ul>
        </div>

        <div class="btn-group  btn-group-xs" *ngIf="showModeButtons">
          <button type="button" class="btn" (click)="showPlainPanel()"
            [ngClass]="{'btn-primary': mode===plainMode, 'btn-default': mode!==plainMode}">
            <i class="glyphicon glyphicon-filter"></i> {{config.labels.buttons.quick}}</button>
          <button type="button" class="btn" (click)="showAdvancedPanel()"
            [ngClass]="{'btn-primary': mode===advancedMode, 'btn-default': mode!==advancedMode}">
            <i class="glyphicon glyphicon-fire"></i> {{config.labels.buttons.advanced}}</button>
        </div>

        <div class="btn-group btn-group-xs">
          <button type="button" class="btn btn-default" (click)="resetQueryTemplate()">
            <i class="glyphicon glyphicon-repeat"></i> {{config.labels.buttons.reset}}</button>
          <button type="button" class="btn btn-primary" (click)="executeQuery()">
            <i class="glyphicon glyphicon-search"></i> {{config.labels.buttons.search}}</button>
        </div>

        <ng-container *ngIf="toolbarTemplate" [ngTemplateOutlet]="toolbarTemplate"
                    [ngOutletContext]="{toolbar: toolbar}"></ng-container>

      </div>
      <div class="clearfix"></div>
    </div>
    <div class="panel-body">
      <ngx-query-plain [class.hide]="mode!==plainMode" #planQuery
        [queryTemplate]="currentQueryTemplate.template">
      </ngx-query-plain>
      <ngx-query-advanced [class.hide]="mode!==advancedMode" #advancedQuery
        [queryTemplate]="currentQueryTemplate.template" [fields]="tempFields">
      </ngx-query-advanced>
    </div>
  </div>

  <!-- Value Input Templates -->
  <ng-template ngx-query-value-input-template dataType="any" let-rule="rule" let-dataIndex="dataIndex">
    <input type="text" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="string" let-rule="rule" let-dataIndex="dataIndex">
    <input type="text" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="boolean" let-rule="rule" let-dataIndex="dataIndex">
    <div class="checkbox">
      <label>
        <input type="checkbox" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
      </label>
    </div>
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="number" let-rule="rule" let-dataIndex="dataIndex">
    <input type="number" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template  dataType="date" let-rule="rule" let-dataIndex="dataIndex">
    <input type="date" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <ng-template ngx-query-value-input-template dataType="datetime" let-rule="rule" let-dataIndex="dataIndex">
    <input type="date" class="form-control" [placeholder]="rule.field.label" [(ngModel)]="rule.datas[dataIndex]" />
  </ng-template>
  <!-- Value Input Templates -->
  `,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'ngx-query'
  }
})
export class QueryComponent {

  @Output() query: EventEmitter<any> = new EventEmitter();

  @Input() title: string;
  @Input() mode: QueryMode = QueryMode.plain;
  @Input() showModeButtons: boolean = true;
  @ContentChildren(FieldDirective)
  set fieldTemplates(val: QueryList<FieldDirective>) {
    this._fieldTemplates = val;

    if (val) {
      // only set this if results were brought back
      const arr: FieldDirective[] = val.toArray();

      if (arr.length) {
        // translate them to normal objects
        this.fields = translateTemplates(arr);

        if (this._queryTemplates) {
          this.queryTemplates = this._queryTemplates;
        }
      }
    }
  }
  get fieldTemplates(): QueryList<FieldDirective> {
    return this._fieldTemplates;
  }
  @Input()
  set fields(val: Field[]) {
    this.translateFields(val, this._valueInputTemplates);
    this.tempFields = val;
  }
  get fields(): Field[] {
    return this.tempFields;
  }
  @Input()
  set queryTemplates(val: Array<{ name: string, template: QueryGroup }>) {

    this._queryTemplates = val;

    this._queryTemplates.forEach(queryTemplate => {
      this.translateQueryGroup(queryTemplate.template, this.tempFields);
    });

    if (this.tempFields && this.tempFields.length > 0) {
      this.queryTemplateChanged(this._queryTemplates[0]);
    }
  }
  get queryTemplates(): Array<{ name: string, template: QueryGroup }> {
    return this._queryTemplates;
  }
  @ContentChild(ToolbarTemplateDirective, { read: TemplateRef })
  toolbarTemplate: TemplateRef<any>;
  @Input() toolbar: any;

  tempFields: Array<Field>;
  currentQueryTemplate: { name: string, template: QueryGroup };
  readonly plainMode: QueryMode = QueryMode.plain;
  readonly advancedMode: QueryMode = QueryMode.advanced;

  private _fieldTemplates: QueryList<FieldDirective>;
  private _valueInputTemplates: Array<ValueInputTemplateDirective>;

  private _queryTemplates: Array<{ name: string, template: QueryGroup }> = [];
{'fraction_non_alphanumeric': 0.163860103626943, 'fraction_numerical': 0.0006476683937823834, 'mean_word_length': 4.000719683339331, 'pattern_counts': {'":': 0, '<': 179, '<?xml version=': 0, '>': 184, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2846035', 'n_tokens_mistral': 4284, 'n_tokens_neox': 4148, 'n_words': 787}