[dirent details] add 'tags'

media/css/seahub.css

@@ -3860,3 +3860,13 @@ img.thumbnail {
     width:800px;
     overflow:auto;
 }
+/* tags in detail panel */
+.tags-label {
+    vertical-align: top;
+}
+.cur-tag {
+    padding:1px 5px;
+    background:#eee;
+    border-radius:3px;
+    margin:0 8px 8px 0;
+}

seahub/templates/js/templates.html

@@ -811,6 +811,19 @@
                     <td><%= dirent.last_update %></td>
                 </tr>
                 <% } %>
+                <% if (dirent.perm == 'rw') { %>
+                <tr>
+                    <th class="tags-label">{% trans "Tags" %}</th>
+                    <td class="tags-container">
+                        <span class="loading-icon"></span>
+                        <ul class="cur-tags hide ovhd"></ul>
+                        <span class="sf2-icon-edit tags-edit-icon op-icon hide" title="{% trans "Edit" %}"></span>
+                        <input type="hidden" class="w100 hide tags-input" />
+                        <button class="submit tags-submit-btn hide">{% trans "Submit" %}</button>
+                        <p class="error hide"></p>
+                    </td>
+                </tr>
+                <% } %>
             </table>
 
             <% } else { %>
@@ -844,6 +857,19 @@
                     <td><%= dirent.last_update %></td>
                 </tr>
                 <% } %>
+                <% if (dirent.perm == 'rw') { %>
+                <tr>
+                    <th class="tags-label">{% trans "Tags" %}</th>
+                    <td class="tags-container">
+                        <span class="loading-icon"></span>
+                        <ul class="cur-tags hide ovhd"></ul>
+                        <span class="sf2-icon-edit tags-edit-icon op-icon hide" title="{% trans "Edit" %}"></span>
+                        <input type="hidden" class="w100 hide tags-input" />
+                        <button class="submit tags-submit-btn hide">{% trans "Submit" %}</button>
+                        <p class="error hide"></p>
+                    </td>
+                </tr>
+                <% } %>
             </table>
             <% } %>
         </div>

static/scripts/app/views/dirent-details.js

