[PoC] Use webpack for files_sharing

apps/files_sharing/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}

apps/files_sharing/appinfo/app.php

@@ -43,7 +43,6 @@
 	'OCA\Files::loadAdditionalScripts',
 	function() {
 		\OCP\Util::addStyle('files_sharing', 'mergedAdditionalStyles');
-		\OCP\Util::addScript('files_sharing', 'additionalScripts');
 	}
 );
 

apps/files_sharing/js/sharetabview.js

@@ -14,6 +14,7 @@
 	var TEMPLATE =
 		'<div>' +
 		'<div class="dialogContainer"></div>' +
+		'<div id="collaborationResources"></div>' +
 		'</div>';
 
 	/**
@@ -76,6 +77,19 @@
 				this._dialog.model.on('change', function() {
 					self.trigger('sharesChanged', shareModel);
 				});
+
+				import('./../src/collaborationresources').then((Resources) => {
+					var vm = new Resources.Vue({
+						el: '#collaborationResources',
+						render: h => h(Resources.View),
+						data: {
+							model: this.model.toJSON()
+						},
+					});
+					this.model.on('change', () => { vm.data = this.model.toJSON() })
+
+				})
+
 			} else {
 				this.$el.empty();
 				// TODO: render placeholder text?

apps/files_sharing/list.php

@@ -32,7 +32,6 @@
 // gridview not available for ie
 $tmpl->assign('showgridview', $showgridview && !$isIE);
 
-OCP\Util::addScript('files_sharing', 'app');
-OCP\Util::addScript('files_sharing', 'sharedfilelist');
+OCP\Util::addScript('files_sharing', 'dist/files_sharing');
 
 $tmpl->printPage();

apps/files_sharing/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "files_sharing",
+  "version": "1.0.0",
+  "description": "File sharing in Nextcloud",
+  "main": "files_sharing.js",
+  "directories": {
+    "lib": "lib",
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "webpack --progress --hide-modules --config webpack.prod.js",
+    "dev": "webpack --progress --watch --config webpack.dev.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "AGPL-3.0-or-later",
+  "dependencies": {
+    "nextcloud-axios": "^0.1.3",
+    "nextcloud-vue": "^0.5.0",
+    "vue": "^2.5.17"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "babel-loader": "^8.0.2",
+    "css-loader": "^2.1.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "vue-loader": "^15.4.2",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.20.0",
+    "webpack-cli": "^3.1.1",
+    "webpack-merge": "^4.1.4"
+  }
+}

apps/files_sharing/src/collaborationresources.js

@@ -0,0 +1,36 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import { PopoverMenu } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+import { VTooltip } from 'v-tooltip'
+
+Vue.prototype.t = t;
+
+Vue.component('PopoverMenu', PopoverMenu)
+Vue.directive('ClickOutside', ClickOutside)
+Vue.directive('Tooltip', VTooltip)
+
+import View from './views/CollaborationView'
+
+export { Vue, View }

apps/files_sharing/src/components/ResourceListItem.vue

@@ -0,0 +1,98 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <[email protected]>
+  -
+  - @author Julius Härtl <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<li>
+		<avatar displayName="Design" :allowPlaceholder="true"></avatar>
+		<span class="username" title="">Design</span>
+		<div class="linked-icons">
+			<a href="" v-tooltip="'Design team calendar'"><span class="icon-calendar-dark"></span></a>
+			<a href="" v-tooltip="'Design projet overview'"><span class="nav-icon-files"></span></a>
+		</div>
+		<span class="sharingOptionsGroup">
+				<div class="share-menu" v-click-outside="close">
+					<a href="#" class="icon icon-more" @click="toggle"></a>
+					<span class="icon icon-loading-small hidden"></span>
+					<div class="popovermenu" :class="{open: isOpen}">
+						<popover-menu :menu="menu"></popover-menu>
+					</div>
+				</div>
+		</span>
+	</li>
+</template>
+
+<script>
+	import { Avatar } from 'nextcloud-vue';
+
+	export default {
+		name: 'ResourceListItem',
+		components: {
+			Avatar
+		},
+		data() {
+			return {
+				isOpen: false
+			}
+		},
+		computed: {
+			menu() {
+				return [
+					{
+						action: () => {  },
+						icon: 'icon-delete',
+						text: t('files_sharing', 'Remove collection'),
+					}
+				]
+			}
+		},
+		methods: {
+			open() {
+				this.isOpen = true
+			},
+			close() {
+				this.isOpen = false
+			},
+			toggle() {
+				this.isOpen = !this.isOpen
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.linked-icons {
+		display: flex;
+	span {
+		padding: 16px;
+		display: block;
+		background-repeat: no-repeat;
+		background-position: center;
+		opacity: 0.7;
+	&:hover {
+		 opacity: 1;
+	 }
+	}
+	}
+	.icon-category-integration {
+		background-color: var(--color-background-dark) !important;
+	}
+</style>

apps/files_sharing/src/files_sharing.js

@@ -0,0 +1,16 @@
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('files_sharing', 'js/dist/')
+
+import '../js/app'
+import '../js/sharedfilelist'
+import '../js/sharetabview'
+import '../js/share'
+import '../js/sharebreadcrumbview'
+
+window.OCA.Sharing = OCA.Sharing

apps/files_sharing/src/views/CollaborationView.vue

@@ -0,0 +1,70 @@
+<template>
+	<div>
+		<ul id="shareWithList" class="shareWithList">
+			<li @click="showSelect">
+				<div class="avatar icon-category-integration icon-white"></div>
+				<span class="username" title="" v-if="!selectIsOpen">{{ t('files_sharing', 'Add to a collection') }}</span>
+				<multiselect v-else v-model="value" :options="options" :placeholder="placeholder">
+					<template slot="singleLabel" slot-scope="props">
+						<span class="option__desc"><span class="option__title">{{ props.option }}</span></span>
+					</template>
+				</multiselect>
+			</li>
+			<resource-list-item></resource-list-item>
+			<resource-list-item></resource-list-item>
+			<resource-list-item></resource-list-item>
+		</ul>
+		<pre>Vue component file model: {{ this.$root.model.name }} </pre>
+
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.multiselect {
+		width: 100%;
+	}
+
+
+</style>
+
+<script>
+	import { Multiselect } from 'nextcloud-vue';
+	import ResourceListItem from '../components/ResourceListItem';
+
+	export default {
+		name: 'CollaborationView',
+		components: {
+			ResourceListItem,
+			Multiselect: Multiselect,
+		},
+		data() {
+			return {
+				selectIsOpen: false,
+				generatingCodes: false,
+				codes: undefined,
+				value: null,
+				model: {},
+				options: ['list', 'of', 'options']
+			};
+		},
+		mounted() {
+			console.log('mounted');
+			console.log(this.$root.model)
+		},
+		computed: {
+			placeholder() {
+				return t('core', 'Name, federated cloud ID or email address...');
+			}
+		},
+		created: function() {
+		},
+		methods: {
+			showSelect() {
+				this.selectIsOpen = true
+			},
+			isVueComponent(object) {
+				return object._isVue
+			}
+		}
+	}
+</script>

apps/files_sharing/webpack.common.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+
+module.exports = {
+	entry: path.join(__dirname, 'src', 'files_sharing.js'),
+	output: {
+		path: path.resolve(__dirname, 'js/dist'),
+		publicPath: '/js/dist/',
+		filename: 'files_sharing.js',
+		chunkFilename: 'files_sharing.[name].js'
+},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader']
+			},
+			{
+				test: /\.scss$/,
+				use: ['vue-style-loader', 'css-loader', 'sass-loader']
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.(png|jpg|gif|svg)$/,
+				loader: 'file-loader',
+				options: {
+					name: '[name].[ext]?[hash]'
+				}
+			}
+		]
+	},
+	plugins: [new VueLoaderPlugin()],
+	resolve: {
+		alias: {
+			vue$: 'vue/dist/vue.runtime.esm.js',
+		},
+		extensions: ['*', '.js', '.vue', '.json']
+	}
+};

apps/files_sharing/webpack.dev.js

@@ -0,0 +1,12 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  devtool: '#source-map',
+})

apps/files_sharing/webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: '#source-map'
+})