add frontend handling of locked form

Signed-off-by: Christian Hartmann <[email protected]>

Author: Chartman123

img/lock_open.svg

@@ -25,10 +25,13 @@
 		<template v-if="hasSubtitle" #subname>
 			{{ formSubtitle }}
 		</template>
-		<template v-if="!loading && !readOnly" #actions>
+		<template
+			v-if="!loading && (!readOnly || canEdit || canSeeResults)"
+			#actions>
 			<NcActionRouter
-				v-if="!isArchived"
+				v-if="!isArchived && canEdit"
 				close-after-click
+				:disabled="isFormLocked"
 				exact
 				:to="{ name: 'edit', params: { hash: form.hash } }"
 				@click="mobileCloseNavigation">
@@ -38,7 +41,7 @@
 				{{ t('forms', 'Edit form') }}
 			</NcActionRouter>
 			<NcActionButton
-				v-if="!isArchived"
+				v-if="!isArchived && !readOnly"
 				close-after-click
 				@click="onShareForm">
 				<template #icon>
@@ -47,6 +50,7 @@
 				{{ t('forms', 'Share form') }}
 			</NcActionButton>
 			<NcActionRouter
+				v-if="canSeeResults"
 				close-after-click
 				exact
 				:to="{ name: 'results', params: { hash: form.hash } }"
@@ -62,10 +66,11 @@
 				</template>
 				{{ t('forms', 'Copy form') }}
 			</NcActionButton>
-			<NcActionSeparator v-if="canEdit" />
+			<NcActionSeparator v-if="canEdit && !readOnly" />
 			<NcActionButton
-				v-if="canEdit"
+				v-if="canEdit && !readOnly"
 				close-after-click
+				:disabled="isFormLocked"
 				@click="onToggleArchive">
 				<template #icon>
 					<IconArchiveOff v-if="isArchived" :size="20" />
@@ -78,8 +83,9 @@
 				}}
 			</NcActionButton>
 			<NcActionButton
-				v-if="canEdit"
+				v-if="canEdit && !readOnly"
 				close-after-click
+				:disabled="isFormLocked"
 				@click="showDeleteDialog = true">
 				<template #icon>
 					<IconDelete :size="20" />
@@ -100,6 +106,7 @@
 </template>
 
 <script>
+import { getCurrentUser } from '@nextcloud/auth'
 import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
@@ -190,6 +197,14 @@ export default {
 			)
 		},
 
+		canSeeResults() {
+			return (
+				this.form.permissions.includes(
+					this.PERMISSION_TYPES.PERMISSION_RESULTS,
+				) || this.form.submissionCount > 0
+			)
+		},
+
 		/**
 		 * Check if form is current form and set active
 		 */
@@ -211,6 +226,17 @@ export default {
 			return this.form.expires && moment().unix() > this.form.expires
 		},
 
