[FIX] web: binary field format in list view

Binary fields were simply shown simply by their textual representation in list views,
e.g. the base64 string.

There was no formatter for binary fields, therefore it has been implemented so that
it displays its estimated size.

Binary fields in list views had a download link in v10.0.
We provide this feature back by means of a widget called 'download_link'.
It is also possible to define an option to set the field name having the filename as its value.

Example:

    <tree>
        <field name="fname"/>
        <field name="datas" widget="download_link" options="{'filename': 'fname'}"/>
    </tree>

with the following record: {fname: 'document.txt', datas: 'Cg=='},
we get a file named "document.txt" by clicking on the download link.

Closes #21996

addons/web/static/src/js/fields/basic_fields.js

@@ -1298,6 +1298,25 @@ var FieldBinaryFile = AbstractFieldBinary.extend({
     },
 });
 
+var FieldBinaryDownloadLink = AbstractFieldBinary.extend({
+    template: 'FieldBinaryDownloadLink',
+    events: _.extend({}, AbstractFieldBinary.prototype.events, {
+        'click': function (ev) {
+            ev.stopPropagation();
+        },
+    }),
+    supportedFieldTypes: ['binary'],
+    init: function () {
+        this._super.apply(this, arguments);
+        this.filename = _t("Binary File");
+        if (this.nodeOptions.filename && this.recordData[this.nodeOptions.filename]) {
+            this.filename = this.recordData[this.nodeOptions.filename];
+        }
+        this.url = "data:application/octet-stream;base64," + this.value;
+        this.text = _t("Download");
+    },
+});
+
 var PriorityWidget = AbstractField.extend({
     // the current implementation of this widget makes it
     // only usable for fields of type selection
@@ -2528,6 +2547,7 @@ return {
     TranslatableFieldMixin: TranslatableFieldMixin,
     DebouncedField: DebouncedField,
     FieldEmail: FieldEmail,
+    FieldBinaryDownloadLink: FieldBinaryDownloadLink,
     FieldBinaryFile: FieldBinaryFile,
     FieldBinaryImage: FieldBinaryImage,
     FieldBoolean: FieldBoolean,

addons/web/static/src/js/fields/field_registry.js

@@ -33,6 +33,7 @@ registry
     .add('email', basic_fields.FieldEmail)
     .add('phone', basic_fields.FieldPhone)
     .add('url', basic_fields.UrlWidget)
+    .add('download_link', basic_fields.FieldBinaryDownloadLink)
     .add('image', basic_fields.FieldBinaryImage)
     .add('binary', basic_fields.FieldBinaryFile)
     .add('monetary', basic_fields.FieldMonetary)

addons/web/static/src/js/fields/field_utils.js

@@ -27,6 +27,20 @@ var _t = core._t;
 // Formatting
 //------------------------------------------------------------------------------
 
+/**
+ * 
+ * @param {string} value base64 representation of the binary
+ * @param {Object} [field]
+ *        a description of the field (note: this parameter is ignored) 
+ * @param {Object} [options] additional options (note: this parameter is ignored)
+ */
+function formatBinary(value, field, options) {
+    if (!value) {
+        return '';
+    }
+    return utils.human_size(value.length / 1.37); // base64 estimated size: http://en.wikipedia.org/wiki/Base64#MIME
+}
+
 /**
  * @todo Really? it returns a jQuery element...  We should try to avoid this and
  * let DOM utility functions handle this directly. And replace this with a
@@ -561,7 +575,7 @@ function parseMany2one(value) {
 
 return {
     format: {
-        binary: _.identity, // todo
+        binary: formatBinary,
         boolean: formatBoolean,
         char: formatChar,
         date: formatDate,

addons/web/static/src/xml/base.xml

@@ -924,6 +924,9 @@
         </t>
     </div>
 </t>
+<t t-name="FieldBinaryDownloadLink">
+    <a t-att-download="widget.filename" t-att-href="widget.url"><t t-esc="widget.text"/></a>
+</t>
 <t t-name="HiddenInputFile">
     <div t-attf-class="o_hidden_input_file #{fileupload_class or ''}" t-att-style="fileupload_style">
         <form class="o_form_binary_form" t-att-target="fileupload_id"

addons/web/static/tests/fields/basic_fields_tests.js

@@ -1481,6 +1481,40 @@ QUnit.module('basic_fields', {
         session.get_file = oldGetFile;
     });
 
+    QUnit.test('download_link widget in list view', function (assert) {
+        assert.expect(5);
+        
+        this.data.partner.fields.filename = { string: "Filename", type: "char" };
+        this.data.partner.records[0].filename = "document.txt";
+
+        var form = createView({
+            View: ListView,
+            model: 'partner',
+            data: this.data,
+            arch: '<tree string="Partners">' +
+                      '<field name="document" widget="download_link" options="{\'filename\': \'filename\'}"/>' +
+                      '<field name="filename"/>' +
+                  '</tree>',
+            res_id: 1,
+        });
+
+        assert.ok(form.$('.o_data_cell').first().hasClass("o_download_link_cell"),
+            "this should be a download link cell");
+        assert.ok(form.$('.o_data_cell').first().find('a').eq(0),
+            "there should be a link in the cell");
+        assert.strictEqual(form.$('.o_data_cell').first().find('a').eq(0).attr('download'),
+            "document.txt",
+            "it should download a file named 'document.txt'");
+        assert.strictEqual(form.$('.o_data_cell').first().find('a').eq(0).attr('href').trim(),
+            "data:application/octet-stream;base64,coucou==",
+            "it should have the appropriate link of a binary");
+        assert.strictEqual(form.$('.o_data_cell').first().find('a').eq(0).text(),
+            "Download",
+            "the text of the link should be 'Download'");
+
+        form.destroy();
+    });
+
     QUnit.test('text field rendering in list view', function (assert) {
         assert.expect(1);
 

addons/web/static/tests/fields/field_utils_tests.js

@@ -127,6 +127,15 @@ QUnit.test('format one2many', function(assert) {
     assert.strictEqual(fieldUtils.format.one2many({data: [1, 2]}), '2 records');
 });
 
+QUnit.test('format binary', function (assert) {
+    assert.expect(1);
+
+    // base64 estimated size (bytes) = value.length / 1.37 (http://en.wikipedia.org/wiki/Base64#MIME)
+    // Here: 4 / 1.37 = 2.91970800 => 2.92 (rounded 2 decimals by utils.human_size)
+    assert.strictEqual(fieldUtils.format.binary('Cg=='), '2.92 Bytes');
+
+});
+
 QUnit.test('parse float', function(assert) {
     assert.expect(10);