aboutsummaryrefslogtreecommitdiffstats
path: root/apps/settings/src/views/AppStoreNavigation.vue
blob: 98aee80a802dd6431e1970cbd98f67de67bcdcd9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!--
  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<!-- Categories & filters -->
	<NcAppNavigation :aria-label="t('settings', 'Apps')">
		<template #list>
			<NcAppNavigationItem id="app-category-discover"
				:to="{ name: 'apps-category', params: { category: 'discover'} }"
				:name="APPS_SECTION_ENUM.discover">
				<template #icon>
					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.discover" />
				</template>
			</NcAppNavigationItem>
			<NcAppNavigationItem id="app-category-installed"
				:to="{ name: 'apps-category', params: { category: 'installed'} }"
				:name="APPS_SECTION_ENUM.installed">
				<template #icon>
					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.installed" />
				</template>
			</NcAppNavigationItem>
			<NcAppNavigationItem id="app-category-enabled"
				:to="{ name: 'apps-category', params: { category: 'enabled' } }"
				:name="APPS_SECTION_ENUM.enabled">
				<template #icon>
					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.enabled" />
				</template>
			</NcAppNavigationItem>
			<NcAppNavigationItem id="app-category-disabled"
				:to="{ name: 'apps-category', params: { category: 'disabled' } }"
				:name="APPS_SECTION_ENUM.disabled">
				<template #icon>
					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.disabled" />
				</template>
			</NcAppNavigationItem>
			<NcAppNavigationItem v-if="updateCount > 0"
				id="app-category-updates"
				:to="{ name: 'apps-category', params: { category: 'updates' } }"
				:name="APPS_SECTION_ENUM.updates">
				<template #counter>
					<NcCounterBubble>{{ updateCount }}</NcCounterBubble>
				</template>
				<template #icon>
					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.updates" />
				</template>
			</NcAppNavigationItem>
			<NcAppNavigationItem id="app-category-your-bundles"
				:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
				:name="APPS_SECTION_ENUM['app-bundles']">
				<template #icon>
					<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.bundles" />
				</template>
			</NcAppNavigationItem>

			<NcAppNavigationSpacer />

			<!-- App store categories -->
			<li v-if="appstoreEnabled && categoriesLoading" class="categories--loading">
				<NcLoadingIcon :size="20" :aria-label="t('settings', 'Loading categories')" />
			</li>
			<template v-else-if="appstoreEnabled && !categoriesLoading">
				<NcAppNavigationItem v-if="isSubscribed"
					id="app-category-supported"
					:to="{ name: 'apps-category', params: { category: 'supported' } }"
					:name="APPS_SECTION_ENUM.supported">
					<template #icon>
						<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.supported" />
					</template>
				</NcAppNavigationItem>
				<NcAppNavigationItem id="app-category-featured"
					:to="{ name: 'apps-category', params: { category: 'featured' } }"
					:name="APPS_SECTION_ENUM.featured">
					<template #icon>
						<NcIconSvgWrapper :path="APPSTORE_CATEGORY_ICONS.featured" />
					</template>
				</NcAppNavigationItem>

				<NcAppNavigationItem v-for="category in categories"
					:id="`app-category-${category.id}`"
					:key="category.id"
					:name="category.displayName"
					:to="{
						name: 'apps-category',
						params: { category: category.id },
					}">
					<template #icon>
						<NcIconSvgWrapper :path="category.icon" />
					</template>
				</NcAppNavigationItem>
			</template>

			<NcAppNavigationItem id="app-developer-docs"
				:name="t('settings', 'Developer documentation ↗')"
				:href="developerDocsUrl" />
		</template>
	</NcAppNavigation>
</template>

<script setup lang="ts">
import { loadState } from '@nextcloud/initial-state'
import { translate as t } from '@nextcloud/l10n'
import { computed, onBeforeMount } from 'vue'
import { APPS_SECTION_ENUM } from '../constants/AppsConstants'
import { useAppsStore } from '../store/apps-store'

import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer.js'
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'

import APPSTORE_CATEGORY_ICONS from '../constants/AppstoreCategoryIcons.ts'

const updateCount = loadState<number>('settings', 'appstoreUpdateCount', 0)
const appstoreEnabled = loadState<boolean>('settings', 'appstoreEnabled', true)
const developerDocsUrl = loadState<string>('settings', 'appstoreDeveloperDocs', '')

const store = useAppsStore()
const categories = computed(() => store.categories)
const categoriesLoading = computed(() => store.loading.categories)

/**
 * Check if the current instance has a support subscription from the Nextcloud GmbH
 *
 * For customers of the Nextcloud GmbH the app level will be set to `300` for apps that are supported in their subscription
 */
const isSubscribed = computed(() => store.apps.find(({ level }) => level === 300) !== undefined)

// load categories when component is mounted
onBeforeMount(() => {
	store.loadCategories()
	store.loadApps()
})
</script>

<style scoped>
/* The categories-loading indicator */
.categories--loading {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>