feat: routes and icons

- don't use backend generic home route
- use 'specs' and apiSpecs
- child apis draw their icon in 16
- keep open states

Signed-off-by: Sebastien Marinier <seb@smarinier.net>

Author: smarinier

appinfo/routes.php

@@ -8,16 +8,6 @@
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
 		['name' => 'apps#index', 'url' => '/apps', 'verb' => 'GET'],
 		['name' => 'apps#load', 'url' => '/apps/{app}', 'verb' => 'GET'],
-		// The following route is there to prevent redirection to NC's general homepage
-		// when reloading a page in the application (If we don't add it all pages that
-		// don't have a route registered here redirect to NC's general homepage upon refresh)
-		[
-			'name' => 'page#index',
-			'url' => '/{path}',
-			'verb' => 'GET',
-			'requirements' => ['path' => '.*'],
-			'defaults' => ['path' => 'dummy'],
-			'postfix' => 'catchall',
-		]
+		['name' => 'page#view', 'url' => '/view/{app}', 'verb' => 'GET'], // handled by Vue router
 	],
 ];

lib/Controller/PageController.php

@@ -29,4 +29,12 @@ public function index(): TemplateResponse {
 		return new TemplateResponse(Application::APP_ID, 'main');
 	}
 
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
+	public function view(): TemplateResponse {
+		return $this->index();
+	}
+
 }

lib/Service/AppsService.php

@@ -29,24 +29,24 @@ public function findSupported(): array {
 			if (!$this->appManager->isEnabledForUser($app)) {
 				continue;
 			}
-			$appApis = [];
+			$appSpecs = [];
 			try {
 				$baseDir = $this->appManager->getAppPath($app);
 				$iterator = new \DirectoryIterator($baseDir);
 				foreach ($iterator as $file) {
 					if ($file->getFilename() == 'openapi.json') {
-						$appApis[] = $app;
+						$appSpecs[] = $app;
 					} else if (str_starts_with($file->getFilename(), 'openapi-') && str_ends_with($file->getFilename(), '.json')) {
-						$appApis[] = $app . '-' . substr($file->getFilename(), 8, -5);
+						$appSpecs[] = $app . '-' . substr($file->getFilename(), 8, -5);
 					}
 				}
 			} catch (AppPathNotFoundException) {
 			}
-			if (!empty($appApis)) {
+			if ($appSpecs !== []) {
 				$appInfo = $this->appManager->getAppInfo($app);
-				$apiInfo =[
+				$apiInfo = [
 					'id' => $app,
-					'apis' => $appApis,
+					'specs' => $appSpecs,
 					'name' => $appInfo['name'],
 					'version' => $appInfo['version'],
 					'always_enabled' => in_array($app, $always),
@@ -62,7 +62,7 @@ public function findSupported(): array {
 		if (file_exists(\OC::$SERVERROOT . '/core/openapi.json')) {
 			array_unshift($apis, [
 				'id' => 'core',
-				'apis' => ['core'],
+				'specs' => ['core'],
 				'name' => 'Core Nextcloud API',
 				'version' => implode('.', \OCP\Util::getVersion()),
 				'always_enabled' => true,

src/ApiNavigationList.vue

@@ -4,8 +4,9 @@
 			:key="app.id"
 			allow-collapse
 			:name="app.name"
-			:open="isSelectedChild($route.params.appid, app)"
-			:to="{path: `/view/${app.id}`}">
+			:open="isSelectedChild($route.params.appid, app) || isManuallyOpened(app.id)"
+			:to="{path: `/view/${app.id}`}"
+			@update:open="(open) => onOpen(app.id, open)">
 			<template #icon>
 				<AppIcon v-if="app.icon_url"
 					:href="app.icon_url" />
@@ -14,7 +15,15 @@
 			<NcAppNavigationItem v-for="child in childApis(app)"
 				:key="child.id"
 				:name="child.name"
-				:to="{path: `/view/${child.id}`}" />
+				:to="{path: `/view/${child.id}`}">
+				<template #icon>
+					<AppIcon v-if="app.icon_url"
+						size="16"
+						:href="app.icon_url" />
+					<ApiIcon v-else
+						size="16" />
+				</template>
+			</NcAppNavigationItem>
 		</NcAppNavigationItem>
 	</NcAppNavigationList>
 </template>
@@ -42,31 +51,37 @@ export default {
 	},
 	computed: {
 		apps() {
-			const apps = store.apps
+			return store.apps
 				.filter(app => app.always_enabled === this.alwaysEnabled)
 				.sort(function(a, b) {
 					// core nextcloud always first
 					if (a.id === 'core') return -1
 					if (b.id === 'core') return 1
 					return OC.Util.naturalSortCompare(a.name, b.name)
 				})
-			return apps
 		},
 	},
 	methods: {
 		isSelectedChild(appId, app) {
 			if (appId === app.id) {
 				return false
 			}
-			return app.apis.indexOf(appId) >= 0
+			return app.specs.indexOf(appId) >= 0
 		},
 		childApis(app) {
-			if (app.apis === undefined || app.apis.length === 1) {
+			if (app.specs === undefined || app.specs.length === 1) {
 				return []
 			}
-			return app.apis.filter(id => id !== app.id)
+			return app.specs
+				.filter(id => id !== app.id)
 				.map(cid => ({ id: cid, name: cid }))
 		},
+		isManuallyOpened(appId) {
+			return store.isAppOpened(appId)
+		},
+		onOpen(appId, open) {
+			store.appOpen(appId, open)
+		},
 	},
 }
 </script>

src/AppIcon.vue

@@ -1,12 +1,11 @@
 <template>
-	<svg width="24"
-		height="24"
-		viewBox="0 0 24 24">
+	<svg :width="size"
+		:height="size"
+		:viewBox="`0 0 ${size} ${size}`">
 		<image x="0"
 			y="0"
-			width="24"
-			height="24"
-			preserveAspectRatio="xMinYMin meet"
+			:width="size"
+			:height="size"
 			:xlink:href="href"
 			class="app-icon" />
 	</svg>
@@ -17,6 +16,7 @@ export default {
 	name: 'AppIcon',
 	props: {
 		href: { type: String, default: '' },
+		size: { type: Number, default: 24 },
 	},
 }
 </script>

src/Welcome.vue

@@ -14,7 +14,7 @@
 					<template #icon>
 						<OpenInNew :size="20" />
 					</template>
-					Nextcloud OpenApi extractor
+					Nextcloud openapi-extractor
 				</NcActionLink>
 			</NcActions>
 		</div>

src/store.js

@@ -15,6 +15,7 @@ export const useAppsStore = defineStore('ocs-api-viewer-apps', {
 	state: () => ({
 		loading: true,
 		apps: [],
+		appOpened: [],
 	}),
 
 	actions: {
@@ -41,5 +42,11 @@ export const useAppsStore = defineStore('ocs-api-viewer-apps', {
 		getAppById(appId) {
 			return this.apps.find(({ id }) => id === appId) ?? null
 		},
+		isAppOpened(appId) {
+			return this.appOpened[appId] ?? false
+		},
+		appOpen(appId, open) {
+			this.appOpened[appId] = open
+		},
 	},
 })