From b4b5612d7c527c77b4b1484b0c4761749796a13f Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Tue, 7 Nov 2023 18:20:49 -0800 Subject: [PATCH] chore(systemtags): Replace php markup with vue Signed-off-by: Christopher Ng --- apps/systemtags/css/settings.css | 29 ---- apps/systemtags/js/admin.js | 193 ------------------------- apps/systemtags/lib/Settings/Admin.php | 1 + apps/systemtags/src/admin.ts | 32 ++++ apps/systemtags/templates/admin.php | 39 +---- webpack.modules.js | 1 + 6 files changed, 35 insertions(+), 260 deletions(-) delete mode 100644 apps/systemtags/css/settings.css delete mode 100644 apps/systemtags/js/admin.js create mode 100644 apps/systemtags/src/admin.ts diff --git a/apps/systemtags/css/settings.css b/apps/systemtags/css/settings.css deleted file mode 100644 index eb1d2ad45f6..00000000000 --- a/apps/systemtags/css/settings.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/apps/systemtags/js/admin.js b/apps/systemtags/js/admin.js deleted file mode 100644 index 0b9d9ec4a41..00000000000 --- a/apps/systemtags/js/admin.js +++ /dev/null @@ -1,193 +0,0 @@ -/** - * @copyright Copyright (c) 2016 Joas Schilling - * @copyright Copyright (c) 2019 Gary Kim - * - * @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 . - * - */ - -(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(); - } -}); - diff --git a/apps/systemtags/lib/Settings/Admin.php b/apps/systemtags/lib/Settings/Admin.php index 5a5cf3d49e2..cb88a8282eb 100644 --- a/apps/systemtags/lib/Settings/Admin.php +++ b/apps/systemtags/lib/Settings/Admin.php @@ -32,6 +32,7 @@ class Admin implements ISettings { * @return TemplateResponse */ public function getForm() { + \OCP\Util::addScript('systemtags', 'admin'); return new TemplateResponse('systemtags', 'admin', [], ''); } diff --git a/apps/systemtags/src/admin.ts b/apps/systemtags/src/admin.ts new file mode 100644 index 00000000000..77f5e344f92 --- /dev/null +++ b/apps/systemtags/src/admin.ts @@ -0,0 +1,32 @@ +/** + * @copyright 2023 Christopher Ng + * + * @author Christopher Ng + * + * @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 . + * + */ + +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') diff --git a/apps/systemtags/templates/admin.php b/apps/systemtags/templates/admin.php index 881172944df..9358bf7fcda 100644 --- a/apps/systemtags/templates/admin.php +++ b/apps/systemtags/templates/admin.php @@ -18,43 +18,6 @@ * along with this program. If not, see . * */ - -script('core', 'systemtags'); - -script('systemtags', 'admin'); -style('systemtags', 'settings'); - -/** @var \OCP\IL10N $l */ ?> -
-

t('Collaborative tags')); ?>

-

t('Collaborative tags are available for all users. Restricted tags are visible to users but cannot be assigned by them. Invisible tags are for internal use, since users cannot see or assign them.')); ?>

- - - -

t('Create a new tag')); ?>

- -
-
- - -
- -
- - -
- -
- - t('Reset')); ?> - t('Create')); ?> -
-
- -
+
diff --git a/webpack.modules.js b/webpack.modules.js index 668403fb37a..d749f13b81f 100644 --- a/webpack.modules.js +++ b/webpack.modules.js @@ -103,6 +103,7 @@ module.exports = { }, systemtags: { init: path.join(__dirname, 'apps/systemtags/src', 'init.ts'), + admin: path.join(__dirname, 'apps/systemtags/src', 'admin.ts'), }, theming: { 'personal-theming': path.join(__dirname, 'apps/theming/src', 'personal-settings.js'),