chore(systemtags): Replace php markup with vue
Signed-off-by: Christopher Ng <chrng8@gmail.com>pull/41335/head
Christopher Ng
parent
e1a934d90c
commit
b4b5612d7c
@ -1,29 +0,0 @@
|
|||||||
.systemtag-input {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.systemtag-input--name {
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
.systemtag-input--name,
|
|
||||||
.systemtag-input--level {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.systemtag-input--actions {
|
|
||||||
margin-top: 25px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
#systemtags .select2-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
#systemtags .select2-container .select2-choice {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
#systemtag_name {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
/**
|
|
||||||
* @copyright Copyright (c) 2016 Joas Schilling <coding@schilljs.com>
|
|
||||||
* @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
|
|
||||||
*
|
|
||||||
* @license AGPL-3.0-or-later
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
if (!OCA.SystemTags) {
|
|
||||||
/**
|
|
||||||
* @namespace
|
|
||||||
*/
|
|
||||||
OCA.SystemTags = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
OCA.SystemTags.Admin = {
|
|
||||||
|
|
||||||
collection: null,
|
|
||||||
|
|
||||||
init: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
this.collection = OC.SystemTags.collection;
|
|
||||||
this.collection.fetch({
|
|
||||||
success: function() {
|
|
||||||
$('#systemtag').select2(_.extend(self.select2));
|
|
||||||
$('#systemtag').parent().children('.select2-container').attr('aria-expanded', 'false')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
$('#systemtag_name').on('keyup', function(e) {
|
|
||||||
if (e.which === 13) {
|
|
||||||
_.bind(self._onClickSubmit, self)();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('#systemtag_submit').on('click', _.bind(this._onClickSubmit, this));
|
|
||||||
$('#systemtag_delete').on('click', _.bind(this._onClickDelete, this));
|
|
||||||
$('#systemtag_reset').on('click', _.bind(this._onClickReset, this));
|
|
||||||
$('#systemtag').select2(_.extend(self.select2)).on('select2-open', () => {
|
|
||||||
$('.select2-container').attr('aria-expanded', 'true')
|
|
||||||
});
|
|
||||||
$('#systemtag').select2(_.extend(self.select2)).on('select2-close', () => {
|
|
||||||
$('.select2-container').attr('aria-expanded', 'false')
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Selecting a systemtag in select2
|
|
||||||
*
|
|
||||||
* @param {OC.SystemTags.SystemTagModel} tag
|
|
||||||
*/
|
|
||||||
onSelectTag: function (tag) {
|
|
||||||
var level = 0;
|
|
||||||
if (tag.get('userVisible')) {
|
|
||||||
level += 2;
|
|
||||||
if (tag.get('userAssignable')) {
|
|
||||||
level += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#systemtag_name').val(tag.get('name'));
|
|
||||||
$('#systemtag_level').val(level);
|
|
||||||
|
|
||||||
this._prepareForm(tag.get('id'));
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clicking the "Create"/"Update" button
|
|
||||||
*/
|
|
||||||
_onClickSubmit: function () {
|
|
||||||
var level = parseInt($('#systemtag_level').val(), 10),
|
|
||||||
tagId = $('#systemtags').attr('data-systemtag-id');
|
|
||||||
var data = {
|
|
||||||
name: $('#systemtag_name').val(),
|
|
||||||
userVisible: level === 2 || level === 3,
|
|
||||||
userAssignable: level === 3
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!data.name) {
|
|
||||||
OCP.Toast.error(t('systemtags_manager', 'Tag name is empty'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tagId) {
|
|
||||||
var model = this.collection.get(tagId);
|
|
||||||
model.save(data);
|
|
||||||
} else {
|
|
||||||
this.collection.create(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
this._onClickReset();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clicking the "Delete" button
|
|
||||||
*/
|
|
||||||
_onClickDelete: function () {
|
|
||||||
var tagId = $('#systemtags').attr('data-systemtag-id');
|
|
||||||
var model = this.collection.get(tagId);
|
|
||||||
model.destroy();
|
|
||||||
|
|
||||||
this._onClickReset();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clicking the "Reset" button
|
|
||||||
*/
|
|
||||||
_onClickReset: function () {
|
|
||||||
$('#systemtag_name').val('');
|
|
||||||
$('#systemtag_level').val(3);
|
|
||||||
this._prepareForm(0);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prepare the form for create/update
|
|
||||||
*
|
|
||||||
* @param {number} tagId
|
|
||||||
*/
|
|
||||||
_prepareForm: function (tagId) {
|
|
||||||
if (tagId > 0) {
|
|
||||||
$('#systemtags').attr('data-systemtag-id', tagId);
|
|
||||||
$('#systemtag_delete').removeClass('hidden');
|
|
||||||
$('#systemtag_submit span').text(t('systemtags_manager', 'Update'));
|
|
||||||
$('#systemtag_create').addClass('hidden');
|
|
||||||
} else {
|
|
||||||
$('#systemtag').select2('val', '');
|
|
||||||
$('#systemtags').attr('data-systemtag-id', '');
|
|
||||||
$('#systemtag_delete').addClass('hidden');
|
|
||||||
$('#systemtag_submit span').text(t('systemtags_manager', 'Create'));
|
|
||||||
$('#systemtag_create').removeClass('hidden');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Select2 options for the SystemTag dropdown
|
|
||||||
*/
|
|
||||||
select2: {
|
|
||||||
allowClear: false,
|
|
||||||
multiple: false,
|
|
||||||
placeholder: t('systemtags_manager', 'Select tag …'),
|
|
||||||
query: _.debounce(function(query) {
|
|
||||||
query.callback({
|
|
||||||
results: OCA.SystemTags.Admin.collection.filterByName(query.term)
|
|
||||||
});
|
|
||||||
}, 100, true),
|
|
||||||
id: function(element) {
|
|
||||||
return element;
|
|
||||||
},
|
|
||||||
initSelection: function(element, callback) {
|
|
||||||
var selection = ($(element).val() || []).split('|').sort();
|
|
||||||
callback(selection);
|
|
||||||
},
|
|
||||||
formatResult: function (tag) {
|
|
||||||
return OC.SystemTags.getDescriptiveTag(tag);
|
|
||||||
},
|
|
||||||
formatSelection: function (tag) {
|
|
||||||
OCA.SystemTags.Admin.onSelectTag(tag);
|
|
||||||
return OC.SystemTags.getDescriptiveTag(tag);
|
|
||||||
},
|
|
||||||
escapeMarkup: function(m) {
|
|
||||||
return m;
|
|
||||||
},
|
|
||||||
sortResults: function(results) {
|
|
||||||
results.sort(function(a, b) {
|
|
||||||
return OC.Util.naturalSortCompare(a.get('name'), b.get('name'));
|
|
||||||
});
|
|
||||||
return results;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', function() {
|
|
||||||
if (!window.TESTING) {
|
|
||||||
OCA.SystemTags.Admin.init();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* @copyright 2023 Christopher Ng <chrng8@gmail.com>
|
||||||
|
*
|
||||||
|
* @author Christopher Ng <chrng8@gmail.com>
|
||||||
|
*
|
||||||
|
* @license AGPL-3.0-or-later
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
import { getRequestToken } from '@nextcloud/auth'
|
||||||
|
|
||||||
|
import SystemTagsSection from './views/SystemTagsSection.vue'
|
||||||
|
|
||||||
|
// @ts-expect-error __webpack_nonce__ is injected by webpack
|
||||||
|
__webpack_nonce__ = btoa(getRequestToken())
|
||||||
|
|
||||||
|
const SystemTagsSectionView = Vue.extend(SystemTagsSection)
|
||||||
|
new SystemTagsSectionView().$mount('#vue-admin-systemtags')
|
||||||
Loading…
Reference in New Issue