activity_notification 2.4.1 → 2.5.0

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

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

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

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