From 753e88793e0525cadd8a544e3f4093cc3cf7b331 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Tue, 30 Aug 2022 18:07:25 +0200
Subject: Port admin settings to vue (#1880)

* Port admin settings to vue

Co-authored-by: anoy. <anoymouserver@users.noreply.github.com>
Co-authored-by: Benjamin Brahmer <info@b-brahmer.de>
Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 src/components/AdminSettings.vue | 147 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 src/components/AdminSettings.vue

(limited to 'src/components/AdminSettings.vue')

diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
new file mode 100644
index 000000000..4e129caf6
--- /dev/null
+++ b/src/components/AdminSettings.vue
@@ -0,0 +1,147 @@
+<!--
+SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu>
+SPDX-Licence-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcSettingsSection :title="t('news', 'News')"
+		class="news-settings"
+		doc-url="https://nextcloud.github.io/news/admin/">
+		<NcCheckboxRadioSwitch type="switch"
+			:checked.sync="useCronUpdates"
+			@update:checked="update('useCronUpdates', useCronUpdates)">
+			{{ t('news', 'Use system cron for updates') }}
+		</NcCheckboxRadioSwitch>
+		<p><em>{{ t('news', 'Disable this if you use a custom updater.') }}</em></p>
+
+		<NcTextField :value.sync="autoPurgeMinimumInterval"
+			:label="t('news', 'Purge interval')"
+			:label-visible="true"
+			@update:value="update('autoPurgeMinimumInterval', autoPurgeMinimumInterval)" />
+		<p><em>{{ t('news', 'Minimum amount of seconds after deleted feeds and folders are removed from the database; values below 60 seconds are ignored.') }}</em></p>
+
+		<NcTextField :value.sync="autoPurgeCount"
+			:label="t('news', 'Maximum read count per feed')"
+			:label-visible="true"
+			@update:value="update('autoPurgeCount', autoPurgeCount)" />
+		<p><em>{{ t('news', `Defines the maximum amount of articles that can be read per feed which won't be deleted by the cleanup job; if old articles reappear after being read, increase this value; negative values such as -1 will turn this feature off.`) }}</em></p>
+
+		<NcTextField :value.sync="maxRedirects"
+			:label="t('news', 'Maximum redirects')"
+			:label-visible="true"
+			@update:value="update('maxRedirects', maxRedirects)" />
+		<p><em>{{ t('news', 'How many redirects the feed fetcher should follow.') }}</em></p>
+
+		<NcTextField :value.sync="feedFetcherTimeout"
+			:label="t('news', 'Feed fetcher timeout')"
+			:label-visible="true"
+			@update:value="update('feedFetcherTimeout', feedFetcherTimeout)" />
+		<p><em>{{ t('news', 'Maximum number of seconds to wait for an RSS or Atom feed to load; if it takes longer the update will be aborted.') }}</em></p>
+
+		<NcTextField :value.sync="exploreUrl"
+			:label="t('news', 'Explore Service URL')"
+			:label-visible="true"
+			@update:value="update('exploreUrl', exploreUrl)" />
+		<p><em>{{ t('news', 'If given, this service\'s URL will be queried for displaying the feeds in the explore feed section. To fall back to the built in explore service, leave this input empty.') }}</em></p>
+
+		<NcTextField :value.sync="updateInterval"
+			:label="t('news', 'Update interval')"
+			:label-visible="true"
+			@update:value="update('updateInterval', updateInterval)" />
+		<p><em>{{ t('news', 'Interval in seconds in which the feeds will be updated.') }}</em></p>
+	</NcSettingsSection>
+</template>
+
+<script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import { loadState } from '@nextcloud/initial-state'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import confirmPassword from '@nextcloud/password-confirmation'
+
+/**
+ *
+ * @param func
+ * @param wait
+ */
+function debounce(func, wait) {
+	let timeout
+
+	return function executedFunction(...args) {
+		clearTimeout(timeout)
+		timeout = setTimeout(() => { func.apply(this, args) }, wait)
+	}
+}
+
+const successMessage = debounce(() => showSuccess(t('news', 'Successfuly updated news configuration')), 500)
+
+export default {
+	name: 'AdminSettings',
+	components: {
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
+		NcTextField,
+	},
+	data() {
+		return {
+			useCronUpdates: loadState('news', 'useCronUpdates') === '1',
+			autoPurgeMinimumInterval: loadState('news', 'autoPurgeMinimumInterval'),
+			autoPurgeCount: loadState('news', 'autoPurgeCount'),
+			maxRedirects: loadState('news', 'maxRedirects'),
+			feedFetcherTimeout: loadState('news', 'feedFetcherTimeout'),
+			exploreUrl: loadState('news', 'exploreUrl'),
+			updateInterval: loadState('news', 'updateInterval'),
+		}
+	},
+	methods: {
+		async update(key, value) {
+			await confirmPassword()
+			const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
+				appId: 'news',
+				key,
+			})
+			if (key === 'useCronUpdates') {
+				value = value ? '1' : '0'
+			}
+			try {
+				const { data } = await axios.post(url, {
+					value,
+				})
+				this.handleResponse({
+					status: data.ocs?.meta?.status,
+				})
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('news', 'Unable to update news config'),
+					error: e,
+				})
+			}
+		},
+		async handleResponse({ status, errorMessage, error }) {
+			if (status !== 'ok') {
+				showError(errorMessage)
+				console.error(errorMessage, error)
+			} else {
+				successMessage()
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.news-settings {
+	p {
+		max-width: 700px;
+		margin-top: .25rem;
+		margin-bottom: 1rem;
+	}
+
+	.input-field {
+		max-width: 350px;
+	}
+}
+</style>
-- 
cgit v1.2.3