Merge pull request #95 from nextcloud/vue

Vue

.gitignore

@@ -50,6 +50,10 @@ nbproject
 .well-known
 /.buildpath
 
+# WebPack
+/node_modules
+/js
+
 # Tests - auto-generated files
 /tests/Unit/coverage*
 /tests/Unit/clover.xml
@@ -58,3 +62,7 @@ nbproject
 /tests/Integration/composer.lock
 /tests/Integration/output
 /tests/Integration/vendor
+
+# Build related files
+/npm-debug.log
+/build

Makefile

@@ -0,0 +1,47 @@
+app_name=notifications
+
+project_dir=$(CURDIR)/../$(app_name)
+build_dir=$(CURDIR)/build
+source_dir=$(build_dir)/$(app_name)
+sign_dir=$(build_dir)/sign
+
+all: package
+
+dev-setup: clean npm-update build-js
+
+npm-update:
+	rm -rf node_modules
+	npm update
+
+build-js:
+	npm run dev
+
+build-js-production:
+	npm run build
+
+clean:
+	rm -rf $(build_dir)
+
+package: clean build-js-production
+	mkdir -p $(source_dir)
+	rsync -a \
+	--exclude=/build \
+	--exclude=/docs \
+	--exclude=/js-src \
+	--exclude=/l10n/.tx \
+	--exclude=/tests \
+	--exclude=/.git \
+	--exclude=/.github \
+	--exclude=/CONTRIBUTING.md \
+	--exclude=/issue_template.md \
+	--exclude=/README.md \
+	--exclude=/.gitignore \
+	--exclude=/.scrutinizer.yml \
+	--exclude=/.travis.yml \
+	--exclude=/.drone.yml \
+	--exclude=/node_modules \
+	--exclude=/npm-debug.log \
+	--exclude=/package.json \
+	--exclude=/package-lock.json \
+	--exclude=/Makefile \
+	$(project_dir)/ $(source_dir)

README.md

@@ -8,20 +8,18 @@ The API is used by other apps to notify users in the web UI and sync clients abo
 * 🚢 [Update notification](https://github.com/nextcloud/server/tree/master/apps/updatenotification): Available update for an app or nextcloud itself
 * 📣 [Announcement center](https://github.com/nextcloud/announcementcenter): An announcement was posted by an admin
 
-## QA metrics on master branch:
-
-[![Build Status](https://travis-ci.org/nextcloud/notifications.svg?branch=master)](https://travis-ci.org/nextcloud/notifications)
-[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/nextcloud/notifications/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/nextcloud/notifications/?branch=master)
-[![Code Coverage](https://scrutinizer-ci.com/g/nextcloud/notifications/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/nextcloud/notifications/?branch=master)
-
 ## Screenshot
 
 ![Screenshot of the notification icon and dropdown](https://raw.githubusercontent.com/nextcloud/notifications/master/docs/screenshot.png)
 
-**Note:**
-The 🔔 icon is hidden, when the user has no notifications.
 
-## Notification workflow
+## Developers
+
+### Build the notifications app
+
+To set up this app for development, you need to run `make dev-setup` from within the app´s root folder. If anytime later you need to rebuild the javascript files the quicker `make build-js` is enough.
+
+### Creating notifications for your app
 
 For information how to make your app interact with the notifications app, see
 [Sending and processing/"mark as read" notifications as a Nextcloud App](https://github.com/nextcloud/notifications/blob/master/docs/notification-workflow.md)

css/styles.css

@@ -49,6 +49,19 @@ img.notification-icon {
 	padding: 14px;
 }
 
+.notification:hover > .notification-delete {
+	display: block !important;
+	position: absolute;
+	top: 7px;
+	right: 12px;
+	opacity: 0.3;
+}
+
+.notification-delete:hover {
+	opacity: 0.8 !important;
+	cursor: pointer;
+}
+
 .notification-delete:hover,
 .notification-delete .icon-close,
 .notifications-button img {

js-src/app.js

@@ -0,0 +1,98 @@
+/**
+ * @copyright (c) 2016 Joas Schilling <coding@schilljs.com>
+ * @copyright (c) 2015 Tom Needham <tom@owncloud.com>
+ *
+ * @author Tom Needham <tom@owncloud.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, console */
+
+define(function (require) {
+	"use strict";
+
+	return {
+
+		/** @type {number} */
+		pollInterval: 30000, // milliseconds
+
+		/** @type {number|null} */
+		interval: null,
+
+		/** @type {Vue|null} */
+		vm: null,
+
+		/**
+		 * Initialise the app
+		 */
+		initialise: function() {
+
+			// Add to the UI
+			$('form.searchbox').after($('<div>').attr('id', 'notifications'));
+
+			// Setup Vue
+			var Vue = require('vue');
+			this.vm = new Vue(require('./components/root.vue'));
+
+			// Initial call to the notification endpoint
+			this._fetch();
+
+			// Setup the background checker
+			this.interval = setInterval(this._backgroundFetch.bind(this), this.pollInterval);
+		},
+
+		/**
+		 * Performs the AJAX request to retrieve the notifications
+		 */
+		_fetch: function() {
+			var request = $.ajax({
+				url: OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications',
+				type: 'GET',
+				beforeSend: function (request) {
+					request.setRequestHeader('Accept', 'application/json');
+				}
+			});
+
+			request.done(function(data, statusText, xhr) {
+				if (xhr.status === 204) {
+					// 204 No Content - Intercept when no notifiers are there.
+					this._shutDownNotifications();
+				} else if (!_.isUndefined(data) && !_.isUndefined(data.ocs) && !_.isUndefined(data.ocs.data) && _.isArray(data.ocs.data)) {
+					this.vm.notifications = data.ocs.data;
+				} else {
+					console.debug("data.ocs.data is undefined or not an array");
+				}
+			}.bind(this));
+			request.fail(function(xhr) {
+				if (xhr.status === 503) {
+					// 503 - Maintenance mode
+					console.debug('Shutting down notifications: instance is in maintenance mode.');
+				} else if (xhr.status === 404) {
+					// 404 - App disabled
+					console.debug('Shutting down notifications: app is disabled.');
+				} else {
+					console.error('Shutting down notifications: [' + xhr.status + '] ' + xhr.statusText);
+				}
+
+				this._shutDownNotifications();
+			}.bind(this));
+		},
+
+		_backgroundFetch: function() {
+			this.vm.backgroundFetching = true;
+			this._fetch();
+		},
+
+		/**
+		 * The app was disabled or has no notifiers, so we can stop polling
+		 * And hide the UI as well
+		 */
+		_shutDownNotifications: function() {
+			window.clearInterval(this.interval);
+			this.vm.shutdown = true;
+		}
+	};
+});

js-src/components/action.vue

@@ -0,0 +1,40 @@
+<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>