activity_notification 2.0.0 → 2.1.0

data/spec/rails_app/app/javascript/components/Top.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <section>
+      <h1>Authentecated User</h1>
+      <div class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <div class="list_description">
+            <div v-if="userSignedIn">
+              <span>{{ currentUser.name }}</span> · {{ currentUser.email }} · <router-link v-bind:to="{ path: '/logout' }">Logout</router-link><br>
+            </div>
+            <div v-else>
+              <span>Not logged in</span> · <router-link v-bind:to="{ path: '/login' }">Login</router-link><br>
+            </div>
+            <router-link v-bind:to="{ name : 'AuthenticatedUserNotificationsIndex' }">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'AuthenticatedUserSubscriptionsIndex' }">Subscriptions</router-link>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h1>Listing Users</h1>
+      <div v-for="user in users" :key="`${user.id}`" class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <p class="list_description">
+            <span>{{ user.name }}</span> · {{ user.email }}<br>
+            <router-link v-bind:to="{ name : 'UnauthenticatedTargetNotificationsIndex', params : { target_type: 'users', target_id: user.id, target: user }}">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'UnauthenticatedTargetSubscriptionsIndex', params : { target_type: 'users', target_id: user.id, target: user }}">Subscriptions</router-link>
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h1>Authentecated User as Admin</h1>
+      <div class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <div class="list_description">
+            <div v-if="userSignedIn">
+              <span>{{ currentUser.name }}</span> · {{ currentUser.email }} · <span v-if="currentUser.admin">(admin)</span><span v-else>(not admin)</span><br>
+            </div>
+            <div v-else>
+              <span>Not logged in</span> · <router-link v-bind:to="{ path: '/login' }">Login</router-link><br>
+            </div>
+            <router-link v-bind:to="{ name : 'AuthenticatedAdminNotificationsIndex' }">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'AuthenticatedAdminSubscriptionsIndex' }">Subscriptions</router-link>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h1>Listing Admins</h1>
+      <div v-for="admin in admins" :key="`${admin.id}`" class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <p class="list_description">
+            <span>{{ admin.user.name }}</span> · {{ admin.user.email }}<br>
+            <router-link v-bind:to="{ name : 'UnauthenticatedTargetNotificationsIndex', params : { target_type: 'admins', target_id: admin.id, target: admin }}">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'UnauthenticatedTargetSubscriptionsIndex', params : { target_type: 'admins', target_id: admin.id, target: admin }}">Subscriptions</router-link>
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import authStore from "../store/auth"
+
+export default {
+  name: 'Top',
+  data () {
+    return {
+      userSignedIn: authStore.getters.userSignedIn,
+      currentUser: authStore.getters.currentUser,
+      users: [],
+      admins: []
+    }
+  },
+  mounted () {
+    axios
+      .get('/users')
+      .then(response => {
+        this.users = response.data.users;
+        this.admins = this.users
+          .filter(user => user.admin)
+          .map(user => Object.assign(Object.create(user.admin), { user: user }))
+      })
+  }
+}
+</script>
+
+<style scoped>
+</style>

