enh(App): navigation tweaks for Contexts

appinfo/routes.php

@@ -10,6 +10,7 @@
 			'verb' => 'OPTIONS', 'requirements' => ['path' => '.+']],
 
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+		['name' => 'page#context', 'url' => '/app/{contextId}', 'verb' => 'GET'],
 
 		['name' => 'tableTemplate#list', 'url' => '/table/templates', 'verb' => 'GET'],
 

lib/Controller/PageController.php

@@ -6,16 +6,21 @@
 use OCA\Text\Event\LoadEditor;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\INavigationManager;
 use OCP\IRequest;
 use OCP\Util;
 
 class PageController extends Controller {
-	private IEventDispatcher $eventDispatcher;
 
-	public function __construct(IRequest $request, IEventDispatcher $eventDispatcher) {
+	public function __construct(
+		IRequest $request,
+		protected IEventDispatcher $eventDispatcher,
+		protected INavigationManager $navigationManager,
+		protected IInitialState $initialState,
+	) {
 		parent::__construct(Application::APP_ID, $request);
-		$this->eventDispatcher = $eventDispatcher;
 	}
 
 	/**
@@ -37,4 +42,22 @@ public function index(): TemplateResponse {
 
 		return new TemplateResponse(Application::APP_ID, 'main');
 	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 * @IgnoreOpenAPI
+	 *
+	 * Render default template
+	 *
+	 * @psalm-param int<0, max> $appId
+	 */
+	public function context(int $contextId): TemplateResponse {
+		$navId = Application::APP_ID . '_application_' . $contextId;
+		$this->navigationManager->setActiveEntry($navId);
+
+		$this->initialState->provideInitialState('contextId', $contextId);
+
+		return $this->index();
+	}
 }

lib/Listener/BeforeTemplateRenderedListener.php

@@ -74,8 +74,7 @@ public function handle(Event $event): void {
 					$iconUrl = $this->urlGenerator->imagePath('core', 'places/default-app-icon.svg');
 				}
 
-				$contextUrl = $this->urlGenerator->linkToRoute('tables.page.index');
-				$contextUrl .= sprintf('#/application/%d', $context->getId());
+				$contextUrl = $this->urlGenerator->linkToRoute('tables.page.context', ['contextId' => $context->getId()]);
 
 				return [
 					'id' => Application::APP_ID . '_application_' . $context->getId(),

package.json

@@ -32,6 +32,7 @@
     "@nextcloud/dialogs": "^4.2.7",
     "@nextcloud/event-bus": "^3.2.0",
     "@nextcloud/files": "^3.1.1",
+    "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/l10n": "^3.0.1",
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/router": "^3.0.1",
@@ -67,4 +68,4 @@
     "cypress-downloadfile": "^1.2.3",
     "openapi-typescript": "^6.7.5"
   }
-}
+}

src/App.vue

@@ -16,6 +16,7 @@ import Navigation from './modules/navigation/sections/Navigation.vue'
 import { mapState } from 'vuex'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
 import { useResizeObserver } from '@vueuse/core'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'App',
@@ -57,6 +58,19 @@ export default {
 	},
 	methods: {
 		routing(currentRoute) {
+			try {
+				if (loadState('tables', 'contextId', undefined)) {
+					// prepare route, when Context is opened from navigation bar
+					const contextId = loadState('tables', 'contextId', undefined)
+					const originalUrl = window.location.href
+					this.$router.replace('/application/' + contextId).catch(() => {})
+					// reverts turning /apps/tables/app/28 into /apps/tables/app/28#/application/28
+					history.replaceState({}, undefined, originalUrl)
+				}
+			} catch (e) {
+				// contextId is not always set, it is fine.
+			}
+
 			if (currentRoute.name === 'tableRow' || currentRoute.name === 'viewRow') {
 				this.$store.commit('setActiveRowId', parseInt(currentRoute.params.rowId))
 			} else {
@@ -71,9 +85,10 @@ export default {
 				this.setPageTitle(this.$store.getters.activeView.title)
 				this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu li[data-app-id="tables"]'))
 			} else if (currentRoute.path.startsWith('/application/')) {
-				this.$store.commit('setActiveContextId', parseInt(currentRoute.params.contextId))
+				const contextId = parseInt(currentRoute.params.contextId)
+				this.$store.commit('setActiveContextId', contextId)
 				this.setPageTitle(this.$store.getters.activeContext.name)
-				this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu li[data-app-id="tables_application_' + currentRoute.params.contextId + '"]'))
+				this.switchActiveMenuEntry(document.querySelector('header .header-left .app-menu li[data-app-id="tables_application_' + contextId + '"]'))
 
 				// move the focus away from nav bar (import for app-internal switch)
 				const appContent = document.getElementById('app-content-vue')

src/modules/navigation/sections/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation>
+	<NcAppNavigation v-if="!isStandaloneContext">
 		<template #list>
 			<div class="filter-box">
 				<NcTextField :value.sync="filterString" :label="t('tables', 'Filter items')"
@@ -107,6 +107,7 @@ import { emit } from '@nextcloud/event-bus'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Archive from 'vue-material-design-icons/Archive.vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'Navigation',
@@ -177,6 +178,15 @@ export default {
 		getAllContexts() {
 			return this.contexts.filter(context => context.name.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
+		isStandaloneContext() {
+			try {
+				// this state is only set by the PageController.context route
+				loadState('tables', 'contextId', undefined)
+				return true
+			} catch (e) {
+				return false
+			}
+		},
 	},
 	methods: {
 		createTable() {