Improve installation pages

Signed-off-by: Christopher Ng <chrng8@gmail.com>

2 files changed, 86 insertions, 22 deletions

diff --git a/core/src/components/setup/InstallButton.vue b/core/src/components/setup/InstallButton.vue
new file mode 100644
index 00000000000..90e96207a75
--- /dev/null
+++ b/core/src/components/setup/InstallButton.vue
@@ -0,0 +1,44 @@
+<!--
+  - @copyright 2022 Christopher Ng <chrng8@gmail.com>
+  -
+  - @author Christopher Ng <chrng8@gmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+-->
+
+<template>
+	<button
+		class="primary"
+		:autofocus="true"
+		v-on="$listeners">
+		{{ t('core', 'Install recommended apps') }}
+	</button>
+</template>
+
+<script>
+export default {
+	name: 'InstallButton',
+}
+</script>
+
+<style lang="scss" scoped>
+	button {
+		margin: 24px auto 10px auto;
+		padding: 10px 20px;
+		font-size: 20px;
+	}
+</style>
diff --git a/core/src/components/setup/RecommendedApps.vue b/core/src/components/setup/RecommendedApps.vue
index 9ec5b9ceba7..cd39929f14b 100644
--- a/core/src/components/setup/RecommendedApps.vue
+++ b/core/src/components/setup/RecommendedApps.vue
@@ -28,9 +28,10 @@
 		<p v-else-if="loadingAppsError" class="loading-error text-center">
 			{{ t('core', 'Could not fetch list of apps from the App Store.') }}
 		</p>
-		<p v-else class="text-center">
+		<p v-else-if="installingApps" class="text-center">
 			{{ t('core', 'Installing apps …') }}
 		</p>
+
 		<div v-for="app in recommendedApps" :key="app.id" class="app">
 			<img :src="customIcon(app.id)" alt="">
 			<div class="info">
@@ -51,6 +52,10 @@
 				</p>
 			</div>
 		</div>
+
+		<InstallButton v-if="showInstallButton"
+			@click.stop.prevent="installApps" />
+
 		<p class="text-center">
 			<a :href="defaultPageUrl">{{ t('core', 'Cancel') }}</a>
 		</p>
@@ -64,6 +69,9 @@ import { loadState } from '@nextcloud/initial-state'
 import pLimit from 'p-limit'
 import { translate as t } from '@nextcloud/l10n'
 
+// TODO replace with Button component when @nextcloud/vue is upgraded to v5
+import InstallButton from './InstallButton'
+
 import logger from '../../logger'
 
 const recommended = {
@@ -97,8 +105,13 @@ const defaultPageUrl = loadState('core', 'defaultPageUrl')
 
 export default {
 	name: 'RecommendedApps',
+	components: {
+		InstallButton,
+	},
 	data() {
 		return {
+			showInstallButton: false,
+			installingApps: false,
 			loadingApps: true,
 			loadingAppsError: false,
 			apps: [],
@@ -110,28 +123,28 @@ export default {
 			return this.apps.filter(app => recommendedIds.includes(app.id))
 		},
 	},
-	mounted() {
-		return axios.get(generateUrl('settings/apps/list'))
-			.then(resp => resp.data)
-			.then(data => {
-				logger.info(`${data.apps.length} apps fetched`)
-
-				this.apps = data.apps.map(app => Object.assign(app, { loading: false, installationError: false }))
-				logger.debug(`${this.recommendedApps.length} recommended apps found`, { apps: this.recommendedApps })
-
-				this.installApps()
-			})
-			.catch(error => {
-				logger.error('could not fetch app list', { error })
-
-				this.loadingAppsError = true
-			})
-			.then(() => {
-				this.loadingApps = false
-			})
+	async mounted() {
+		try {
+			const { data } = await axios.get(generateUrl('settings/apps/list'))
+			logger.info(`${data.apps.length} apps fetched`)
+
+			this.apps = data.apps.map(app => Object.assign(app, { loading: false, installationError: false }))
+			logger.debug(`${this.recommendedApps.length} recommended apps found`, { apps: this.recommendedApps })
+
+			this.showInstallButton = true
+		} catch (error) {
+			logger.error('could not fetch app list', { error })
+
+			this.loadingAppsError = true
+		} finally {
+			this.loadingApps = false
+		}
 	},
 	methods: {
 		installApps() {
+			this.showInstallButton = false
+			this.installingApps = true
+
 			const limit = pLimit(1)
 			const installing = this.recommendedApps
 				.filter(app => !app.active && app.isCompatible && app.canInstall)
@@ -180,8 +193,15 @@ export default {
 
 }
 
-p.loading, p.loading-error {
-	height: 100px;
+p {
+	&.loading,
+	&.loading-error {
+		height: 100px;
+	}
+
+	&:last-child {
+		margin-top: 10px;
+	}
 }
 
 .text-center {