data/spec/rails_app/app/javascript/components/notifications/Index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="notification_wrapper">
+    <div class="notification_header">
+      <h1>
+        Notifications to {{ currentTarget.printable_target_name }}
+        <a href="#" v-on:click="openAll()" data-remote="true">
+          <span class="notification_count"><span v-bind:class="[unopenedNotificationCount > 0 ? 'unopened' : '']">
+            {{ unopenedNotificationCount }}
+          </span></span>
+        </a>
+      </h1>
+      <h3>
+        <span class="action_cable_status">{{ actionCableStatus }}</span>
+      </h3>
+    </div>
+    <div class="notifications">
+      <div v-for="notification in notifications" :key="`${notification.id}_${notification.opened_at}_${notification.group_notification_count}`">
+        <notification :targetNotification="notification" :targetApiPath="targetApiPath" @getUnopenedNotificationCount="getUnopenedNotificationCount" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Push from 'push.js'
+import Notification from './Notification.vue'
+
+export default {
+  name: 'NotificationsIndex',
+  components: {
+    Notification
+  },
+  props: {
+    target_type: {
+      type: String,
+      required: true
+    },
+    target_id: {
+      type: [String, Number]
+    },
+    targetApiPath: {
+      type: String,
+      default: function () { 
+        if (this.target_type && this.target_id) {
+          return '/' + this.target_type + '/' + this.target_id;
+        } else {
+          return '';
+        }
+      }
+    },
+    target: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      currentTarget: { printable_target_name: '' },
+      unopenedNotificationCount: 0,
+      notifications: [],
+      actionCableStatus: "Disabled"
+    }
+  },
+  mounted () {
+    if (this.target) {
+      this.currentTarget = this.target;
+      this.subscribeActionCable();
+    } else {
+      this.getCurrentTarget();
+    }
+    this.getNotifications();
+    this.getUnopenedNotificationCount();
+  },
+  channels: {
+    'ActivityNotification::NotificationApiChannel': {
+      connected() {
+        this.actionCableStatus = "Online";
+      },
+      disconnected() {
+        this.actionCableStatus = "Offline";
+      },
+      rejected() {
+        this.actionCableStatus = "Offline (unauthorized)";
+      },
+      received(data) {
+        this.notify(data);
+      }
+    },
+    'ActivityNotification::NotificationApiWithDeviseChannel': {
+      connected() {
+        this.actionCableStatus = "Online (authorized)";
+      },
+      disconnected() {
+        this.actionCableStatus = "Offline";
+      },
+      rejected() {
+        this.actionCableStatus = "Offline (unauthorized)";
+      },
+      received(data) {
+        this.notify(data);
+      }
+    }
+  },
+  methods: {
+    getCurrentTarget () {
+      axios
+        .get(this.targetApiPath)
+        .then(response => {
+          this.currentTarget = response.data;
+          this.subscribeActionCable();
+        })
+    },
+    getNotifications () {
+      axios
+        .get(this.targetApiPath + '/notifications', { params: this.$route.query })
+        .then(response => (this.notifications = response.data.notifications))
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    getUnopenedNotificationCount () {
+      if (this.$route.query.filter == 'opened') {
+        this.unopenedNotificationCount = 0;
+      } else {
+        axios
+          .get(this.targetApiPath + '/notifications', { params: Object.assign({ filter: 'unopened' }, this.$route.query) })
+          .then(response => (this.unopenedNotificationCount = response.data.count))
+          .catch (error => {
+            if (error.response.status == 401) {
+              this.$router.push('/logout');
+            }
+          })
+      }
+    },
+    openAll () {
+      axios
+        .post(this.targetApiPath + '/notifications/open_all')
+        .then(response => {
+          if (response.status == 200) {
+            this.getNotifications();
+            this.getUnopenedNotificationCount();
+          }
+        })
+    },
+    subscribeActionCable () {
+      if (this.currentTarget['notification_action_cable_allowed?']) {
+        if (!this.currentTarget['notification_action_cable_with_devise?']) {
+          this.$cable.subscribe({
+            channel: 'ActivityNotification::NotificationApiChannel',
+            target_type: this.target_type, target_id: this.currentTarget.id
+          });
+        } else {
+          this.$cable.subscribe({
+            channel: 'ActivityNotification::NotificationApiWithDeviseChannel',
+            target_type: this.target_type, target_id: this.currentTarget.id,
+            'access-token': axios.defaults.headers.common['access-token'],
+            'client': axios.defaults.headers.common['client'],
+            'uid': axios.defaults.headers.common['uid']
+          });
+        }
+      }
+    },
+    notify (data) {
+      // Display notification
+      if (data.group_owner == null) {
+        this.notifications.unshift(data.notification);
+        this.getUnopenedNotificationCount();
+      } else {
+        this.notifications.splice(this.notifications.findIndex(n => n.id === data.group_owner.id), 1);
+        this.notifications.unshift(data.group_owner);
+        this.getUnopenedNotificationCount();
+      }
+      // Push notificaion using Web Notification API by Push.js
+      Push.create('ActivityNotification', {
+        body: data.notification.text,
+        timeout: 5000,
+        onClick: function () {
+          location.href = data.notification.notifiable_path;
+          this.close();
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.notification_wrapper .notification_header h1 span span{
+  color: #fff;
+  background-color: #e5e5e5;
+  border-radius: 4px;
+  font-size: 12px;
+  padding: 4px 8px;
+}
+.notification_wrapper .notification_header h1 span span.unopened{
+  background-color: #f87880;
+}
+</style>

data/spec/rails_app/app/javascript/components/notifications/Notification.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-bind:class="`notification_${notification.id}`">
+    <div v-if="!notification.opened_at">
+      <a href="#" v-on:click="open(notification)" data-remote="true" class="unopened_wrapper">
+        <div class="unopened_circle"></div>
+        <div class="unopened_description_wrapper">
+          <p class="unopened_description">Open</p>
+        </div>
+      </a>
+      <a href="#" v-on:click="move(notification, '?open=true')" data-remote="true">
+        <notification-content :notification="notification" />
+      </a>
+      <div class="unopened_wrapper"></div>
+    </div>
+    <div v-else>
+      <a href="#" v-on:click="move(notification, '')" data-remote="true">
+        <notification-content :notification="notification" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import NotificationContent from './NotificationContent.vue'
+
+export default {
+  name: 'Notification',
+  components: {
+    NotificationContent
+  },
+  props: {
+    targetNotification: {
+      type: Object,
+      required: true
+    },
+    targetApiPath: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      notification: this.targetNotification,
+      baseURL: axios.defaults.baseURL + this.targetApiPath
+    }
+  },
+  methods: {
+    open (notification) {
+      axios
+        .put(this.targetApiPath + '/notifications/' + notification.id + '/open')
+        .then(response => {
+          if (response.status == 200) {
+            this.$emit('getUnopenedNotificationCount')
+            this.notification = response.data.notification
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    move (notification, paramsString) {
+      axios
+        .get(this.targetApiPath + '/notifications/' + notification.id + '/move' + paramsString)
+        .then(response => {
+          if (response.status == 200) {
+            window.location.href = response.request.responseURL;
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* unopened_circle */
+.unopened_wrapper{
+  position: absolute;
+  margin-top: 20px;
+  margin-left: 56px;
+}
+.unopened_wrapper .unopened_circle {
+  display: block;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: #27a5eb;
+  z-index: 2;
+}
+.unopened_wrapper:hover > .unopened_description_wrapper{
+  display: block;
+}
+.unopened_wrapper .unopened_description_wrapper {
+  display: none;
+  position: absolute;
+  margin-top: 26px;
+  margin-left: -24px;
+}
+.unopened_wrapper .unopened_description_wrapper .unopened_description {
+  position: absolute;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 4px 12px;
+  z-index: 999;
+}
+.unopened_wrapper .unopened_description_wrapper .unopened_description:before {
+    border: solid transparent;
+    border-top-width: 0;
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0;
+    left: 50%;
+    top: -5px;
+    margin-left: -5px;
+    height: 0;
+    border-width: 0 5px 5px 5px;
+    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+    z-index: 0;
+}
+</style>

data/spec/rails_app/app/javascript/components/notifications/NotificationContent.vue

@@ -0,0 +1,122 @@
+<template>
+  <div v-bind:class="[notification.opened_at ? 'opened' : 'unopened', 'notification_list']">
+    <div class="notification_list_cover"></div>
+    <div class="list_image"></div>
+    <div class="list_text_wrapper">
+      <!-- Custom view -->
+      <p v-if="notification.key == 'article.update'" class="list_text">
+        <strong>{{ notification.notifier.name }}</strong> updated his or her article "{{ notification.notifiable.title }}".
+        <br>
+        <span class="created_at">{{ new Date(notification.created_at) | moment('timezone', 'UTC', "MMM DD HH:mm") }}</span>
+      </p>
+      <!-- Default view -->
+      <p v-else class="list_text">
+        <strong v-if="notification.notifier">{{ notification.notifier.printable_notifier_name }}</strong>
+        <strong v-else>Someone</strong>
+        <span v-if="notification.group_member_notifier_count > 0">
+          and {{ notification.group_member_notifier_count }} other
+          <span v-if="notification.notifier">{{ notification.notifier.printable_type.toLowerCase() | pluralize(notification.group_member_notifier_count) }}</span>
+          <span v-else>people</span>
+        </span>
+        notified you of
+        <span v-if="notification.notifiable" key="notification-group">
+          <span v-if="notification.group_members.length">
+            {{ notification.group_notification_count }} {{notification.notifiable_type.toLowerCase() | pluralize(notification.group_notification_count) }} including
+          </span>
+          {{ notification.printable_notifiable_name }}
+          <span v-if="notification.group"> in {{ notification.group.printable_group_name }}</span>
+        </span>
+        <span v-else key="notification-group">
+          <span v-if="notification.group_members.length" key="group-members">
+            {{ notification.group_notification_count }} {{notification.notifiable_type.toLowerCase() | pluralize(notification.group_notification_count) }}
+          </span>
+          <span v-else key="group-members">
+            a {{ notification.notifiable_typetoLowerCase() | pluralize(0) }}
+          </span>
+          <span v-if="notification.group"> in {{ notification.group.printable_group_name }}</span>
+          but the notifiable is not found. It may have been deleted.
+        </span>
+        <br>
+        <span class="created_at">{{ new Date(notification.created_at) | moment('timezone', 'UTC', "MMM DD hh:mm") }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotificationContent',
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* list */
+.notification_list {
+  padding: 15px 10px;
+  position: relative;
+  border-bottom: 1px solid #e5e5e5;
+}
+.notification_list.unopened {
+  background-color: #eeeff4;
+}
+.notification_list:hover {
+  background-color: #f8f9fb;
+}
+.notification_list:last-child {
+  border-bottom: none;
+}
+.notification_list:after{
+  content: "";
+  clear: both;
+  display: block;
+}
+.notification_list .notification_list_cover{
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+}
+.notification_list .list_image {
+  float: left;
+  width: 40px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #979797;
+}
+.notification_list .list_text_wrapper {
+  float: left;
+  width: calc(100% - 60px);
+  margin-left: 20px;
+}
+.notification_list .list_text_wrapper .list_text {
+  color: #4f4f4f;
+  font-size: 14px;
+  line-height: 1.4;
+  margin-top: 0;
+  height: auto;
+  font-weight: normal;
+}
+.notification_list .list_text_wrapper .list_text span {
+  color: #4f4f4f;
+  font-size: 14px;
+}
+.notification_list .list_text_wrapper .list_text strong{
+  font-weight: bold;
+}
+.notification_list .list_text_wrapper .list_text span.created_at {
+  color: #979797;
+  font-size: 13px;
+}
+</style>