Fix: Add disabled state to PillMenu and update Results view for no su…

…bmissions This enables the users to unlink a spreadsheet file if there are currently no submissions Signed-off-by: Christian Hartmann <[email protected]>
nextcloud · Jan 28, 2025 · 695bbe4 · 695bbe4
1 parent ecbe5b5
commit 695bbe4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 62 deletions.
diff --git a/src/components/PillMenu.vue b/src/components/PillMenu.vue
@@ -10,6 +10,7 @@
 			:key="option.id"
 			:aria-label="isMobile ? option.ariaLabel : null"
 			:checked="active.id"
+			:disabled="disabled"
 			class="pill-menu__toggle"
 			:class="{ 'pill-menu__toggle--icon-only': isMobile && option.icon }"
 			button-variant
@@ -46,6 +47,15 @@ export default {
 			type: Object,
 			required: true,
 		},
+
+		/**
+		 * If the PillMenu is disabled
+		 */
+		disabled: {
+			type: Boolean,
+			required: true,
+		},
+
 		/**
 		 * List of available options
 		 * `option: {id: string, title: string, ariaLabel: string, icon?: string}`

diff --git a/src/components/TopBar.vue b/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>
diff --git a/src/views/Results.vue b/src/views/Results.vue
@@ -34,49 +34,6 @@
 			</template>
 		</NcEmptyContent>
 
-		<!-- No submissions -->
-		<NcEmptyContent
-			v-else-if="noSubmissions"
-			:name="t('forms', 'No responses yet')"
-			class="forms-emptycontent"
-			:description="
-				t('forms', 'Results of submitted forms will show up here')
-			">
-			<template #icon>
-				<IconPoll :size="64" />
-			</template>
-			<template #action>
-				<div class="response-actions">
-					<NcButton type="primary" @click="onShareForm">
-						<template #icon>
-							<IconShareVariant :size="20" decorative />
-						</template>
-						{{ t('forms', 'Share form') }}
-					</NcButton>
-
-					<NcButton
-						v-if="canEditForm && !form.fileId"
-						type="tertiary-no-background"
-						@click="onLinkFile">
-						<template #icon>
-							<IconLink :size="20" />
-						</template>
-						{{ t('forms', 'Create spreadsheet') }}
-					</NcButton>
-
-					<NcButton
-						v-if="form.fileId"
-						:href="fileUrl"
-						type="tertiary-no-background">
-						<template #icon>
-							<IconTable :size="20" />
-						</template>
-						{{ t('forms', 'Open spreadsheet') }}
-					</NcButton>
-				</div>
-			</template>
-		</NcEmptyContent>
-
 		<!-- Showing submissions -->
 		<template v-else>
 			<header>
@@ -94,6 +51,7 @@
 				<!-- View switcher between Summary and Responses -->
 				<div class="response-actions">
 					<PillMenu
+						:disabled="noSubmissions"
 						:options="responseViews"
 						:active.sync="activeResponseView"
 						class="response-actions__toggle" />
@@ -142,6 +100,7 @@
 								{{ t('forms', 'Create spreadsheet') }}
 							</NcActionButton>
 							<NcActionButton
+								v-if="!noSubmissions"
 								close-after-click
 								@click="onStoreToFiles">
 								<template #icon>
@@ -150,6 +109,7 @@
 								{{ t('forms', 'Save copy to Files') }}
 							</NcActionButton>
 							<NcActionButton
+								v-if="!noSubmissions"
 								:close-after-click="false"
 								:is-menu="true"
 								@click="isDownloadActionOpened = true">
@@ -158,9 +118,8 @@
 								</template>
 								{{ t('forms', 'Download') }}
 							</NcActionButton>
-
 							<NcActionButton
-								v-if="canDeleteSubmissions"
+								v-if="canDeleteSubmissions && !noSubmissions"
 								close-after-click
 								@click="deleteAllSubmissions">
 								<template #icon>
@@ -208,8 +167,31 @@
 				</div>
 			</header>
 
+			<!-- No submissions -->
+			<NcEmptyContent
+				v-if="noSubmissions"
+				:name="t('forms', 'No responses yet')"
+				class="forms-emptycontent"
+				:description="
+					t('forms', 'Results of submitted forms will show up here')
+				">
+				<template #icon>
+					<IconPoll :size="64" />
+				</template>
+				<template #action>
+					<div class="response-actions">
+						<NcButton type="primary" @click="onShareForm">
+							<template #icon>
+								<IconShareVariant :size="20" decorative />
+							</template>
+							{{ t('forms', 'Share form') }}
+						</NcButton>
+					</div>
+				</template>
+			</NcEmptyContent>
+
 			<!-- Summary view for visualization -->
-			<section v-if="activeResponseView.id === 'summary'">
+			<section v-else-if="activeResponseView.id === 'summary'">
 				<ResultsSummary
 					v-for="question in form.questions"
 					:key="question.id"