Refactor code for compliance with new eslint version

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

eslint.config.js

@@ -0,0 +1,5 @@
+import { recommendedVue2 } from '@nextcloud/eslint-config'
+
+export default [
+	...recommendedVue2,
+]

package-lock.json

@@ -55,7 +55,7 @@
     "@mdi/svg": "^7.4.47",
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/e2e-test-server": "^0.2.1",
-    "@nextcloud/eslint-config": "^8.4.2",
+    "@nextcloud/eslint-config": "^9.0.0-rc.5",
     "@nextcloud/prettier-config": "^1.2.0",
     "@nextcloud/stylelint-config": "^3.1.0",
     "@nextcloud/vite-config": "^1.7.1",

package.json

@@ -29,7 +29,6 @@
 						v-for="form in ownedForms"
 						:key="form.id"
 						:form="form"
-						:read-only="false"
 						@open-sharing="openSharing"
 						@mobile-close-navigation="mobileCloseNavigation"
 						@clone="onCloneForm"
@@ -77,7 +76,7 @@
 			<NcEmptyContent
 				v-if="loading"
 				class="forms-emptycontent"
-				:name="t('forms', 'Loading forms …')">
+				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
 				</template>
@@ -138,13 +137,12 @@
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import { showError } from '@nextcloud/dialogs'
-import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
-
+import { generateOcsUrl } from '@nextcloud/router'
 import { useIsMobile } from '@nextcloud/vue'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
@@ -154,20 +152,19 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
-
 import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-
-import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import AppNavigationForm from './components/AppNavigationForm.vue'
+import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import FormsIcon from './components/Icons/FormsIcon.vue'
-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 PermissionTypes from './mixins/PermissionTypes.js'
 import { FormState } from './models/Constants.ts'
