From 7cdc12f4b9943062e15a874dd39f8a50142b6c61 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 21 Oct 2019 19:48:02 +0200
Subject: [PATCH] Add notifications page with Notifications in table

- At the moment, the notifications are displayed in a table, and have
the same functionality as the NotificationMenu where you can click on
the title of the Post and visit the Post

- Unsure about the styling, it would kind of be nice to have a more
condensed list to see more notifications per page, but still be able to
click on a row and visit the Post
---
 .../Notification/Notification.vue             |  70 ++++---
 .../NotificationMenu/NotificationMenu.vue     |   3 +
 webapp/graphql/User.js                        |   2 +-
 webapp/locales/en.json                        |   8 +-
 webapp/pages/notifications/index.vue          | 197 ++++++++++++++++++
 5 files changed, 244 insertions(+), 36 deletions(-)
 create mode 100644 webapp/pages/notifications/index.vue

diff --git a/webapp/components/notifications/Notification/Notification.vue b/webapp/components/notifications/Notification/Notification.vue
index dc9383c85..9649b0d7e 100644
--- a/webapp/components/notifications/Notification/Notification.vue
+++ b/webapp/components/notifications/Notification/Notification.vue
@@ -1,37 +1,39 @@
 <template>
-  <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
-    <client-only>
-      <ds-space margin-bottom="x-small">
-        <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
-      </ds-space>
-      <ds-text class="reason-text-for-test" color="soft">
-        {{ $t(`notifications.reason.${notification.reason}`) }}
-      </ds-text>
-    </client-only>
-    <ds-space margin-bottom="x-small" />
-    <nuxt-link
-      class="notification-mention-post"
-      :to="{ name: 'post-id-slug', params, ...hashParam }"
-      @click.native="$emit('read')"
-    >
-      <ds-space margin-bottom="x-small">
-        <ds-card
-          :header="from.title || from.post.title"
-          hover
-          space="x-small"
-          class="notifications-card"
-        >
-          <ds-space margin-bottom="x-small" />
-          <div>
-            <span v-if="isComment" class="comment-notification-header">
-              {{ $t(`notifications.comment`) }}:
-            </span>
-            {{ from.contentExcerpt | removeHtml }}
-          </div>
-        </ds-card>
-      </ds-space>
-    </nuxt-link>
-  </ds-space>
+  <ds-container>
+    <ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
+      <client-only>
+        <ds-space margin-bottom="x-small">
+          <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
+        </ds-space>
+        <ds-text class="reason-text-for-test" color="soft">
+          {{ $t(`notifications.reason.${notification.reason}`) }}
+        </ds-text>
+      </client-only>
+      <ds-space margin-bottom="x-small" />
+      <nuxt-link
+        class="notification-mention-post"
+        :to="{ name: 'post-id-slug', params, ...hashParam }"
+        @click.native="$emit('read')"
+      >
+        <ds-space margin-bottom="x-small">
+          <ds-card
+            :header="from.title || from.post.title"
+            hover
+            space="x-small"
+            class="notifications-card"
+          >
+            <ds-space margin-bottom="x-small" />
+            <div>
+              <span v-if="isComment" class="comment-notification-header">
+                {{ $t(`notifications.comment`) }}:
+              </span>
+              {{ from.contentExcerpt | removeHtml }}
+            </div>
+          </ds-card>
+        </ds-space>
+      </nuxt-link>
+    </ds-space>
+  </ds-container>
 </template>
 
 <script>
