Ivan - Add file download component [skip ci]

client/src/app-components/ticket-event.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
 
 import DateTransformer from 'lib-core/date-transformer';
 import Icon from 'core-components/icon';
@@ -161,7 +162,7 @@ class TicketEvent extends React.Component {
         }
 
         return (
-            <div className="ticket-viewer__file">
+            <div className="ticket-event__file">
                 {node}
             </div>
         )
@@ -222,9 +223,26 @@ class TicketEvent extends React.Component {
         const fileName = filePath.replace(/^.*[\\\/]/, '');
 
         return (
-            <a href={filePath} target="_blank">{fileName}</a>
+            <span onClick={this.onFileClick.bind(this, filePath)}>{fileName}</span>
         )
     }
+
+    onFileClick(filePath) {
+        API.call({
+            path: '/system/download',
+            plain: true,
+            data: {
+                file: filePath
+            }
+        }).then((result) => {
+            let contentType = 'application/octet-stream';
+            let link = document.createElement('a');
+            let blob = new Blob([result], {'type': contentType});
+            link.href = window.URL.createObjectURL(blob);
+            link.download = filePath;
+            link.click();
+        });
+    }
 }
 
 export default TicketEvent;

client/src/app-components/ticket-event.scss

@@ -91,6 +91,14 @@
         }
     }
 
+    &__file {
+        background-color: $very-light-grey;
+        cursor: pointer;
+        text-align: right;
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+
     &_staff {
         .ticket-event__icon {
             background-color: $primary-blue;

client/src/app-components/ticket-viewer.js

@@ -190,6 +190,7 @@ class TicketViewer extends React.Component {
                 <div className="ticket-viewer__response-field row">
                     <Form {...this.getCommentFormProps()}>
                         <FormField name="content" validation="TEXT_AREA" required field="textarea" />
+                        <FormField name="file" field="file"/>
                         <SubmitButton>{i18n('RESPOND_TICKET')}</SubmitButton>
                     </Form>
                 </div>
@@ -234,10 +235,12 @@ class TicketViewer extends React.Component {
             loading: this.state.loading,
             onChange: (formState) => {this.setState({
                 commentValue: formState.content,
+                commentFile: formState.file,
                 commentEdited: true
             })},
             values: {
-                'content': this.state.commentValue
+                'content': this.state.commentValue,
+                'file': this.state.commentFile
             }
         };
     }

client/src/app-components/ticket-viewer.scss

@@ -48,13 +48,6 @@
         margin-top: 10px;
     }
 
-    &__file {
-        background-color: $very-light-grey;
-        text-align: right;
-        padding: 5px 10px;
-        font-size: 12px;
-    }
-
     &__comments {
         position: relative;
     }

client/src/data/fixtures/system-fixtures.js

@@ -110,6 +110,14 @@ module.exports = [
             };
         }
     },
+    {
+        path: '/system/download',
+        time: 100,
+        contentType: 'application/octet-stream',
+        response: function () {
+            return 'text content';
+        }
+    },
     {
         path: '/system/get-mail-templates',
         time: 100,

client/src/data/fixtures/user-fixtures.js

@@ -166,7 +166,7 @@ module.exports = [
                                 name: 'Sales Support'
                             },
                             date: '201504090001',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: false,
                             closed: false,
@@ -385,7 +385,7 @@ module.exports = [
                                 name: 'Technical Issues'
                             },
                             date: '201604161427',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: true,
                             closed: false,
@@ -504,7 +504,7 @@ module.exports = [
                                 name: 'Sales Support'
                             },
                             date: '201604150849',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: false,
                             closed: false,
@@ -607,7 +607,7 @@ module.exports = [
                                 name: 'Sales Support'
                             },
                             date: '201504091032',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: false,
                             closed: false,

client/src/lib-app/api-call.js

@@ -12,13 +12,13 @@ function processData (data) {
 }
 
 module.exports = {
-    call: function ({path, data}) {
+    call: function ({path, data, plain}) {
         return new Promise(function (resolve, reject) {
             APIUtils.post(root + path, processData(data))
                 .then(function (result) {
                     console.log(result);
 
-                    if (result.status === 'success') {
+                    if (plain || result.status === 'success') {
                         resolve(result);
                     } else if (reject) {
                         reject(result);

client/src/lib-app/fixtures-loader.js

@@ -24,7 +24,7 @@ fixtures.add(require('data/fixtures/article-fixtures'));
 
 _.each(fixtures.getAll(), function (fixture) {
     mockjax({
-        contentType: 'application/json',
+        contentType: fixture.contentType || 'application/json',
         url: 'http://localhost:3000/api' + fixture.path,
         responseTime: fixture.time || 500,
         response: function (settings) {

server/controllers/system/download.php

@@ -10,7 +10,7 @@ class DownloadController extends Controller {
             'permission' => 'user',
             'requestData' => [
                 'file' => [
-                    'validation' => DataValidator::alnum('_.')->noWhitespace(),
+                    'validation' => DataValidator::alnum('_.-')->noWhitespace(),
                     'error' => ERRORS::INVALID_FILE
                 ]
             ]