Migrate to vue 3

lib/AppInfo/Application.php

@@ -49,22 +49,7 @@ public function register(IRegistrationContext $context): void {
 		});
 
 		$context->registerMiddleware(ExceptionMiddleware::class);
-
-		/**
-		 * Add worker-src blob to content security policy, so that
-		 * https://github.com/gruhn/vue-qrcode-reader works correctly.
-		 */
-		if (class_exists('\\OCP\\AppFramework\\Http\\EmptyContentSecurityPolicy')) {
-			$manager = \OC::$server->getContentSecurityPolicyManager();
-
-			$policy = new \OCP\AppFramework\Http\EmptyContentSecurityPolicy();
-			$policy->addAllowedWorkerSrcDomain('blob:');
-			// This line is for Safari on iOS and Mac, which doesn't know 'worker-src' yet.
-			$policy->addAllowedChildSrcDomain('blob:');
-
-			$manager->addDefaultPolicy($policy);
-		}
-
+
 		$context->registerSearchProvider(Provider::class);
 	}
 

lib/Controller/PageController.php

@@ -23,6 +23,7 @@
 namespace OCA\Inventory\Controller;
 
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\IConfig;
 use OCP\IInitialStateService;
@@ -62,6 +63,14 @@ public function index() {
 			'attachmentFolder', $attachmentFolder
 		);
 
-		return new TemplateResponse('inventory', 'main');
+		$response = new TemplateResponse('inventory', 'main');
+
+		$csp = new ContentSecurityPolicy();
+		$csp->allowEvalScript(true);
+		// Needed to get https://github.com/gruhn/vue-qrcode-reader to work.
+		// $csp->allowEvalWasm(true);
+		$response->setContentSecurityPolicy($csp);
+
+		return $response;
 	}
 }

package.json

@@ -26,39 +26,38 @@
 	"contributors": [],
 	"dependencies": {
 		"@nextcloud/axios": "2.4.0",
-		"@nextcloud/dialogs": "5.1.0",
+		"@nextcloud/dialogs": "4.1.0",
 		"@nextcloud/event-bus": "3.1.0",
 		"@nextcloud/files": "3.1.0",
 		"@nextcloud/initial-state": "2.1.0",
 		"@nextcloud/l10n": "2.2.0",
 		"@nextcloud/moment": "1.3.1",
-		"@nextcloud/router": "2.2.0",
-		"@nextcloud/vue": "8.4.0",
+		"@nextcloud/router": "2.2.1",
+		"@nextcloud/vue": "9.0.0-alpha.0",
 		"@vueuse/components": "^10.7.2",
 		"bwip-js": "4.2.0",
-		"date-fns": "^3.2.0",
+		"date-fns": "^3.3.1",
 		"jspdf": "2.5.1",
 		"p-queue": "8.0.1",
 		"papaparse": "5.4.1",
 		"search-query-parser": "1.6.0",
 		"uuid": "9.0.1",
-		"vue": "^2.7.16",
+		"vue": "3.4.15",
 		"vue-material-design-icons": "5.2.0",
-		"vue-qrcode-reader": "3.1.8",
-		"vue-router": "3.6.5",
-		"vuex": "3.6.2",
-		"vuex-router-sync": "5.0.0"
+		"vue-qrcode-reader": "5.5.1",
+		"vue-router": "4.2.5",
+		"vuex": "4.1.0"
 	},
 	"devDependencies": {
 		"@nextcloud/babel-config": "1.0.0",
 		"@nextcloud/browserslist-config": "3.0.0",
-		"@nextcloud/eslint-config": "^8.3.0",
-		"@nextcloud/stylelint-config": "2.3.1",
-		"@nextcloud/vite-config": "^1.2.0",
-		"@vue/test-utils": "^1.3.0",
-		"babel-core": "7.0.0-bridge.0",
-		"happy-dom": "^13.2.0",
+		"@nextcloud/eslint-config": "github:nextcloud-libraries/eslint-config#vue3",
+		"@nextcloud/stylelint-config": "2.4.0",
+		"@nextcloud/vite-config": "github:nextcloud-libraries/nextcloud-vite-config#vue3",
+		"@vue/test-utils": "^2.4.3",
+		"happy-dom": "^13.3.1",
 		"regenerator-runtime": "0.14.1",
+		"vite-plugin-static-copy": "^1.0.0",
 		"vitest": "^1.2.1"
 	},
 	"engines": {

src/App.vue

@@ -104,7 +104,7 @@ export default {
 	beforeMount() {
 		this.$store.dispatch('loadSettings')
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		unsubscribe('nextcloud:unified-search.search', this.filter)
 		unsubscribe('nextcloud:unified-search.reset', this.cleanFilter)
 	},
@@ -139,17 +139,17 @@ body {
 	}
 }
 // Adjust app-navigation-toggle position
-#app-navigation-vue .app-navigation-toggle {
+.app-navigation-toggle-wrapper {
 	@media only screen and (max-width: 500px) {
 		right: 0 !important;
 		top: 0 !important;
 	}
 }
 #controls {
 	display: flex;
-	padding-left: 48px;
-	padding-top: 4px;
-	height: 48px;
+	padding-left: 52px;
+	padding-top: 8px;
+	height: 52px;
 	position: sticky;
 	top: 0;
 	background-color: var(--color-main-background-translucent);
@@ -162,6 +162,7 @@ body {
 	}
 
 	.breadcrumb {
+		height: 44px;
 		width: calc(100% - 44px);
 	}
 }

