Add category and attachments to support tickets

customize.dist/src/less2/include/support.less

@@ -4,6 +4,9 @@
     @msg-bg: #eee;
     @fromme-bg: #ddd;
     .cp-support-form-container {
+        div {
+            margin-bottom: 10px;
+        }
         [type="text"] {
             width: @sidebar_button-width;
             margin-bottom: 10px;

www/support/inner.js

@@ -166,8 +166,6 @@ define([
 
         var form = APP.support.makeForm();
 
-        $div.find('button').before(form);
-
         var id = Util.uid();
 
         $div.find('button').click(function () {
@@ -183,6 +181,7 @@ define([
                 $('.cp-sidebarlayout-category[data-category="tickets"]').click();
             }
         });
+        $div.find('button').before(form);
         return $div;
     };
 

www/support/ui.js

@@ -6,8 +6,9 @@ define([
     '/common/common-hash.js',
     '/common/common-util.js',
     '/common/clipboard.js',
+    '/common/common-ui-elements.js',
     '/customize/messages.js',
-], function ($, ApiConfig, h, UI, Hash, Util, Clipboard, Messages) {
+], function ($, ApiConfig, h, UI, Hash, Util, Clipboard, UIElements, Messages) {
 
     var send = function (ctx, id, type, data, dest) {
         var common = ctx.common;
@@ -61,9 +62,14 @@ define([
     };
 
     var sendForm = function (ctx, id, form, dest) {
-        var $title = $(form).find('.cp-support-form-title');
+        var $form = $(form);
-        var $content = $(form).find('.cp-support-form-msg');
+        var $cat = $form.find('.cp-support-form-category');
+        var $title = $form.find('.cp-support-form-title');
+        var $content = $form.find('.cp-support-form-msg');
+        var $attachments = $form.find('.cp-support-form-attachments');
 
+
+        var category = $cat.val().trim();
         var title = $title.val().trim();
         if (!title) {
             return void UI.alert(Messages.support_formTitleError);
@@ -72,18 +78,38 @@ define([
         if (!content) {
             return void UI.alert(Messages.support_formContentError);
         }
+        $cat.val('');
         $content.val('');
         $title.val('');
 
+        var attachments = [];
+        $attachments.find('> span').each(function (i, el) {
+            var $el = $(el);
+            attachments.push({
+                href: $el.attr('data-href'),
+                name: $el.attr('data-name')
+            });
+        });
+
         send(ctx, id, 'TICKET', {
+            category: category,
             title: title,
+            attachments: attachments,
             message: content,
         }, dest);
 
         return true;
     };
 
-    var makeForm = function (cb, title) {
+Messages.support_cat_account = "User account"; // XXX
+Messages.support_cat_data = "Loss of content"; // XXX
+Messages.support_cat_bug = "Bug report"; // XXX
+Messages.support_cat_other = "Other"; // XXX
+Messages.support_category = "Category"; // XXX
+Messages.support_attachments = "Attachments"; // XXX
+Messages.support_addAttachment = "Add attachment"; // XXX
+
+    var makeForm = function (ctx, cb, title) {
         var button;
 
         if (typeof(cb) === "function") {
@@ -93,8 +119,34 @@ define([
 
         var cancel = title ? h('button.btn.btn-secondary', Messages.cancel) : undefined;
 
+        var category = h('input.cp-support-form-category', {
+            type: 'hidden',
+            value: ''
+        });
+        var categories = ['account', 'data', 'bug', 'other'].map(function (key) {
+            return {
+                tag: 'a',
+                content: h('span', Messages['support_cat_'+key]),
+                action: function () {
+                    $(category).val(key);
+                }
+            };
+        });
+        var catContainer = h('div.cp-dropdown-container' + (title ? '.cp-hidden': ''));
+        var dropdownCfg = {
+            text: Messages.support_category,
+            options: categories,
+            container: $(catContainer),
+            isSelect: true
+        };
+        var $drop = UIElements.createDropdown(dropdownCfg);
+
+        var attachments, addAttachment;
+
         var content = [
             h('hr'),
+            category,
+            catContainer,
             h('input.cp-support-form-title' + (title ? '.cp-hidden' : ''), {
                 placeholder: Messages.support_formTitle,
                 type: 'text',
@@ -104,11 +156,51 @@ define([
             h('textarea.cp-support-form-msg', {
                 placeholder: Messages.support_formMessage
             }),
+            h('label', Messages.support_attachments),
+            attachments = h('div.cp-support-form-attachments'),
+            addAttachment = h('button', Messages.support_addAttachment),
             h('hr'),
             button,
             cancel
         ];
 
+        $(addAttachment).click(function () {
+            var $input = $('<input>', {
+                'type': 'file',
+                'style': 'display: none;',
+                'multiple': 'multiple',
+                'accept': 'image/*'
+            }).on('change', function (e) {
+                var files = Util.slice(e.target.files);
+                files.forEach(function (file) {
+                    var ev = {};
+                    ev.callback = function (data) {
+                        var x, a;
+                        var span = h('span', {
+                            'data-name': data.name,
+                            'data-href': data.url
+                        }, [
+                            x = h('i.fa.fa-times'),
+                            a = h('a', {
+                                href: '#'
+                            }, data.name)
+                        ]);
+                        $(x).click(function () {
+                            $(span).remove();
+                        });
+                        $(a).click(function (e) {
+                            e.preventDefault();
+                            ctx.common.openURL(data.url);
+                        });
+
+                        $(attachments).append(span);
+                    };
+                    ctx.FM.handleFile(file, ev);
+                });
+            });
+            $input.click();
+        });
+
         var form = h('div.cp-support-form-container', content);
 
         $(cancel).click(function () {
@@ -125,6 +217,7 @@ define([
         var privateData = metadataMgr.getPrivateData();
 
         var ticketTitle = content.title + ' (#' + content.id + ')';
+        var ticketCategory;
         var answer = h('button.btn.btn-primary.cp-support-answer', Messages.support_answer);
         var close = h('button.btn.btn-danger.cp-support-close', Messages.support_close);
         var hide = h('button.btn.btn-danger.cp-support-hide', Messages.support_remove);
@@ -137,6 +230,7 @@ define([
 
         var url;
         if (ctx.isAdmin) {
+            ticketCategory = Messages['support_cat_'+(content.category || 'other')] + ' - ';
             url = h('button.btn.btn-primary.fa.fa-clipboard');
             $(url).click(function () {
                 var link = privateData.origin + privateData.pathname + '#' + 'support-' + content.id;
@@ -148,7 +242,7 @@ define([
         var $ticket = $(h('div.cp-support-list-ticket', {
             'data-id': content.id
         }, [
-            h('h2', [ticketTitle, url]),
+            h('h2', [ticketCategory, ticketTitle, url]),
             actions
         ]));
 
@@ -179,7 +273,7 @@ define([
         $(answer).click(function () {
             $ticket.find('.cp-support-form-container').remove();
             $(actions).hide();
-            var form = makeForm(function () {
+            var form = makeForm(ctx, function () {
                 var sent = sendForm(ctx, content.id, form, content.sender);
                 if (sent) {
                     $(actions).show();
@@ -215,6 +309,20 @@ define([
             ev.stopPropagation();
         });
 
+        var attachments = (content.attachments || []).map(function (obj) {
+            if (!obj || !obj.name || !obj.href) { return; }
+            var a = h('a', {
+                href: '#'
+            }, obj.name)
+            $(a).click(function (e) {
+                e.preventDefault();
+                ctx.common.openURL(obj.href);
+            });
+            return h('span', [
+                a
+            ]);
+        });
+
         var adminClass = (fromAdmin? '.cp-support-fromadmin': '');
         var premiumClass = (fromPremium && !fromAdmin? '.cp-support-frompremium': '');
         var name = Util.fixHTML(content.sender.name) || Messages.anonymous;
@@ -226,6 +334,7 @@ define([
                 h('span.cp-support-message-time', content.time ? new Date(content.time).toLocaleString() : '')
             ]),
             h('pre.cp-support-message-content', content.message),
+            h('div', attachments),
             isAdmin ? userData : undefined,
         ]);
     };
@@ -257,10 +366,22 @@ define([
             adminKeys: Array.isArray(ApiConfig.adminKeys)?  ApiConfig.adminKeys.slice(): [],
         };
 
+        var fmConfig = {
+            body: $('body'),
+            onUploaded: function (ev, data) {
+                if (ev.callback) {
+                    ev.callback(data);
+                }
+            }
+        };
+        ctx.FM = common.createFileManager(fmConfig);
+
         ui.sendForm = function (id, form, dest) {
             return sendForm(ctx, id, form, dest);
         };
-        ui.makeForm = makeForm;
+        ui.makeForm = function (cb, title) {
+            return makeForm(ctx, cb, title);
+        };
         ui.makeTicket = function ($div, content, onHide) {
             return makeTicket(ctx, $div, content, onHide);
         };