fix: add user settings (compact and compactExpand are hidden at the m…

…oment)

Signed-off-by: Wolfgang <github@linux-dude.de>

lib/AppInfo/Application.php

@@ -25,6 +25,7 @@
 use OCA\News\Search\FolderSearchProvider;
 use OCA\News\Search\ItemSearchProvider;
 use OCA\News\Listeners\AddMissingIndicesListener;
+use OCA\News\Listeners\UserSettingsListener;
 use OCA\News\Utility\Cache;
 
 use OCP\AppFramework\Bootstrap\IBootContext;
@@ -36,6 +37,8 @@
 use OCA\News\Fetcher\FeedFetcher;
 use OCA\News\Fetcher\Fetcher;
 use OCP\User\Events\BeforeUserDeletedEvent;
+use OCP\Config\BeforePreferenceDeletedEvent;
+use OCP\Config\BeforePreferenceSetEvent;
 use OCP\DB\Events\AddMissingIndicesEvent;
 use Psr\Container\ContainerInterface;
 use Psr\Log\LoggerInterface;
@@ -91,6 +94,8 @@ public function register(IRegistrationContext $context): void
 
         $context->registerEventListener(BeforeUserDeletedEvent::class, UserDeleteHook::class);
         $context->registerEventListener(AddMissingIndicesEvent::class, AddMissingIndicesListener::class);
+        $context->registerEventListener(BeforePreferenceDeletedEvent::class, UserSettingsListener::class);
+        $context->registerEventListener(BeforePreferenceSetEvent::class, UserSettingsListener::class);
 
         // parameters
         $context->registerParameter('exploreDir', __DIR__ . '/../Explore/feeds');

lib/Controller/PageController.php

@@ -22,6 +22,7 @@
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
+use OCP\AppFramework\Services\IInitialState;
 
 use OCA\News\Service\StatusService;
 use OCA\News\Explore\RecommendedSites;
@@ -57,13 +58,19 @@ class PageController extends Controller
      */
     private $statusService;
 
+    /*
+     * @var IInitialState
+     */
+    private $initialState;
+
     public function __construct(
         IRequest $request,
         IConfig $settings,
         IURLGenerator $urlGenerator,
         IL10N $l10n,
         RecommendedSites $recommendedSites,
         StatusService $statusService,
+        IInitialState $initialState,
         ?IUserSession $userSession
     ) {
         parent::__construct($request, $userSession);
@@ -72,6 +79,7 @@ public function __construct(
         $this->l10n = $l10n;
         $this->recommendedSites = $recommendedSites;
         $this->statusService = $statusService;
+        $this->initialState = $initialState;
     }
 
 
@@ -92,6 +100,22 @@ public function index(): TemplateResponse
             ]
         );
 
+        $usersettings = [
+            'compact',
+            'compactExpand',
+            'preventReadOnScroll',
+            'oldestFirst',
+            'showAll'
+        ];
+        foreach ($usersettings as $setting) {
+            $this->initialState->provideInitialState($setting, $this->settings->getUserValue(
+                $this->getUserId(),
+                $this->appName,
+		$setting,
+	        '0')
+            );
+        }
+
         $csp = new ContentSecurityPolicy();
         $csp->addAllowedImageDomain('*')
             ->addAllowedMediaDomain('*')

lib/Listeners/UserSettingsListener.php

@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+namespace OCA\News\Listeners;
+
+use OCP\Config\BeforePreferenceDeletedEvent;
+use OCP\Config\BeforePreferenceSetEvent;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventListener;
+
+/** @template-implements IEventListener<BeforePreferenceSetEvent|BeforePreferenceDeletedEvent> */
+class UserSettingsListener implements IEventListener {
+
+	public function handle(Event $event): void {
+		if ($event instanceof BeforePreferenceSetEvent) {
+			if ($event->getAppId() === 'news') {
+				$event->setValid(true);
+			}
+		} elseif ($event instanceof BeforePreferenceDeletedEvent) {
+			if ($event->getAppId() === 'news') {
+				$event->setValid(true);
+			}
+		}
+	}
+}

src/components/Sidebar.vue

@@ -109,20 +109,83 @@
 				</template>
 			</NcAppNavigationItem>
 		</template>