+		/**
+		 * Check if form is locked
+		 */
+		isFormLocked() {
+			return (
+				this.form.lockedUntil === 0
+				|| (this.form.lockedUntil > moment().unix()
+					&& this.form.lockedBy !== getCurrentUser().uid)
+			)
+		},
+
 		/**
 		 * Return form title, or placeholder if not set
 		 *

src/components/AppNavigationForm.vue

@@ -10,7 +10,7 @@
 			:key="option.id"
 			:aria-label="isMobile ? option.ariaLabel : null"
 			:checked="active.id"
-			:disabled="disabled"
+			:disabled="disabled || option.disabled"
 			class="pill-menu__toggle"
 			:class="{ 'pill-menu__toggle--icon-only': isMobile && option.icon }"
 			button-variant

src/components/PillMenu.vue

@@ -5,9 +5,31 @@
 
 <template>
 	<div class="sidebar-tabs__content">
+		<NcNoteCard
+			v-if="locked"
+			type="info"
+			:heading="t('forms', 'Form is locked')"
+			:text="
+				t('forms', 'Lock by {lockedBy}, expires: {lockedUntil}', {
+					lockedBy: form.lockedBy ? form.lockedBy : form.ownerId,
+					lockedUntil:
+						lockedUntil === '' ? t('forms', 'never') : lockedUntil,
+				})
+			" />
+		<NcButton
+			v-if="locked && isCurrentUserOwner"
+			wide
+			@click="onFormLockChange(false)">
+			<template #icon>
+				<NcIconSvgWrapper
+					:svg="svgLockOpen"
+					:name="t('forms', 'Open lock')" />
+			</template>
+			{{ t('forms', 'Unlock form') }}
+		</NcButton>
 		<NcCheckboxRadioSwitch
 			:checked="form.isAnonymous"
-			:disabled="formArchived"
+			:disabled="formArchived || locked"
 			type="switch"
 			@update:checked="onAnonChange">
 			<!-- TRANSLATORS Checkbox to select whether responses will be stored anonymously or not -->
@@ -16,21 +38,21 @@
 		<NcCheckboxRadioSwitch
 			v-tooltip="disableSubmitMultipleExplanation"
 			:checked="submitMultiple"
-			:disabled="disableSubmitMultiple || formArchived"
+			:disabled="disableSubmitMultiple || formArchived || locked"
 			type="switch"
 			@update:checked="onSubmitMultipleChange">
 			{{ t('forms', 'Allow multiple responses per person') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
 			:model-value="form.allowEditSubmissions"
-			:disabled="formArchived"
+			:disabled="formArchived || locked"
 			type="switch"
 			@update:model-value="onAllowEditSubmissionsChange">
 			{{ t('forms', 'Allow editing own responses') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
 			:checked="formExpires"
-			:disabled="formArchived"
+			:disabled="formArchived || locked"
 			type="switch"
 			@update:checked="onFormExpiresChange">
 			{{ t('forms', 'Set expiration date') }}
@@ -39,6 +61,7 @@
 			<NcDateTimePicker
 				id="expiresDatetimePicker"
 				:clearable="false"
+				:disabled="locked"
 				:disabled-date="notBeforeToday"
 				:disabled-time="notBeforeNow"
 				:editable="false"
@@ -50,14 +73,15 @@
 				@change="onExpirationDateChange" />
 			<NcCheckboxRadioSwitch
 				:checked="form.showExpiration"
+				:disabled="locked"
 				type="switch"
 				@update:checked="onShowExpirationChange">
 				{{ t('forms', 'Show expiration date on form') }}
 			</NcCheckboxRadioSwitch>
 		</div>
 		<NcCheckboxRadioSwitch
 			:checked="formClosed"
-			:disabled="formArchived"
+			:disabled="formArchived || locked"
 			aria-describedby="forms-settings__close-form"
 			type="switch"
 			@update:checked="onFormClosedChange">
@@ -66,9 +90,21 @@
 		<p id="forms-settings__close-form" class="settings-hint">
 			{{ t('forms', 'Closed forms do not accept new submissions.') }}
 		</p>
+		<NcCheckboxRadioSwitch
+			:model-value="isFormLockedPermanently"
+			:disabled="
+				formArchived
+				|| (locked && form.lockedUntil !== 0)
+				|| !isCurrentUserOwner
+			"
+			type="switch"
+			@update:model-value="onFormLockChange">
+			{{ t('forms', 'Lock form permanently') }}
+		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
 			:checked="formArchived"
 			aria-describedby="forms-settings__archive-form"
+			:disabled="locked"
 			type="switch"
 			@update:checked="onFormArchivedChange">
 			{{ t('forms', 'Archive form') }}
@@ -83,7 +119,7 @@
 		</p>
 		<NcCheckboxRadioSwitch
 			:checked="hasCustomSubmissionMessage"
-			:disabled="formArchived"
+			:disabled="formArchived || locked"
 			type="switch"
 			@update:checked="onUpdateHasCustomSubmissionMessage">
 			{{ t('forms', 'Custom submission message') }}
@@ -103,6 +139,7 @@
 				aria-describedby="forms-submission-message-description"
 				:aria-label="t('forms', 'Custom submission message')"
 				:value="form.submissionMessage"
+				:disabled="locked"
 				:maxlength="maxStringLengths.submissionMessage"
 				:placeholder="
 					t(
@@ -132,25 +169,33 @@
 			</div>
 		</div>
 
-		<TransferOwnership :form="form" />
+		<TransferOwnership :locked="locked" :form="form" />
 	</div>
 </template>
 
 <script>
+import { getCurrentUser } from '@nextcloud/auth'
 import moment from '@nextcloud/moment'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import ShareTypes from '../../mixins/ShareTypes.js'
 import TransferOwnership from './TransferOwnership.vue'
 
 import { directive as ClickOutside } from 'v-click-outside'
 import { loadState } from '@nextcloud/initial-state'
 import { FormState } from '../../models/Constants.ts'
+import svgLockOpen from '../../../img/lock_open.svg?raw'
 
 export default {
 	components: {
+		NcButton,
 		NcCheckboxRadioSwitch,
 		NcDateTimePicker,
+		NcIconSvgWrapper,
+		NcNoteCard,
 		TransferOwnership,
 	},
 
@@ -167,6 +212,16 @@ export default {
 			type: Object,
 			required: true,
 		},
+
+		locked: {
+			type: Boolean,
+			required: true,
+		},
+
+		lockedUntil: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {
@@ -178,10 +233,19 @@ export default {
 			maxStringLengths: loadState('forms', 'maxStringLengths'),
 			/** If custom submission message is shown as input or rendered markdown */
 			editMessage: false,
