Use appsidebar for apps

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/settings/src/components/AppDetails.vue

@@ -22,46 +22,6 @@
 
 <template>
 	<div id="app-details-view" style="padding: 20px;">
-		<h2>
-			<div v-if="!app.preview" class="icon-settings-dark" />
-			<svg v-if="app.previewAsIcon && app.preview"
-				width="32"
-				height="32"
-				viewBox="0 0 32 32">
-				<defs><filter :id="filterId"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
-				<image x="0"
-					y="0"
-					width="32"
-					height="32"
-					preserveAspectRatio="xMinYMin meet"
-					:filter="filterUrl"
-					:xlink:href="app.preview"
-					class="app-icon" />
-			</svg>
-			{{ app.name }}
-		</h2>
-		<img v-if="screenshotLoaded" :src="app.screenshot" width="100%">
-		<div v-if="app.level === 300 || app.level === 200 || hasRating" class="app-level">
-			<span v-if="app.level === 300"
-				v-tooltip.auto="t('settings', 'This app is supported via your current Nextcloud subscription.')"
-				class="supported icon-checkmark-color">
-				{{ t('settings', 'Supported') }}</span>
-			<span v-if="app.level === 200"
-				v-tooltip.auto="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
-				class="official icon-checkmark">
-				{{ t('settings', 'Featured') }}</span>
-			<AppScore v-if="hasRating" :score="app.appstoreData.ratingOverall" />
-		</div>
-
-		<div v-if="author" class="app-author">
-			{{ t('settings', 'by') }}
-			<span v-for="(a, index) in author" :key="index">
-				<a v-if="a['@attributes'] && a['@attributes']['homepage']" :href="a['@attributes']['homepage']">{{ a['@value'] }}</a><span v-else-if="a['@value']">{{ a['@value'] }}</span><span v-else>{{ a }}</span><span v-if="index+1 < author.length">, </span>
-			</span>
-		</div>
-		<div v-if="licence" class="app-licence">
-			{{ licence }}
-		</div>
 		<div class="actions">
 			<div class="actions-buttons">
 				<input v-if="app.update"
@@ -192,24 +152,26 @@ import marked from 'marked'
 import dompurify from 'dompurify'
 
 import AppScore from './AppList/AppScore'
-import AppManagement from './AppManagement'
+import AppManagement from '../mixins/AppManagement'
 import PrefixMixin from './PrefixMixin'
-import SvgFilterMixin from './SvgFilterMixin'
 
 export default {
 	name: 'AppDetails',
+
 	components: {
 		Multiselect,
 		AppScore,
 	},
-	mixins: [AppManagement, PrefixMixin, SvgFilterMixin],
+	mixins: [AppManagement, PrefixMixin],
+
 	props: ['category', 'app'],
+
 	data() {
 		return {
 			groupCheckedAppsData: false,
-			screenshotLoaded: false,
 		}
 	},
+
 	computed: {
 		appstoreUrl() {
 			return `https://apps.nextcloud.com/apps/${this.app.id}`
@@ -309,13 +271,6 @@ export default {
 		if (this.app.groups.length > 0) {
 			this.groupCheckedAppsData = true
 		}
-		if (this.app.screenshot) {
-			const image = new Image()
-			image.onload = (e) => {
-				this.screenshotLoaded = true
-			}
-			image.src = this.app.screenshot
-		}
 	},
 }
 </script>

apps/settings/src/components/AppList/AppItem.vue

@@ -69,46 +69,46 @@
 			<div v-if="app.error" class="warning">
 				{{ app.error }}
 			</div>
-			<div v-if="loading(app.id)" class="icon icon-loading-small" />
+			<div v-if="isLoading" class="icon icon-loading-small" />
 			<input v-if="app.update"
 				class="update primary"
 				type="button"
 				:value="t('settings', 'Update to {update}', {update:app.update})"
-				:disabled="installing || loading(app.id)"
+				:disabled="installing || isLoading"
 				@click.stop="update(app.id)">
 			<input v-if="app.canUnInstall"
 				class="uninstall"
 				type="button"
 				:value="t('settings', 'Remove')"
-				:disabled="installing || loading(app.id)"
+				:disabled="installing || isLoading"
 				@click.stop="remove(app.id)">
 			<input v-if="app.active"
 				class="enable"
 				type="button"
 				:value="t('settings','Disable')"
-				:disabled="installing || loading(app.id)"
+				:disabled="installing || isLoading"
 				@click.stop="disable(app.id)">
 			<input v-if="!app.active && (app.canInstall || app.isCompatible)"
 				v-tooltip.auto="enableButtonTooltip"
 				class="enable"
 				type="button"
 				:value="enableButtonText"
-				:disabled="!app.canInstall || installing || loading(app.id)"
+				:disabled="!app.canInstall || installing || isLoading"
 				@click.stop="enable(app.id)">
 			<input v-else-if="!app.active"
 				v-tooltip.auto="forceEnableButtonTooltip"
 				class="enable force"
 				type="button"
 				:value="forceEnableButtonText"
-				:disabled="installing || loading(app.id)"
+				:disabled="installing || isLoading"
 				@click.stop="forceEnable(app.id)">
 		</div>
 	</div>
 </template>
 
 <script>
 import AppScore from './AppScore'
-import AppManagement from '../AppManagement'
+import AppManagement from '../../mixins/AppManagement'
 import SvgFilterMixin from '../SvgFilterMixin'
 
 export default {

apps/settings/src/components/AppManagement.vue → apps/settings/src/mixins/AppManagement.js

@@ -1,40 +1,37 @@
-<!--
-  - @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/>.
-  -
-  -->
+/**
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ * @author John Molakvoæ <skjnldsv@protonmail.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/>.
+ *
+ */
 
-<script>
 export default {
 	computed: {
 		appGroups() {
 			return this.app.groups.map(group => { return { id: group, name: group } })
 		},
-		loading() {
-			const self = this
-			return function(id) {
-				return self.$store.getters.loading(id)
-			}
-		},
 		installing() {
 			return this.$store.getters.loading('install')
 		},
+		isLoading() {
+			return this.app && this.$store.getters.loading(this.app.id)
+		},
 		enableButtonText() {
 			if (this.app.needsDownload) {
 				return t('settings', 'Download and enable')
@@ -61,11 +58,19 @@ export default {
 			return base
 		},
 	},
+
+	data() {
+		return {
+			groupCheckedAppsData: false,
+		}
+	},
+
 	mounted() {
-		if (this.app.groups.length > 0) {
+		if (this.app && this.app.groups && this.app.groups.length > 0) {
 			this.groupCheckedAppsData = true
 		}
 	},
+
 	methods: {
 		asyncFindGroup(query) {
 			return this.$store.dispatch('getGroups', { search: query, limit: 5, offset: 0 })
@@ -135,4 +140,3 @@ export default {
 		},
 	},
 }
-</script>