From 35d9a166cfbe28c212e9873f97cb6f356686d4d9 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Sat, 14 Jan 2017 21:44:20 -0300 Subject: [PATCH] Ivan - Add file download component [skip ci] --- client/src/app-components/ticket-event.js | 22 ++++++++++++++++++-- client/src/app-components/ticket-event.scss | 8 +++++++ client/src/app-components/ticket-viewer.js | 5 ++++- client/src/app-components/ticket-viewer.scss | 7 ------- client/src/data/fixtures/system-fixtures.js | 8 +++++++ client/src/data/fixtures/user-fixtures.js | 8 +++---- client/src/lib-app/api-call.js | 4 ++-- client/src/lib-app/fixtures-loader.js | 2 +- server/controllers/system/download.php | 2 +- 9 files changed, 48 insertions(+), 18 deletions(-) diff --git a/client/src/app-components/ticket-event.js b/client/src/app-components/ticket-event.js index bdcd9b2e..719f417d 100644 --- a/client/src/app-components/ticket-event.js +++ b/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 ( -
+
{node}
) @@ -222,9 +223,26 @@ class TicketEvent extends React.Component { const fileName = filePath.replace(/^.*[\\\/]/, ''); return ( - {fileName} + {fileName} ) } + + 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; diff --git a/client/src/app-components/ticket-event.scss b/client/src/app-components/ticket-event.scss index 50105bbe..328d16e1 100644 --- a/client/src/app-components/ticket-event.scss +++ b/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; diff --git a/client/src/app-components/ticket-viewer.js b/client/src/app-components/ticket-viewer.js index 6b6f1362..c00b875a 100644 --- a/client/src/app-components/ticket-viewer.js +++ b/client/src/app-components/ticket-viewer.js @@ -190,6 +190,7 @@ class TicketViewer extends React.Component {
+ {i18n('RESPOND_TICKET')}
@@ -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 } }; } diff --git a/client/src/app-components/ticket-viewer.scss b/client/src/app-components/ticket-viewer.scss index 9f03fbf7..2a6658ed 100644 --- a/client/src/app-components/ticket-viewer.scss +++ b/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; } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index b67d450f..ac2a5bbd 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/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, diff --git a/client/src/data/fixtures/user-fixtures.js b/client/src/data/fixtures/user-fixtures.js index 484d7c95..2ff9801b 100644 --- a/client/src/data/fixtures/user-fixtures.js +++ b/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, diff --git a/client/src/lib-app/api-call.js b/client/src/lib-app/api-call.js index f65ba752..032c5bc0 100644 --- a/client/src/lib-app/api-call.js +++ b/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); diff --git a/client/src/lib-app/fixtures-loader.js b/client/src/lib-app/fixtures-loader.js index 1850cb34..dc02c382 100644 --- a/client/src/lib-app/fixtures-loader.js +++ b/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) { diff --git a/server/controllers/system/download.php b/server/controllers/system/download.php index 8c6699b3..278ddc1b 100644 --- a/server/controllers/system/download.php +++ b/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 ] ]