Switch to NcSelect and @nextcloud/vue 8

.eslintrc.js

@@ -21,5 +21,8 @@ module.exports = {
 		'jsdoc/check-values': 'off',
 		'jsdoc/valid-types': 'off',
 		'jsdoc/no-undefined-types': 'off',
+		'jsdoc/require-param-description': 'off',
+		'jsdoc/require-param-type': 'off',
+		'jsdoc/require-property-description': 'off',
 	}
 }

cypress/e2e/integration.spec.js

@@ -83,12 +83,12 @@ describe('Nextcloud integration', function() {
 			cy.get('#w2ui-overlay-download-as-menu .menu-text').eq(1).click()
 		})
 
-		cy.get('.oc-dialog').should('be.visible')
-		cy.get('.oc-dialog input[type=text]')
+		cy.get('.saveas-dialog').should('be.visible')
+		cy.get('.saveas-dialog input[type=text]')
 			.should('be.visible')
-			.should('have.value', 'document.rtf')
+			.should('have.value', '/document.rtf')
 
-		cy.get('.oc-dialog button.primary').click()
+		cy.get('.saveas-dialog button.button-vue--vue-primary').click()
 
 		cy.get('@loleafletframe').within(() => {
 			cy.get('#closebutton').click()

package.json

@@ -24,18 +24,18 @@
     "test:coverage": "NODE_ENV=test jest --coverage"
   },
   "dependencies": {
-    "@nextcloud/auth": "^2.1.0",
+    "@nextcloud/auth": "^2.2.1",
     "@nextcloud/axios": "^2.4.0",
     "@nextcloud/capabilities": "^1.1.0",
-    "@nextcloud/dialogs": "^4.2.2",
+    "@nextcloud/dialogs": "^5.0.3",
     "@nextcloud/event-bus": "^3.1.0",
     "@nextcloud/files": "^3.0.0",
     "@nextcloud/initial-state": "^2.1.0",
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/moment": "^1.2.2",
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.2.0",
-    "@nextcloud/vue": "^7.12.6",
+    "@nextcloud/vue": "^8.3.0",
     "vue": "^2.7.15",
     "vue-material-design-icons": "^5.2.0"
   },
@@ -48,19 +48,19 @@
   },
   "devDependencies": {
     "@cypress/browserify-preprocessor": "^3.0.2",
-    "@cypress/webpack-preprocessor": "^6.0.0",
+    "@cypress/webpack-preprocessor": "^6.0.1",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/cypress": "^1.0.0-beta.6",
-    "@nextcloud/eslint-config": "^8.2.1",
+    "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.3.1",
     "@nextcloud/webpack-vue-config": "^6.0.0",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
-    "cypress": "^13.6.1",
+    "cypress": "^13.6.2",
     "cypress-split": "^1.17.1",
     "eslint-plugin-cypress": "^2.15.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.3"
   },
   "jest": {
     "verbose": true,

src/admin.js

@@ -1,4 +1,6 @@
+import './init-shared.js'
 import Vue from 'vue'
+import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import AdminSettings from './components/AdminSettings.vue'
 import '../css/admin.scss'
@@ -59,11 +61,8 @@
 		elmt.classList.remove('icon-delete')
 
 		// send request
-		$.ajax({
-			url: remote,
-			type: 'DELETE',
-		})
-			.done(function() {
+		axios.delete(remote)
+			.then(function() {
 			// remove template
 				elmt.parentElement.remove()
 				// is list empty? Only the default template is left
@@ -72,7 +71,7 @@
 					emptyElmt.classList.remove('hidden')
 				}
 			})
-			.fail(function(e) {
+			.catch(function(e) {
 			// failure, show warning
 				elmt.textContent = t('richdocuments', 'Error')
 				elmt.classList.remove('icon-loading')
@@ -99,7 +98,7 @@
 	})
 
 	// fileupload plugin
 	$('#richdocuments-templates').fileupload({
 		dataType: 'json',
 		url: generateUrl('apps/richdocuments/template'),
 		type: 'POST',
@@ -139,6 +138,6 @@
 	})
 }
 
-$(document).ready(function() {
+document.addEventListener('DOMContentLoaded', () => {
 	initTemplateManager()
 })

src/components/AdminSettings.vue

@@ -185,7 +185,7 @@
 							{{ t('richdocuments', 'Loading available demo servers …') }}
 						</p>
 						<p v-else-if="demoServers.length > 0">
-							<NcMultiselect v-if="serverMode === 'demo'"
+							<NcSelect v-if="serverMode === 'demo'"
 								v-model="settings.demoUrl"
 								:custom-label="demoServerLabel"
 								track-by="demo_url"
@@ -349,7 +349,7 @@
 					:disabled="updating"
 					@input="update" />
 				<p v-if="settings.watermark.allTags" class="checkbox-details">
-					<SettingsSelectTag v-model="settings.watermark.allTagsList" :label="t('richdocuments', 'Select tags to enforce watermarking')" @input="update" />
+					<NcSelectTags v-model="settings.watermark.allTagsList" :label="t('richdocuments', 'Select tags to enforce watermarking')" @input="update" />
 				</p>
 				<SettingsCheckbox v-model="settings.watermark.allGroups"
 					:label="t('richdocuments', 'Show watermark for users of groups')"
@@ -400,7 +400,7 @@
 					:disabled="updating"
 					@input="update" />
 				<p v-if="!settings.watermark.linkAll && settings.watermark.linkTags" class="checkbox-details">
-					<SettingsSelectTag v-model="settings.watermark.linkTagsList" :label="t('richdocuments', 'Select tags to enforce watermarking')" @input="update" />
+					<NcSelectTags v-model="settings.watermark.linkTagsList" :label="t('richdocuments', 'Select tags to enforce watermarking')" @input="update" />
 				</p>
 			</div>
 		</div>
@@ -412,17 +412,16 @@ import Vue from 'vue'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl, generateFilePath } from '@nextcloud/router'
 import { showWarning, showError } from '@nextcloud/dialogs'
-import { NcModal, NcMultiselect, NcNoteCard } from '@nextcloud/vue'
+import { NcModal, NcSelect, NcSelectTags, NcNoteCard } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 import SettingsCheckbox from './SettingsCheckbox.vue'
 import SettingsInputText from './SettingsInputText.vue'
-import SettingsSelectTag from './SettingsSelectTag.vue'
 import SettingsSelectGroup from './SettingsSelectGroup.vue'
 import SettingsExternalApps from './SettingsExternalApps.vue'
 import SettingsInputFile from './SettingsInputFile.vue'
 import SettingsFontList from './SettingsFontList.vue'
 
-import '@nextcloud/dialogs/dist/index.css'
+import '@nextcloud/dialogs/style.css'
 import { getCallbackBaseUrl } from '../helpers/url.js'
 
 const SERVER_STATE_OK = 0
@@ -443,9 +442,9 @@ export default {
 	components: {
 		SettingsCheckbox,
 		SettingsInputText,
-		SettingsSelectTag,
 		SettingsSelectGroup,
-		NcMultiselect,
+		NcSelect,
+		NcSelectTags,
 		SettingsExternalApps,
 		SettingsInputFile,
 		SettingsFontList,
@@ -521,7 +520,7 @@ export default {
 		},
 		fontHint() {
 			return t('richdocuments', 'Make sure to set this URL: {url} in the coolwsd.xml file of your Collabora Online server to ensure the added fonts get loaded automatically.',
-				{ url: this.fontHintUrl }
+				{ url: this.fontHintUrl },
 			)
 		},
 		fontXmlHint() {
@@ -616,6 +615,10 @@ export default {
 
 			const { settings } = result?.data?.data || {}
 			for (const settingKey in settings) {
+				if (settingKey === 'use_groups' || settingKey === 'edit_groups') {
+					this.settings[settingKey] = settings[settingKey] ? settings[settingKey].split('|') : []
+					continue
+				}
 				this.settings[settingKey] = settings[settingKey]
 			}
 			this.checkFrontend()
@@ -720,14 +723,18 @@ export default {
 			try {
 				const result = await axios.post(
 					generateFilePath('richdocuments', 'ajax', 'admin.php'),
-					data
+					data,
 				)
 
 				this.updating = false
 
 				const { settings } = result?.data?.data || {}
 
 				for (const settingKey in settings) {
+					if (settingKey === 'use_groups' || settingKey === 'edit_groups') {
+						this.settings[settingKey] = settings[settingKey] ? settings[settingKey].split('|') : []
+						continue
+					}
 					this.settings[settingKey] = settings[settingKey]
 				}
 

src/components/Modal/Confirmation.vue

@@ -0,0 +1,77 @@
+<template>
+	<NcModal>
+		<div class="confirmation-dialog">
+			<h1>{{ name }}</h1>
+			<p>{{ description }}</p>
+			<div class="confirmation-dialog--buttons">
+				<NcButton type="secondary"
+					@click="() => close(false)">
+					{{ cancelButtonText }}
+				</NcButton>
+				<NcButton type="primary"
+					@click="() => close(true)">
+					{{ confirmButtonText }}
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+<script>
+import { NcButton, NcModal } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
+
+export default {
+	name: 'Confirmation',
+	components: {
+		NcButton,
+		NcModal,
+	},
+	props: {
+		name: {
+			type: String,
+			default: '',
+		},
+		description: {
+			type: String,
+			default: '',
+		},
+		confirmButtonText: {
+			type: String,
+			default: t('richdocuments', 'Confirm'),
+		},
+		cancelButtonText: {
+			type: String,
+			default: t('richdocuments', 'Cancel'),
+		},
+	},
+	emits: ['close'],
+	methods: {
+		t,
+		close(result) {
+			this.$emit('close', result)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.confirmation-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 24px;
+    h1 {
+        font-size: 120%;
+        font-weight: bold;
+        margin-bottom: 12px;
+    }
+
+    &--buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 24px;
+    }
+}
+</style>