Make sidebar work in all views

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
nextcloud · Nov 16, 2022 · 127ceb3 · 127ceb3
1 parent 6d27f1f
commit 127ceb3
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -49,6 +49,7 @@
 					:key="form.id"
 					:form="form"
 					:read-only="true"
+					@open-sharing="openSharing"
 					@mobile-close-navigation="mobileCloseNavigation" />
 			</template>
 		</NcAppNavigation>
@@ -92,7 +93,7 @@
 			<router-view :form.sync="selectedForm"
 				:sidebar-opened.sync="sidebarOpened"
 				@open-sharing="openSharing" />
-			<router-view v-if="!selectedForm.partial"
+			<router-view v-if="!selectedForm.partial && selectedForm.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)"
 				:form="selectedForm"
 				:opened.sync="sidebarOpened"
 				:active.sync="sidebarActive"
@@ -236,7 +237,8 @@ export default {
 		 * @param {string} hash the hash of the form to load
 		 */
 		openSharing(hash) {
-			if (hash !== this.routeHash || this.$route.name !== 'edit') {
+			// if (hash !== this.routeHash || this.$route.name !== 'edit') {
+			if (hash !== this.routeHash) {
 				this.$router.push({ name: 'edit', params: { hash } })
 			}
 			this.sidebarActive = 'forms-sharing'

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
@@ -25,7 +25,6 @@
   -->
 <template>
 	<div class="top-bar" role="toolbar">
-		<slot />
 		<div class="top-bar__buttons">
 			<NcButton v-if="canSubmit"
 				:disabled="$route.name === 'submit'"
@@ -34,7 +33,9 @@
 				<template #icon>
 					<IconEye :size="20" />
 				</template>
-				{{ t('forms', 'View') }}
+				<template v-if="!isMobile">
+					{{ t('forms', 'View') }}
+				</template>
 			</NcButton>
 			<NcButton v-if="canEdit"
 				:disabled="$route.name === 'edit'"
@@ -43,7 +44,9 @@
 				<template #icon>
 					<IconPencil :size="20" />
 				</template>
-				{{ t('forms', 'Edit') }}
+				<template v-if="!isMobile">
+					{{ t('forms', 'Edit') }}
+				</template>
 			</NcButton>
 			<NcButton v-if="canSeeResults"
 				:disabled="$route.name === 'results'"
@@ -52,7 +55,9 @@
 				<template #icon>
 					<IconPoll :size="20" />
 				</template>
-				{{ t('forms', 'Results') }}
+				<template v-if="!isMobile">
+					{{ t('forms', 'Results') }}
+				</template>
 			</NcButton>
 		</div>
 		<NcButton v-if="canShare && !sidebarOpened"
@@ -61,9 +66,12 @@
 			<template #icon>
 				<IconShareVariant :size="20" />
 			</template>
-			{{ t('forms', 'Share form') }}
+			<template v-if="!isMobile">
+				{{ t('forms', 'Share form') }}
+			</template>
 		</NcButton>
-		<NcButton v-tooltip="t('forms', 'Toggle settings')"
+		<NcButton v-if="showSidebarToggle"
+			v-tooltip="t('forms', 'Toggle settings')"
 			:aria-label="t('forms', 'Toggle settings')"
 			type="tertiary"
 			@click="toggleSidebar">
@@ -77,6 +85,7 @@
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import IconEye from 'vue-material-design-icons/Eye.vue'
 import IconMenuOpen from 'vue-material-design-icons/MenuOpen.vue'
 import IconPencil from 'vue-material-design-icons/Pencil.vue'
@@ -96,7 +105,7 @@ export default {
 		NcButton,
 	},
 
-	mixins: [PermissionTypes],
+	mixins: [isMobile, PermissionTypes],
 
 	props: {
 		sidebarOpened: {
@@ -124,7 +133,7 @@ export default {
 			return this.canEdit || this.canSeeResults
 		},
 		showSidebarToggle() {
-			return this.sidebarOpened !== null
+			return this.canEdit && this.sidebarOpened !== null
 		},
 	},
 

diff --git a/src/router.js b/src/router.js
@@ -63,15 +63,21 @@ export default new Router({
 		},
 		{
 			path: '/:hash/results',
-			component: Results,
+			components: {
+				default: Results,
+				sidebar: Sidebar,
+			},
 			name: 'results',
-			props: true,
+			props: { default: true },
 		},
 		{
 			path: '/:hash/submit',
-			component: Submit,
+			components: {
+				default: Submit,
+				sidebar: Sidebar,
+			},
 			name: 'submit',
-			props: true,
+			props: { default: true }
 		},
 	],
 })
diff --git a/src/views/Results.vue b/src/views/Results.vue
@@ -32,7 +32,10 @@
 	</NcAppContent>
 
 	<NcAppContent v-else>
-		<TopBar :permissions="form?.permissions" @share-form="onShareForm" />
+		<TopBar :permissions="form?.permissions"
+			:sidebar-opened="sidebarOpened"
+			@update:sidebarOpened="onSidebarChange"
+			@share-form="onShareForm" />
 		<header v-if="!noSubmissions">
 			<h2>{{ formTitle }}</h2>
 			<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
@@ -183,6 +186,13 @@ export default {
 
 	mixins: [ViewsMixin],
 
+	props: {
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			loadingResults: true,
@@ -324,6 +334,10 @@ export default {
 
 			return submissions
 		},
+
+		onSidebarChange(newState) {
+			this.$emit('update:sidebarOpened', newState)
+		},
 	},
 }
 </script>

diff --git a/src/views/Submit.vue b/src/views/Submit.vue
@@ -32,6 +32,8 @@
 	<NcAppContent v-else :class="{'app-content--public': publicView}">
 		<TopBar v-if="!publicView"
 			:permissions="form?.permissions"
+			:sidebar-opened="sidebarOpened"
+			@update:sidebarOpened="onSidebarChange"
 			@share-form="onShareForm" />
 
 		<!-- Forms title & description-->
@@ -143,6 +145,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	data() {
@@ -287,6 +293,10 @@ export default {
 			this.loading = false
 			this.success = false
 		},
+
+		onSidebarChange(newState) {
+			this.$emit('update:sidebarOpened', newState)
+		},
 	},
 
 }