card item structure

client/client/src/card/card.js

@@ -1,5 +1,5 @@
 import ngModule from '../module';
-import './style.scss';
+
 export default class Controller {
     constructor() {
         this.client = null;

client/client/src/card/style.scss

@@ -1,12 +0,0 @@
-vn-main-block {
-    display:block; 
-    max-width: 1920px; 
-    width:100%; 
-    margin: 0 auto;
-
-    .left-block {
-        min-width: 18em; 
-        padding-left: 1em; 
-        padding-bottom: 1em;
-    }
-}

client/item/routes.json

@@ -18,9 +18,18 @@
             "state": "item.create",
             "component": "vn-item-create"
         }, {
-            "url": "/:id/data",
+            "url": "/:id",
-            "state": "item.data",
+            "state": "item.card",
-            "component": "vn-item-data"
+            "abstract": true,
+            "component": "vn-item-card"
+        }, {
+            "url" : "/data",
+            "state": "item.card.data",
+            "component": "vn-item-data",
+            "menu": {
+                "description": "Basic data",
+                "icon": "folder"
+            }
         }
     ]
 }

client/item/src/card/item-card.html

@@ -0,0 +1,20 @@
+<vn-main-block>
+    <mg-ajax
+        path="/item/api/Items/{{edit.params.id}}"
+        actions="$ctrl.item = edit.model"
+        options="mgEdit">
+    </mg-ajax>
+    <vn-horizontal>
+        <vn-auto class="left-block">
+            <vn-card margin-medium-v>
+                <a class="item-product-link" ui-sref="item.index">
+                    <vn-item-product item="$ctrl.item"></vn-item-product>
+                </a>
+            </vn-card>
+            <vn-left-menu></vn-left-menu>
+        </vn-auto>
+        <vn-one>
+            <vn-vertical ui-view></vn-vertical>
+        </vn-one>
+    </vn-horizontal>
+</vn-main-block>

client/item/src/card/item-card.js

@@ -0,0 +1,12 @@
+import ngModule from '../module';
+
+class ItemCard {
+    constructor() {
+        this.item = {};
+    }
+}
+
+ngModule.component('vnItemCard', {
+    template: require('./item-card.html'),
+    controller: ItemCard
+});

client/item/src/create/item-create.js

@@ -7,7 +7,7 @@ class ItemCreate {
 
     onSubmit() {
         this.$.watcher.submit().then(
-            json => this.$state.go('item.data', {id: json.data.id})
+            json => this.$state.go('item.card.basic', {id: json.data.id})
         );
     }
 }

client/item/src/item.js

@@ -3,3 +3,4 @@ export * from './module';
 import './list/list';
 import './filter-panel/filter-panel';
 import './create/item-create';
+import './card/item-card';

client/item/src/list/item-product.html

@@ -1,14 +1,14 @@
-<a ui-sref="item.data({ id: {{$ctrl.item.id}} })" pad-medium border-solid-bottom>
+
-    <vn-horizontal>
+<vn-horizontal pad-medium border-solid-bottom>
-        <vn-auto margin-medium-right ng-if="$ctrl.item.image">
+    <vn-auto margin-medium-right ng-if="$ctrl.item.image">
-            <img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
+        <img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
-        </vn-auto>
+    </vn-auto>
-        <vn-one>
+    <vn-one>
-            <div><span translate>Id</span>: <b>{{$ctrl.item.id}}</b></div>
+        <div><span translate>Id</span>: <b>{{$ctrl.item.id}}</b></div>
-            <div><span translate>Category</span>: <b>{{$ctrl.item.category}}</b></div>
+        <div><span translate>Category</span>: <b>{{$ctrl.item.category}}</b></div>
-            <div><span translate>Description</span>: <b>{{$ctrl.item.description}}</b></div>
+        <div><span translate>Description</span>: <b>{{$ctrl.item.description}}</b></div>
-            <div><span translate>Size</span>: <b>{{$ctrl.item.size}}</b></div>
+        <div><span translate>Size</span>: <b>{{$ctrl.item.size}}</b></div>
-            <div><span translate>Type</span>: <b>{{$ctrl.item.itemType.name}}</b></div>
+        <div><span translate>Type</span>: <b>{{$ctrl.item.itemType.name}}</b></div>
-        </vn-one>
+    </vn-one>
-    </vn-horizontal>
+</vn-horizontal>
-</a>
+

client/item/src/list/list.html

@@ -14,7 +14,9 @@
             </vn-horizontal>
         </vn-card>
         <vn-card margin-medium-top>
-            <vn-item-product ng-repeat="item in index.model.instances" title="View item" item="item"></vn-item-product>
+            <a class="item-product-link" ng-repeat="item in index.model.instances" ui-sref="item.card.data({ id: {{item.id}} })" >
+                <vn-item-product  title="View item" item="item"></vn-item-product>
+            </a>
         </vn-card>
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>

client/item/src/list/style.css

@@ -1,12 +1,12 @@
 vn-item-product {
     display: block;
 }
-vn-item-product a {
+a.item-product-link {
     display: block;
     text-decoration: none;
     color: inherit;
 }
-vn-item-product a:hover {
+a.item-product-link:hover {
     color: white;
     background-color: #424242;
 }

client/salix/src/styles/misc.scss

@@ -99,3 +99,16 @@ html [pointer], .pointer{
 html [noDrop], .noDrop{
     cursor: no-drop;
 }
+
+vn-main-block {
+    display:block; 
+    max-width: 1920px; 
+    width:100%; 
+    margin: 0 auto;
+
+    .left-block {
+        min-width: 18em; 
+        padding-left: 1em; 
+        padding-bottom: 1em;
+    }
+}