path: root/apps/settings/src/components/AppList.vue

<!--
  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<div id="app-content-inner">
		<div id="apps-list"
			class="apps-list"
			:class="{
				'apps-list--list-view': (useBundleView || useListView),
				'apps-list--store-view': useAppStoreView,
			}">
			<template v-if="useListView">
				<div v-if="showUpdateAll" class="apps-list__toolbar">
					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
					<NcButton v-if="showUpdateAll"
						id="app-list-update-all"
						type="primary"
						@click="updateAll">
						{{ n('settings', 'Update', 'Update all', counter) }}
					</NcButton>
				</div>

				<div v-if="!showUpdateAll" class="apps-list__toolbar">
					{{ t('settings', 'All apps are up-to-date.') }}
				</div>

				<TransitionGroup name="apps-list" tag="table" class="apps-list__list-container">
					<tr key="app-list-view-header">
						<th>
							<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
						</th>
					</tr>
					<AppItem v-for="app in apps"
						:key="app.id"
						:app="app"
						:category="category" />
				</TransitionGroup>
			</template>

			<table v-if="useBundleView"
				class="apps-list__list-container">
				<tr key="app-list-view-header">
					<th id="app-table-col-icon">
						<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
					</th>
					<th id="app-table-col-name">
						<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
					</th>
					<th id="app-table-col-version">
						<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
					</th>
					<th id="app-table-col-level">
						<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
					</th>
					<th id="app-table-col-actions">
						<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
					</th>
				</tr>
				<template v-for="bundle in bundles">
					<tr :key="bundle.id">
						<th :id="`app-table-rowgroup-${bundle.id}`" colspan="5" scope="rowgroup">
							<div class="apps-list__bundle-heading">
								<span class="apps-list__bundle-header">
									{{ bundle.name }}
								</span>
								<NcButton type="secondary" @click="toggleBundle(bundle.id)">
									{{ t('settings', bundleToggleText(bundle.id)) }}
								</NcButton>
							</div>
						</th>
					</tr>
					<AppItem v-for="app in bundleApps(bundle.id)"
						:key="bundle.id + app.id"
						:use-bundle-view="true"
						:headers="`app-table-rowgroup-${bundle.id}`"
						:app="app"
						:category="category" />
				</template>
			</table>
			<ul v-if="useAppStoreView" class="apps-list__store-container">
				<AppItem v-for="app in apps"
					:key="app.id"
					:app="app"
					:category="category"
					:list-view="false" />
			</ul>
		</div>

		<div id="apps-list-search" class="apps-list apps-list--list-view">
			<div class="apps-list__list-container">
				<table v-if="search !== '' && searchApps.length > 0" class="apps-list__list-container">
					<caption class="apps-list__bundle-header">
						{{ t('settings', 'Results from other categories') }}
					</caption>
					<tr key="app-list-view-header">
						<th>
							<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
						</th>
						<th>
							<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
						</th>
					</tr>
					<AppItem v-for="app in searchApps"
						:key="app.id"
						:app="app"
						:category="category" />
				</table>
			</div>
		</div>

		<div v-if="search !== '' && !loading && searchApps.length === 0 && apps.length === 0" id="apps-list-empty" class="emptycontent emptycontent-search">
			<div id="app-list-empty-icon" class="icon-settings-dark" />
			<h2>{{ t('settings', 'No apps found for your version') }}</h2>
		</div>
	</div>
</template>

<script>
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import AppItem from './AppList/AppItem.vue'
import pLimit from 'p-limit'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'

