New module Item in progress

client/item/routes.json

@@ -26,10 +26,24 @@
             "url" : "/data",
             "state": "item.card.data",
             "component": "vn-item-data",
+            "params": {
+                "item": "$ctrl.item"
+            },
             "menu": {
                 "description": "Basic data",
                 "icon": "folder"
             }
+        }, {
+            "url" : "/image",
+            "state": "item.card.image",
+            "component": "vn-item-image",
+            "params": {
+                "item": "$ctrl.item"
+            },
+            "menu": {
+                "description": "Images",
+                "icon": "image"
+            }
         }
     ]
 }

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

@@ -1,20 +1,16 @@
 <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">
+                <a class="item-product-link pad-large text-center" ui-sref="item.index">
-                    <vn-item-product item="$ctrl.item"></vn-item-product>
+                    <b>{{$ctrl.item.name}}</b>
+                    <img ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" />
                 </a>
             </vn-card>
             <vn-left-menu></vn-left-menu>
         </vn-auto>
         <vn-one>
-            <vn-vertical ui-view></vn-vertical>
+            <vn-vertical margin-medium ui-view></vn-vertical>
         </vn-one>
     </vn-horizontal>
 </vn-main-block>

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

@@ -1,10 +1,30 @@
 import ngModule from '../module';
 
 class ItemCard {
-    constructor() {
+    constructor($http, $state) {
+        this.$http = $http;
+        this.$state = $state;
         this.item = {};
     }
+
+    $onInit() {
+        let filter = {
+            include: [
+                {relation: "itemType"},
+                {relation: "origin"},
+                {relation: "ink"},
+                {relation: "producer"},
+                {relation: "intrastat"}
+            ]
+        };
+        this.$http.get(`/item/api/Items/${this.$state.params.id}?filter=${JSON.stringify(filter)}`).then(
+            res => {
+                this.item = res.data;
             }
+        );
+    }
+}
+ItemCard.$inject = ['$http', '$state'];
 
 ngModule.component('vnItemCard', {
     template: require('./item-card.html'),

client/item/src/create/item-create.html

@@ -56,6 +56,7 @@
                         field="$ctrl.item.producerFk"
                     >
                     </vn-autocomplete>
+                </vn-horizontal>
             </vn-vertical>
         </vn-card>
         <vn-button-bar>

client/item/src/data/item-data.html

@@ -0,0 +1,84 @@
+
+<mg-ajax 
+    path="/item/api/Items/{{patch.params.id}}" 
+    options="vnPatch" 
+    override="{filter: {include: [{relation: 'itemType'}, {relation: 'origin'}, {relation: 'ink'}, {relation: 'producer'}]}}"
+    >
+</mg-ajax>
+<vn-watcher
+    vn-id="watcher"
+    data="$ctrl.item"
+    form="form"
+    save="patch">
+</vn-watcher>
+<form name="form" ng-submit="watcher.submit()" ng-cloak>
+    <vn-card>
+        <vn-vertical pad-large>
+            <vn-title>Basic data</vn-title>
+            <vn-horizontal>
+                <vn-textfield vn-three label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
+                <vn-textfield vn-one label="Size" field="$ctrl.item.size"></vn-textfield>
+                <vn-textfield vn-one label="Stems" field="$ctrl.item.stems"></vn-textfield>
+                <vn-textfield vn-one label="Category" field="$ctrl.item.category"></vn-textfield>
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-textfield vn-one label="Description" field="$ctrl.item.description"></vn-textfield>
+                <vn-autocomplete vn-one
+                    url="/item/api/Intrastats"
+                    label="Intrastat"
+                    show-field="description"
+                    value-field="id"
+                    field="$ctrl.item.intrastatFk"
+                    initial-data="$ctrl.item.intrastat"
+                    order = "description DESC"
+                    filter-search="{where: {description: {regexp: 'search'}}}"
+                >
+                    <tpl-item>{{$parent.$parent.item.description}}</tpl-item>
+                </vn-autocomplete>
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-autocomplete vn-one
+                    url="/item/api/ItemTypes"
+                    label="Type"
+                    show-field="name"
+                    value-field="id"
+                    field="$ctrl.item.typeFk"
+                    initial-data="$ctrl.item.itemType"
+                >
+                </vn-autocomplete>
+                <vn-autocomplete vn-one
+                    url="/item/api/Inks"
+                    label="Ink"
+                    show-field="name"
+                    value-field="id"
+                    field="$ctrl.item.inkFk"
+                    initial-data="$ctrl.item.ink"
+                >
+                </vn-autocomplete>
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-autocomplete vn-one
+                    url="/item/api/Origins"
+                    label="Origin"
+                    show-field="name"
+                    value-field="id"
+                    field="$ctrl.item.originFk"
+                    initial-data="$ctrl.item.origin"
+                >
+                </vn-autocomplete>
+                <vn-autocomplete vn-one
+                    url="/item/api/Producers"
+                    label="Producer"
+                    show-field="name"
+                    value-field="id"
+                    field="$ctrl.item.producer"
+                >
+                </vn-autocomplete>
+            </vn-horizontal>
+        </vn-vertical>
+    </vn-card>
+    <vn-button-bar>
+            <vn-submit label="Save"></vn-submit>
+    </vn-button-bar>
+</form>
+

client/item/src/data/item-data.js

@@ -0,0 +1,8 @@
+import ngModule from '../module';
+
+ngModule.component('vnItemData', {
+    template: require('./item-data.html'),
+    bindings: {
+        item: '<'
+    }
+});

client/item/src/item.js

@@ -4,3 +4,4 @@ import './list/list';
 import './filter-panel/filter-panel';
 import './create/item-create';
 import './card/item-card';
+import './data/item-data';

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

@@ -5,7 +5,7 @@
     </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>Name</span>: <b>{{$ctrl.item.name}}</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>

client/salix/src/styles/misc.scss

@@ -107,6 +107,7 @@ vn-main-block {
     margin: 0 auto;
 
     .left-block {
+        max-width: 20em; 
         min-width: 18em; 
         padding-left: 1em; 
         padding-bottom: 1em;