From 86209e43cd4b7f6799efcfdec88d6ecf8512e677 Mon Sep 17 00:00:00 2001
From: Daniel Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 20 Dec 2017 14:36:12 +0100
Subject: [PATCH] card item structure

---
 client/client/src/card/card.js         |  2 +-
 client/client/src/card/style.scss      | 12 -----------
 client/item/routes.json                | 15 +++++++++++---
 client/item/src/card/item-card.html    | 20 ++++++++++++++++++
 client/item/src/card/item-card.js      | 12 +++++++++++
 client/item/src/create/item-create.js  |  2 +-
 client/item/src/data/item-data.html    |  0
 client/item/src/data/item-data.js      |  0
 client/item/src/item.js                |  1 +
 client/item/src/list/item-product.html | 28 +++++++++++++-------------
 client/item/src/list/list.html         |  4 +++-
 client/item/src/list/style.css         |  4 ++--
 client/salix/src/styles/misc.scss      | 13 ++++++++++++
 13 files changed, 79 insertions(+), 34 deletions(-)
 delete mode 100644 client/client/src/card/style.scss
 create mode 100644 client/item/src/card/item-card.html
 create mode 100644 client/item/src/card/item-card.js
 create mode 100644 client/item/src/data/item-data.html
 create mode 100644 client/item/src/data/item-data.js

diff --git a/client/client/src/card/card.js b/client/client/src/card/card.js
index 560ca8f9e..9660ce3ce 100644
--- a/client/client/src/card/card.js
+++ b/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;
diff --git a/client/client/src/card/style.scss b/client/client/src/card/style.scss
deleted file mode 100644
index 74c5695c6..000000000
--- a/client/client/src/card/style.scss
+++ /dev/null
@@ -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;
-    }
-}
diff --git a/client/item/routes.json b/client/item/routes.json
index 8096f991f..61197e499 100644
--- a/client/item/routes.json
+++ b/client/item/routes.json
@@ -18,9 +18,18 @@
             "state": "item.create",
             "component": "vn-item-create"
         }, {
-            "url": "/:id/data",
-            "state": "item.data",
-            "component": "vn-item-data"
+            "url": "/:id",
+            "state": "item.card",
+            "abstract": true,
+            "component": "vn-item-card"
+        }, {
+            "url" : "/data",
+            "state": "item.card.data",
+            "component": "vn-item-data",
+            "menu": {
+                "description": "Basic data",
+                "icon": "folder"
+            }
         }
     ]
 }
\ No newline at end of file
diff --git a/client/item/src/card/item-card.html b/client/item/src/card/item-card.html
new file mode 100644
index 000000000..dc96049a8
--- /dev/null
+++ b/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>
diff --git a/client/item/src/card/item-card.js b/client/item/src/card/item-card.js
new file mode 100644
index 000000000..0783bb6bd
--- /dev/null
+++ b/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
+});
diff --git a/client/item/src/create/item-create.js b/client/item/src/create/item-create.js
index 139822c44..7723370e1 100644
--- a/client/item/src/create/item-create.js
+++ b/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})
         );
     }
 }
diff --git a/client/item/src/data/item-data.html b/client/item/src/data/item-data.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/item/src/data/item-data.js b/client/item/src/data/item-data.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/item/src/item.js b/client/item/src/item.js
index 908f0e46f..6eed86e86 100644
--- a/client/item/src/item.js
+++ b/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';
diff --git a/client/item/src/list/item-product.html b/client/item/src/list/item-product.html
index 951eabfc5..9e8fc1417 100644
--- a/client/item/src/list/item-product.html
+++ b/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-auto margin-medium-right ng-if="$ctrl.item.image">
-            <img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
-        </vn-auto>
-        <vn-one>
-            <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>Description</span>: <b>{{$ctrl.item.description}}</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>
-        </vn-one>
-    </vn-horizontal>
-</a>
+
+<vn-horizontal pad-medium border-solid-bottom>
+    <vn-auto margin-medium-right ng-if="$ctrl.item.image">
+        <img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
+    </vn-auto>
+    <vn-one>
+        <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>Description</span>: <b>{{$ctrl.item.description}}</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>
+    </vn-one>
+</vn-horizontal>
+
diff --git a/client/item/src/list/list.html b/client/item/src/list/list.html
index 81f59b9ad..00f498d4e 100644
--- a/client/item/src/list/list.html
+++ b/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>
diff --git a/client/item/src/list/style.css b/client/item/src/list/style.css
index 476406982..ca53151b9 100644
--- a/client/item/src/list/style.css
+++ b/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;
 }
diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss
index ddfe20a05..6ee45820d 100644
--- a/client/salix/src/styles/misc.scss
+++ b/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;
+    }
+}