Move Files Sidebar to proper javascript standard

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 26 insertions, 35 deletions

diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js
index ffb6cdec30a..e8988e8c40a 100644
--- a/apps/files_sharing/src/files_sharing_tab.js
+++ b/apps/files_sharing/src/files_sharing_tab.js
@@ -19,11 +19,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import Vue from 'vue'
+import VueClipboard from 'vue-clipboard2'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import SharingTab from './views/SharingTab'
 import ShareSearch from './services/ShareSearch'
 import ExternalLinkActions from './services/ExternalLinkActions'
-
 import TabSections from './services/TabSections'
 
 // Init Sharing Tab Service
@@ -34,8 +36,28 @@ Object.assign(window.OCA.Sharing, { ShareSearch: new ShareSearch() })
 Object.assign(window.OCA.Sharing, { ExternalLinkActions: new ExternalLinkActions() })
 Object.assign(window.OCA.Sharing, { ShareTabSections: new TabSections() })
 
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.use(VueClipboard)
+
+// Init Sharing tab component
+const View = Vue.extend(SharingTab)
+
 window.addEventListener('DOMContentLoaded', function() {
 	if (OCA.Files && OCA.Files.Sidebar) {
-		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab('sharing', SharingTab))
+		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
+			id: 'sharing',
+			name: t('files_sharing', 'Sharing'),
+			icon: 'icon-share',
+
+			render: (el, fileInfo) => {
+				new View({
+					propsData: {
+						fileInfo,
+					},
+				}).$mount(el)
+				console.info(el)
+			},
+		}))
 	}
 })
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index 40c8572912f..c92aac40d0a 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -21,10 +21,7 @@
   -->
 
 <template>
-	<Tab :id="id"
-		:icon="icon"
-		:name="name"
-		:class="{ 'icon-loading': loading }">
+	<div :class="{ 'icon-loading': loading }">
 		<!-- error message -->
 		<div v-if="error" class="emptycontent">
 			<div class="icon icon-error" />
@@ -84,7 +81,7 @@
 				<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
 			</div>
 		</template>
-	</Tab>
+	</div>
 </template>
 
 <script>
@@ -92,7 +89,6 @@ import { CollectionList } from 'nextcloud-vue-collections'
 import { generateOcsUrl } from '@nextcloud/router'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import axios from '@nextcloud/axios'
-import Tab from '@nextcloud/vue/dist/Components/AppSidebarTab'
 
 import { shareWithTitle } from '../utils/SharedWithMe'
 import Share from '../models/Share'
@@ -117,7 +113,6 @@ export default {
 		SharingInput,
 		SharingLinkList,
 		SharingList,
-		Tab,
 	},
 
 	mixins: [ShareTypes],
@@ -134,9 +129,7 @@ export default {
 		return {
 			error: '',
 			expirationInterval: null,
-			icon: 'icon-share',
 			loading: true,
-			name: t('files_sharing', 'Sharing'),
 			// reshare Share object
 			reshare: null,
 			sharedWithMe: {},
@@ -148,26 +141,6 @@ export default {
 
 	computed: {
 		/**
-		 * Needed to differenciate the tabs
-		 * pulled from the AppSidebarTab component
-		 *
-		 * @returns {string}
-		 */
-		id() {
-			return 'sharing'
-		},
-
-		/**
-		 * Returns the current active tab
-		 * needed because AppSidebarTab also uses $parent.activeTab
-		 *
-		 * @returns {string}
-		 */
-		activeTab() {
-			return this.$parent.activeTab
-		},
-
-		/**
 		 * Is this share shared with me?
 		 *
 		 * @returns {boolean}
@@ -341,7 +314,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>