tfabrica/ClientApp/app/components/crud/tfabrica.crud.filterfields.component.html

library for TFabrica - TechSol

<div fxFlex
     style="padding:20px;"
     fxLayout="column"
     fxLayoutAlign="start center">
    <md-progress-bar *ngIf="loading" mode="indeterminate"></md-progress-bar>

    <div style="width:100%;">
        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
            <h3>Ricerca:</h3>
            <span fxFlex=""></span>
            <button md-mini-fab
                    color="primary"
                    (click)="startSearch()">
                <md-icon>search</md-icon>
            </button>
        </div>
    </div>
    <br />

    <div style="width:100%;">

        <div *ngFor="let filter of filters" >
            
            <div *ngIf="filter.isRange">
                <div fxLayout="row">

                    <md-input-container>
                        <input md-input mdInput type="{{filter.type}}"
                               name="{{filter.name}}" id="{{filter.valueLow}}"
                                required="{{filter.isMandatory}}" placeholder="{{filter.label | translate }} From:" [(ngModel)]="filter.valueLow">
                    </md-input-container>
                    <p>&nbsp;</p>
                    <md-input-container>
                        <input md-input mdInput type="{{filter.type}}"
                               id="{{filter.valueHigh}}"
                               required="{{filter.isMandatory}}" placeholder="{{filter.label | translate }} To:" [(ngModel)]="filter.valueHigh">
                    </md-input-container>
                </div>
            </div> 
            <div *ngIf="filter.isMulti">
                <div fxLayout="column">
                    <!--<md-input-container>
<!--                        <input md-input mdInput
                               name="{{filter.name}}" id="{{filter.valueLow}}"
                               required="{{filter.isMandatory}}" placeholder="{{filter.label | translate }} From:" [(ngModel)]="filter.valueLow">
                    </md-input-container>-->
                    <md-select  placeholder="{{filter.label}}" [(ngModel)]="filter.valueLow" (ngModelChange)="addItem(filter)" >
                        <md-option *ngFor="let value of filter.values" [value]="value.value">{{ value.label  | translate }}</md-option>
                    </md-select>
                    
                        <md-chip-list>
                            <md-chip *ngFor="let chip of filter.values | selectedValuesPipe" (click)="removeItem(chip)">
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    {{chip.label}} 
                                    <div style="font-size: 16px" >&nbsp;x</div>
                                </div>
                                </md-chip>            
                        </md-chip-list>
                        </div >
                    
            </div> 
            <div *ngIf="!filter.isMulti && !filter.isRange">
                <div fxLayout="row">
                    <md-input-container>
                        <input md-input mdInput
                               name="{{filter.name}}" id="{{filter.valueLow}}"
                               required="{{filter.isMandatory}}" placeholder="{{filter.label | translate }} From:" [(ngModel)]="filter.valueLow">
                    </md-input-container>
                </div>
            </div> 


        </div>
    </div>

</div>