From 01ad6a982221dcc24c2fd6ec499a82f94be4bfd8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 15:11:49 +0100
Subject: [PATCH] Added Content Menu and Report Modal

---
 components/ContentMenu.vue | 104 +++++++++++++++++++++++++++++++++++++
 components/PostCard.vue    |  60 +++------------------
 components/ReportModal.vue |  32 ++++++++++++
 layouts/default.vue        |   6 +++
 pages/post/_slug/index.vue |  12 ++++-
 pages/profile/_slug.vue    |  12 ++++-
 6 files changed, 170 insertions(+), 56 deletions(-)
 create mode 100644 components/ContentMenu.vue
 create mode 100644 components/ReportModal.vue

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
new file mode 100644
index 000000000..4c799fba7
--- /dev/null
+++ b/components/ContentMenu.vue
@@ -0,0 +1,104 @@
+<template>
+  <dropdown
+    class="post-menu"
+    :placement="placement"
+    offset="5"
+  >
+    <template
+      slot="default"
+      slot-scope="{toggleMenu}"
+    >
+      <a
+        class="post-menu-trigger"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <ds-icon
+          v-if="placement.indexOf('top') === 0"
+          name="angle-up"
+        />
+        <ds-icon
+          v-else
+          name="angle-down"
+        />
+      </a>
+    </template>
+    <template
+      slot="popover"
+      slot-scope="{toggleMenu}"
+    >
+      <div class="post-menu-popover">
+        <ds-menu :routes="routes">
+          <ds-menu-item
+            slot="Navigation"
+            slot-scope="item"
+            :route="item.route"
+            :parents="item.parents"
+            @click.stop.prevent="openItem(item.route, toggleMenu)"
+          >
+            <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+          </ds-menu-item>
+        </ds-menu>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown
+  },
+  props: {
+    placement: { type: String, default: 'top-end' },
+    name: { type: String, required: true },
+    context: {
+      type: String,
+      required: true,
+      validator: value => {
+        return value.match(/(contribution|comment|organization|user)/)
+      }
+    }
+  },
+  computed: {
+    routes() {
+      let routes = [
+        {
+          name: this.$t('common.reportContent'),
+          callback: this.openReportDialog,
+          icon: 'flag'
+        }
+      ]
+      // if (this.isAdmin) {
+      //   routes.push({
+      //     name: this.$t('admin.name'),
+      //     path: `/admin`,
+      //     icon: 'shield'
+      //   })
+      // }
+      return routes
+    }
+  },
+  methods: {
+    openItem(route, toggleMenu) {
+      if (route.callback) {
+        route.callback()
+      } else {
+        this.$router.push(route.path)
+      }
+      toggleMenu()
+    },
+    openReportDialog() {
+      this.$store.commit('modal/SET_OPEN', {
+        name: 'report',
+        data: {
+          context: this.context,
+          name: this.name
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/components/PostCard.vue b/components/PostCard.vue
index b41607b3e..00d2db0ad 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -51,41 +51,10 @@
           <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
         </span>
         <no-ssr>
-          <dropdown
-            class="post-menu"
-            placement="top-end"
-          >
-            <template
-              slot="default"
-              slot-scope="{toggleMenu}"
-            >
-              <a
-                class="post-menu-trigger"
-                href="#"
-                @click.prevent="toggleMenu()"
-              >
-                <ds-icon name="angle-up" />
-              </a>
-            </template>
-            <template
-              slot="popover"
-              slot-scope="{toggleMenu}"
-            >
-              <div class="post-menu-popover">
-                <ds-menu :routes="routes">
-                  <ds-menu-item
-                    slot="Navigation"
-                    slot-scope="item"
-                    :route="item.route"
-                    :parents="item.parents"
-                    @click.native="toggleMenu"
-                  >
-                    <ds-icon :name="item.route.icon" /> {{ item.route.name }}
-                  </ds-menu-item>
-                </ds-menu>
-              </div>
-            </template>
-          </dropdown>
+          <content-menu
+            context="contribution"
+            :name="post.title"
+          />
         </no-ssr>
       </div>
     </template>
@@ -94,14 +63,14 @@
 
 <script>
 import HcAuthor from '~/components/Author.vue'
-import Dropdown from '~/components/Dropdown'
+import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
 
 export default {
   name: 'HcPostCard',
   components: {
     HcAuthor,
-    Dropdown
+    ContentMenu
   },
   props: {
     post: {
@@ -123,23 +92,6 @@ export default {
       }
 
       return excerpt
-    },
-    routes() {
-      let routes = [
-        {
-          name: this.$t('common.reportContent'),
-          path: `/profile/`,
-          icon: 'flag'
-        }
-      ]
-      // if (this.isAdmin) {
-      //   routes.push({
-      //     name: this.$t('admin.name'),
-      //     path: `/admin`,
-      //     icon: 'shield'
-      //   })
-      // }
-      return routes
     }
   },
   methods: {
diff --git a/components/ReportModal.vue b/components/ReportModal.vue
new file mode 100644
index 000000000..e635839cc
--- /dev/null
+++ b/components/ReportModal.vue
@@ -0,0 +1,32 @@
+<template>
+  <ds-modal
+    :title="title"
+    :is-open="isOpen"
+    cancel-label="Cancel"
+    confirm-label="Send Report"
+    @close="close"
+  >
+    <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+  </ds-modal>
+</template>
+
+<script>
+export default {
+  computed: {
+    data() {
+      return this.$store.getters['modal/data'] || {}
+    },
+    title() {
+      return `Report ${this.data.context}`
+    },
+    isOpen() {
+      return this.$store.getters['modal/open'] === 'report'
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit('modal/SET_OPEN', {})
+    }
+  }
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index bcd7a46ab..03180b61a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -72,6 +72,10 @@
         <nuxt />
       </div>
     </ds-container>
+    <report-modal />
+    <no-ssr>
+      <portal-target name="modal" />
+    </no-ssr>
   </div>
 </template>
 
@@ -79,11 +83,13 @@
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
+import ReportModal from '~/components/ReportModal'
 import seo from '~/components/mixins/seo'
 
 export default {
   components: {
     Dropdown,
+    ReportModal,
     LocaleSwitch
   },
   mixins: [seo],
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 8d95a4189..15d120261 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -6,6 +6,14 @@
     class="post-card"
   >
     <hc-author :post="post" />
+    <no-ssr>
+      <content-menu
+        style="float: right; display: inline-block; margin-top: -5rem;"
+        placement="bottom-end"
+        context="contribution"
+        :name="post.title"
+      />
+    </no-ssr>
     <ds-space margin-bottom="small" />
     <!-- Content -->
     <!-- eslint-disable vue/no-v-html -->
@@ -112,6 +120,7 @@
 
 <script>
 import gql from 'graphql-tag'
+import ContentMenu from '~/components/ContentMenu'
 import HcAuthor from '~/components/Author.vue'
 import HcShoutButton from '~/components/ShoutButton.vue'
 
@@ -122,7 +131,8 @@ export default {
   },
   components: {
     HcAuthor,
-    HcShoutButton
+    HcShoutButton,
+    ContentMenu
   },
   head() {
     return {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index c1ab8c2a6..aa586fa88 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -17,6 +17,14 @@
             class="profile-avatar"
             size="120px"
           />
+          <no-ssr>
+            <content-menu
+              style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
+              placement="bottom-start"
+              context="user"
+              :name="user.name"
+            />
+          </no-ssr>
           <ds-space margin="small">
             <ds-heading
               tag="h3"
@@ -251,6 +259,7 @@ import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
+import ContentMenu from '~/components/ContentMenu'
 
 export default {
   components: {
@@ -259,7 +268,8 @@ export default {
     HcFollowButton,
     HcCountTo,
     HcBadges,
-    HcLoadMore
+    HcLoadMore,
+    ContentMenu
   },
   transition: {
     name: 'slide-up',