chore(systemtags): Replace php markup with vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>

6 files changed, 35 insertions, 260 deletions

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 <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();
-	}
-});
-
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 <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')
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 <http://www.gnu.org/licenses/>.
  *
  */
-
-script('core', 'systemtags');
-
-script('systemtags', 'admin');
-style('systemtags', 'settings');
-
-/** @var \OCP\IL10N $l */
 ?>
 
-<form id="systemtags" class="section" data-systemtag-id="">
-	<h2><?php p($l->t('Collaborative tags')); ?></h2>
-	<p class="settings-hint"><?php p($l->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.')); ?></p>
-
-	<input type="hidden" name="systemtag" id="systemtag" placeholder="<?php p($l->t('Select tag …')); ?>" />
-
-	<h3 id="systemtag_create"><?php p($l->t('Create a new tag')); ?></h3>
-
-	<div class="systemtag-input">
-		<div class="systemtag-input--name">
-			<label for="systemtag_name"><?php p($l->t('Tag name')); ?></label>
-			<input type="text" id="systemtag_name" name="systemtag_name" placeholder="<?php p($l->t('Name')); ?>">
-		</div>
-
-		<div class="systemtag-input--level">
-			<label for="systemtag_level"><?php p($l->t('Tag level')); ?></label>
-			<select id="systemtag_level">
-				<option value="3"><?php p($l->t('Public')); ?></option>
-				<option value="2"><?php p($l->t('Restricted')); ?></option>
-				<option value="0"><?php p($l->t('Invisible')); ?></option>
-			</select>
-		</div>
-
-		<div class="systemtag-input--actions">
-			<a id="systemtag_delete" class="hidden button systemtag-input--actions-button"><span><?php p($l->t('Delete')); ?></span></a>
-			<a id="systemtag_reset" class="button systemtag-input--actions-button"><span><?php p($l->t('Reset')); ?></span></a>
-			<a id="systemtag_submit" class="button systemtag-input--actions-button"><span><?php p($l->t('Create')); ?></span></a>
-		</div>
-	</div>
-
-</form>
+<div id="vue-admin-systemtags"></div>
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'),