@@ -69,7 +71,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .notification.read {
   opacity: 0.6; /* Real browsers */
   filter: alpha(opacity = 60); /* MSIE */
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 04642e1e4..255101139 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -12,6 +12,9 @@
       <div class="notifications-menu-popover">
         <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
       </div>
+      <ds-space centered>
+        <nuxt-link to="/notifications">{{ $t('notifications.page') }}</nuxt-link>
+      </ds-space>
     </template>
   </dropdown>
 </template>
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index e82280689..54d5889e2 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -52,7 +52,7 @@ export const notificationQuery = i18n => {
     ${postFragment(lang)}
 
     query {
-      notifications(read: false, orderBy: updatedAt_desc) {
+      notifications(orderBy: updatedAt_desc) {
         read
         reason
         createdAt
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index d3b4e8edc..59b8a9390 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -176,7 +176,13 @@
       "mentioned_in_comment": "Mentioned you in a comment …",
       "commented_on_post": "Commented on your post …"
     },
-    "comment": "Comment"
+    "comment": "Comment",
+    "title": "Notifications",
+    "page": "All notifications",
+    "createdAt": "Notification created at",
+    "type": "Type",
+    "user": "User",
+    "action": "Action"
   },
   "search": {
     "placeholder": "Search",
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
new file mode 100644
index 000000000..fcbebd1c2
--- /dev/null
+++ b/webapp/pages/notifications/index.vue
@@ -0,0 +1,197 @@
+<template>
+  <ds-card space="small">
+    <ds-flex>
+      <ds-flex-item :width="{ lg: '85%' }">
+        <ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
+      </ds-flex-item>
+      <ds-flex-item class="sorting-dropdown">
+        <dropdown>
+          <a
+            slot="default"
+            slot-scope="{ toggleMenu }"
+            class="locale-menu"
+            href="#"
+            @click.prevent="toggleMenu()"
+          >
+            <ds-icon style="margin-right: 2px;" name="sort" />
+            {{ 'All' }}
+            <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+          </a>
+          <ds-menu
+            slot="popover"
+            slot-scope="{ toggleMenu }"
+            class="locale-menu-popover"
+            :routes="routes"
+          >
+            <ds-menu-item
+              slot="menuitem"
+              slot-scope="item"
+              class="locale-menu-item"
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="sortNotifications(item.route.option, toggleMenu)"
+            >
+              {{ item.route.option }}
+            </ds-menu-item>
+          </ds-menu>
+        </dropdown>
+      </ds-flex-item>
+    </ds-flex>
+    <ds-space />
+    <ds-table
+      v-if="notifications && notifications.length"
+      :data="notifications"
+      :fields="fields"
+      id="notifications-table"
+    >
+      <template slot="notifications" slot-scope="scope">
+        <ds-space :class="{ read: scope.row.read, notification: true }" margin="small">
+          <client-only>
+            <ds-space margin-bottom="x-small">
+              <hc-user
+                :user="scope.row.from.author"
+                :date-time="scope.row.from.createdAt"
+                :trunc="35"
+              />
+            </ds-space>
+            <ds-text class="reason-text-for-test" color="soft">
+              {{ $t(`notifications.reason.${scope.row.reason}`) }}
+            </ds-text>
+          </client-only>
+          <ds-space margin-bottom="x-small" />
+          <nuxt-link
+            class="notification-mention-post"
+            :to="{ name: 'post-id-slug', params, ...hashParam }"
+            @click.native="$emit('read')"
+          >
+            <ds-space margin-bottom="x-small">
+              <ds-card
+                :header="scope.row.from.title || scope.row.from.post.title"
+                hover
+                space="x-small"
+                class="notifications-card"
+              >
+                <ds-space margin-bottom="x-small" />
+                <div>
+                  <span v-if="isComment" class="comment-notification-header">
+                    {{ $t(`notifications.comment`) }}:
+                  </span>
+                  {{ scope.row.from.contentExcerpt | removeHtml }}
+                </div>
+              </ds-card>
+            </ds-space>
+          </nuxt-link>
+        </ds-space>
+      </template>
+      <!-- <template slot="user" slot-scope="scope">
+        <ds-space margin-bottom="base">
+          <hc-user
+            :user="scope.row.from.author"
+            :date-time="scope.row.from.createdAt"
+            :trunc="35"
+          />
+        </ds-space>
+        {{ $t(`notifications.reason.${scope.row.reason}`) }}
+      </template>
+      <template slot="type" slot-scope="scope">
+        <nuxt-link
+          class="notification-mention-post"
+          :to="{ name: 'post-id-slug', params, ...hashParam }"
+          @click.native="$emit('read')"
+        >
+          <ds-space margin-bottom="x-small">
+            <ds-card
+              :header="scope.row.from.title || scope.row.from.post.title"
+              hover
+              space="x-small"
+              class="notifications-card"
+            >
+              <ds-space margin-bottom="x-small" />
+              <div>
+                <span v-if="isComment" class="comment-notification-header">
+                  {{ $t(`notifications.comment`) }}:
+                </span>
+                {{ scope.row.from.contentExcerpt | removeHtml }}
+              </div>
+            </ds-card>
+          </ds-space>
+        </nuxt-link>
+      </template> -->
+    </ds-table>
+    <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+  </ds-card>
+</template>
+
+<script>
+import HcUser from '~/components/User/User'
+import HcEmpty from '~/components/Empty.vue'
+import Dropdown from '~/components/Dropdown'
+import { notificationQuery } from '~/graphql/User'
+
+export default {
+  components: {
+    HcUser,
+    Dropdown,
+    HcEmpty,
+  },
+  data() {
+    return {
+      notifications: [],
+      sortingOptions: ['All', 'Read', 'Unread'],
+      nofiticationRead: null,
+    }
+  },
+  computed: {
+    fields() {
+      return {
+        notifications: null,
+        // user: this.$t('notifications.user'),
+        // type: this.$t('notifications.type'),
+      }
+    },
+    routes() {
+      let routes = this.sortingOptions.map(option => {
+        return {
+          option,
+        }
+      })
+      return routes
+    },
+  },
+  methods: {
+    sortNotifications(option, toggleMenu) {
+      if (option === 'Read') {
+        this.notificationRead = true
+      } else if (option === 'Unread') {
+        this.notificationRead = false
+      } else {
+        this.notificationRead = null
+      }
+      this.$apollo.queries.notificationsPage.refetch()
+      toggleMenu()
+    },
+  },
+  apollo: {
+    notificationsPage: {
+      query() {
+        return notificationQuery(this.$i18n)
+      },
+      update({ notifications }) {
+        this.notifications = notifications
+      },
+      fetchPolicy: 'cache-and-network',
+      error(error) {
+        this.$toast.error(error.message)
+      },
+    },
+  },
+}
+</script>
+<style lang="scss">
+.sorting-dropdown {
+  float: right;
+}
+#notifications-table thead {
+  display: none;
+}
+</style>