#636 item.index

client/core/src/components/fetched-tags/index.html

@@ -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>

client/core/src/components/fetched-tags/index.js

@@ -1,4 +1,4 @@
-import ngModule from '../module';
+import ngModule from '../../module';
 import './style.scss';
 
 ngModule.component('vnFetchedTags', {

client/core/src/components/fetched-tags/style.scss

@@ -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
+    }
+}

client/core/src/components/index.js

@@ -41,3 +41,4 @@ import './input-range';
 import './chip';
 import './input-number';
 import './input-time';
+import './fetched-tags';

client/item/src/index/product.html

@@ -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}}"
+                    class="image"
-                zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::$ctrl.item.image}}"
+                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::$ctrl.item.image}}" 
-                on-error-src/>
+                    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>
+            <h6>{{::$ctrl.item.id}} - {{::$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>
             <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

client/item/src/index/product.js

@@ -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);

client/item/src/index/style.scss

@@ -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;
+    }
 }

client/ticket/src/fetched-tags/style.scss

@@ -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
-            }
-        }
-    }
-}

client/ticket/src/ticket.js

@@ -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';