<vn-data-viewer model="$ctrl.model"> <vn-horizontal class="catalog-list"> <section ng-repeat="item in $ctrl.model.data" class="product"> <vn-card> <div class="image"> <div ng-if="::item.hex != null" class="item-color-background"> <div class="item-color" ng-style="{'background-color': '#' + item.hex}"></div> </div> <img ng-src="{{::$root.imagePath('catalog', '200x200', item.id)}}" zoom-image="{{::$root.imagePath('catalog', '1600x900', item.id)}}" on-error-src/> </div> <div class="description"> <h3 class="link" ng-click="itemDescriptor.show($event, item.id)"> {{::item.name}} </h3> <h4 class="ellipsize"> <span translate-attr="::{title: item.subName}">{{::item.subName}}</span> </h4> <div class="tags"> <vn-label-value ng-if="::item.value5" label="{{::item.tag5}}" value="{{::item.value5}}"> </vn-label-value> <vn-label-value ng-if="::item.value6" label="{{::item.tag6}}" value="{{::item.value6}}"> </vn-label-value> <vn-label-value ng-if="::item.value7" label="{{::item.tag7}}" value="{{::item.value7}}"> </vn-label-value> </div> <vn-horizontal class="text-right text-caption alert vn-mr-xs" ng-if="::item.minQuantity"> <vn-one> <vn-icon icon="production_quantity_limits" translate-attr="{title: 'Minimal quantity'}" class="text-subtitle1"> </vn-icon> </vn-one> {{::item.minQuantity}} </vn-horizontal> <div class="footer"> <div class="price"> <vn-one> <span>{{::item.available}}</span> <span translate>to</span> <span>{{::item.price | currency:'EUR':2}}</span> </vn-one> <vn-icon-button vn-none icon="add_circle" ng-click="pricesPopover.show($event, item)" vn-tooltip="Add"> </vn-icon-button> </div> <div class="priceKg" ng-show="::item.priceKg"> <span>Precio por kilo {{::item.priceKg | currency: 'EUR'}}</span> </div> </div> </div> </vn-card> </section> </vn-horizontal> </vn-data-viewer> <vn-order-prices-popover vn-id="prices-popover" order="$ctrl.order"> </vn-order-prices-popover> <vn-item-descriptor-popover vn-id="item-descriptor" warehouse-fk="$ctrl.vnConfig.warehouseFk"> </vn-item-descriptor-popover>