Merge pull request '2677 - Added rating component to order catalog' (#520) from 2677-rating_component into dev

Reviewed-on: #520
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>

db/dump/fixtures.sql

@@ -770,25 +770,25 @@ INSERT INTO `vn`.`intrastat`(`id`, `description`, `taxClassFk`, `taxCodeFk`)
         (05080000, 'Coral y materiales similares',        2, 2),
         (06021010, 'Plantas vivas: Esqueje/injerto, Vid', 1, 1);
 
-INSERT INTO `vn`.`item`(`id`, `typeFk`, `size`, `inkFk`, `stems`, `originFk`, `description`, `producerFk`, `intrastatFk`, `isOnOffer`, `expenceFk`, `isBargain`, `comment`, `relevancy`, `image`, `taxClassFk`, `subName`, `minPrice`)
+INSERT INTO `vn`.`item`(`id`, `typeFk`, `size`, `inkFk`, `stems`, `originFk`, `description`, `producerFk`, `intrastatFk`, `isOnOffer`, `expenceFk`, `isBargain`, `comment`, `relevancy`, `image`, `taxClassFk`, `subName`, `minPrice`, `stars`)
     VALUES
-        (1,  2, 70,   'YEL', 1,    1, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '1',     1, NULL, 0),
+        (1,  2, 70,   'YEL', 1,    1, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '1',     1, NULL, 0, 1),
-        (2,  2, 70,   'BLU', 1,    2, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '2',     1, NULL, 0),
+        (2,  2, 70,   'BLU', 1,    2, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '2',     1, NULL, 0, 2),
-        (3,  1, 60,   'YEL', 1,    3, NULL,              1,    05080000, 0, 4751000000, 0, NULL, 0, '3',     1, NULL, 0),
+        (3,  1, 60,   'YEL', 1,    3, NULL,              1,    05080000, 0, 4751000000, 0, NULL, 0, '3',     1, NULL, 0, 5),
-        (4,  1, 60,   'YEL', 1,    1, 'Increases block', 1,    05080000, 1, 4751000000, 0, NULL, 0, '4',     2, NULL, 0),
+        (4,  1, 60,   'YEL', 1,    1, 'Increases block', 1,    05080000, 1, 4751000000, 0, NULL, 0, '4',     2, NULL, 0, 3),
-        (5,  3, 30,   'RED', 1,    2, NULL,              2,    06021010, 1, 4751000000, 0, NULL, 0, '5',     2, NULL, 0),
+        (5,  3, 30,   'RED', 1,    2, NULL,              2,    06021010, 1, 4751000000, 0, NULL, 0, '5',     2, NULL, 0, 3),
-        (6,  5, 30,   'RED', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '6',     2, NULL, 0),
+        (6,  5, 30,   'RED', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '6',     2, NULL, 0, 4),
-        (7,  5, 90,   'BLU', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '7',     2, NULL, 0),
+        (7,  5, 90,   'BLU', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '7',     2, NULL, 0, 4),
-        (8,  2, 70,   'YEL', 1,    1, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '8',     1, NULL, 0),
+        (8,  2, 70,   'YEL', 1,    1, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '8',     1, NULL, 0, 5),
-        (9,  2, 70,   'BLU', 1,    2, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '9',     1, NULL, 0),
+        (9,  2, 70,   'BLU', 1,    2, NULL,              1,    06021010, 0, 2000000000, 0, NULL, 0, '9',     1, NULL, 0, 4),
-        (10, 1, 60,   'YEL', 1,    3, NULL,              1,    05080000, 0, 4751000000, 0, NULL, 0, '10',     1, NULL, 0),
+        (10, 1, 60,   'YEL', 1,    3, NULL,              1,    05080000, 0, 4751000000, 0, NULL, 0, '10',     1, NULL, 0, 4),
-        (11, 1, 60,   'YEL', 1,    1, NULL,              1,    05080000, 1, 4751000000, 0, NULL, 0, '11',     2, NULL, 0),
+        (11, 1, 60,   'YEL', 1,    1, NULL,              1,    05080000, 1, 4751000000, 0, NULL, 0, '11',     2, NULL, 0, 4),
-        (12, 3, 30,   'RED', 1,    2, NULL,              2,    06021010, 1, 4751000000, 0, NULL, 0, '12',     2, NULL, 0),
+        (12, 3, 30,   'RED', 1,    2, NULL,              2,    06021010, 1, 4751000000, 0, NULL, 0, '12',     2, NULL, 0, 3),
-        (13, 5, 30,   'RED', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '13',     2, NULL, 0),
+        (13, 5, 30,   'RED', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '13',     2, NULL, 0, 2),
-        (14, 5, 90,   'BLU', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '',     2, NULL, 0),
+        (14, 5, 90,   'BLU', 1,    2, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '',     2, NULL, 0, 4),
-        (15, 4, NULL,  NULL, NULL, 1, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '',     2, NULL, 0),
+        (15, 4, NULL,  NULL, NULL, 1, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '',     2, NULL, 0, 0),
-        (16, 4, NULL,  NULL, NULL, 1, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '',     2, NULL, 0),
+        (16, 4, NULL,  NULL, NULL, 1, NULL,              NULL, 06021010, 0, 4751000000, 0, NULL, 0, '',     2, NULL, 0, 0),
-        (71, 4, NULL,  NULL, NULL, 1, NULL,              NULL, 06021010, 1, 4751000000, 0, NULL, 0, '',     2, NULL, 0);
+        (71, 4, NULL,  NULL, NULL, 1, NULL,              NULL, 06021010, 1, 4751000000, 0, NULL, 0, '',     2, NULL, 0, 0);
 
 INSERT INTO `vn`.`priceFixed`(`id`, `itemFk`, `rate0`, `rate1`, `rate2`, `rate3`, `started`, `ended`, `bonus`, `warehouseFk`, `created`)
     VALUES

e2e/paths/10-travel/04_extra_community.spec.js

@@ -20,6 +20,7 @@ describe('Travel extra community path', () => {
         await page.waitToClick(selectors.travelExtraCommunity.removeContinentFilter);
         await page.waitForSpinnerLoad();
         await page.writeOnEditableTD(selectors.travelExtraCommunity.firstTravelReference, 'edited reference');
+        await page.waitForSpinnerLoad();
         await page.writeOnEditableTD(selectors.travelExtraCommunity.firstTravelLockedKg, '1500');
         await page.waitForTimeout(1000);
     });

front/core/components/index.js

@@ -51,3 +51,4 @@ import './treeview';
 import './wday-picker';
 import './datalist';
 import './contextmenu';
+import './rating';

front/core/components/rating/index.html

@@ -0,0 +1,5 @@
+<div>
+    <vn-icon ng-repeat="star in ::$ctrl.stars" ng-class="::{active: star.isActive}"
+        icon="star_rate">
+    </vn-icon>
+</div>

front/core/components/rating/index.js

@@ -0,0 +1,39 @@
+import ngModule from '../../module';
+import FormInput from '../form-input';
+import './style.scss';
+
+export default class Rating extends FormInput {
+    constructor($element, $scope) {
+        super($element, $scope);
+
+        this.maxStars = 5;
+        this.stars = [];
+    }
+
+    get field() {
+        return super.field;
+    }
+
+    set field(value) {
+        super.field = value;
+        this.populateStars();
+    }
+
+    populateStars() {
+        for (let i = 0; i < this.maxStars; i++) {
+            const star = {isActive: false};
+            if (i < this.field)
+                star.isActive = true;
+
+            this.stars.push(star);
+        }
+    }
+}
+
+ngModule.vnComponent('vnRating', {
+    template: require('./index.html'),
+    controller: Rating,
+    bindings: {
+        maxStars: '<?',
+    }
+});

front/core/components/rating/index.spec.js

@@ -0,0 +1,38 @@
+describe('Component vnRating', () => {
+    let $element;
+    let $ctrl;
+
+    beforeEach(ngModule('vnCore'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile(`<vn-rating ng-model="$ctrl.stars"></vn-rating>`)($rootScope);
+        $ctrl = $element.controller('vnRating');
+    }));
+
+    afterEach(() => {
+        $element.remove();
+    });
+
+    describe('field() setter', () => {
+        it(`should change field value and then call the populateStars() method`, () => {
+            jest.spyOn($ctrl, 'populateStars');
+
+            $ctrl.field = 5;
+
+            expect($ctrl.populateStars).toHaveBeenCalledWith();
+            expect($ctrl.stars.length).toEqual(5);
+        });
+    });
+
+    describe('populateStars()', () => {
+        it(`should populate the stars array and mark four of them as active`, () => {
+            jest.spyOn($ctrl, 'populateStars');
+
+            $ctrl.field = 4;
+
+            const activeStars = $ctrl.stars.filter(star => star.isActive);
+
+            expect(activeStars.length).toEqual(4);
+        });
+    });
+});