+		<template #footer>
+			<NcAppNavigationSettings :name="t('news', 'Settings')">
+				<NcButton @click="showHelp = true">
+					{{ t('news', 'Keyboard shortcuts') }}
+				</NcButton>
+				<HelpModal v-if="showHelp" @close="showHelp=false" />
+				<div>
+					<div>
+						<input id="toggle-preventreadonscroll"
+							v-model="preventReadOnScroll"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-preventreadonscroll">
+							{{ t('news', 'Disable mark read through scrolling') }}
+						</label>
+					</div>
+<!---
+					<div>
+						<input id="toggle-compact"
+							v-model="compact"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-compact">
+							{{ t('news', 'Compact view') }}
+						</label>
+					</div>
+					<div>
+						<input id="toggle-compactexpand"
+							v-model="compactExpand"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-compactexpand">
+							{{ t('news', 'Expand articles on key navigation') }}
+						</label>
+					</div>
+--->
+					<div>
+						<input id="toggle-showall"
+							v-model="showAll"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-showall">
+							{{ t('news', 'Show all articles') }}
+						</label>
+					</div>
+					<div>
+						<input id="toggle-oldestfirst"
+							v-model="oldestFirst"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-oldestfirst">
+							{{ t('news', 'Reverse ordering (oldest on top)') }}
+						</label>
+					</div>
+				</div>
+			</NcAppNavigationSettings>
+		</template>
 	</NcAppNavigation>
 </template>
 
 <script lang="ts">
 
 import { mapState } from 'vuex'
 import Vue from 'vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem.js'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import RssIcon from 'vue-material-design-icons/Rss.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
@@ -137,6 +200,8 @@ import { ACTIONS, AppState } from '../store'
 import AddFeed from './AddFeed.vue'
 import SidebarFeedLinkActions from './SidebarFeedLinkActions.vue'
 
+import HelpModal from './modals/HelpModal.vue'
+import { subscribe } from '@nextcloud/event-bus'
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 
@@ -166,8 +231,11 @@ export default Vue.extend({
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcAppNavigationNewItem,
+		NcAppNavigationSettings,
+		NcCheckboxRadioSwitch,
 		NcCounterBubble,
 		NcActionButton,
+		NcButton,
 		AddFeed,
 		RssIcon,
 		FolderIcon,
@@ -176,23 +244,105 @@ export default Vue.extend({
 		FolderPlusIcon,
 		PlusIcon,
 		SidebarFeedLinkActions,
+		HelpModal,
 	},
 	data: () => {
 		return {
 			showAddFeed: false,
 			ROUTES,
+			showHelp: false,
 		}
 	},
 	computed: {
 		...mapState(['feeds', 'folders', 'items']),
 		...mapState(SideBarState),
+		compact: {
+			get() {
+				return this.$store.getters.compact
+			},
+			set(newValue) {
+				this.saveSetting('compact', newValue)
+			},
+		},
+		compactExpand: {
+			get() {
+				return this.$store.getters.compactExpand
+			},
+			set(newValue) {
+				this.saveSetting('compactExpand', newValue)
+			},
+		},
+		oldestFirst: {
+			get() {
+				return this.$store.getters.oldestFirst
+
+			},
+			set(newValue) {
+				this.saveSetting('oldestFirst', newValue)
+			},
+		},
+		preventReadOnScroll: {
+			get() {
+				return this.$store.getters.preventReadOnScroll
+
+			},
+			set(newValue) {
+				this.saveSetting('preventReadOnScroll', newValue)
+			},
+		},
+		showAll: {
+			get() {
+				return this.$store.getters.showAll
+
+			},
+			set(newValue) {
+				this.saveSetting('showAll', newValue)
+			},
+		},
 	},
 	created() {
 		if (this.$route.query.subscribe_to) {
 			this.showAddFeed = true
 		}
 	},
+	mounted() {
+		subscribe('news:global:toggle-help-dialog', () => {
+			this.showHelp = !this.showHelp
+		})
+	},
 	methods: {
+		async saveSetting(key, value) {
+			this.$store.commit(key, {value: value})
+			const url = generateOcsUrl(
+				'/apps/provisioning_api/api/v1/config/users/{appId}/{key}',
+				{
+					appId: 'news',
+					key,
+				},
+			)
+			value = value ? '1' : '0'
+			try {
+				const { data } = await axios.post(url, {
+					configValue: value,
+				})
+				this.handleResponse({
+					status: data.ocs?.meta?.status,
+				})
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('news', 'Unable to update news config'),
+					error: e,
+				})
+			}
+		},
+		handleResponse({ status, errorMessage, error }) {
+			if (status !== 'ok') {
+				showError(errorMessage)
+				console.error(errorMessage, error)
+			} else {
+				showSuccess(t('news',  'Successfully updated news configuration'))
+			}
+		},
 		newFolder(value: string) {
 			const folderName = value.trim()
 			const folder = { name: folderName }

src/components/feed-display/FeedItemDisplayList.vue

@@ -118,10 +118,10 @@ export default Vue.extend({
 
 			// Always want to sort by date (most recent first)
 			sort: (a: FeedItem, b: FeedItem) => {
-				if (a.pubDate > b.pubDate) {
-					return -1
+				if (this.$store.getters.oldestFirst) {
+					return a.pubDate < b.pubDate ? -1 : 1
 				} else {
-					return 1
+					return a.pubDate > b.pubDate ? -1 : 1
 				}
 			},
 			cache: [] as FeedItem[] | undefined,