Not an ISSUE.. ANTD - NG-ZORRO Implemention

[whittssg]

If anyone wants the html / css for an antd (angular) implementation of this then let me know and i will post it here, i think it looks pretty good:

Thanks,

[luisramirezdev]

It looks great, could you share the code please?

Thanks in advance.

[whittssg]

Sure:

Import the needed modules from https://ng.ant.design/components (i think i just used button, radio, date, input and select)

JS is the same as provided in this libraries demo, only thing i added was (to support the in between operator):

 ruleOperationChanged(rule: Rule) {
    if (rule.operator === "InBetween")
      rule.value = [];
    else
      rule.value = null;
  }

CSS I used a load of inline styles which i need to move out to a class but i havent had time yet (the connector and ruleset classes uses the same color as my primary color for ng-zorro).

.q-connector::after, .q-connector::before {
  border-color: #004593 !important;
}

.q-ruleset {
  border-color: #004593 !important;
  border-style: dashed !important;
  padding:10px !important;
}

.q-rule {
  background-color: transparent !important;
}

HTML

• I used font awsome for the icons so you will have to switch in your own fonts.
• I used flex layout from https://github.com/angular/flex-layout to space out the fields (prob can do the same in CSS i just already had the libary imported)

<query-builder [(ngModel)]='query' [config]='config' allowCollapse="true">
  <ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
    <button style="margin-left:4px;" nzSize="small" nz-button nzType="default" (click)="addRule()">
      <i nz-icon nzType="fal:plus"></i> Rule
    </button>
    <button style="margin-left:4px;" nzSize="small" nz-button nzType="default" *ngIf="addRuleSet" (click)="addRuleSet()">
      <i nz-icon nzType="fal:plus"></i> Group
    </button>
    <button style="margin-left:4px;" nzSize="small" nz-button nzType="default" *ngIf="removeRuleSet" (click)="removeRuleSet()">
      <i nz-icon nzType="fal:trash-alt"></i> Group
    </button>
  </ng-container>
  <ng-container *queryArrowIcon>
    <i nz-icon nzType="fal:chevron-right"></i>
  </ng-container>
  <ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
    <button nzDanger nz-button nzType="text" (click)="removeRule(rule)">
      <i nz-icon nzType="fal:times"></i>
    </button>
  </ng-container>
  <ng-container *querySwitchGroup="let ruleset; let onChange=onChange">
    <nz-radio-group nzSize="small" [nzButtonStyle]="'solid'" *ngIf="ruleset" [(ngModel)]="ruleset.condition" (ngModelChange)="onChange($event)">
      <label nz-radio-button nzValue="and">AND</label>
      <label nz-radio-button nzValue="or">OR</label>
    </nz-radio-group>
  </ng-container>
  <ng-container style="margin-right:2px;margin-left:2px" *queryEntity="let rule; let entities=entities; let onChange=onChange">
    <nz-select fxFlex="30" nzPlaceHolder="Property" nzSuffixIcon="fal:columns" [(ngModel)]="rule.entity" (ngModelChange)="onChange($event, rule)" nzShowSearch>
      <nz-option *ngFor="let entity of entities" [nzValue]="entity.value" [nzLabel]="field.name"></nz-option>
    </nz-select>
  </ng-container>
  <ng-container *queryField="let rule; let fields=fields; let onChange=onChange; let getFields = getFields">
    <nz-select style="margin-right:2px;margin-left:2px" fxFlex="30" nzPlaceHolder="Property" nzSuffixIcon="fal:columns" [(ngModel)]="rule.field" (ngModelChange)="onChange($event, rule)" nzShowSearch>
      <nz-option *ngFor="let field of getFields(rule.entity)" [nzValue]="field.value" [nzLabel]="field.name"></nz-option>
    </nz-select>
  </ng-container>
  <ng-container *queryOperator="let rule; let operators=operators; let onChange=onChange">
    <nz-select style="margin-right:2px;margin-left:2px" fxFlex="20" nzPlaceHolder="Operator" nzSuffixIcon="fal:calculator-alt" [(ngModel)]="rule.operator" (ngModelChange)="ruleOperationChanged(rule)" nzShowSearch>
      <nz-option *ngFor="let value of operators" [nzValue]="value" [nzLabel]="value"></nz-option>
    </nz-select>
  </ng-container>
  <ng-container *queryInput="let rule; type: 'boolean'; let onChange=onChange">
    <label style="margin-left:2px;margin-right:2px" fxFlex="40" nz-checkbox [(ngModel)]="rule.value" (ngModelChange)="onChange()"></label>
  </ng-container>
  <ng-container *queryInput="let rule; let field=field; let options=options; type: 'category'; let onChange=onChange">
    <nz-select style="margin-left:2px;margin-right:2px" fxFlex="40" [(ngModel)]="rule.value" (ngModelChange)="onChange()" nzShowSearch nzAllowClear>
      <nz-option *ngFor="let opt of options" [nzValue]="opt.value" [nzLabel]="opt.name"></nz-option>
    </nz-select>
  </ng-container>
  <ng-container *queryInput="let rule; type: 'date'; let onChange=onChange">
    <ng-container *ngIf="rule.operator === 'In Between'">
      <nz-range-picker style="margin-left:2px;margin-right:2px" fxFlex="40" [(ngModel)]="rule.value" (ngModelChange)="onChange()"></nz-range-picker>
    </ng-container>
    <ng-container *ngIf="rule.operator === 'Last X Days'">
      <nz-input-number style="margin-left:2px;margin-right:2px" fxFlex="40" [(ngModel)]="rule.value" (ngModelChange)="onChange()" [nzMin]="0" [nzMax]="10000" [nzStep]="1"></nz-input-number>
    </ng-container>
    <ng-container *ngIf="rule.operator !== 'In Between' && rule.operator !== 'Last X Days'">
      <nz-date-picker style="margin-left:2px;margin-right:2px" fxFlex="40" [(ngModel)]="rule.value" (ngModelChange)="onChange()"></nz-date-picker>
    </ng-container>
  </ng-container>
  <ng-container *queryInput="let rule; let options=options; type: 'multiselect'; let onChange=onChange">
    <nz-select style="margin-left:2px;margin-right:2px" fxFlex="40" nzMode="multiple" [nzMaxTagCount]="2" [(ngModel)]="rule.value" (ngModelChange)="onChange()" nzShowSearch nzAllowClear>
      <nz-option *ngFor="let opt of options" [nzValue]="opt.value" [nzLabel]="opt.name"></nz-option>
    </nz-select>
  </ng-container>
  <ng-container *queryInput="let rule; let field=field; type: 'number'; let onChange=onChange">
    <nz-input-number style="margin-left:2px;margin-right:2px" fxFlex="40" [(ngModel)]="rule.value" (ngModelChange)="onChange()" [nzMin]="0" [nzMax]="10000" [nzStep]="1"></nz-input-number>
  </ng-container>
  <ng-container *queryInput="let rule; let field=field; type: 'string'; let onChange=onChange">
    <input style="margin-left:2px;margin-right:2px" fxFlex="40" nz-input [(ngModel)]="rule.value" (ngModelChange)="onChange()" />
  </ng-container>
  <ng-container *queryInput="let rule; let field=field; type: 'textarea'; let onChange=onChange">
    <input style="margin-left:2px;margin-right:2px" fxFlex="40" nz-input [(ngModel)]="rule.value" (ngModelChange)="onChange()" />
  </ng-container>
</query-builder>

[luisramirezdev]

@whittssg Thanks for share !

[stevehaneytrailblazer]

Looks very nice. How were you able to position the remove rule button on the left?