Merge pull request #2532 from nextcloud/fix/2531-sidebar-toggle

Fix: Show sidebar toggle in all views

src/Forms.vue

@@ -122,12 +122,11 @@
 				:form.sync="selectedForm"
 				:sidebar-opened.sync="sidebarOpened"
 				@open-sharing="openSharing" />
-			<router-view
+			<Sidebar
 				v-if="!selectedForm.partial && canEdit"
 				:form="selectedForm"
 				:sidebar-opened.sync="sidebarOpened"
-				:active.sync="sidebarActive"
-				name="sidebar" />
+				:active.sync="sidebarActive" />
 		</template>
 
 		<!-- Archived forms modal -->
@@ -162,8 +161,9 @@ import IconPlus from 'vue-material-design-icons/Plus.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import AppNavigationForm from './components/AppNavigationForm.vue'
 import FormsIcon from './components/Icons/FormsIcon.vue'
-import PermissionTypes from './mixins/PermissionTypes.js'
 import OcsResponse2Data from './utils/OcsResponse2Data.js'
+import PermissionTypes from './mixins/PermissionTypes.js'
+import Sidebar from './views/Sidebar.vue'
 import logger from './utils/Logger.js'
 import { FormState } from './models/FormStates.ts'
 
@@ -184,6 +184,7 @@ export default {
 		NcContent,
 		NcEmptyContent,
 		NcLoadingIcon,
+		Sidebar,
 	},
 
 	mixins: [PermissionTypes],

src/components/Results/ResultsSummary.vue

@@ -32,7 +32,7 @@
 				<meter
 					:id="`option-${option.questionId}-${option.id}`"
 					min="0"
-					:max="submissions.length"
+					:max="submissions?.length"
 					:value="option.count" />
 			</li>
 		</ol>
@@ -113,7 +113,7 @@ export default {
 			})
 
 			// Go through submissions to check which options have how many responses
