salix/modules/zone/front/delivery-days/index.html

<div class="vn-w-md">
    <vn-zone-calendar
        data="data"
        on-selection="$ctrl.onSelection($event, $events)">
    </vn-zone-calendar>
</div>
<vn-side-menu side="right">
    <form ng-submit="$ctrl.onSubmit()" class="vn-pa-md">
        <vn-radio
            label="Pick up"
            val="pickUp"
            ng-model="$ctrl.deliveryMethodFk">
        </vn-radio>
        <vn-radio
            label="Delivery"
            val="delivery"
            ng-model="$ctrl.deliveryMethodFk"
            class="vn-mb-sm">
        </vn-radio>
        <vn-autocomplete
            vn-one
            ng-if="$ctrl.deliveryMethodFk === 'delivery'"
            vn-focus
            label="Postcode"
            ng-model="params.geoFk"
            url="Postcodes/location"
            fields="['code','townFk']"
            order="code, townFk"
            value-field="geoFk"
            show-field="code">
            <tpl-item>
                <div>
                    {{code}} {{town.name}}
                </div>
                <div class="text-caption text-secondary">
                    {{town.province.name}}, {{town.province.country.country}}
                </div>
            </tpl-item>
        </vn-autocomplete>
        <vn-autocomplete
            label="{{$ctrl.deliveryMethodFk == 'delivery' ? 'Agency' : 'Warehouse'}}"
            ng-model="params.agencyModeFk"
            url="AgencyModes/isActive"
            where="$ctrl.agencyFilter"
            vn-id="agencymode">
        </vn-autocomplete>
        <vn-submit label="Query" class="vn-mt-sm"></vn-submit>
    </form>
</vn-side-menu>

<vn-crud-model vn-id="zoneModel"
    url="Zones"
    filter="::$ctrl.filter"
    limit="20"
    data="zones"
    auto-load="false">
</vn-crud-model>

<!-- Zone Popover -->
<vn-popover vn-id="zoneEvents">
    <div class="zoneEvents">
        <div class="header vn-pa-sm" translate>Zones</div>
        <vn-data-viewer
            model="zoneModel"
            class="vn-w-md vn-mb-xl">
            <vn-card>
            <vn-table model="zoneModel">
                <vn-thead>
                    <vn-tr>
                        <vn-th field="id" number>Id</vn-th>
                        <vn-th field="name" expand>Name</vn-th>
                        <vn-th field="agencyModeFk">Agency</vn-th>
                        <vn-th field="hour" shrink>Closing</vn-th>
                        <vn-th field="price" number>Price</vn-th>
                        <vn-th shrink></vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr
                        ng-repeat="zone in zoneModel.data"
                        ui-sref="zone.card.summary({id: zone.id})"
                        class="clickable search-result">
                        <vn-td number>{{::zone.id}}</vn-td>
                        <vn-td expand>{{::zone.name}}</vn-td>
                        <vn-td>{{::zone.agencyMode.name}}</vn-td>
                        <vn-td shrink>{{::zone.hour | date: 'HH:mm'}}</vn-td>
                        <vn-td number>{{::zone.price | currency: 'EUR':2}}</vn-td>
                        <vn-td shrink>
                            <vn-horizontal class="buttons">
                                <vn-icon-button
                                    vn-click-stop="$ctrl.preview(zone)"
                                    vn-tooltip="Preview"
                                    icon="desktop_windows">
                                </vn-icon-button>
                            </vn-horizontal>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
            </vn-card>
        </vn-data-viewer>
    </div>
</vn-popover>
<vn-popup vn-id="summary">
    <vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
</vn-popup>