export default {
	name: 'AppList',
	components: {
		AppItem,
		NcButton,
	},

	props: {
		category: {
			type: String,
			required: true,
		},
	},

	data() {
		return {
			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 > 0
		},
		showUpdateAll() {
			return this.hasPendingUpdate && this.useListView
		},
		apps() {
			const apps = this.$store.getters.getAllApps
				.filter(app => app.name.toLowerCase().search(this.search.toLowerCase()) !== -1)
				.sort(function(a, b) {
					const sortStringA = '' + (a.active ? 0 : 1) + (a.update ? 0 : 1) + a.name
					const sortStringB = '' + (b.active ? 0 : 1) + (b.update ? 0 : 1) + b.name
					return OC.Util.naturalSortCompare(sortStringA, sortStringB)
				})

			if (this.category === 'installed') {
				return apps.filter(app => app.installed)
			}
			if (this.category === 'enabled') {
				return apps.filter(app => app.active && app.installed)
			}
			if (this.category === 'disabled') {
				return apps.filter(app => !app.active && app.installed)
			}
			if (this.category === 'app-bundles') {
				return apps.filter(app => app.bundles)
			}
			if (this.category === 'updates') {
				return apps.filter(app => app.update)
			}
			if (this.category === 'supported') {
				// For customers of the Nextcloud GmbH the app level will be set to `300` for apps that are supported in their subscription
				return apps.filter(app => app.level === 300)
			}
			if (this.category === 'featured') {
				// An app level of `200` will be set for apps featured on the app store
				return apps.filter(app => app.level === 200)
			}

			// filter app store categories
			return apps.filter(app => {
				return app.appstore && app.category !== undefined
					&& (app.category === this.category || app.category.indexOf(this.category) > -1)
			})
		},
		bundles() {
			return this.$store.getters.getAppBundles.filter(bundle => this.bundleApps(bundle.id).length > 0)
		},
		bundleApps() {
			return function(bundle) {
				return this.$store.getters.getAllApps
					.filter(app => {
						return app.bundleIds !== undefined && app.bundleIds.includes(bundle)
					})
			}
		},
		searchApps() {
			if (this.search === '') {
				return []
			}
			return this.$store.getters.getAllApps
				.filter(app => {
					if (app.name.toLowerCase().search(this.search.toLowerCase()) !== -1) {
						return (!this.apps.find(_app => _app.id === app.id))
					}
					return false
				})
		},
		useAppStoreView() {
			return !this.useListView && !this.useBundleView
		},
		useListView() {
			return (this.category === 'installed' || this.category === 'enabled' || this.category === 'disabled' || this.category === 'updates' || this.category === 'featured' || this.category === 'supported')
		},
		useBundleView() {
			return (this.category === 'app-bundles')
		},
		allBundlesEnabled() {
			return (id) => {
				return this.bundleApps(id).filter(app => !app.active).length === 0
			}
		},
		bundleToggleText() {
			return (id) => {
				if (this.allBundlesEnabled(id)) {
					return t('settings', 'Disable all')
				}
				return t('settings', 'Download and enable all')
			}
		},
	},

	beforeDestroy() {
		unsubscribe('nextcloud:unified-search.search', this.setSearch)
		unsubscribe('nextcloud:unified-search.reset', this.resetSearch)
	},

	mounted() {
		subscribe('nextcloud:unified-search.search', this.setSearch)
		subscribe('nextcloud:unified-search.reset', this.resetSearch)
	},

	methods: {
		setSearch({ query }) {
			this.search = query
		},
		resetSearch() {
			this.search = ''
		},
		toggleBundle(id) {
			if (this.allBundlesEnabled(id)) {
				return this.disableBundle(id)
			}
			return this.enableBundle(id)
		},
		enableBundle(id) {
			const apps = this.bundleApps(id).map(app => app.id)
			this.$store.dispatch('enableApp', { appId: apps, groups: [] })
				.catch((error) => {
					console.error(error)
					OC.Notification.show(error)
				})
		},
		disableBundle(id) {
			const apps = this.bundleApps(id).map(app => app.id)
			this.$store.dispatch('disableApp', { appId: apps, groups: [] })
				.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 })),
				)
		},
	},
}
</script>

<style lang="scss" scoped>
$toolbar-padding: 8px;
$toolbar-height: 44px + $toolbar-padding * 2;

.apps-list {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;

	// For transition group
	&--move {
		transition: transform 1s;
	}

	#app-list-update-all {
		margin-left: 10px;
	}

	&__toolbar {
		height: $toolbar-height;
		padding: $toolbar-padding;
		// Leave room for app-navigation-toggle
		padding-left: $toolbar-height;
		width: 100%;
		background-color: var(--color-main-background);
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	&--list-view {
		margin-bottom: 100px;
		// For positioning link overlay on rows
		position: relative;
	}

	&__list-container {
		width: 100%;
	}

	&__store-container {
		display: flex;
		flex-wrap: wrap;
	}

	&__bundle-heading {
		display: flex;
		align-items: center;
		margin: 20px 10px 20px 0;
	}

	&__bundle-header {
		margin: 0 10px 0 50px;
		font-weight: bold;
		font-size: 20px;
		line-height: 30px;
		color: var(--color-text-light);
	}
}

#apps-list-search {
	.app-item {
		h2 {
			margin-bottom: 0;
		}
	}
}
</style>