WIP: apply changed design to all criteria

src/app/search/components/criteria/criteria-by-family.component.html

@@ -8,7 +8,7 @@
                 [placeholder]="attribute.placeholder_min"
                 [attributeType]="attribute.type" 
                 [criterion]="getCriterion(attribute.id)" 
-                [advancedForm]="true"
+                [advancedForm]="false"
                 (addCriterion)="emitAdd($event)"
                 (deleteCriterion)="emitDelete($event)">
             </app-field>
@@ -21,7 +21,7 @@
                 [placeholderMax]="attribute.placeholder_max"
                 [criterion]="getCriterion(attribute.id)" 
                 (addCriterion)="emitAdd($event)" 
-                (deldeleteCriterionete)="emitDelete($event)">
+                (deleteCriterion)="emitDelete($event)">
             </app-between>
         </div>
         <div *ngSwitchCase="'select'">

src/app/search/components/criteria/search-type/between-date.component.html

-<div class="form-group row">
-    <label class="col-3 col-form-label">{{ label }}</label>
-    <div class="col">
-        <input type="text" 
-            placeholder="Pick a date range..." 
-            class="form-control" 
-            [formControl]="field"
-            [bsValue]="field.value" 
-            [bsConfig]="{ rangeInputFormat: 'YYYY-MM-DD' }" 
-            autocomplete="off"
-            bsDaterangepicker>
+<div class="row">
+    <div class="col form-group">
+        <label>{{ label }}</label>
+        <div class="row">
+            <div class="col px-sm-3">
+                <input type="text" 
+                    placeholder="Pick a date range..." 
+                    class="form-control" 
+                    [formControl]="field"
+                    [bsValue]="field.value" 
+                    [bsConfig]="{ rangeInputFormat: 'YYYY-MM-DD' }" 
+                    autocomplete="off"
+                    bsDaterangepicker>
+            </div>
+        </div>
     </div>
-    <div class="col-2 text-center">
-        <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
-            (click)="emitAdd()">
+    <div class="col-2 text-center align-self-end mb-sm-1 pb-3">
+        <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value" (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>
         </button>
         <button class="btn btn-outline-danger" *ngIf="field.disabled" (click)="emitDelete()">

src/app/search/components/criteria/search-type/between.component.html

-<div class="form-group row">
-    <label class="col-3 col-form-label">{{ label }}</label>
-    <div class="col">
-        <input type="text" class="form-control" [placeholder]="getPlaceholderMin()" [formControl]="fieldMin"
-            autocomplete="off" />
+<div class="row">
+    <div class="col form-group">
+        <label>{{ label }}</label>
+        <div class="row">
+            <div class="col mb-1 mb-sm-0">
+                <input type="text" class="form-control" [placeholder]="getPlaceholderMin()" [formControl]="fieldMin"
+                    autocomplete="off" />
+            </div>
+            <div class="w-100 d-block d-sm-none"></div>
+            <div class="col">
+                <input type="text" class="form-control" [placeholder]="getPlaceholderMax()" [formControl]="fieldMax"
+                    autocomplete="off" />
+            </div>
+        </div>
     </div>
-    <div class="col">
-        <input type="text" class="form-control" [placeholder]="getPlaceholderMax()" [formControl]="fieldMax"
-            autocomplete="off" />
-    </div>
-    <div class="col-2 text-center">
+    <div class="col-2 text-center align-self-end pb-3">
         <button class="btn btn-outline-success" *ngIf="!fieldMin.disabled"
