refactor sms component

front/core/components/textarea/index.js

@@ -16,11 +16,21 @@ export default class Textarea extends Field {
     get rows() {
         return this.input.rows;
     }
+
+    set maxlength(value) {
+        let length = typeof value == 'number' && value > 1 ? value : 50;
+        this.input.setAttribute('maxlength', length);
+    }
+
+    get maxlength() {
+        return this.input.getAttribute('maxlength', length);
+    }
 }
 
 ngModule.vnComponent('vnTextarea', {
     controller: Textarea,
     bindings: {
-        rows: '<?'
+        rows: '<?',
+        maxlength: '<?'
     }
 });

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

@@ -34,4 +34,24 @@ describe('Component vnTextarea', () => {
             expect($ctrl.rows).toEqual(3);
         });
     });
+
+    describe('maxlength() setter', () => {
+        it(`should set maxlength property of the element to the given value if it's a valid number`, () => {
+            $ctrl.maxlength = 100;
+
+            expect($ctrl.maxlength).toEqual('100');
+        });
+
+        it(`should set maxlength property of the element to 3 if the given value if it's null`, () => {
+            $ctrl.maxlength = null;
+
+            expect($ctrl.maxlength).toEqual('50');
+        });
+
+        it(`should set maxlength property of the element to 3 if the given value if it's not a valid number`, () => {
+            $ctrl.maxlength = 'a';
+
+            expect($ctrl.maxlength).toEqual('50');
+        });
+    });
 });

modules/client/front/sms/index.html

@@ -13,12 +13,19 @@
             </vn-horizontal>
             <vn-horizontal >
                 <vn-textarea vn-one
+                    vn-id="message"
                     label="Message" 
                     ng-model="$ctrl.sms.message"
                     rows="5"
+                    maxlength="160"
                     rule>
                 </vn-textarea>
             </vn-horizontal>
+            <vn-horizontal>
+                <span>
+                    {{'Characters remaining' | translate}}: {{$ctrl.charactersRemaining()}}
+                </span>
+            </vn-horizontal>
         </section>
     </tpl-body>
     <tpl-buttons>

modules/client/front/sms/index.js

@@ -16,6 +16,16 @@ class Controller extends Component {
         this.$scope.SMSDialog.show();
     }
 
+    charactersRemaining() {
+        let elementMaxLength;
+        let textAreaLength;
+        const element = this.$scope.message;
+
+        textAreaLength = element.input.textLength;
+        elementMaxLength = element.maxlength;
+        return elementMaxLength - textAreaLength;
+    }
+
     onResponse(response) {
         if (response === 'accept') {
             this.$http.post(`Sms/send`, this.sms).then(res => {

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

@@ -8,10 +8,11 @@ describe('Client', () => {
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
+            let $scope = $rootScope.$new();
             $element = angular.element('<vn-dialog></vn-dialog>');
-            controller = $componentController('vnClientSms', {$element});
+            controller = $componentController('vnClientSms', {$element, $scope});
             controller.client = {id: 101};
         }));
 
@@ -30,5 +31,20 @@ describe('Client', () => {
                 expect(controller.vnApp.showMessage).toHaveBeenCalledWith('SMS sent!');
             });
         });
+
+        describe('charactersRemaining()', () => {
+            it('should return the characters remaining in a element', () => {
+                controller.$scope.message = {
+                    input: {
+                        textLength: 50
+                    },
+                    maxlength: 150
+                };
+
+                let result = controller.charactersRemaining();
+
+                expect(result).toEqual(100);
+            });
+        });
     });
 });

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

@@ -1,4 +1,5 @@
 Send SMS: Enviar SMS
 Destination: Destinatario
 Message: Mensaje
-SMS sent!: ¡SMS enviado!
+SMS sent!: ¡SMS enviado!
+Characters remaining: Carácteres restantes