feat(files_sharing): Modularize SharingInput to adapt with share sections

Signed-off-by: nfebe <fenn25.fn@gmail.com>

Author: nfebe

apps/files_sharing/src/components/SharingInput.vue

@@ -73,6 +73,14 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		isExternal: {
+			type: Boolean,
+			default: false,
+		},
+		placeholder: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {
@@ -105,6 +113,10 @@ export default {
 			if (!this.canReshare) {
 				return t('files_sharing', 'Resharing is not allowed')
 			}
+			if (this.placeholder) {
+				return this.placeholder
+			}
+
 			// We can always search with email addresses for users too
 			if (!allowRemoteSharing) {
 				return t('files_sharing', 'Name or email …')
@@ -170,16 +182,19 @@ export default {
 			const shareType = [
 				ShareType.User,
 				ShareType.Group,
-				ShareType.Remote,
-				ShareType.RemoteGroup,
 				ShareType.Team,
 				ShareType.Room,
 				ShareType.Guest,
 				ShareType.Deck,
 				ShareType.ScienceMesh,
 			]
 
-			if (getCapabilities().files_sharing.public.enabled === true) {
+			if (this.isExternal) {
+				shareType.push(ShareType.Remote)
+				shareType.push(ShareType.RemoteGroup)
+			}
+
+			if (getCapabilities().files_sharing.public.enabled === true && this.isExternal) {
 				shareType.push(ShareType.Email)
 			}
 

apps/files_sharing/src/views/SharingTab.vue

@@ -37,6 +37,7 @@
 					:link-shares="linkShares"
 					:reshare="reshare"
 					:shares="shares"
+					:placeholder="t('files_sharing', 'Add users and teams')"
 					@open-sharing-details="toggleShareDetailsView" />
 
 				<!-- other shares list -->
@@ -58,6 +59,15 @@
 					<h6>{{ t('files_sharing', 'External shares') }}</h6>
 					<InfoIcon v-tooltip="t('files_sharing', 'Displays shares made to outside users.')" :size="16" />
 				</div>
+				<SharingInput v-if="!loading"
+					:can-reshare="canReshare"
+					:file-info="fileInfo"
+					:link-shares="linkShares"
+					:is-external="true"
+					:placeholder="t('files_sharing', 'Email, federated cloud id')"
+					:reshare="reshare"
+					:shares="shares"
+					@open-sharing-details="toggleShareDetailsView" />
 				<!-- link shares list -->
 				<SharingLinkList v-if="!loading"
 					ref="linkShareList"
@@ -105,12 +115,15 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { ShareType } from '@nextcloud/sharing'
 
+import CloudIcon from 'vue-material-design-icons/Cloud.vue'
+import EmailIcon from 'vue-material-design-icons/Email.vue'
 import InfoIcon from 'vue-material-design-icons/Information.vue'
 
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
 
 import { shareWithTitle } from '../utils/SharedWithMe.js'
 
@@ -125,6 +138,8 @@ import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
 import SharingDetailsTab from './SharingDetailsTab.vue'
 
+import ShareDetails from '../mixins/ShareDetails.js'
+
 export default {
 	name: 'SharingTab',
 
@@ -134,8 +149,11 @@ export default {
 
 	components: {
 		CollectionList,
+		CloudIcon,
+		EmailIcon,
 		InfoIcon,
 		NcAvatar,
+		NcInputField,
 		SharingEntryInternal,
 		SharingEntrySimple,
 		SharingInherited,
@@ -144,6 +162,7 @@ export default {
 		SharingList,
 		SharingDetailsTab,
 	},
+	mixins: [ShareDetails],
 
 	data() {
 		return {
@@ -166,6 +185,9 @@ export default {
 			showSharingDetailsView: false,
 			shareDetailsData: {},
 			returnFocusElement: null,
+
+			// external shars
+			externalShareQuery: '',
 		}
 	},
 
@@ -183,6 +205,13 @@ export default {
 			return !!(this.fileInfo.permissions & OC.PERMISSION_SHARE)
 				|| !!(this.reshare && this.reshare.hasSharePermission && this.config.isResharingAllowed)
 		},
+
+		ExternalShareIcon() {
+			if (this.externalShareQuery.includes('@')) {
+				return EmailIcon
+			}
+			return CloudIcon
+		},
 	},
 
 	methods: {