2106 - Sms max length fix

modules/client/front/sms/index.html

@@ -13,20 +13,27 @@
                     rule>
                 </vn-textfield>
             </vn-horizontal>
-            <vn-horizontal >
+            <vn-horizontal>
                 <vn-textarea vn-one
                     vn-id="message"
                     label="Message" 
                     ng-model="$ctrl.sms.message"
+                    info="Special characters like accents counts as a multiple"
                     rows="5"
-                    maxlength="160"
                     required="true"
                     rule>
                 </vn-textarea>
             </vn-horizontal>
             <vn-horizontal>
                 <span>
-                    {{'Characters remaining' | translate}}: {{$ctrl.charactersRemaining()}}
+                    {{'Characters remaining' | translate}}: 
+                    <vn-chip translate-attr="{title: 'Packing'}" ng-class="{
+                        'colored': $ctrl.charactersRemaining() > 25,
+                        'warning': $ctrl.charactersRemaining() <= 25,
+                        'alert': $ctrl.charactersRemaining() < 0,
+                    }"> 
+                        {{$ctrl.charactersRemaining()}}
+                    </vn-chip>
                 </span>
             </vn-horizontal>
         </section>

modules/client/front/sms/index.js

@@ -17,13 +17,12 @@ class Controller extends Component {
     }
 
     charactersRemaining() {
-        let elementMaxLength;
-        let textAreaLength;
         const element = this.$scope.message;
+        const value = element.input.value;
 
-        textAreaLength = element.input.textLength;
+        const maxLength = 160;
-        elementMaxLength = element.maxlength;
+        const textAreaLength = new Blob([value]).size;
-        return elementMaxLength - textAreaLength;
+        return maxLength - textAreaLength;
     }
 
     onResponse(response) {
@@ -33,6 +32,8 @@ class Controller extends Component {
                     throw new Error(`The destination can't be empty`);
                 if (!this.sms.message)
                     throw new Error(`The message can't be empty`);
+                if (this.charactersRemaining() < 0)
+                    throw new Error(`The message it's too long`);
 
                 this.$http.post(`Clients/${this.$params.id}/sendSms`, this.sms).then(res => {
                     this.vnApp.showMessage(this.$translate.instant('SMS sent!'));

modules/client/front/sms/index.spec.js

@@ -15,6 +15,11 @@ describe('Client', () => {
             controller = $componentController('vnClientSms', {$element, $scope});
             controller.client = {id: 101};
             controller.$params = {id: 101};
+            controller.$scope.message = {
+                input: {
+                    value: 'My SMS'
+                }
+            };
         }));
 
         describe('onResponse()', () => {
@@ -56,14 +61,13 @@ describe('Client', () => {
             it('should return the characters remaining in a element', () => {
                 controller.$scope.message = {
                     input: {
-                        textLength: 50
+                        value: 'My message 0€'
-                    },
+                    }
-                    maxlength: 150
                 };
 
                 let result = controller.charactersRemaining();
 
-                expect(result).toEqual(100);
+                expect(result).toEqual(145);
             });
         });
     });

modules/client/front/sms/locale/es.yml

@@ -4,4 +4,6 @@ Message: Mensaje
 SMS sent!: ¡SMS enviado!
 Characters remaining: Carácteres restantes
 The destination can't be empty: El destinatario no puede estar vacio
-The message can't be empty: El mensaje no puede estar vacio
+The message can't be empty: El mensaje no puede estar vacio
+The message it's too long: El mensaje es demasiado largo
+Special characters like accents counts as a multiple: Carácteres especiales como los acentos cuentan como varios

modules/ticket/front/sms/index.html

@@ -18,15 +18,22 @@
                     vn-id="message"
                     label="Message" 
                     ng-model="$ctrl.sms.message"
+                    info="Special characters like accents counts as a multiple"
                     rows="5"
-                    maxlength="160"
                     required="true"
                     rule>
                 </vn-textarea>
             </vn-horizontal>
             <vn-horizontal>
                 <span>
-                    {{'Characters remaining' | translate}}: {{$ctrl.charactersRemaining()}}
+                    {{'Characters remaining' | translate}}: 
+                    <vn-chip translate-attr="{title: 'Packing'}" ng-class="{
+                        'colored': $ctrl.charactersRemaining() > 25,
+                        'warning': $ctrl.charactersRemaining() <= 25,
+                        'alert': $ctrl.charactersRemaining() < 0,
+                    }"> 
+                        {{$ctrl.charactersRemaining()}}
+                    </vn-chip>
                 </span>
             </vn-horizontal>
         </section>

modules/ticket/front/sms/index.js

@@ -17,13 +17,12 @@ class Controller extends Component {
     }
 
     charactersRemaining() {
-        let elementMaxLength;
-        let textAreaLength;
         const element = this.$scope.message;
+        const value = element.input.value;
 
-        textAreaLength = element.input.textLength;
+        const maxLength = 160;
-        elementMaxLength = element.maxlength;
+        const textAreaLength = new Blob([value]).size;
-        return elementMaxLength - textAreaLength;
+        return maxLength - textAreaLength;
     }
 
     onResponse(response) {
@@ -33,6 +32,8 @@ class Controller extends Component {
                     throw new Error(`The destination can't be empty`);
                 if (!this.sms.message)
                     throw new Error(`The message can't be empty`);
+                if (this.charactersRemaining() < 0)
+                    throw new Error(`The message it's too long`);
 
                 this.$http.post(`Tickets/${this.$params.id}/sendSms`, this.sms).then(res => {
                     this.vnApp.showMessage(this.$translate.instant('SMS sent!'));

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

@@ -14,6 +14,11 @@ describe('Ticket', () => {
             $element = angular.element('<vn-dialog></vn-dialog>');
             controller = $componentController('vnTicketSms', {$element, $scope});
             controller.$params = {id: 11};
+            controller.$scope.message = {
+                input: {
+                    value: 'My SMS'
+                }
+            };
         }));
 
         describe('onResponse()', () => {
@@ -55,14 +60,13 @@ describe('Ticket', () => {
             it('should return the characters remaining in a element', () => {
                 controller.$scope.message = {
                     input: {
-                        textLength: 50
+                        value: 'My message 0€'
-                    },
+                    }
-                    maxlength: 150
                 };
 
                 let result = controller.charactersRemaining();
 
-                expect(result).toEqual(100);
+                expect(result).toEqual(145);
             });
         });
     });

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

@@ -4,4 +4,6 @@ Message: Mensaje
 SMS sent!: ¡SMS enviado!
 Characters remaining: Carácteres restantes
 The destination can't be empty: El destinatario no puede estar vacio
-The message can't be empty: El mensaje no puede estar vacio
+The message can't be empty: El mensaje no puede estar vacio
+The message it's too long: El mensaje es demasiado largo
+Special characters like accents counts as a multiple: Carácteres especiales como los acentos cuentan como varios