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

library for TFabrica - TechSol

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

    <div style="max-width: 500px;">

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

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

            <ul class="list-group" dnd-sortable-container [sortableData]="fields">
                <li *ngFor="let field of fields; let i = index"
                    class="list-group-item" dnd-sortable [sortableIndex]="i">

                    <div fxLayout="row"
                         fxFlex fxLayoutAlign="center center">
                        <div fxFlex="20">
                            <md-icon>reorder</md-icon>
                        </div>
                        <div fxFlex >
                            <h4 style="margin-top:3px;">{{field.label}}</h4>
                        </div>
                        <!--
                        <div fxFlex="40">
                            <h4>{{field.name}}</h4>
                        </div>
                            -->
                        <div fxFlex="10">
                            <md-checkbox [checked]="field.display" (change)="changeDisplay($event, field)"></md-checkbox>
                        </div>
                    </div>

                </li>
            </ul>

        </div>
    </div>
</div>