[Vue Rewrite] BugFix (Feed Actions) + Warning Message + subscribe_to URL parameter

docs/developer.md

@@ -20,7 +20,7 @@ The PHP code should all adhere to [PSR-2](https://www.php-fig.org/psr/psr-2/).
 *Note that this is a different codestyle than Nextcloud itself uses.*
 To test the codestyle you can run `make phpcs`.
 
-For linting JavaScript, a [jshint file](https://github.com/nextcloud/news/blob/master/js/.jshintrc) is used that is run before compiling the JavaScript.
+The application Front End uses Vue 2.7 and the Nextcloud Libraries [Vue Components](https://github.com/nextcloud-libraries/nextcloud-vue) for building the Application running inside your Nextcloud instance. For linting these files, we are using eslint, see the [config file](https://github.com/nextcloud/news/blob/master/.eslintrc.js). We also have Unit Tests for the components that run with Jest, please ensure these pass when adding new features/fixing bugs.
 
 ## General Developer setup
 Check the Nextcloud [documentation](https://docs.nextcloud.com/server/latest/developer_manual/getting_started/devenv.html) to learn how to setup a developer environment, alternatively to a proper web server you can also use the [builtin php server](https://www.php.net/manual/en/features.commandline.webserver.php) on demand, it is enough for development purposes.

lib/Plugin/Client/Plugin.php

@@ -14,6 +14,8 @@
 namespace OCA\News\Plugin\Client;
 
 /**
+ * TODO: remove this? it seems old.. there is no global list of plugins anymore and seems like plugins register themselves
+ *
  * We actually really want to avoid this global list of plugins. A way would be
  * for News plugin apps to register themselves in a special database table
  * and the News app would just pull out the scripts that should be attached

src/components/AddFeed.vue

@@ -151,6 +151,11 @@ export default Vue.extend({
 						|| (this.createNewFolder && (this.newFolderName === '' || this.folderNameExists())))
 		},
 	},
+	created() {
+		if (this.$route.query.subscribe_to) {
+			this.feedUrl = this.$route.query.subscribe_to as string
+		}
+	},
 	methods: {
 		/**
 		 * Adds a New Feed via the Vuex Store

src/components/Sidebar.vue

@@ -48,7 +48,8 @@
 				:name="topLevelItem.name || topLevelItem.title"
 				:icon="''"
 				:to="isFolder(topLevelItem) ? { name: ROUTES.FOLDER, params: { folderId: topLevelItem.id.toString() }} : { name: ROUTES.FEED, params: { feedId: topLevelItem.id.toString() } }"
-				:allow-collapse="true">
+				:allow-collapse="true"
+				:force-menu="true">
 				<template #default>
 					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
 						:key="feed.name"
@@ -85,14 +86,13 @@
 				</template>
 				<template #actions>
 					<SidebarFeedLinkActions v-if="topLevelItem.name === undefined" :feed-id="topLevelItem.id" />
-
 					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-checkmark" @click="markFolderRead(topLevelItem)">
 						{{ t("news", "Mark read") }}
 					</NcActionButton>
 					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-rename" @click="renameFolder(topLevelItem)">
 						{{ t("news", "Rename") }}
 					</NcActionButton>
-					<NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)">
+					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-delete" @click="deleteFolder(topLevelItem)">
 						{{ t("news", "Delete") }}
 					</NcActionButton>
 				</template>
@@ -121,7 +121,6 @@ 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 AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
@@ -136,6 +135,7 @@ import { ROUTES } from '../routes'
 import { ACTIONS, AppState } from '../store'
 
 import AddFeed from './AddFeed.vue'
+import SidebarFeedLinkActions from './SidebarFeedLinkActions.vue'
 
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
@@ -175,6 +175,7 @@ export default Vue.extend({
 		EarthIcon,
 		FolderPlusIcon,
 		PlusIcon,
+		SidebarFeedLinkActions,
 	},
 	data: () => {
 		return {
@@ -186,6 +187,11 @@ export default Vue.extend({
 		...mapState(['feeds', 'folders', 'items']),
 		...mapState(SideBarState),
 	},
+	created() {
+		if (this.$route.query.subscribe_to) {
+			this.showAddFeed = true
+		}
+	},
 	methods: {
 		newFolder(value: string) {
 			const folderName = value.trim()

src/components/SidebarFeedLinkActions.vue

@@ -86,7 +86,6 @@
 				<RssIcon />
 			</template>
 		</NcAppNavigationItem>
-
 	</span>
 </template>
 

src/components/feed-display/FeedItemRow.vue

@@ -203,7 +203,7 @@ export default Vue.extend({
 		align-self: start;
 	}
 
-	.button-container .action-item .button-vue, .button-container .material-design-icon {
+	.feed-item-row .button-container .button-vue, .feed-item-row .button-container .button-vue .button-vue__wrapper, .feed-item-row .button-container .material-design-icon {
 		width: 30px !important;
     min-width: 30px;
     min-height: 30px;

src/main.js

@@ -23,6 +23,14 @@ const store = new Store(mainStore)
 export default new Vue({
 	router,
 	store,
-	el: '#content',
+	el: '#q-app',
 	render: (h) => h(App),
 })
+
+/**
+ * Closes warning messages generated by PHP code
+ */
+function closeCronWarning() {
+	document.getElementById('cron-warning').style.display = 'none'
+}
+document.getElementById('close-cron-warning').onclick = closeCronWarning

templates/index.php

@@ -1,14 +1,19 @@
 <?php
+use OCA\News\Plugin\Client\Plugin;
+
 script('news', 'nextcloud-news-main');
-style('news', 'navigation');
-style('news', 'explore');
-style('news', 'admin');
-style('news', 'app');
-style('news', 'content');
-style('news', 'custom');
-style('news', 'mobile');
-style('news', 'settings');
-style('news', 'shortcuts');
+
+// load plugin scripts and styles
+foreach (Plugin::getStyles() as $appName => $fileName) {
+  style($appName, $fileName);
+}
+foreach (Plugin::getScripts() as $appName => $fileName) {
+  script($appName, $fileName);
+}
+
+print_unescaped($this->inc('part.content.warnings'))
+
 ?>
 
+
 <div id="q-app"></div>

templates/part.content.warnings.php

@@ -0,0 +1,61 @@
+<?php if ($_['warnings']['improperlyConfiguredCron']) { ?>
+    <style>
+        #cron-warning {
+            position: absolute;
+            right: 30px;
+            top: 40px;
+            z-index: 5;
+            padding: 5px;
+            background-color: var(--color-main-background);
+            color: var(--color-main-text);
+            box-shadow: 0 0 6px 0 var(--color-box-shadow);
+            border-radius: var(--border-radius);
+            display: flex;
+        }
+
+        #cron-warning a {
+            color: #3a84e4;
+            text-decoration: underline;
+            font-size: small;
+        }
+
+        #close-cron-warning {
+            padding: 10px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        #content {
+            margin-top: 0px;
+        }
+    </style>
+
+    <div id="cron-warning">
+        <div style="<?= $_['nc_major_version'] >= 25 ? 'padding: 12px;' : ''; ?>">
+            <p><?php p($l->t('Ajax or webcron mode detected! Your feeds will not be updated!')); ?></p>
+            <ul>
+                <li>
+                    <a href="https://docs.nextcloud.org/server/latest/admin_manual/configuration_server/background_jobs_configuration.html#cron"
+                    target="_blank"
+                    rel="noreferrer">
+                        <?php
+                        p($l->t('How to set up the operating system cron'));
+                        ?>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/nextcloud/news-updater"
+                    target="_blank"
+                    rel="noreferrer">
+                        <?php
+                        p($l->t('Install and set up a faster parallel updater that uses the News app\'s update API'));
+                        ?>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div>
+            <span id="close-cron-warning">X</span>
+        </div>
+    </div>
+<?php }; ?>

tests/javascript/unit/components/AddFeed.spec.ts

@@ -20,6 +20,11 @@ describe('AddFeed.vue', () => {
 		wrapper = shallowMount(AddFeed, {
 			localVue,
 			mocks: {
+				$route: {
+					query: {
+						subscribe_to: undefined,
+					},
+				},
 				$store: mockStore,
 			},
 		})

tests/javascript/unit/components/Sidebar.spec.ts

@@ -19,6 +19,11 @@ describe('Sidebar.vue', () => {
 		wrapper = shallowMount(AppSidebar, {
 			localVue,
 			mocks: {
+				$route: {
+					query: {
+						subscribe_to: undefined,
+					},
+				},
 				$store: {
 					state: {
 						feeds,