@@ -29,7 +29,9 @@ define([
         },
 
         events: {
-            'click .js-close': 'close'
+            'click .js-close': 'close',
+            'click .tags-edit-icon': 'switchToEditTags',
+            'click .tags-submit-btn': 'submitTags'
         },
 
         render: function() {
@@ -44,9 +46,10 @@ define([
             });
         },
 
+        // for dir
         update: function(part_data) {
             var $container = this.$('.details-panel-text-info-container');
-            $('.loading-icon', $container).hide();
+            $('.loading-tip', $container).hide();
             if (part_data.error_msg) {
                 $('.error', $container).html(part_data.error_msg).show();
             } else {
@@ -57,6 +60,116 @@ define([
             }
         },
 
+        updateTags: function(part_data) {
+            var $container = this.$('.tags-container');
+
+            $('.loading-icon', $container).hide();
+            if (part_data.error_msg) {
+                $('.error', $container).html(part_data.error_msg).show();
+            } else {
+                var tags = part_data.tags;
+                var str = '';
+                var s2_tags = [];
+                for (var i = 0, len = tags.length; i < len; i++) {
+                    str += '<li class="cur-tag fleft">' + Common.HTMLescape(tags[i].name) + '</li>';
+                    s2_tags.push({
+                        'id': tags[i].name,
+                        'text': tags[i].name
+                    });
+                }
+                this.s2_tags = s2_tags;
+                $('.cur-tags', $container).html(str).show();
+                $('.tags-edit-icon', $container).show();
+            }
+        },
+
+        switchToEditTags: function() {
+            this.$('.cur-tags, .tags-edit-icon').hide();
+            this.$('.tags-submit-btn').show();
+
+            var $input = this.$('input.tags-input');
+            var $s2_container = this.$('.tags-input.select2-container');
+            if ($s2_container.length) {
+                $input.select2('data', this.s2_tags);
+                $s2_container.show();
+            } else {
+                $input.show()
+                .select2({
+                    tags: []
+                })
+                .select2('data', this.s2_tags);
+            }
+            return false;
+        },
+
+        submitTags: function() {
+            var _this = this;
+            var $input = this.$('.tags-input');
+            var tags = $input.select2('val');
+            var $submit = this.$('.tags-submit-btn');
+            var $error = this.$('.tags-container .error');
+            var error_msg;
+
+            for (var i = 0, len = tags.length; i < len; i++) {
+                if (tags[i].indexOf(',') != -1) {
+                    error_msg = gettext("Tag should not include ','.");
+                    break;
+                }
+            }
+            if (error_msg) {
+                $error.html(error_msg).show();
+                return false;
+            }
+
+            Common.disableButton($submit);
+            $.ajax({
+                url: Common.getUrl({
+                    'name': 'tags',
+                    'repo_id': this.data.repo_id
+                }),
+                type: 'PUT',
+                cache: false,
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                data: {
+                    'path': Common.pathJoin([this.data.dir_path, this.data.dirent.obj_name]),
+                    'is_dir': this.data.dirent.is_dir ? true : false,
+                    'names':  tags.join(',')
+                },
+                success: function(data) {
+                    var tags = data.tags;
+                    var str = '';
+                    var s2_tags = [];
+                    for (var i = 0, len = tags.length; i < len; i++) {
+                        str += '<li class="cur-tag fleft">' + Common.HTMLescape(tags[i].name) + '</li>';
+                        s2_tags.push({
+                            'id': tags[i].name,
+                            'text': tags[i].name
+                        });
+                    }
+                    _this.s2_tags = s2_tags;
+
+                    _this.$('.tags-input').hide();
+                    $submit.hide();
+                    _this.$('.cur-tags').html(str).show();
+                    _this.$('.tags-edit-icon').show();
+                },
+                error: function(xhr) {
+                    var error_msg;
+                    if (xhr.responseText) {
+                        var parsed_resp = $.parseJSON(xhr.responseText);
+                        error_msg = parsed_resp.error_msg || parsed_resp.detail;
+                    } else {
+                        error_msg = gettext("Failed. Please check the network.");
+                    }
+                    $error.html(error_msg).show();
+                },
+                complete: function() {
+                    Common.enableButton($submit);
+                }
+            });
+        },
+
         setConMaxHeight: function() {
             this.$('.right-side-panel-con').css({
                 'height': $(window).height() -  // this.$el `position:fixed; top:0;`

static/scripts/app/views/dirent-grid.js

@@ -282,8 +282,12 @@ define([
         },
 
         viewDetails: function() {
+            var _this = this;
+
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             var data = {
+                repo_id: this.dir.repo_id,
+                dir_path: this.dir.path,
                 icon_url: this.model.getIconUrl(file_icon_size),
                 big_icon_url: this.model.getIconUrl(192),
                 dirent: this.model.attributes,
@@ -304,6 +308,40 @@ define([
             var detailsView = this.dirView.direntDetailsView;
             detailsView.show(data);
 
+            if (this.model.get('perm') == 'rw') {
+                this.getTags = function() {
+                    $.ajax({
+                        url: Common.getUrl({
+                            'name': 'tags',
+                            'repo_id': this.dir.repo_id
+                        }),
+                        cache: false,
+                        data: {
+                            'path': Common.pathJoin([this.dir.path, this.model.get('obj_name')]),
+                            'is_dir': this.model.get('is_dir') ? true : false
+                        },
+                        dataType: 'json',
+                        success: function(data) {
+                            detailsView.updateTags(data);
+                        },
+                        error: function(xhr) {
+                            var error_msg;
+                            if (xhr.responseText) {
+                                var parsed_resp = $.parseJSON(xhr.responseText);
+                                error_msg = parsed_resp.error_msg || parsed_resp.detail;
+                            } else {
+                                error_msg = gettext("Failed. Please check the network.");
+                            }
+                            detailsView.updateTags({'error_msg': error_msg});
+                        }
+                    });
+                };
+
+                if (this.model.get('is_file')) {
+                    this.getTags();
+                }
+            }
+
             // fetch other data for dir
             if (this.model.get('is_dir')) {
                 $.ajax({
@@ -322,6 +360,10 @@ define([
                             'file_count': data.file_count,
                             'size': Common.fileSizeFormat(data.size, 1)
                         });
+
+                        if (_this.model.get('perm') == 'rw') {
+                            _this.getTags();
+                        }
                     },
                     error: function(xhr) {
                         var error_msg;

static/scripts/app/views/dirent.js

@@ -564,8 +564,12 @@ define([
         },
 
         viewDetails: function() {
+            var _this = this;
+
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             var data = {
+                repo_id: this.dir.repo_id,
+                dir_path: this.dir.path,
                 icon_url: this.model.getIconUrl(file_icon_size),
                 big_icon_url: this.model.getIconUrl(192),
                 dirent: this.model.attributes,
@@ -586,6 +590,40 @@ define([
             var detailsView = this.dirView.direntDetailsView;
             detailsView.show(data);
 
+            if (this.model.get('perm') == 'rw') {
+                this.getTags = function() {
+                    $.ajax({
+                        url: Common.getUrl({
+                            'name': 'tags',
+                            'repo_id': this.dir.repo_id
+                        }),
+                        cache: false,
+                        data: {
+                            'path': Common.pathJoin([this.dir.path, this.model.get('obj_name')]),
+                            'is_dir': this.model.get('is_dir') ? true : false
+                        },
+                        dataType: 'json',
+                        success: function(data) {
+                            detailsView.updateTags(data);
+                        },
+                        error: function(xhr) {
+                            var error_msg;
+                            if (xhr.responseText) {
+                                var parsed_resp = $.parseJSON(xhr.responseText);
+                                error_msg = parsed_resp.error_msg || parsed_resp.detail;
+                            } else {
+                                error_msg = gettext("Failed. Please check the network.");
+                            }
+                            detailsView.updateTags({'error_msg': error_msg});
+                        }
+                    });
+                };
+
+                if (this.model.get('is_file')) {
+                    this.getTags();
+                }
+            }
+
             // fetch other data for dir
             if (this.model.get('is_dir')) {
                 $.ajax({
@@ -604,6 +642,10 @@ define([
                             'file_count': data.file_count,
                             'size': Common.fileSizeFormat(data.size, 1)
                         });
+
+                        if (_this.model.get('perm') == 'rw') {
+                            _this.getTags();
+                        }
                     },
                     error: function(xhr) {
                         var error_msg;

static/scripts/common.js

@@ -97,6 +97,7 @@ define([
                 case 'get_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/';
 
                 case 'dir-details': return siteRoot + 'api/v2.1/repos/' + options.repo_id + '/dir/detail/';
+                case 'tags': return siteRoot + 'api/v2.1/repos/' + options.repo_id + '/tags/';
 
                 // Repos
                 case 'repos': return siteRoot + 'api2/repos/';