.vue files

Signed-off-by: Joas Schilling <coding@schilljs.com>
nextcloud · Jan 24, 2018 · 8f0dff0 · 8f0dff0
1 parent 57a0387
commit 8f0dff0
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 134 deletions.
diff --git a/js-src/app.js b/js-src/app.js
@@ -35,7 +35,7 @@ define(function (require) {
 
 			// Setup Vue
 			var Vue = require('vue');
-			this.vm = new Vue(require('./components/root'));
+			this.vm = new Vue(require('./components/root.vue'));
 
 			// Initial call to the notification endpoint
 			this._fetch();

diff --git a/js-src/components/action.js b/js-src/components/action.js
diff --git a/js-src/components/action.vue b/js-src/components/action.vue
@@ -0,0 +1,44 @@
+<template>
+	<button class="action-button pull-right" :class="{ primary: primary }"
+		:data-type="type" :data-href="link" @click="onClickActionButton">{{label}}</button>
+</template>
+
+<script>
+	export default {
+		name: "action",
+
+		props: [
+			'label',
+			'link',
+			'type',
+			'primary'
+		],
+
+		methods: {
+			onClickActionButton: function () {
+				$.ajax({
+					url: this.link,
+					type: this.type || 'GET',
+					success: function () {
+						this.$parent._$el.fadeOut(OC.menuSpeed);
+						this.$parent.$emit('remove');
+						$('body').trigger(new $.Event('OCA.Notification.Action', {
+							notification: this.$parent,
+							action: {
+								url: this.link,
+								type: this.type || 'GET'
+							}
+						}));
+					}.bind(this),
+					error: function () {
+						OC.Notification.showTemporary(t('notifications', 'Failed to perform action'));
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/js-src/components/notification.js → js-src/components/notification.vue b/js-src/components/notification.js → js-src/components/notification.vue
@@ -1,42 +1,32 @@
-/**
- * @copyright (c) 2017 Joas Schilling <coding@schilljs.com>
- *
- * @author Joas Schilling <coding@schilljs.com>
- *
- * This file is licensed under the Affero General Public License version 3 or
- * later. See the COPYING file.
- */
-
-/* global OC, $, t, moment, define */
-
-define(function (require) {
-	"use strict";
-
+<template>
+	<div class="notification" :data-id="notification_id" :data-timestamp="timestamp">
+		<div class="notification-heading">
+			<span class="notification-time has-tooltip live-relative-timestamp" :data-timestamp="timestamp" :title="absoluteDate">{{relativeDate}}</span>
+			<div class="notification-delete" @click="onDismissNotification">
+				<span class="icon icon-close svg" :title="t_dismiss"></span>
+			</div>
+		</div>
+		<a v-if="useLink" :href="link" class="notification-subject full-subject-link">
+			<span v-if="icon" class="image"><img :src="icon" class="notification-icon"></span>
+			<span class="text" v-html="renderedSubject"></span>
+		</a>
+		<div v-else class="notification-subject">
+			<span v-if="icon" class="image"><img :src="icon" class="notification-icon"></span>
+			<span class="text" v-html="renderedSubject"></span>
+		</div>
+		<div class="notification-message" v-if="message" v-html="renderedMessage" @click="onClickFullMessage"></div>
+		<div class="notification-full-message hidden" v-html="message"></div>
+		<div class="notification-actions" v-if="actions.length">
+			<action v-for="(a, index) in actions" v-bind="a" :key="index"></action>
+		</div>
+	</div>
+</template>
+
+<script>
 	var parser = require('../richObjectStringParser');
 
-	return {
-		template: '' +
-		'<div class="notification" :data-id="notification_id" :data-timestamp="timestamp">' +
-		'  <div class="notification-heading">' +
-		'    <span class="notification-time has-tooltip live-relative-timestamp" :data-timestamp="timestamp" :title="absoluteDate">{{relativeDate}}</span>' +
-		'    <div class="notification-delete" @click="onDismissNotification">' +
-		'      <span class="icon icon-close svg" title="' + t('notifications', 'Dismiss') + '"></span>' +
-		'    </div>' +
-		'  </div>' +
-		'    <a v-if="useLink" :href="link" class="notification-subject full-subject-link">' +
-		'      <span v-if="icon" class="image"><img :src="icon" class="notification-icon"></span>' +
-		'      <span class="text" v-html="renderedSubject"></span>' +
-		'    </a>' +
-		'    <div v-else class="notification-subject">' +
-		'        <span v-if="icon" class="image"><img :src="icon" class="notification-icon"></span>' +
-		'        <span class="text" v-html="renderedSubject"></span>' +
-		'    </div>' +
-		'  <div class="notification-message" v-if="message" v-html="renderedMessage" @click="onClickFullMessage"></div>' +
-		'  <div class="notification-full-message hidden" v-html="message"></div>' +
-		'  <div class="notification-actions" v-if="actions.length">' +
-		'    <action v-for="(a, index) in actions" v-bind="a" :key="index"></action>' +
-		'  </div>' +
-		'</div>',
+	export default {
+		name: "notification",
 
 		props: [
 			'notification_id',
@@ -59,6 +49,9 @@ define(function (require) {
 		_$el: null,
 
 		computed: {
+			t_dismiss: function() {
+				return t('notifications', 'Dismiss');
+			},
 			timestamp: function() {
 				return moment(this.datetime).format('X') * 1000;
 			},
@@ -112,7 +105,7 @@ define(function (require) {
 						this.$emit('remove');
 					}.bind(this),
 					error: function () {
-						OC.Notification.showTemporary('Failed to perform action'); // FIXME translation
+						OC.Notification.showTemporary(t('notifications', 'Failed to dismiss notification'));
 					}
 				});
 			},
@@ -195,7 +188,11 @@ define(function (require) {
 		},
 
 		components: {
-			'action': require('./action')
+			'action': require('./action.vue')
 		}
-	};
-});
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/js-src/components/root.js → js-src/components/root.vue b/js-src/components/root.js → js-src/components/root.vue
@@ -1,39 +1,32 @@
-/**
- * @copyright (c) 2017 Joas Schilling <coding@schilljs.com>
- *
- * @author Joas Schilling <coding@schilljs.com>
- *
- * This file is licensed under the Affero General Public License version 3 or
- * later. See the COPYING file.
- */
-
-/* global OC, OCA, $, t, define */
-
-define(function (require) {
-	"use strict";
-
-	return {
-		template: '' +
-		'<div v-if="!shutdown" class="notifications">' +
-		'  <div class="notifications-button menutoggle" :class="{ hasNotifications: notifications.length }">' +
-		'    <img class="svg" alt="" title="' + t('notifications', 'Notifications') + '" :src="iconPath">' +
-		'  </div>' +
-		'  <div class="notification-container">' +
-		'    <div class="notification-wrapper" v-if="notifications.length">' +
-		'      <notification v-for="(n, index) in notifications" v-bind="n" :key="n.notification_id" @remove="onRemove"></notification>' +
-		'    </div>' +
-		'    <div class="emptycontent" v-else>' +
-		'      <h2>' + t('notifications', 'No notifications') + '</h2>' +
-		'    </div>' +
-		'  </div>' +
-		'</div>',
+<template>
+	<div v-if="!shutdown" class="notifications">
+		<div class="notifications-button menutoggle" :class="{ hasNotifications: notifications.length }">
+			<img class="svg" alt="" :title="t_notifications" :src="iconPath">
+		</div>
+		<div class="notification-container">
+			<div class="notification-wrapper" v-if="notifications.length">
+				<notification v-for="(n, index) in notifications" v-bind="n" :key="n.notification_id" @remove="onRemove" ></notification>
+			</div>
+			<div class="emptycontent" v-else>
+				<h2>{{t_empty}}</h2>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "root",
 
 		el: '#notifications',
-		data: {
-			hadNotifications: false,
-			backgroundFetching: false,
-			shutdown: false,
-			notifications: []
+
+		data: function () {
+			return {
+				hadNotifications: false,
+				backgroundFetching: false,
+				shutdown: false,
+				notifications: []
+			};
 		},
 
 		_$el: null,
@@ -42,6 +35,12 @@ define(function (require) {
 		_$container: null,
 
 		computed: {
+			t_empty: function() {
+				return t('notifications', 'No notifications');
+			},
+			t_notifications: function() {
+				return t('notifications', 'Notifications');
+			},
 			iconPath: function() {
 				var iconPath = 'notifications';
 
@@ -67,7 +66,7 @@ define(function (require) {
 		},
 
 		components: {
-			'notification': require('./notification')
+			'notification': require('./notification.vue')
 		},
 
 		mounted: function () {
@@ -93,5 +92,9 @@ define(function (require) {
 
 			this.hadNotifications = this.notifications.length > 0;
 		}
-	};
-});
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/js-src/webpack.config.js b/js-src/webpack.config.js
@@ -15,7 +15,8 @@ module.exports = {
 				loader: 'vue-loader',
 				options: {
 					loaders: {
-					}
+					},
+					esModule: false
 					// other vue-loader options go here
 				}
 			},