Adapt Frontend

Signed-off-by: Jonas Rittershofer <[email protected]>

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -28,7 +28,7 @@
 			:close-on-select="false"
 			:hide-selected="true"
 			:internal-search="false"
-			:loading="loading"
+			:loading="showLoading"
 			:options="options"
 			:placeholder="t('forms', 'User or group name …')"
 			:preselect-first="true"
@@ -70,6 +70,10 @@ export default {
 			type: Array,
 			default: () => ([]),
 		},
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -123,6 +127,13 @@ export default {
 			}
 			return t('forms', 'No elements found.')
 		},
+
+		/**
+		 * Show Loading if either parent is loading, or this module
+		 */
+		showLoading() {
+			return this.isLoading || this.loading
+		},
 	},
 
 	mounted() {

src/components/SidebarTabs/SharingSidebarTab.vue

@@ -24,7 +24,8 @@
 <template>
 	<div class="sidebar-tabs__content">
 		<SharingSearchDiv
-			:current-shares="currentShares"
+			:current-shares="form.shares"
+			:is-loading="isLoading"
 			@add-share="addShare" />
 
 		<div class="share-div">
@@ -71,12 +72,8 @@
 		</div>
 
 		<TransitionGroup tag="ul">
-			<SharingShareDiv v-for="share in sortedUserShares"
-				:key="'userShare-' + share.shareWith"
-				:share="share"
-				@remove-share="removeShare" />
-			<SharingShareDiv v-for="share in sortedGroupShares"
-				:key="'groupShare-' + share.shareWith"
+			<SharingShareDiv v-for="share in sortedShares"
+				:key="'share-' + share.shareType + '-' + share.shareWith"
 				:share="share"
 				@remove-share="removeShare" />
 		</TransitionGroup>
@@ -89,10 +86,14 @@
 
 <script>
 import { Actions, ActionButton, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { generateOcsUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
 import ShareTypes from '../../mixins/ShareTypes'
 import ShareLinkMixin from '../../mixins/ShareLinkMixin'
+import OcsResponse2Data from '../../utils/OcsResponse2Data'
 
 export default {
 	components: {
@@ -112,46 +113,73 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			isLoading: false,
+		}
+	},
+
 	computed: {
-		currentShares() {
-			return [...this.form.access.users, ...this.form.access.groups]
-		},
-		sortedUserShares() {
-			return this.form.access.users.slice().sort(this.sortByDisplayname)
-		},
-		sortedGroupShares() {
-			return this.form.access.groups.slice().sort(this.sortByDisplayname)
+		sortedShares() {
+			return this.form.shares.slice().sort(this.sortByTypeDisplayname)
 		},
 	},
 
 	methods: {
-		addShare(share) {
-			const newAccess = { ...this.form.access }
-
-			if (share.shareType === this.SHARE_TYPES.SHARE_TYPE_USER) {
-				newAccess.users.push(share)
+		/**
+		 * Add share
+		 *
+		 * @param {object} newShare the share object
+		 */
+		async addShare(newShare) {
+			this.isLoading = true
+
+			try {
+				const response = await axios.post(generateOcsUrl('apps/forms/api/v2/share'), {
+					formId: this.form.id,
+					shareType: newShare.shareType,
+					shareWith: newShare.shareWith,
+				})
+				const share = OcsResponse2Data(response)
+
+				// Add new share
+				this.$emit('add-share', share)
+
+			} catch (error) {
+				console.error(error)
+				showError(t('forms', 'There was an error while adding the share'))
+			} finally {
+				this.isLoading = false
 			}
-			if (share.shareType === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
-				newAccess.groups.push(share)
-			}
-
-			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		removeShare(share) {
-			const newAccess = { ...this.form.access }
-
-			if (share.shareType === this.SHARE_TYPES.SHARE_TYPE_USER) {
-				newAccess.users = this.form.access.users.filter(user => user !== share)
+		/**
+		 * Remove share
+		 *
+		 * @param {object} share the share to delete
+		 */
+		async removeShare(share) {
+			this.isLoading = true
+
+			try {
+				await axios.delete(generateOcsUrl('apps/forms/api/v2/share/{id}', {
+					id: share.id,
+				}))
+				this.$emit('remove-share', share)
+			} catch (error) {
+				console.error(error)
+				showError(t('forms', 'There was an error while removing the share'))
+			} finally {
+				this.isLoading = false
 			}
-			if (share.shareType === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
-				newAccess.groups = this.form.access.groups.filter(group => group !== share)
-			}
-
-			this.$emit('update:formProp', 'access', newAccess)
 		},
 
-		sortByDisplayname(a, b) {
+		sortByTypeDisplayname(a, b) {
+			// First return, if ShareType does not match
+			if (a.shareType < b.shareType) return -1
+			if (a.shareType > b.shareType) return 1
+
+			// Otherwise sort by displayname
 			if (a.displayName.toLowerCase() < b.displayName.toLowerCase()) return -1
 			if (a.displayName.toLowerCase() > b.displayName.toLowerCase()) return 1
 			return 0

src/views/Sidebar.vue

@@ -32,7 +32,9 @@
 			icon="icon-share">
 			<SharingSidebarTab
 				:form="form"
-				@update:formProp="onPropertyChange" />
+				@update:formProp="onPropertyChange"
+				@add-share="onAddShare"
+				@remove-share="onRemoveShare" />
 		</AppSidebarTab>
 
 		<AppSidebarTab
@@ -94,6 +96,19 @@ export default {
 			this.$set(this.form, property, newVal)
 			this.saveFormProperty(property)
 		},
+
+		/**
+		 * Adding/Removing Share from the reactive object. API-Request is done in sharing-tab.
+		 *
+		 * @param {object} share The respective share object
+		 */
+		onAddShare(share) {
+			this.form.shares.push(share)
+		},
+		onRemoveShare(share) {
+			const index = this.form.shares.findIndex(search => search.id === share.id)
+			this.form.shares.splice(index, 1)
+		},
 	},
 }
 </script>