-            [hidden]="!fieldMin.value && !fieldMax.value" (click)="addCriterion()">
+            [hidden]="!fieldMin.value && !fieldMax.value" (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>
         </button>
-        <button class="btn btn-outline-danger" *ngIf="fieldMin.disabled" (click)="deleteCriterion()">
+        <button class="btn btn-outline-danger" *ngIf="fieldMin.disabled" (click)="emitDelete()">
             <span class="fa fa-times fa-fw"></span>
         </button>
     </div>
-    </div>
\ No newline at end of file
+</div>
\ No newline at end of file

src/app/search/components/criteria/search-type/checkbox.component.html

-<div class="form-group row">
-    <label class="col-3 col-form-label">{{ label }}</label>
-    <div class="col">
-        <div *ngFor="let cb of checkboxes.controls; let i=index" class="form-check form-check-inline">
-            <input class="form-check-input" type="checkbox" id="cb_{{optionList[i].value}}" [formControl]="cb">
-            <label class="form-check-label" for="cb_{{optionList[i].value}}">{{ optionList[i].label }}</label>
+<div class="row">
+    <div class="col form-group">
+        <label>{{ label }}</label>
+        <div class="row">
+            <div class="col col-sm-auto pr-sm-1">
+                <div *ngFor="let cb of checkboxes.controls; let i=index" class="form-check form-check-inline">
+                    <input class="form-check-input" type="checkbox" id="cb_{{optionList[i].value}}" [formControl]="cb">
+                    <label class="form-check-label" for="cb_{{optionList[i].value}}">{{ optionList[i].label }}</label>
+                </div>
+            </div>
         </div>
     </div>
-    <div class="col-2 text-center">
+    <div class="col-2 text-center align-self-end pb-3">
         <button *ngIf="!checkboxes.disabled" class="btn btn-outline-success" [hidden]="!isChecked()"
             (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>

src/app/search/components/criteria/search-type/datalist.component.html

 <div class="form-group row">
     <label class="col-3 col-form-label">{{ label }}</label>
     <div class="col">
-        <input [attr.list]="getDatalistId()" type="text" class="form-control" [placeholder]="getPlaceholder()"
-            [formControl]="field" autocomplete="off" />
+        <input [attr.list]="getDatalistId()" 
+            type="text" 
+            class="form-control" 
+            [placeholder]="getPlaceholder()"
+            [formControl]="field" 
+            autocomplete="off" />
         <datalist [id]="getDatalistId()">
             <option *ngFor="let option of options" [value]="option.value">
         </datalist>
     </div>
     <div class="col-2 text-center">
-        <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value" (click)="emitAdd()">
+        <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
+            (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>
         </button>
         <button class="btn btn-outline-danger" *ngIf="field.disabled" (click)="emitDelete()">
             <span class="fa fa-times fa-fw"></span>
         </button>
     </div>
-</div>
\ No newline at end of file
+</div>

src/app/search/components/criteria/search-type/field.component.html

-<div class="row">
-    <div style="background:#c2c1c2;" class="col d-block d-sm-none">XS</div>
-    <div style="background:#eec643;" class="col d-none d-sm-block d-md-none">SM</div>
-    <div style="background:#f4ab42;" class="col d-none d-md-block d-lg-none">MD</div>
-    <div style="background:#be0c02;" class="col d-none d-lg-block d-xl-none text-white">LG</div>
-    <div style="background:#5f021f;" class="col d-none d-xl-block text-white">XL</div>
-</div>
 <div class="row">
     <div class="col form-group">
         <label>{{ label }}</label>
         <div class="row">
-            <div class="col col-sm-auto pr-sm-1 mb-1">
+            <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
                 <app-operator
                     [operator]="operator"
                     [searchType]="field"
@@ -29,7 +22,7 @@
             </div>
         </div>
     </div>
-    <div class="col-2 text-center align-self-end mb-1 pb-3">
+    <div class="col-2 text-center align-self-end pb-3">
         <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value" (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>
         </button>

src/app/search/components/criteria/search-type/operator.component.ts

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import { FormControl } from '@angular/forms';
 
 @Component({
     selector: 'app-operator',

src/app/shared/service/pretty-operator.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class PrettyOperatorService {
+    getPrettyOperator(operator: string): string {
+        switch (operator) {
+            case 'eq':
+                return '=';
+            case 'neq':
+                return '≠';
+            case 'gt':
+                return '>';
+            case 'gte':
+                return '>=';
+            case 'lt':
+                return '<';
+            case 'lte':
+                return '<=';
+            case 'lk':
+                return 'like';
+            case 'nlk':
+                return 'not like';
+            case 'in':
+                return 'in';
+            case 'nin':
+                return 'not in';
+            default:
+                return operator;
+        }
+    }
+}

src/app/shared/shared.module.ts

@@ -17,6 +17,7 @@ import {
 } from 'ngx-bootstrap';
 import { NgxJsonViewerModule } from 'ngx-json-viewer';
 import { ScrollTopService } from './service/sroll-top.service';
+import { PrettyOperatorService } from './service/pretty-operator.service';
 import { FormLabelOperatorPipe } from './form-label-operator.pipe';
 
 @NgModule({
@@ -54,7 +55,8 @@ import { FormLabelOperatorPipe } from './form-label-operator.pipe';
     ],
     providers: [
         BsModalService,
-        ScrollTopService
+        ScrollTopService,
+        PrettyOperatorService
     ],
     declarations: [
         FormLabelOperatorPipe