+import logger from './utils/Logger.js'
+import OcsResponse2Data from './utils/OcsResponse2Data.js'
 
 export default {
+	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Forms',
 
 	components: {
@@ -211,9 +208,7 @@ export default {
 
 	computed: {
 		canEdit() {
-			return this.selectedForm.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
-			)
+			return this.selectedForm.permissions.includes(this.PERMISSION_TYPES.PERMISSION_EDIT)
 		},
 
 		hasForms() {
@@ -231,18 +226,14 @@ export default {
 		 * All active shared forms
 		 */
 		sharedForms() {
-			return this.allSharedForms.filter(
-				(form) => form.state !== FormState.FormArchived,
-			)
+			return this.allSharedForms.filter((form) => form.state !== FormState.FormArchived)
 		},
 
 		/**
 		 * All forms that have been archived
 		 */
 		archivedForms() {
-			return [...this.forms, ...this.allSharedForms].filter(
-				(form) => form.state === FormState.FormArchived,
-			)
+			return [...this.forms, ...this.allSharedForms].filter((form) => form.state === FormState.FormArchived)
 		},
 
 		routeHash() {
@@ -262,9 +253,7 @@ export default {
 			}
 
 			// Try to find form in owned & shared list
-			const form = [...this.forms, ...this.allSharedForms].find(
-				(form) => form.hash === this.routeHash,
-			)
+			const form = [...this.forms, ...this.allSharedForms].find((form) => form.hash === this.routeHash)
 
 			// If no form found, load it from server. Route will be automatically re-evaluated.
 			if (form === undefined) {
@@ -285,22 +274,19 @@ export default {
 				}
 				return {}
 			},
+
 			set(form) {
 				// always close sidebar
 				this.sidebarOpened = false
 
 				// If a owned form
-				let index = this.forms.findIndex(
-					(search) => search.hash === this.routeHash,
-				)
+				let index = this.forms.findIndex((search) => search.hash === this.routeHash)
 				if (index > -1) {
 					this.$set(this.forms, index, form)
 					return
 				}
 				// Otherwise a shared form
-				index = this.allSharedForms.findIndex(
-					(search) => search.hash === this.routeHash,
-				)
+				index = this.allSharedForms.findIndex((search) => search.hash === this.routeHash)
 				if (index > -1) {
 					this.$set(this.allSharedForms, index, form)
 				}
@@ -318,9 +304,7 @@ export default {
 	},
 
 	unmounted() {
-		unsubscribe('forms:last-updated:set', (id) =>
-			this.onLastUpdatedByEventBus(id),
-		)
+		unsubscribe('forms:last-updated:set', (id) => this.onLastUpdatedByEventBus(id))
 		unsubscribe('forms:ownership-transfered', (id) => this.onDeleteForm(id))
 	},
 
@@ -355,30 +339,22 @@ export default {
 
 			// Load Owned forms
 			try {
-				const response = await axios.get(
-					generateOcsUrl('apps/forms/api/v3/forms'),
-				)
+				const response = await axios.get(generateOcsUrl('apps/forms/api/v3/forms'))
 				this.forms = OcsResponse2Data(response)
 			} catch (error) {
 				logger.error('Error while loading owned forms list', { error })
-				showError(
-					t('forms', 'An error occurred while loading the forms list'),
-				)
+				showError(t('forms', 'An error occurred while loading the forms list'))
 			}
 
 			// Load shared forms
 			try {
-				const response = await axios.get(
-					generateOcsUrl('apps/forms/api/v3/forms?type=shared'),
-				)
+				const response = await axios.get(generateOcsUrl('apps/forms/api/v3/forms?type=shared'))
 				this.allSharedForms = OcsResponse2Data(response)
 			} catch (error) {
 				logger.error('Error while loading shared forms list', {
 					error,
 				})
-				showError(
-					t('forms', 'An error occurred while loading the forms list'),
-				)
+				showError(t('forms', 'An error occurred while loading the forms list'))
 			}
 
 			this.loading = false
@@ -403,23 +379,17 @@ export default {
 
 			this.loading = true
 			if (
-				[...this.forms, ...this.allSharedForms].find(
-					(form) => form.hash === hash,
-				) === undefined
+				[...this.forms, ...this.allSharedForms].find((form) => form.hash === hash) === undefined
 			) {
 				try {
-					const response = await axios.get(
-						generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-							id: loadState(appName, 'formId'),
-						}),
-					)
+					const response = await axios.get(generateOcsUrl('apps/forms/api/v3/forms/{id}', {
+						id: loadState(appName, 'formId'),
+					}))
 					const form = OcsResponse2Data(response)
 
 					// If the user has (at least) submission-permissions, add it to the shared forms
 					if (
-						form.permissions.includes(
-							this.PERMISSION_TYPES.PERMISSION_SUBMIT,
-						)
+						form.permissions.includes(this.PERMISSION_TYPES.PERMISSION_SUBMIT)
 					) {
 						this.allSharedForms.push(form)
 					}
@@ -441,9 +411,7 @@ export default {
 		async onNewForm() {
 			try {
 				// Request a new empty form
-				const response = await axios.post(
-					generateOcsUrl('apps/forms/api/v3/forms'),
-				)
+				const response = await axios.post(generateOcsUrl('apps/forms/api/v3/forms'))
 				const newForm = OcsResponse2Data(response)
 				this.forms.unshift(newForm)
 				this.$router.push({
@@ -464,11 +432,9 @@ export default {
 		 */
 		async onCloneForm(id) {
 			try {
-				const response = await axios.post(
-					generateOcsUrl('apps/forms/api/v3/forms?fromId={id}', {
-						id,
-					}),
-				)
+				const response = await axios.post(generateOcsUrl('apps/forms/api/v3/forms?fromId={id}', {
+					id,
+				}))
 				const newForm = OcsResponse2Data(response)
 				this.forms.unshift(newForm)
 				this.$router.push({
@@ -510,9 +476,7 @@ export default {
 				this.forms[formIndex].lastUpdated = moment().unix()
 				this.forms.sort((b, a) => a.lastUpdated - b.lastUpdated)
 			} else {
-				const sharedFormIndex = this.allSharedForms.findIndex(
-					(form) => form.id === id,
-				)
+				const sharedFormIndex = this.allSharedForms.findIndex((form) => form.id === id)
 				this.allSharedForms[sharedFormIndex].lastUpdated = moment().unix()
 				this.allSharedForms.sort((b, a) => a.lastUpdated - b.lastUpdated)
 			}

src/Forms.vue

@@ -10,7 +10,7 @@
 				:name="currentModel.title"
 				:description="currentModel.description">
 				<template #icon>
-					<Icon :is="currentModel.icon" :size="64" />
+					<component :is="currentModel.icon" :size="64" />
 				</template>
 			</NcEmptyContent>
 		</NcAppContent>
@@ -48,15 +48,18 @@ export default {
 					description: t('forms', 'This form does not exist'),
 					icon: FormsIcon,
 				},
+
 				expired: {
 					title: t('forms', 'Form expired'),
 					description: t(
 						'forms',
 						'This form has expired and is no longer taking answers',
 					),
+
 					icon: IconCheck,
 				},
 			},
+
 			renderAs: loadState(appName, 'renderAs'),
 		}
 	},

src/FormsEmptyContent.vue

@@ -56,14 +56,13 @@
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
-import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-
 import logger from './utils/Logger.js'
 
 export default {
@@ -98,6 +97,7 @@ export default {
 			await this.saveAppConfig('restrictCreation', newVal)
 			el.loading = false
 		},
+
 		async onCreationAllowedGroupsChange(newVal) {
 			const el = this.$refs.switchRestrictCreation
 			el.loading = true
@@ -107,18 +107,21 @@ export default {
 			)
 			el.loading = false
 		},
+
 		async onAllowPublicLinkChange(newVal) {
 			const el = this.$refs.switchAllowPublicLink
 			el.loading = true
 			await this.saveAppConfig('allowPublicLink', newVal)
 			el.loading = false
 		},
+
 		async onAllowPermitAllChange(newVal) {
 			const el = this.$refs.switchAllowPermitAll
 			el.loading = true
 			await this.saveAppConfig('allowPermitAll', newVal)
 			el.loading = false
 		},
+
 		async onAllowShowToAllChange(newVal) {
 			const el = this.$refs.switchAllowShowToAll
 			el.loading = true

src/FormsSettings.vue

@@ -37,7 +37,7 @@ export default {
 		}
 	},
 
-	destroyed() {
+	unmounted() {
 		unsubscribe('forms:last-updated:set', this.emitSubmitMessage)
 	},
 
@@ -49,11 +49,7 @@ export default {
 			const resizeObserver = new ResizeObserver((entries) => {
 				this.emitResizeMessage(entries[0].target)
 			})
-			this.$nextTick(() =>
-				resizeObserver.observe(
-					document.querySelector('.app-forms-embedded form'),
-				),
-			)
+			this.$nextTick(() => resizeObserver.observe(document.querySelector('.app-forms-embedded form')))
 		}
 	},
 
@@ -80,9 +76,7 @@ export default {
 
 			// When submitted the height and width is 0
 			if (height === 0) {
-				target = document.querySelector(
-					'.app-forms-embedded main .empty-content',
-				)
+				target = document.querySelector('.app-forms-embedded main .empty-content')
 				height = target.getBoundingClientRect().top + target.scrollHeight
 				width = Math.max(
 					target.scrollWidth,