src/components/EntityTable/Collection.vue

@@ -26,9 +26,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="column column--selection">
 			<NcCheckboxRadioSwitch v-if="showActions"
 				:aria-label="t('inventory', 'Select')"
-				:checked="isSelected"
+				:model-value="isSelected"
 				data-testid="collection-checkbox"
-				@update:checked="selectEntity" />
+				@update:model-value="selectEntity" />
 		</div>
 		<div class="column">
 			<RouterLink :to="`/${collection}/${encodePath(entity.path)}`"

src/components/EntityTable/EntityTable.vue

@@ -24,7 +24,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="entitytable" @dragover="dragOverTable">
 			<div :class="{ 'row--has-status': oneEntityHasStatus }" class="row row--header">
 				<div class="column column--selection">
-					<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="selectEntities" />
+					<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:model-value="selectEntities" />
 				</div>
 				<div class="column column--name">
 					<NcButton alignment="center-reverse"
@@ -104,12 +104,12 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				draggable="true"
 				class="entity"
 				@select-entity="selectEntity"
-				@dragstart.native="dragStart(item, $event)"
-				@dragend.native="dragEnd"
-				@drop.native="dropped(item, $event)"
-				@dragover.native="dragOver"
-				@dragenter.native="($event) => dragEnter(item, $event)"
-				@dragleave.native="dragLeave" />
+				@dragstart="dragStart(item, $event)"
+				@dragend="dragEnd"
+				@drop="dropped(item, $event)"
+				@dragover="dragOver"
+				@dragenter="($event) => dragEnter(item, $event)"
+				@dragleave="dragLeave" />
 			<EntityTableRowPlaceholder :placeholder="placeholder('lower')" />
 			<div v-if="searchString && !filterOnly" class="row row--search">
 				<div class="column" :class="{'column__left': !searching}">
