diff options
Diffstat (limited to 'apps/settings/src/components/AppList.vue')
| -rw-r--r-- | apps/settings/src/components/AppList.vue | 257 |
1 files changed, 183 insertions, 74 deletions
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue index 18c4331e0f9..3e40e08b257 100644 --- a/apps/settings/src/components/AppList.vue +++ b/apps/settings/src/components/AppList.vue @@ -1,30 +1,18 @@ <!-- - - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net> - - - - @author Julius Härtl <jus@bitgrid.net> - - - - @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/>. - - - --> + - 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="{installed: (useBundleView || useListView), store: useAppStoreView}"> + <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="toolbar"> + <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" @@ -34,25 +22,25 @@ </NcButton> </div> - <div v-if="!showUpdateAll" class="toolbar"> + <div v-if="!showUpdateAll" class="apps-list__toolbar"> {{ t('settings', 'All apps are up-to-date.') }} </div> - <transition-group name="app-list" tag="table" class="apps-list-container"> - <tr key="app-list-view-header" class="apps-header"> - <th class="app-image"> + <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 class="app-name"> + <th> <span class="hidden-visually">{{ t('settings', 'Name') }}</span> </th> - <th class="app-version"> + <th> <span class="hidden-visually">{{ t('settings', 'Version') }}</span> </th> - <th class="app-level"> + <th> <span class="hidden-visually">{{ t('settings', 'Level') }}</span> </th> - <th class="actions"> + <th> <span class="hidden-visually">{{ t('settings', 'Actions') }}</span> </th> </tr> @@ -60,33 +48,33 @@ :key="app.id" :app="app" :category="category" /> - </transition-group> + </TransitionGroup> </template> <table v-if="useBundleView" - class="apps-list-container"> - <tr key="app-list-view-header" class="apps-header"> - <th id="app-table-col-icon" class="app-image"> + 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" class="app-name"> + <th id="app-table-col-name"> <span class="hidden-visually">{{ t('settings', 'Name') }}</span> </th> - <th id="app-table-col-version" class="app-version"> + <th id="app-table-col-version"> <span class="hidden-visually">{{ t('settings', 'Version') }}</span> </th> - <th id="app-table-col-level" class="app-level"> + <th id="app-table-col-level"> <span class="hidden-visually">{{ t('settings', 'Level') }}</span> </th> - <th id="app-table-col-actions" class="actions"> + <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="app-bundle-heading"> - <span class="app-bundle-header"> + <div class="apps-list__bundle-heading"> + <span class="apps-list__bundle-header"> {{ bundle.name }} </span> <NcButton type="secondary" @click="toggleBundle(bundle.id)"> @@ -103,7 +91,7 @@ :category="category" /> </template> </table> - <ul v-if="useAppStoreView" class="apps-store-view"> + <ul v-if="useAppStoreView" class="apps-list__store-container"> <AppItem v-for="app in apps" :key="app.id" :app="app" @@ -112,20 +100,34 @@ </ul> </div> - <div id="apps-list-search" class="apps-list installed"> - <div class="apps-list-container"> - <template v-if="search !== '' && searchApps.length > 0"> - <div class="section"> - <div /> - <td colspan="5"> - <h2>{{ t('settings', 'Results from other categories') }}</h2> - </td> - </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" /> - </template> + </table> </div> </div> @@ -133,16 +135,17 @@ <div id="app-list-empty-icon" class="icon-settings-dark" /> <h2>{{ t('settings', 'No apps found for your version') }}</h2> </div> - - <div id="searchresults" /> </div> </template> <script> -import AppItem from './AppList/AppItem.vue' -import PrefixMixin from './PrefixMixin.vue' +import { subscribe, unsubscribe } from '@nextcloud/event-bus' import pLimit from 'p-limit' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import AppItem from './AppList/AppItem.vue' +import AppManagement from '../mixins/AppManagement' +import { useAppApiStore } from '../store/app-api-store' +import { useAppsStore } from '../store/apps-store' export default { name: 'AppList', @@ -150,14 +153,40 @@ export default { AppItem, NcButton, }, - mixins: [PrefixMixin], - props: ['category', 'app', 'search'], + + mixins: [AppManagement], + + props: { + category: { + type: String, + required: true, + }, + }, + + setup() { + const appApiStore = useAppApiStore() + const store = useAppsStore() + + return { + appApiStore, + store, + } + }, + + data() { + return { + search: '', + } + }, computed: { counter() { return this.apps.filter(app => app.update).length }, loading() { - return this.$store.getters.loading('list') + if (!this.$store.getters['appApiApps/isAppApiEnabled']) { + return this.$store.getters.loading('list') + } + return this.$store.getters.loading('list') || this.appApiStore.getLoading('list') }, hasPendingUpdate() { return this.apps.filter(app => app.update).length > 0 @@ -166,12 +195,18 @@ export default { return this.hasPendingUpdate && this.useListView }, apps() { - const apps = this.$store.getters.getAllApps + // Exclude ExApps from the list if AppAPI is disabled + const exApps = this.$store.getters.isAppApiEnabled ? this.appApiStore.getAllApps : [] + const apps = [...this.$store.getters.getAllApps, ...exApps] .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) + const natSortDiff = OC.Util.naturalSortCompare(a, b) + if (natSortDiff === 0) { + const sortStringA = '' + (a.active ? 0 : 1) + (a.update ? 0 : 1) + const sortStringB = '' + (b.active ? 0 : 1) + (b.update ? 0 : 1) + return Number(sortStringA) - Number(sortStringB) + } + return natSortDiff }) if (this.category === 'installed') { @@ -197,6 +232,7 @@ export default { // 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 @@ -204,7 +240,7 @@ export default { }) }, bundles() { - return this.$store.getters.getServerData.bundles.filter(bundle => this.bundleApps(bundle.id).length > 0) + return this.$store.getters.getAppBundles.filter(bundle => this.bundleApps(bundle.id).length > 0) }, bundleApps() { return function(bundle) { @@ -218,7 +254,8 @@ export default { if (this.search === '') { return [] } - return this.$store.getters.getAllApps + const exApps = this.$store.getters.isAppApiEnabled ? this.appApiStore.getAllApps : [] + return [...this.$store.getters.getAllApps, ...exApps] .filter(app => { if (app.name.toLowerCase().search(this.search.toLowerCase()) !== -1) { return (!this.apps.find(_app => _app.id === app.id)) @@ -249,7 +286,24 @@ export default { } }, }, + + 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) @@ -275,28 +329,83 @@ export default { const limit = pLimit(1) this.apps .filter(app => app.update) - .map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id })), - ) + .map((app) => limit(() => { + this.update(app.id) + })) }, }, } </script> <style lang="scss" scoped> - .app-bundle-heading { +$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-inline-start: 10px; + } + + &__toolbar { + height: $toolbar-height; + padding: $toolbar-padding; + // Leave room for app-navigation-toggle + padding-inline-start: $toolbar-height; + width: 100%; + background-color: var(--color-main-background); + position: sticky; + top: 0; + z-index: 1; display: flex; align-items: center; - margin: 20px 10px 20px 0; } - .app-bundle-header { - margin: 0 10px 0 50px; + + &--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-block: 20px; + margin-inline: 0 10px; + } + + &__bundle-header { + margin-block: 0; + margin-inline: 50px 10px; font-weight: bold; font-size: 20px; line-height: 30px; color: var(--color-text-light); } - .apps-store-view { - display: flex; - flex-wrap: wrap; +} + +#apps-list-search { + .app-item { + h2 { + margin-bottom: 0; + } } +} </style> |