front/core/components/rating/style.scss

@@ -0,0 +1,11 @@
+@import "variables";
+
+vn-rating {
+    vn-icon {
+        color: $color-primary-light
+    }
+
+    vn-icon.active {
+        color: $color-primary
+    }
+}

front/core/styles/variables.scss

@@ -61,6 +61,8 @@ $color-hover-cd: rgba(0, 0, 0, .1);
 $color-hover-dc: .7;
 $color-disabled: .6;
 
+$color-primary-medium: lighten($color-primary, 20%);
+$color-primary-light: lighten($color-primary, 35%);
 $color-font-link-medium: lighten($color-font-link, 20%);
 $color-font-link-light: lighten($color-font-link, 35%);
 $color-main-medium: lighten($color-main, 20%);

front/salix/styles/order-product.scss

@@ -54,13 +54,15 @@
                     flex: 1;
                 }
                 & > .tags {
-                    padding-bottom: 3px;
                     height: 48px;
 
                     & > vn-label-value {
                         font-size: .75rem;
                     }
                 }  
+                vn-rating vn-icon {
+                    font-size: 1rem
+                }
             }
             .footer {
                 font-size: .8rem;

modules/item/front/routes.json

@@ -9,7 +9,7 @@
             {"state": "item.index", "icon": "icon-item"},
             {"state": "item.request", "icon": "pan_tool"},
             {"state": "item.waste", "icon": "icon-claims"},
-            {"state": "item.fixedPrice", "icon": ""}
+            {"state": "item.fixedPrice", "icon": "contact_support"}
         ],
         "card": [
             {"state": "item.card.basicData", "icon": "settings"},

modules/order/back/methods/order/catalogFilter.js

@@ -108,6 +108,7 @@ module.exports = Self => {
                 i.value7,
                 i.tag8,
                 i.value8,
+                i.stars,
                 tci.price,
                 tci.available,
                 w.lastName AS lastName,

modules/order/front/catalog-view/index.html

@@ -36,6 +36,9 @@
                         value="{{::item.value7}}">
                     </vn-label-value>
                 </div>
+                <vn-rating ng-if="::item.stars" 
+                    ng-model="::item.stars">
+                </vn-rating>
                 <div class="footer">
                     <div class="price">
                         <vn-one>

modules/order/front/catalog-view/index.js

@@ -2,11 +2,9 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller extends Component {}
-
 ngModule.vnComponent('vnOrderCatalogView', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Component,
     bindings: {
         order: '<',
         model: '<'