add update all button (#17512)

add update all button

apps/settings/css/settings.scss

@@ -943,9 +943,17 @@ span.version {
 	.section {
 		cursor: pointer;
 	}
+
 	.app-list-move {
 		transition: transform 1s;
 	}
+	#app-list-update-all {
+		margin-left: 10px;
+	}
+	.counter {
+		padding-left: $header-height - 10px;
+		margin: 10px;
+	}
 	&.installed {
 		.apps-list-container {
 			display: table;
@@ -969,6 +977,7 @@ span.version {
 			&.selected {
 				background-color: var(--color-background-dark);
 			}
+
 		}
 		.groups-enable {
 			margin-top: 0;

apps/settings/src/components/AppList.vue

@@ -24,6 +24,13 @@
 	<div id="app-content-inner">
 		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
+				<div v-if="showUpdateAll" class="counter">
+					{{ t('settings', '{counter} apps have an update available', {counter}) }}
+					<button v-if="showUpdateAll"
+						id="app-list-update-all"
+						class="primary"
+						@click="updateAll">{{t('settings', 'Update all')}}</button>
+				</div>
 				<transition-group name="app-list" tag="div" class="apps-list-container">
 					<AppItem v-for="app in apps"
 						:key="app.id"
@@ -91,6 +98,7 @@
 <script>
 import AppItem from './AppList/AppItem'
 import PrefixMixin from './PrefixMixin'
+import pLimit from 'p-limit'
 
 export default {
 	name: 'AppList',
@@ -100,9 +108,18 @@ export default {
 	mixins: [PrefixMixin],
 	props: ['category', 'app', 'search'],
 	computed: {
+		counter() {
+			return this.apps.filter(app => app.update).length
+		},
 		loading() {
 			return this.$store.getters.loading('list')
 		},
+		hasPendingUpdate() {
+			return this.apps.filter(app => app.update).length > 1
+		},
+		showUpdateAll() {
+			return this.hasPendingUpdate && ['installed', 'updates'].includes(this.category)
+		},
 		apps() {
 			let apps = this.$store.getters.getAllApps
 				.filter(app => app.name.toLowerCase().search(this.search.toLowerCase()) !== -1)
@@ -189,12 +206,24 @@ export default {
 		enableBundle(id) {
 			let apps = this.bundleApps(id).map(app => app.id)
 			this.$store.dispatch('enableApp', { appId: apps, groups: [] })
-				.catch((error) => { console.error(error); OC.Notification.show(error) })
+				.catch((error) => {
+					console.error(error)
+					OC.Notification.show(error)
+				})
 		},
 		disableBundle(id) {
 			let apps = this.bundleApps(id).map(app => app.id)
 			this.$store.dispatch('disableApp', { appId: apps, groups: [] })
-				.catch((error) => { OC.Notification.show(error) })
+				.catch((error) => {
+					OC.Notification.show(error)
+				})
+		},
+		updateAll() {
+			const limit = pLimit(1)
+			this.apps
+				.filter(app => app.update)
+				.map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id }))
+				)
 		}
 	}
 }

package.json

@@ -57,6 +57,7 @@
     "nextcloud-router": "0.0.9",
     "nextcloud-vue": "^0.12.7",
     "nextcloud-vue-collections": "^0.6.0",
+    "p-limit": "^2.2.1",
     "p-queue": "^6.2.1",
     "query-string": "^5.1.1",
     "select2": "3.5.1",