Merge pull request 'feat(upload-photo): added options to choose between upload from computer or external url' (#734) from 2627-photo_external_url into dev

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

front/salix/components/upload-photo/index.html

@@ -4,7 +4,7 @@
     message="Edit photo">
     <tpl-body class="upload-photo">
     <vn-horizontal>
-        <vn-one ng-if="file.value">
+        <vn-one ng-if="file.value || $ctrl.newPhoto.url">
             <vn-horizontal>
                 <vn-icon-button vn-none
                     icon="rotate_left"
@@ -20,12 +20,26 @@
             </vn-horizontal>
         </vn-one>
         <vn-one>
-            <vn-horizontal>
+            <vn-vertical class="vn-mb-sm">
+                <vn-radio
+                    label="Select file from computer"
+                    val="computer"
+                    ng-model="$ctrl.uploadMethod"
+                    tabindex="-1">
+                </vn-radio>
+                <vn-radio
+                    label="Import from external URL"
+                    val="URL"
+                    ng-model="$ctrl.uploadMethod"
+                    tabindex="-1">
+                </vn-radio>
+            </vn-vertical>
+            <vn-horizontal ng-if="$ctrl.uploadMethod == 'computer'">
                 <vn-input-file vn-id="file"
                     vn-one 
                     label="File" 
                     ng-model="$ctrl.newPhoto.files"
-                    on-change="$ctrl.updatePhotoPreview(value)"
+                    on-change="$ctrl.updatePhotoPreview(value[0])"
                     accept="{{$ctrl.allowedContentTypes}}"
                     required="true">
                     <append>
@@ -37,6 +51,14 @@
                     </append>
                 </vn-input-file>
             </vn-horizontal>
+            <vn-horizontal ng-if="$ctrl.uploadMethod == 'URL'">
+                <vn-textfield
+                    vn-one
+                    ng-model="$ctrl.newPhoto.url"
+                    on-change="$ctrl.updatePhotoPreview(value)"
+                    placeholder="https://">
+                </vn-textfield>
+            </vn-horizontal>
             <vn-horizontal>
                 <vn-autocomplete
                     label="Type"

front/salix/components/upload-photo/index.js

@@ -39,6 +39,7 @@ export default class UploadPhoto extends Component {
             }
         ];
         this.viewportType = 'normal';
+        this.uploadMethod = 'computer';
         this.getAllowedContentTypes();
     }
 
@@ -64,11 +65,16 @@ export default class UploadPhoto extends Component {
     set viewportSelection(value) {
         this._viewportSelection = value;
 
-        if (value && this.newPhoto.files) {
-            this.displayEditor();
-            const files = this.newPhoto.files;
-            this.updatePhotoPreview(files);
-        }
+        const hasFile = this.newPhoto.files || this.newPhoto.url;
+        if (!value || !hasFile) return;
+
+        let file;
+        if (this.uploadMethod == 'computer')
+            file = this.newPhoto.files[0];
+        else if (this.uploadMethod == 'URL')
+            file = this.newPhoto.url;
+
+        this.updatePhotoPreview(file);
     }
 
     getAllowedContentTypes() {
@@ -90,13 +96,15 @@ export default class UploadPhoto extends Component {
      * @param {string} value
      */
     updatePhotoPreview(value) {
-        if (value && value[0]) {
-            if (!this.editor)
-                this.displayEditor();
+        if (value) {
+            this.displayEditor();
 
-            const reader = new FileReader();
-            reader.onload = e => this.editor.bind({url: e.target.result});
-            reader.readAsDataURL(value[0]);
+            if (this.uploadMethod == 'computer') {
+                const reader = new FileReader();
+                reader.onload = e => this.editor.bind({url: e.target.result});
+                reader.readAsDataURL(value);
+            } else if (this.uploadMethod == 'URL')
+                this.editor.bind({url: value});
         }
     }
 

front/salix/components/upload-photo/index.spec.js

@@ -24,17 +24,30 @@ describe('Salix', () => {
         });
 
         describe('viewportSelection()', () => {
-            it('should call to displayEditor() and updatePhotoPreview() methods', () => {
-                controller.displayEditor = jest.fn();
+            it('should call to the updatePhotoPreview() method when uploadMethod property is set to "computer"', () => {
                 controller.updatePhotoPreview = jest.fn();
 
                 const files = [{name: 'test.jpg'}];
                 controller.newPhoto.files = files;
 
+                controller.uploadMethod = 'computer';
                 controller.viewportSelection = {code: 'normal'};
 
-                expect(controller.displayEditor).toHaveBeenCalledWith();
-                expect(controller.updatePhotoPreview).toHaveBeenCalledWith(files);
+                const firstFile = files[0];
+
+                expect(controller.updatePhotoPreview).toHaveBeenCalledWith(firstFile);
+            });
+
+            it('should call to the updatePhotoPreview() method when uploadMethod property is set to "URL"', () => {
+                controller.updatePhotoPreview = jest.fn();
+
+                const url = 'http://gothamcity.com/batman.png';
+                controller.newPhoto.url = url;
+
+                controller.uploadMethod = 'URL';
+                controller.viewportSelection = {code: 'normal'};
+
+                expect(controller.updatePhotoPreview).toHaveBeenCalledWith(url);
             });
         });
 

front/salix/components/upload-photo/locale/es.yml

@@ -3,4 +3,6 @@ Select an image: Selecciona una imagen
 File name: Nombre del fichero
 Rotate left: Girar a la izquierda
 Rotate right: Girar a la derecha
-Panoramic: Panorámico
+Panoramic: Panorámico
+Select from computer: Seleccionar foto desde ordenador
+Import from external URL: Importar desde URL externa