+			svgLockOpen,
 		}
 	},
 
 	computed: {
+		isCurrentUserOwner() {
+			return getCurrentUser().uid === this.form.ownerId
+		},
+
+		isFormLockedPermanently() {
+			return this.locked && this.form.lockedUntil === 0
+		},
+
 		/**
 		 * If the form has a custom submission message or the user wants to add one (settings switch)
 		 */
@@ -297,6 +361,10 @@ export default {
 			)
 		},
 
+		onFormLockChange(locked) {
+			this.$emit('update:formProp', 'lockedUntil', locked ? 0 : null)
+		},
+
 		onFormArchivedChange(isArchived) {
 			this.$emit(
 				'update:formProp',
@@ -386,7 +454,6 @@ export default {
 .sidebar-tabs__content {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 }
 .submission-message {
 	&__description {

src/components/SidebarTabs/SettingsSidebarTab.vue

@@ -9,6 +9,7 @@
 			:clear-search-on-select="false"
 			:close-on-select="false"
 			:loading="showLoadingCircle"
+			:disabled="locked"
 			:get-option-key="(option) => option.key"
 			:options="options"
 			:placeholder="t('forms', 'Search for user, group or team …')"
@@ -46,6 +47,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		locked: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	computed: {

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -18,22 +18,24 @@
 			<NcActionCaption :name="t('forms', 'Permissions')" />
 			<NcActionCheckbox
 				:model-value="canEditForm"
+				:disabled="locked"
 				@update:model-value="updatePermissionEdit">
 				{{ t('forms', 'Edit form') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
 				:model-value="canAccessResults"
+				:disabled="locked"
 				@update:model-value="updatePermissionResults">
 				{{ t('forms', 'View responses') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
 				:model-value="canDeleteResults"
-				:disabled="!canAccessResults"
+				:disabled="!canAccessResults || locked"
 				@update:model-value="updatePermissionDeleteResults">
 				{{ t('forms', 'Delete responses') }}
 			</NcActionCheckbox>
 			<NcActionSeparator />
-			<NcActionButton @click="removeShare">
+			<NcActionButton :disabled="locked" @click="removeShare">
 				<template #icon>
 					<IconClose :size="20" />
 				</template>
@@ -73,6 +75,11 @@ export default {
 			type: Object,
 			required: true,
 		},
+
+		locked: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	computed: {