Fix for #25

appinfo/info.xml

@@ -13,7 +13,7 @@
         Changing the property in the tab will also change the DAV property and hence it will be possible to access the
         properties via DAV call `PROPFIND`.
         ]]></description>
-    <version>2.0.0</version>
+    <version>2.0.1</version>
     <licence>apache</licence>
     <author mail="nextcloud@stekoe.de">SteKoe</author>
     <namespace>CustomProperties</namespace>

docker-compose.yml

@@ -12,10 +12,10 @@ services:
     volumes:
       - db:/var/lib/mysql
     environment:
-      - MYSQL_ROOT_PASSWORD=nextcloud
-      - MYSQL_PASSWORD=nextcloud
-      - MYSQL_DATABASE=nextcloud
-      - MYSQL_USER=nextcloud
+      - MYSQL_ROOT_PASSWORD=db
+      - MYSQL_PASSWORD=db
+      - MYSQL_DATABASE=db
+      - MYSQL_USER=db
   app:
     build: .
     ports:

src/sidebartab.js

@@ -1,39 +1,55 @@
 import Vue from 'vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
-import Sidebar from './views/sidebar/Sidebar.vue'
-
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-// Init Sharing tab component
-const View = Vue.extend(Sidebar)
-let TabInstance = null
+import SidebarTab from './views/sidebar/SidebarTab'
+import TabContent from './views/sidebar/TabContent'
 
 window.addEventListener('DOMContentLoaded', () => {
 	if (OCA.Files && OCA.Files.Sidebar) {
-		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
-			id: 'customproperties',
-			name: t('customproperties', 'Properties'),
-			icon: 'icon-info',
+		let tab
+
+		try {
+			// Nextcloud 20
+			tab = new OCA.Files.Sidebar.Tab('customproperties', SidebarTab)
+		} catch (error) {
+			// Nextcloud > 21
+			Vue.prototype.t = translate
+			Vue.prototype.n = translatePlural
 
-			async mount(el, fileInfo, context) {
-				if (TabInstance) {
+			// Init Sharing tab component
+			const View = Vue.extend(TabContent)
+			let TabInstance = null
+
+			tab = new OCA.Files.Sidebar.Tab({
+				id: 'customproperties',
+				name: t('customproperties', 'Properties'),
+				icon: 'icon-info',
+
+				async mount(el, fileInfo, context) {
+					if (TabInstance) {
+						TabInstance.$destroy()
+					}
+					TabInstance = new View({
+						parent: context,
+						data() {
+							return {
+								fileInfo_: fileInfo,
+							}
+						},
+					})
+					await TabInstance.updateFileInfo(fileInfo)
+					TabInstance.$mount(el)
+				},
+				async update(fileInfo) {
+					await TabInstance.updateFileInfo(fileInfo)
+				},
+				destroy() {
 					TabInstance.$destroy()
-				}
-				TabInstance = new View({
-					parent: context,
-				})
-				await TabInstance.update(fileInfo)
-				TabInstance.$mount(el)
-			},
-			update(fileInfo) {
-				TabInstance.update(fileInfo)
-			},
-			destroy() {
-				TabInstance.$destroy()
-				TabInstance = null
-			},
-		}))
+					TabInstance = null
+				},
+			})
+		}
+
+		OCA.Files.Sidebar.registerTab(tab)
 	}
 })