@@ -255,7 +255,7 @@ export default {
 				: this.t('inventory', 'Unselect all')
 			return {
 				'aria-label': label,
-				checked: this.allEntitiesSelected,
+				'model-value': this.allEntitiesSelected,
 				indeterminate: this.someEntitiesSelected,
 				'data-testid': 'select-all-checkbox',
 				title: label,
@@ -726,8 +726,10 @@ export default {
 		height: 44px;
 		transition: background-color .3s ease;
 		border-bottom: 1px solid var(--color-border-dark);
+		padding-left: 8px;
 		@media only screen and (max-width: 500px) {
 			grid-template-columns: 44px 2fr 1fr 3fr;
+			padding-left: 0;
 
 			&--has-status {
 				grid-template-columns: 44px 2fr 1fr 3fr 44px;

src/components/EntityTable/Item.vue

@@ -27,9 +27,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="column column--selection">
 			<NcCheckboxRadioSwitch v-if="showActions"
 				:aria-label="t('inventory', 'Select')"
-				:checked="isSelected"
+				:model-value="isSelected"
 				data-testid="item-checkbox"
-				@update:checked="selectEntity" />
+				@update:model-value="selectEntity" />
 		</div>
 		<div class="column">
 			<component :is="itemRoute ? 'RouterLink' : 'a'"

src/components/ItemInstances.vue

@@ -39,17 +39,17 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					</NcActions>
 				</div>
 			</div>
-			<template v-for="instance in item.instances">
+			<template v-for="instance in item.instances" :key="`instance-${instance.id}`">
 				<div v-if="editedInstance.id !== instance.id"
 					:key="`instance-${instance.id}`"
 					class="row row--properties"
 					:class="{active: instanceActive(instance)}">
 					<div class="column column--narrow-header column--narrow-spacer" />
-					<template v-for="instanceProperty in instanceProperties">
-						<div :key="`narrow-header-${instanceProperty.key}`" class="column column--narrow-header">
+					<template v-for="instanceProperty in instanceProperties" :key="`column-${instanceProperty.key}`">
+						<div class="column column--narrow-header">
 							<span>{{ instanceProperty.name }}</span>
 						</div>
-						<div :key="`body-${instanceProperty.key}`" class="column">
+						<div class="column">
 							<router-link v-if="instanceProperty.key === 'place' && instance.place" :to="`/places/${instance.place.path}`">
 								{{ getInstanceProperty(instance, instanceProperty) }}
 							</router-link>
@@ -86,11 +86,11 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					v-click-outside="($event) => { hideEditInstance(instance, $event) }"
 					class="row row--properties">
 					<div class="column column--narrow-header column--narrow-spacer" />
-					<template v-for="instanceProperty in instanceProperties">
-						<div :key="`narrow-edit-header-${instanceProperty.key}`" class="column column--narrow-header">
+					<template v-for="instanceProperty in instanceProperties" :key="`narrow-edit-header-${instanceProperty.key}`">
+						<div class="column column--narrow-header">
 							<span>{{ instanceProperty.name }}</span>
 						</div>
-						<div :key="`edit-body-${instanceProperty.key}`" class="column column--input">
+						<div class="column column--input">
 							<div v-if="instanceProperty.key === 'place'">
 								{{ getInstanceProperty(instance, instanceProperty) }}
 							</div>
@@ -134,7 +134,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					</div>
 					<div>
 						<NcActions :boundaries-element="boundaries">
-							<NcActionButton v-if="newUuidValid(instance.uuids)"
+							<NcActionButton v-if="isNewUuidUnique(instance)"
 								key="add"
 								@click="setUuid(instance)">
 								<template #icon>
@@ -180,7 +180,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</ul>
 					</div>
 				</div>
-				<div :key="`attachments${instance.id}`" class="row row--column-all">
+				<div class="row row--column-all">
 					<Attachments :attachments="instance.attachments"
 						:item-id="String(item.id)"
 						:instance-id="String(instance.id)"
@@ -195,11 +195,11 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 			<div v-if="addingInstance" v-click-outside="hideInstanceInput" class="row row--properties">
 				<div class="column column--narrow-header column--narrow-spacer" />
-				<template v-for="instanceProperty in instanceProperties">
-					<div :key="`label-${instanceProperty.key}`" class="column column--narrow-header">
+				<template v-for="instanceProperty in instanceProperties" :key="instanceProperty.key">
+					<div class="column column--narrow-header">
 						<span>{{ instanceProperty.name }}</span>
 					</div>
-					<div :key="instanceProperty.key" class="column column--input">
+					<div class="column column--input">
 						<input v-model="newInstance[instanceProperty.key]"
 							type="text"
 							:placeholder="instanceProperty.name"
@@ -222,14 +222,15 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<form id="new_instance" method="POST" />
 		<form id="edit_instance" method="POST" />
 		<!-- qrcode -->
-		<QrScanModal :qr-modal-open.sync="qrModalOpen" @recognized-qr-code="foundUuid" />
+		<QrScanModal v-model:qr-modal-open="qrModalOpen" @codes-detected="foundCodes" />
 	</div>
 </template>
 
 <script>
 import focus from '../directives/focus.vue'
 import Attachments from './Attachments.vue'
 import QrScanModal from './QrScanModal.vue'
+import isUuid from '../utils/isUuid.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import {
@@ -334,23 +335,27 @@ export default {
 		/**
 		 * Checks that the new UUID is valid and not already used for this instance.
 		 *
-		 * @param {Array} uuids The already used UUIDs
+		 * @param {object} instance The instance to check the UUID against
 		 * @return {boolean} Whether the new UUID is valid
 		 */
-		newUuidValid(uuids) {
-			const uuidArray = uuids.map(uuid => {
+		isNewUuidUnique(instance) {
+			const uuids = instance.uuids.map(uuid => {
 				return uuid.uuid
 			})
-			return /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/.test(this.newUuid) && !uuidArray.includes(this.newUuid)
+			return this.isUuid(this.newUuid) && !uuids.includes(this.newUuid)
 		},
 
 		openQrModal() {
 			this.qrModalOpen = true
 		},
 
-		foundUuid(uuid) {
-			this.newUuid = uuid
-			this.qrModalOpen = false
+		foundCodes(codes) {
+			// We use the first valid UUID
+			const code = codes.find(code => isUuid(code.rawValue))
+			if (code) {
+				this.newUuid = code.rawValue
+				this.qrModalOpen = false
+			}
 		},
 
 		showEditInstance(instance) {
@@ -427,7 +432,7 @@ export default {
 		},
 
 		async setUuid(instance) {
-			if (this.newUuidValid(instance.uuids)) {
+			if (this.isNewUuidUnique(instance)) {
 				await this.addUuid({ item: this.item, instance, uuid: this.newUuid })
 				this.newUuid = ''
 			}

src/components/QrScanModal.vue

@@ -24,17 +24,27 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		:out-transition="true"
 		size="large"
 		@close="closeModal">
-		<QrcodeStream @decode="onDecode" @init="onInit" />
+		<QrcodeStream :formats="['ean_13', 'qr_code']" @detect="onDetect" @init="onInit" />
 		<div v-if="statusString" class="status-bar">
 			<span>{{ statusString }}</span>
 		</div>
 	</NcModal>
 </template>
 
 <script>
+import { linkTo } from '@nextcloud/router'
 import { NcModal } from '@nextcloud/vue'
 
-import { QrcodeStream } from 'vue-qrcode-reader'
+import { QrcodeStream, setZXingModuleOverrides } from 'vue-qrcode-reader'
+
+setZXingModuleOverrides({
+	locateFile: (path, prefix) => {
+		if (path.endsWith('.wasm')) {
+			return linkTo('inventory', 'js/zxing_reader.wasm')
+		}
+		return prefix + path
+	},
+})
 
 export default {
 	components: {
@@ -53,7 +63,7 @@ export default {
 	},
 	emits: [
 		'update:qrModalOpen',
-		'recognized-qr-code',
+		'codes-detected',
 	],
 	data() {
 		return {
@@ -64,8 +74,8 @@ export default {
 		closeModal(event) {
 			this.$emit('update:qrModalOpen', false)
 		},
-		onDecode(result) {
-			this.$emit('recognized-qr-code', result)
+		onDetect(detectedCodes) {
+			this.$emit('codes-detected', detectedCodes)
 		},
 
 		async onInit(promise) {