Rewrite admin theming in Vue

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

2 files changed, 141 insertions, 0 deletions

diff --git a/apps/theming/src/mixins/admin/FieldMixin.js b/apps/theming/src/mixins/admin/FieldMixin.js
new file mode 100644
index 00000000000..811fa0c0bba
--- /dev/null
+++ b/apps/theming/src/mixins/admin/FieldMixin.js
@@ -0,0 +1,64 @@
+/**
+ * @copyright 2022 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/>.
+ *
+ */
+
+const styleRefreshFields = [
+	'color',
+	'logo',
+	'background',
+	'logoheader',
+	'favicon',
+	'disable-user-theming',
+]
+
+export default {
+	emits: [
+		'update:theming',
+	],
+
+	data() {
+		return {
+			showSuccess: false,
+			errorMessage: '',
+		}
+	},
+
+	computed: {
+		id() {
+			return `admin-theming-${this.name}`
+		},
+	},
+
+	methods: {
+		reset() {
+			this.showSuccess = false
+			this.errorMessage = ''
+		},
+
+		handleSuccess() {
+			this.showSuccess = true
+			setTimeout(() => { this.showSuccess = false }, 2000)
+			if (styleRefreshFields.includes(this.name)) {
+				this.$emit('update:theming')
+			}
+		},
+	},
+}
diff --git a/apps/theming/src/mixins/admin/TextValueMixin.js b/apps/theming/src/mixins/admin/TextValueMixin.js
new file mode 100644
index 00000000000..4cce8bb301a
--- /dev/null
+++ b/apps/theming/src/mixins/admin/TextValueMixin.js
@@ -0,0 +1,77 @@
+/**
+ * @copyright 2022 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 axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+import FieldMixin from './FieldMixin.js'
+
+export default {
+	mixins: [
+		FieldMixin,
+	],
+
+	watch: {
+		value(value) {
+			this.localValue = value
+		},
+	},
+
+	data() {
+		return {
+			localValue: this.value,
+		}
+	},
+
+	methods: {
+		async save() {
+			this.reset()
+			const url = generateUrl('/apps/theming/ajax/updateStylesheet')
+			// Convert boolean to string as server expects string value
+			const valueToPost = this.localValue === true ? 'yes' : this.localValue === false ? 'no' : this.localValue
+			try {
+				await axios.post(url, {
+					setting: this.name,
+					value: valueToPost,
+				})
+				this.$emit('update:value', this.localValue)
+				this.handleSuccess()
+			} catch (e) {
+				this.errorMessage = e.response.data.data?.message
+			}
+		},
+
+		async undo() {
+			this.reset()
+			const url = generateUrl('/apps/theming/ajax/undoChanges')
+			try {
+				await axios.post(url, {
+					setting: this.name,
+				})
+				this.$emit('update:value', this.defaultValue)
+				this.handleSuccess()
+			} catch (e) {
+				this.errorMessage = e.response.data.data?.message
+			}
+		},
+	},
+}