-			this.submissions.forEach((submission) => {
+			this.submissions?.forEach((submission) => {
 				const answers = submission.answers.filter(
 					(answer) => answer.questionId === this.question.id,
 				)
@@ -151,7 +151,7 @@ export default {
 			questionOptionsStats.forEach((questionOptionsStat) => {
 				// Fill percentage values
 				questionOptionsStat.percentage = Math.round(
-					(100 * questionOptionsStat.count) / this.submissions.length,
+					(100 * questionOptionsStat.count) / this.submissions?.length,
 				)
 				// Mark all best results. First one is best for sure due to sorting
 				questionOptionsStat.best =
@@ -169,7 +169,7 @@ export default {
 			let noResponseCount = 0
 
 			// Go through submissions to check which options have how many responses
-			this.submissions.forEach((submission) => {
+			this.submissions?.forEach((submission) => {
 				const answers = submission.answers.filter(
 					(answer) => answer.questionId === this.question.id,
 				)
@@ -199,7 +199,7 @@ export default {
 
 			// Calculate no response percentage
 			const noResponsePercentage = Math.round(
-				(100 * noResponseCount) / this.submissions.length,
+				(100 * noResponseCount) / this.submissions?.length,
 			)
 			answersModels.unshift({
 				id: 0,

src/components/TopBar.vue

@@ -27,18 +27,6 @@
 				{{ t('forms', 'Share') }}
 			</template>
 		</NcButton>
-		<NcButton
-			v-if="showSidebarToggle"
-			:aria-label="t('forms', 'Toggle settings')"
-			:title="t('forms', 'Toggle settings')"
-			type="tertiary"
-			@click="toggleSidebar">
-			<template #icon>
-				<IconMenuOpen
-					:size="24"
-					:class="{ 'icon--flipped': sidebarOpened }" />
-			</template>
-		</NcButton>
 	</div>
 </template>
 
@@ -204,8 +192,4 @@ export default {
 		margin-inline-end: 0;
 	}
 }
-
-.icon--flipped {
-	transform: scaleX(-1);
-}
 </style>

src/mixins/ViewsMixin.js

@@ -99,10 +99,6 @@ export default {
 			this.$emit('open-sharing', this.form.hash)
 		},
 
-		onSidebarChange(newState) {
-			this.$emit('update:sidebarOpened', newState)
-		},
-
 		/**
 		 * Focus title after form load
 		 */

src/router.js

@@ -9,7 +9,6 @@ import { generateUrl } from '@nextcloud/router'
 
 import Create from './views/Create.vue'
 import Results from './views/Results.vue'
-import Sidebar from './views/Sidebar.vue'
 import Submit from './views/Submit.vue'
 
 Vue.use(Router)
@@ -37,7 +36,6 @@ export default new Router({
 			path: '/:hash/edit',
 			components: {
 				default: Create,
-				sidebar: Sidebar,
 			},
 			name: 'edit',
 			props: { default: true },
@@ -46,7 +44,6 @@ export default new Router({
 			path: '/:hash/results',
 			components: {
 				default: Results,
-				sidebar: Sidebar,
 			},
 			name: 'results',
 			props: { default: true },
@@ -55,7 +52,6 @@ export default new Router({
 			path: '/:hash/submit',
 			components: {
 				default: Submit,
-				sidebar: Sidebar,
 			},
 			name: 'submit',
 			props: { default: true },

src/views/Results.vue

@@ -43,7 +43,7 @@
 				<p>
 					{{
 						t('forms', '{amount} responses', {
-							amount: form.submissions.length,
+							amount: form.submissions?.length ?? 0,
 						})
 					}}
 				</p>
@@ -64,6 +64,14 @@
 						@blur="isDownloadActionOpened = false"
 						@close="isDownloadActionOpened = false">
 						<template v-if="!isDownloadActionOpened">
+							<NcActionButton
+								v-if="canEditForm && !form.fileId"
+								@click="onLinkFile">
+								<template #icon>
+									<IconLink :size="20" />
+								</template>
+								{{ t('forms', 'Create spreadsheet') }}
+							</NcActionButton>
 							<template v-if="canEditForm && form.fileId">
 								<NcActionButton
 									:href="fileUrl"
@@ -89,16 +97,8 @@
 									</template>
 									{{ t('forms', 'Unlink spreadsheet') }}
 								</NcActionButton>
-								<NcActionSeparator />
+								<NcActionSeparator v-if="!noSubmissions" />
 							</template>
-							<NcActionButton
-								v-else-if="canEditForm"
-								@click="onLinkFile">
-								<template #icon>
-									<IconLink :size="20" />
-								</template>
-								{{ t('forms', 'Create spreadsheet') }}
-							</NcActionButton>
 							<NcActionButton
 								v-if="!noSubmissions"
 								close-after-click
@@ -344,7 +344,6 @@ export default {
 
 			picker: null,
 			showConfirmDeleteDialog: false,
-			showLinkedFileNotAvailableDialog: false,
 
 			linkedFileNotAvailableButtons: [
 				{
@@ -419,19 +418,27 @@ export default {
 			}
 			return window.location.href
 		},
+
+		showLinkedFileNotAvailableDialog() {
+			if (this.form.partial) {
+				return false
+			}
+			return this.canEditForm && this.form.fileId && !this.form.filePath
+		},
 	},
 
 	watch: {
 		// Reload results, when form changes
 		async hash() {
+			await this.fetchFullForm(this.form.id)
 			this.loadFormResults()
-			await this.fetchLinkedFileInfo()
+			SetWindowTitle(this.formTitle)
 		},
 	},
 
 	async beforeMount() {
+		await this.fetchFullForm(this.form.id)
 		this.loadFormResults()
-		await this.fetchLinkedFileInfo()
 		SetWindowTitle(this.formTitle)
 	},
 
@@ -449,11 +456,16 @@ export default {
 				},
 			)
 
-			this.form.fileFormat = null
-			this.form.fileId = null
-			this.form.filePath = null
+			const updatedForm = {
+				...this.form,
+				fileFormat: null,
+				fileId: null,
+				filePath: null,
+			}
+			this.$emit('update:form', updatedForm)
 			emit('forms:last-updated:set', this.form.id)
 		},
+
 		async loadFormResults() {
 			this.loadingResults = true
 			logger.debug(`Loading results for form ${this.form.hash}`)
@@ -502,7 +514,7 @@ export default {
 					.pick()
 					.then(async (path) => {
 						try {
-							const response = await axios.patch(
+							await axios.patch(
 								generateOcsUrl('apps/forms/api/v3/forms/{id}', {
 									id: this.form.id,
 								}),
@@ -513,15 +525,12 @@ export default {
 									},
 								},
 							)
-							const responseData = OcsResponse2Data(response)
-
-							this.form.fileFormat = responseData.fileFormat
-							this.form.fileId = responseData.fileId
-							this.form.filePath = responseData.filePath
+							await this.fetchFullForm(this.form.id)
+							await this.loadFormResults()
 
 							showSuccess(
 								t('forms', 'File {file} successfully linked', {
-									file: responseData.fileName,
+									file: this.form.filePath.split('/').pop(),
 								}),
 							)
 							emit('forms:last-updated:set', this.form.id)
@@ -586,20 +595,6 @@ export default {
 			}
 		},
 
-		async fetchLinkedFileInfo() {
-			const response = await axios.get(
-				generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-					id: this.form.id,
-				}),
-			)
-			const form = OcsResponse2Data(response)
-			this.$set(this.form, 'fileFormat', form.fileFormat)
-			this.$set(this.form, 'fileId', form.fileId)
-			this.$set(this.form, 'filePath', form.filePath)
-			this.showLinkedFileNotAvailableDialog =
-				this.canEditForm && form.fileId && !form.filePath
-		},
-
 		async onReExport() {
 			if (!this.form.fileId) {
 				// Theoretically this will never fire