Merge pull request 'refactor(ticket.summary): change state button is now dropdown' (#834) from 3432-ticket_summary_ok_button into dev

Reviewed-on: #834
Reviewed-by: Joan Sanchez <joan@verdnatura.es>

e2e/helpers/selectors.js

@@ -458,7 +458,8 @@ export default {
         firstSaleQuantity: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5)',
         firstSaleDiscount: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(8)',
         invoiceOutRef: 'vn-ticket-summary > vn-card > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(7) > section > span',
-        setOk: 'vn-ticket-summary vn-button[label="SET OK"] > button',
+        stateButton: 'vn-ticket-summary vn-button-menu > button ',
+        stateAutocomplete: 'div.filter.ng-scope > vn-textfield > div.container > div.infix > div.control',
         descriptorTicketId: 'vn-ticket-descriptor > vn-descriptor-content > div > div.body > div.top > div'
     },
     ticketsIndex: {

e2e/paths/05-ticket/16_summary.spec.js

@@ -76,8 +76,24 @@ describe('Ticket Summary path', () => {
         await page.waitForState('ticket.card.summary');
     });
 
-    it('should click on the SET OK button', async() => {
-        await page.waitToClick(selectors.ticketSummary.setOk);
+    it('should set the ticket state to OK using the top right button', async() => {
+        const searchValue = 'OK';
+        await page.waitToClick(selectors.ticketSummary.stateButton);
+        await page.write(selectors.ticketSummary.stateAutocomplete, searchValue);
+        try {
+            await page.waitForFunction(text => {
+                const element = document.querySelector('li.active');
+                if (element)
+                    return element.innerText.toLowerCase().includes(text.toLowerCase());
+            }, {}, searchValue);
+        } catch (error) {
+            const state = await page.evaluate(() => {
+                const stateSelector = 'vn-ticket-summary vn-label-value:nth-child(1) > section > span';
+                return document.querySelector(stateSelector).value;
+            });
+            throw new Error(`${stateSelector} innerText is ${state}! ${error}`);
+        }
+        await page.keyboard.press('Enter');
         const message = await page.waitForSnackbar();
 
         expect(message.text).toContain('Data saved!');

modules/ticket/front/summary/index.html

@@ -11,14 +11,14 @@
             Ticket #{{$ctrl.summary.id}} - {{$ctrl.summary.client.name}} 
             ({{$ctrl.summary.client.id}}) - {{$ctrl.summary.nickname}}
         </span>
-        <vn-button
+        <vn-button-menu 
             disabled="!$ctrl.isEditable"
-            class="flat"
-            style="color: inherit;"
-            label="SET OK" 
-            ng-click="$ctrl.setOkState()"
-            vn-tooltip="Change ticket state to 'Ok'">
-        </vn-button>
+            class="message"
+            label="Change state"
+            value-field="code"
+            url="States/editableStates"
+            on-change="$ctrl.changeState(value)">
+        </vn-button-menu>
         <vn-ticket-descriptor-menu 
             ng-if="!$ctrl.isTicketModule"
             ticket-id="$ctrl.summary.id" 

modules/ticket/front/summary/index.js

@@ -59,10 +59,11 @@ class Controller extends Summary {
         this.$.invoiceOutDescriptor.show(event.target, this.summary.invoiceOut.id);
     }
 
-    setOkState() {
-        const params = {ticketFk: 'id' in this.ticket ? this.ticket.id : this.$params.id};
-
-        params.code = 'OK';
+    changeState(value) {
+        const params = {
+            ticketFk: 'id' in this.ticket ? this.ticket.id : this.$params.id,
+            code: value
+        };
 
         this.$http.post(`TicketTrackings/changeState`, params)
             .then(() => {

modules/ticket/front/summary/index.spec.js

@@ -42,5 +42,20 @@ describe('Ticket', () => {
                 expect(controller.formattedAddress).toEqual('1007 Mountain Drive - 46060 - Gotham (Gotham)');
             });
         });
+
+        describe('changeState()', () => {
+            it('should change the state', () => {
+                jest.spyOn(controller.vnApp, 'showSuccess');
+                const value = 'myTicketState';
+
+                let res = {id: 1, nickname: 'myNickname'};
+                $httpBackend.when('GET', `Tickets/1/summary`).respond(200, res);
+                $httpBackend.expectPOST(`TicketTrackings/changeState`).respond(200, 'ok');
+                controller.changeState(value);
+                $httpBackend.flush();
+
+                expect(controller.vnApp.showSuccess).toHaveBeenCalledWith('Data saved!');
+            });
+        });
     });
 });

modules/ticket/front/summary/locale/es.yml

@@ -3,3 +3,4 @@ Address mobile: Móv. consignatario
 Client phone: Tel. cliente
 Client mobile: Móv. cliente
 Go to the ticket: Ir al ticket
+Change state: Cambiar estado