#636 item.index
This commit is contained in:
Gerard
parent
6186900b02
commit
1a116df136
|
|
@ -1,11 +1,11 @@
|
|||
<vn-horizontal>
|
||||
<vn-one>{{::$ctrl.concept}}</vn-one>
|
||||
<vn-auto class="tags">
|
||||
<vn-two>
|
||||
<section
|
||||
class="inline-tag ellipsize" ng-class="{'empty': !fetchedTag.value}"
|
||||
ng-repeat="fetchedTag in $ctrl.tags track by $index"
|
||||
vn-tooltip="{{::fetchedTag.tag.name}}: {{::fetchedTag.value}}">
|
||||
{{::fetchedTag.value}}
|
||||
</section>
|
||||
</vn-auto>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import ngModule from '../module';
|
||||
import ngModule from '../../module';
|
||||
import './style.scss';
|
||||
|
||||
ngModule.component('vnFetchedTags', {
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
@import "colors";
|
||||
|
||||
vn-fetched-tags {
|
||||
@media screen and (max-width: 1600px){
|
||||
& vn-horizontal {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
& > vn-one {
|
||||
padding: 0 0 0.2em 0;
|
||||
}
|
||||
|
||||
& > vn-two {
|
||||
text-align: center;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.inline-tag {
|
||||
font-size: 0.7em;
|
||||
padding: 0.3em
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px){
|
||||
& vn-horizontal {
|
||||
.inline-tag {
|
||||
font-size: 0.6em;
|
||||
padding: 0.2em
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& vn-one {
|
||||
padding-top: 0.2em
|
||||
}
|
||||
|
||||
& vn-two {
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
& .inline-tag {
|
||||
background-color: $secondary-font-color;
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
margin-right: 0.4em;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
height: 1.25em;
|
||||
padding: 0.4em;
|
||||
width: 5em
|
||||
}
|
||||
|
||||
& .inline-tag.empty {
|
||||
background-color: $main-bg
|
||||
}
|
||||
}
|
||||
|
|
@ -41,3 +41,4 @@ import './input-range';
|
|||
import './chip';
|
||||
import './input-number';
|
||||
import './input-time';
|
||||
import './fetched-tags';
|
||||
|
|
|
|||
|
|
@ -3,29 +3,24 @@
|
|||
translate-attr="{title: 'View item'}"
|
||||
class="vn-list-item">
|
||||
<vn-horizontal ng-click="$ctrl.onClick($event)">
|
||||
<vn-auto class="image" margin-medium-right>
|
||||
|
||||
<vn-auto margin-medium-right>
|
||||
<vn-one>
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::$ctrl.item.image}}"
|
||||
on-error-src/>
|
||||
class="image"
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::$ctrl.item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::$ctrl.item.image}}" on-error-src/>
|
||||
</vn-one>
|
||||
</vn-auto>
|
||||
<vn-one>
|
||||
<h6 translate>{{::$ctrl.item.name}}</h6>
|
||||
<vn-label-value label="Id"
|
||||
value="{{::$ctrl.item.id}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Description"
|
||||
value="{{::$ctrl.item.description}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Size"
|
||||
value="{{::$ctrl.item.size}}">
|
||||
</vn-label-value>
|
||||
<h6>{{::$ctrl.item.id}} - {{::$ctrl.item.name}}</h6>
|
||||
<vn-label-value label="Type"
|
||||
value="{{::$ctrl.item.type}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value label="Buyer"
|
||||
value="{{::$ctrl.item.firstName}} {{::$ctrl.item.worker}}">
|
||||
</vn-label-value>
|
||||
<vn-fetched-tags tags="$ctrl.item.tags"/>
|
||||
</vn-one>
|
||||
<vn-horizontal class="buttons">
|
||||
<vn-icon
|
||||
|
|
|
|||
|
|
@ -6,6 +6,26 @@ class ItemProduct {
|
|||
event.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
set item(value) {
|
||||
if (value) {
|
||||
let tags = [];
|
||||
for (let i = 5; i < 9; i++) {
|
||||
if (value['tag' + i]) {
|
||||
let tagValue = value['value' + i];
|
||||
let tagKey = value['tag' + i];
|
||||
tags.push({tag: {name: tagKey}, value: tagValue});
|
||||
}
|
||||
}
|
||||
value.tags = tags;
|
||||
}
|
||||
|
||||
this._item = value;
|
||||
}
|
||||
|
||||
get item() {
|
||||
return this._item;
|
||||
}
|
||||
|
||||
clone(event) {
|
||||
event.preventDefault();
|
||||
this.index.cloneItem(this.item);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
@import "./colors";
|
||||
@import 'colors';
|
||||
|
||||
vn-item-product {
|
||||
display: block;
|
||||
|
||||
.id {
|
||||
background-color: $main-01;
|
||||
color: white;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.image {
|
||||
height: 7em;
|
||||
width: 7em;
|
||||
|
|
@ -13,4 +18,10 @@ vn-item-product {
|
|||
border-radius: .2em;
|
||||
}
|
||||
}
|
||||
vn-label-value:first-of-type section{
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
vn-fetched-tags vn-horizontal{
|
||||
margin-top: 0.9em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
@import "colors";
|
||||
|
||||
vn-fetched-tags {
|
||||
& > vn-horizontal {
|
||||
align-items: center;
|
||||
|
||||
& > .tags {
|
||||
padding: 0;
|
||||
max-width: 500px;
|
||||
}
|
||||
.inline-tag {
|
||||
background-color: $secondary-font-color;
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
margin-right: .4em;
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
height: 1.25em;
|
||||
padding: 0.4em;
|
||||
width: 5em
|
||||
}
|
||||
.inline-tag.empty {
|
||||
background-color: $main-bg
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px){
|
||||
& > vn-horizontal {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.tags {
|
||||
padding-top: 0.2em
|
||||
}
|
||||
.inline-tag {
|
||||
font-size: .7em;
|
||||
padding: .3em
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px){
|
||||
vn-horizontal {
|
||||
.inline-tag {
|
||||
font-size: .6em;
|
||||
padding: .2em
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,6 @@ import './sale';
|
|||
import './sale/editDiscount';
|
||||
import './tracking/index';
|
||||
import './tracking/edit';
|
||||
import './fetched-tags';
|
||||
import './sale-checked';
|
||||
import './component';
|
||||
import './sale-tracking';
|
||||
|
|
|
|||
Loading…
Reference in New Issue