Improve sidebar handling

Signed-off-by: Julius Härtl <jus@bitgrid.net>

settings/css/settings.scss

@@ -1014,6 +1014,9 @@ span.version {
 		position: relative;
 		flex: 0 0 auto;
 
+		&.selected {
+			background-color: nc-darken($color-main-background, 6%);
+		}
 		h2.app-name {
 			display: block;
 			margin: 8px 0;

settings/src/components/appDetails.vue

@@ -25,11 +25,16 @@
 		<a class="close icon-close" href="#" v-on:click="hideAppDetails"><span class="hidden-visually">Close</span></a>
 		<h2>{{ app.name }}</h2>
 		<img :src="app.preview" width="100%" />
-		<app-score v-if="app.appstoreData.ratingNumOverall > 5" :score="app.appstoreData.ratingOverall"></app-score>
+		<app-score v-if="app.appstoreData && app.appstoreData.ratingNumOverall > 5" :score="app.appstoreData.ratingOverall"></app-score>
 		<div class="app-author">
-			{{ author }}
-			{{ licence }}
+			{{ t('settings', 'by') }}
+			<span v-if="author.length > 0" v-for="a in author">
+				<a v-if="a['@attributes']['homepage']" :href="a['@attributes']['homepage']">{{ a['@value'] }}</a> &nbsp;
+				<span v-else>{{ a['@value'] }}</span>
+			</span>
+			<span v-else>{{ author }}</span>
 		</div>
+		{{ licence }}
 		<div class="actions">
 			<div class="warning hidden"></div>
 			<input v-if="app.update" class="update" type="button" :value="t('settings', 'Update to %s', app.update)" />
@@ -42,7 +47,6 @@
 			<div class="groups-enable" v-if="app.active && canLimitToGroups(app)">
 				<input type="checkbox" :value="app.id" v-model="groupCheckedAppsData" v-on:change="setGroupLimit" class="groups-enable__checkbox checkbox" :id="prefix('groups_enable', app.id)">
 				<label :for="prefix('groups_enable', app.id)">Auf Gruppen beschränken</label>
-				<input type="hidden" class="group_select" title="Alle" value="">
 				<multiselect v-if="isLimitedToGroups(app)" :options="groups" :value="appGroups" @select="addGroupLimitation" @remove="removeGroupLimitation"
 							 :placeholder="t('settings', 'Limit app usage to groups')"
 							 label="name" track-by="id" class="multiselect-vue"
@@ -79,8 +83,10 @@
 import Multiselect from 'vue-multiselect';
 import AppScore from './appList/appScore';
 import AppManagement from './appManagement';
+import prefix from './prefixMixin';
+
 export default {
-	mixins: [AppManagement],
+	mixins: [AppManagement, prefix],
 	name: 'appDetails',
 	props: ['category', 'app'],
 	components: {
@@ -96,10 +102,17 @@ export default {
 		},
 	},
 	computed: {
+		groups() {
+			console.log(this.$store.getters.getGroups);
+			return this.$store.getters.getGroups
+				.filter(group => group.id !== 'disabled')
+				.sort((a, b) => a.name.localeCompare(b.name));
+		},
 		licence() {
 			return this.app.license + t('settings', '-licensed');
 		},
 		author() {
+			return this.app.author;
 			return t('settings', 'by') + ' ' + this.app.author;
 		},
 		renderMarkdown() {

settings/src/components/appList.vue

@@ -64,9 +64,11 @@
 <script>
 import appItem from './appList/appItem';
 import Multiselect from 'vue-multiselect';
+import prefix from './prefixMixin';
 
 export default {
 	name: 'appList',
+	mixins: [prefix],
 	props: ['category', 'app', 'search'],
 	components: {
 		Multiselect,
@@ -74,7 +76,6 @@ export default {
 	},
 	data() {
 		return {
-			groupCheckedAppsData: [],
 			loading: false,
 			scrolled: false,
 		};
@@ -113,9 +114,7 @@ export default {
 		}
 	},
 	methods: {
-		prefix(prefix, content) {
-			return prefix + '_' + content;
-		},
+
 	}
 }
 </script>

settings/src/components/appList/appItem.vue

@@ -21,8 +21,9 @@
   -->
 
 <template>
-	<div class="section">
+	<div class="section" v-bind:class="{ selected: isSelected }">
 		<div class="app-image app-image-icon" v-on:click="showAppDetails">
+			{{ isSelected }}
 			<div v-if="!app.preview" class="icon-settings-dark"></div>
 			<img v-if="!app.previewAsIcon && app.preview" :src="app.preview"  width="100%" />
 			<svg v-if="app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
@@ -83,12 +84,18 @@
 				default: true,
 			}
 		},
+		watch: {
+			'$route.params.id': function (id) {
+				this.isSelected = (this.app.id === id);
+			}
+		},
 		components: {
 			Multiselect,
 			AppScore,
 		},
 		data() {
 			return {
+				isSelected: false,
 				groupCheckedAppsData: false,
 				loading: false,
 				scrolled: false,
@@ -99,6 +106,7 @@
 			if (this.app.groups.length > 0) {
 				this.groupCheckedAppsData = true;
 			}
+			this.isSelected = (this.app.id === this.$route.params.id);
 			this.filterId = 'invertIconApps' + Math.floor((Math.random() * 100 )) + new Date().getSeconds() + new Date().getMilliseconds();
 		},
 		computed: {

settings/src/components/appManagement.vue

@@ -22,6 +22,16 @@
 
 <script>
 	export default {
+		mounted() {
+			if (this.app.groups.length > 0) {
+				this.groupCheckedAppsData = true;
+			}
+		},
+		computed: {
+			appGroups() {
+				return this.app.groups.map(group => {return {id: group, name: group}});
+			},
+		},
 		methods: {
 			isLimitedToGroups(app) {
 				if (this.app.groups.length || this.groupCheckedAppsData) {

settings/src/components/prefixMixin.vue

@@ -0,0 +1,32 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<script>
+	export default {
+		name: 'prefixMixin',
+		methods: {
+			prefix (prefix, content) {
+				return prefix + '_' + content;
+			},
+		}
+	}
+</script>