diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 596c931a25bf1..5aea86d064ae5 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -1215,3 +1215,25 @@ table.dragshadow td.size { #gallery-button { display: none; } + +#tag_multiple_files_container { + overflow: hidden; + background-color: #fff; + border-radius: 3px; + position: relative; + display: flex; + flex-wrap: wrap; + margin-bottom: 10px; + + h3 { + width: 100%; + padding: 0 18px; + } + + .systemTagsInputFieldContainer { + flex: 1 1 80%; + min-width: 0; + margin: 0 12px; + } +} + diff --git a/apps/files/js/app.js b/apps/files/js/app.js index 1a0d59eee0f1d..6971088bb47c0 100644 --- a/apps/files/js/app.js +++ b/apps/files/js/app.js @@ -113,6 +113,11 @@ iconClass: 'icon-delete', order: 99, }, + { + name: 'tags', + displayName: 'Tags', + iconClass: 'icon-tag' + }, ], sorting: { mode: $('#defaultFileSorting').val(), diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 3f4cae45cdcba..36f8a773b8038 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -555,6 +555,9 @@ case 'restore': this._onClickRestoreSelected(ev); break; + case 'tags': + this._onClickTagSelected(ev); + break; } }, /** @@ -1116,6 +1119,122 @@ event.preventDefault(); }, + /** + * CUSTOM CODE + * Event handler for when clicking on "Tags" for the selected files + */ + _onClickTagSelected: function(event) { + var self = this; + event.preventDefault(); + var commonTags = []; + + var selectedFiles = _.pluck(this.getSelectedFiles(),'id') + var tagCollections=[]; + var fetchTagPromises = []; + + + selectedFiles.forEach(function(fileId) { + var deferred = new $.Deferred(); + var tagCollection = new OC.SystemTags.SystemTagsMappingCollection([], { + objectType: 'files', + objectId: fileId}); + tagCollections.push(tagCollection); + tagCollection.fetch({ + success: function(){ + deferred.resolve('success'); + }, + error: function() {deferred.resolve('failed');} + }) + fetchTagPromises.push(deferred); + }); + if (!self._inputView) { + self._inputView = new OC.SystemTags.SystemTagsInputField({ + multiple: true, + allowActions: true, + allowCreate: true, + isAdmin: OC.isUserAdmin(), + }); + self._inputView.on('select', self._onSelectTag, self); + self._inputView.on('deselect', self._onDeselectTag, self); + self._inputView.render(); + + // Build dom + self.tagsTitle = $('

'+ t('files', 'Please select tag(s) to add to the selection') +'

'); + self.tagsSubmit = $(''); + self.tagsContainer = $(''); + self.tagsTitle.appendTo(self.tagsContainer) + self.tagsContainer.append(self._inputView.el); + self.tagsSubmit.appendTo(self.tagsContainer) + + // Inject everything + self.$table.find('thead').append(self.tagsContainer); + + self.tagsSubmit.on('click', function(ev){ + self._onClickDocument(ev); + }); + } + + self._inputView.$el.addClass('icon-loading'); + self.tagsContainer.show(); + + Promise.all(fetchTagPromises).then(function() { + //find tags which are common to all selected files + commonTags =_.intersection.apply(null, tagCollections.map(function (tagCollection) {return tagCollection.getTagIds();})); + self._inputView.setValues(commonTags); + self._inputView.$el.removeClass('icon-loading'); + $(document).on('click',function(ev){ + self._onClickDocument(ev); + }); + }); + }, + + _onClickDocument: function(ev) { + if(!$(ev.target).closest('#editor_container').length) { + this._inputView.setValues([]); + this.tagsContainer.hide(); + $(document).unbind('click', this._onClickDocument); + } + + }, + + /** + * Custom code + * Set tag for all selected files + * @param tagModel + * @private + */ + _onSelectTag: function(tagModel) { + var selectedFiles = _.pluck(this.getSelectedFiles(),'id') + if (!_.isArray(selectedFiles)) { + return; + } + selectedFiles.forEach(function(fileId) { + $.ajax({ + url: OC.linkToRemote('dav') + '/systemtags-relations/files/' +fileId + '/'+ tagModel.attributes.id, + type: 'PUT', + }); + }); + + }, + /** + * remove tag from all selected files + * @param tagId + * @private + */ + _onDeselectTag: function(tagId) { + var selectedFiles = _.pluck(this.getSelectedFiles(),'id'); + if (!_.isArray(selectedFiles)) { + return; + } + selectedFiles.forEach(function(fileId) { + console.log('remove tag route',OC.linkToRemote('dav') + '/systemtags-relations/files/' +fileId + '/'+ tagId) + $.ajax({ + url: OC.linkToRemote('dav') + '/systemtags-relations/files/' +fileId + '/'+ tagId, + type: 'DELETE' + }); + }); + }, + /** * Event handler when clicking on a table header */