Merge branch 'dev' of https://git.verdnatura.es/salix into dev

client/core/src/directives/index.js

@@ -5,3 +5,4 @@ import './validation';
 import './acl';
 import './on-error-src';
 import './zoom-image';
+import './visible-by';

client/core/src/directives/specs/zoom-image.spec.js

@@ -55,17 +55,17 @@ describe('Directive zoomImage', () => {
         let image = getCompiledImage(`<img src="${srcDefault}" zoom-image>`);
         image[0].click();
         findContainer = document.getElementById(idContainer);
-        let findNewImage = findContainer.querySelector('img');
+        let findNewImage = findContainer.querySelector('.zoomImage-background');
 
-        expect(findNewImage.src).toEqual(srcDefault);
+        expect(findNewImage.style.backgroundImage).toEqual(`url("${srcDefault}")`);
     });
 
     it('should create new image, into zoom container, with src likes zoomImage value', () => {
         let image = getCompiledImage(`<img src="${srcDefault}" zoom-image="${srcZoom}">`);
         image[0].click();
         findContainer = document.getElementById(idContainer);
-        let findNewImage = findContainer.querySelector('img');
+        let findNewImage = findContainer.querySelector('.zoomImage-background');
 
-        expect(findNewImage.src).toEqual(srcZoom);
+        expect(findNewImage.style.backgroundImage).toEqual(`url("${srcZoom}")`);
     });
 });

client/core/src/directives/visible-by.js

@@ -0,0 +1,17 @@
+import ngModule from '../module';
+
+function vnVisibleBy(aclService) {
+    return {
+        restrict: 'A',
+        priority: -1,
+        link: function($scope, $element, $attrs) {
+            let acls = $attrs.vnVisibleBy.split(',');
+            if (!aclService.aclPermission(acls)) {
+                $element[0].style.visibility = 'hidden';
+            }
+        }
+    };
+}
+vnVisibleBy.$inject = ['aclService'];
+
+ngModule.directive('vnVisibleBy', vnVisibleBy);

client/core/src/directives/zoom-image.js

@@ -4,7 +4,6 @@ export function directive($timeout) {
     let idContainer = 'zoomImage';
     let container;
     let background;
-    let image;
 
     function createContainers(src) {
         if (document.getElementById(idContainer)) {
@@ -15,31 +14,21 @@ export function directive($timeout) {
 
         background = document.createElement('div');
         background.className = 'zoomImage-background';
+        background.style.backgroundImage = `url(${src})`;
         container.appendChild(background);
 
-        image = document.createElement('img');
-        image.src = src;
-        container.appendChild(image);
-
         document.body.appendChild(container);
-
-        $timeout(() => {
-            resizeImage();
-            container.className = 'open';
-        }, 250);
     }
 
     function addListeners() {
         background.addEventListener('click', destroyContainers);
         document.addEventListener('keydown', e => keyDownHandler(e));
-        window.addEventListener('resize', resizeImage);
     }
 
     function removeListeners() {
         if (container) {
             background.removeEventListener('click', destroyContainers);
             document.removeEventListener('keydown', e => keyDownHandler(e));
-            window.removeEventListener('resize', resizeImage);
         }
     }
 
@@ -57,14 +46,6 @@ export function directive($timeout) {
 
         container = undefined;
         background = undefined;
-        image = undefined;
-    }
-
-    function resizeImage() {
-        if (image) {
-            image.style.marginLeft = `-${Math.floor(image.clientWidth / 2)}px`;
-            image.style.marginTop = `-${Math.floor(image.clientHeight / 2)}px`;
-        }
     }
 
     return {

client/core/src/styles/zoom-image.css

@@ -9,32 +9,11 @@ div#zoomImage, div#zoomImage .zoomImage-background {
     top: 0;
     z-index: 11;
 }
-div#zoomImage{
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
-}
 
 div#zoomImage .zoomImage-background{
-    background: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.7);
     cursor: zoom-out;
-}
-div#zoomImage img{
-    z-index: 12;
-    position: fixed;
-    max-height: 98%;
-    max-width: 98%;
-    left: 50%;
-    top: 50%;
-    opacity: 0;
-    transition: visibility 0s, opacity 1s linear;
-}
-
-div#zoomImage.open {
-    visibility: visible;
-    opacity: 1;
-}
-
-div#zoomImage.open img{
-    visibility: visible;
-    opacity: 1;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: auto 98%;
 }

client/item/routes.json

@@ -79,17 +79,6 @@
                 "description": "Botanical",
                 "icon": "folder"
             }
-        },{
-            "url" : "/picture",
-            "state": "item.card.picture",
-            "component": "vn-item-picture",
-            "params": {
-                "item": "$ctrl.item"
-            },
-            "menu": {
-                "description": "Picture",
-                "icon": "folder"
-            }
         },{
             "url" : "/barcode",
             "state": "item.card.barcode",

client/item/src/descriptor/item-descriptor.html

@@ -3,10 +3,14 @@
         <vn-auto class="descriptor-header pointer" ui-sref="item.index">
             <img ng-src="/static/images/icon_item.png"/>
         </vn-auto>
-        <vn-auto  pad-medium text-center>
+        <vn-auto style="position: relative" pad-medium text-center>
             <img 
-                ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" 
-                zoom-image="http://verdnatura.es/vn-image-data/catalog/900x900/{{$ctrl.item.image}}" on-error-src/>
+                ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{::$ctrl.item.image}}" 
+                zoom-image="http://verdnatura.es/vn-image-data/catalog/900x900/{{::$ctrl.item.image}}" on-error-src/>
+                <a href="https://www.verdnatura.es/#!form=admin/items&filter={{::$ctrl.item.id}}" target="_blank"><vn-float-button icon="edit" 
+                    style="position: absolute; bottom: 1em; right: 1em;" 
+                    vn-visible-by="administrative"></vn-float-button>
+                </a>
         </vn-auto>
         <vn-auto pad-medium>
                 <div><span translate>Id</span>: <b>{{$ctrl.item.id}}</b></div>

client/item/src/item.js

@@ -11,6 +11,5 @@ import './tags/item-tags';
 import './history/item-history';
 import './niche/item-niche';
 import './botanical/item-botanical';
-import './picture/item-picture';
 import './barcode/item-barcode';
 

client/item/src/list/list.html

@@ -8,8 +8,7 @@
                     on-search="$ctrl.search(index)"
                     advanced="true"
                     popover="vn-item-filter-panel"
-                    ignore-keys = "['page', 'size', 'search']"
-                    >
+                    ignore-keys = "['page', 'size', 'search']">
                 </vn-searchbar>
             </vn-horizontal>
         </vn-card>

client/item/src/locale/es.yml

@@ -13,7 +13,6 @@ Item history: Historial del artículo
 Item tags: Tags del artículo
 Niche: Nicho
 Picture: Foto
-Item pictures: Fotos del artículo
 Barcode: Código barras
 Item barcode: Código de barras del artículo
 Changed by: Cambiado por

client/item/src/picture/item-picture.html

@@ -1,5 +0,0 @@
-<vn-card>
-    <vn-vertical pad-large>
-        <vn-title>Item pictures</vn-title>
-    </vn-vertical>
-</vn-card>

client/item/src/picture/item-picture.js

@@ -1,5 +0,0 @@
-import ngModule from '../module';
-
-ngModule.component('vnItemPicture', {
-    template: require('./item-picture.html')
-});