Merge pull request #672 from MixinNetwork/feature/report

Support report and unblock

src/api/user.ts

@@ -18,5 +18,11 @@ export default {
   },
   updateRelationship(body: any) {
     return api.post('/relationships', body)
+  },
+  report(body: any) {
+    return api.post('/reports', body)
+  },
+  blockingUsers() {
+    return api.get('/blocking_users')
   }
 }

src/components/ChatContainerMenu.vue

@@ -23,6 +23,7 @@ export default class ChatContainerMenu extends Vue {
   @Getter('me') me: any
 
   @Action('toggleEditor') actionToggleEditor: any
+  @Action('report') actionReport: any
   @Action('exitGroup') actionExitGroup: any
   @Action('setCurrentUser') actionSetCurrentUser: any
   @Action('conversationClear') actionConversationClear: any
@@ -61,10 +62,12 @@ export default class ChatContainerMenu extends Vue {
     let menu = []
     if (newC.category === ConversationCategory.CONTACT) {
       menu.push(chatMenu.contact_info)
-      if (this.user.relationship !== 'FRIEND') {
-        menu.push(chatMenu.add_contact)
-      } else {
-        menu.push(chatMenu.remove_contact)
+      if (this.user.relationship !== 'BLOCKING') {
+        if (this.user.relationship !== 'FRIEND') {
+          menu.push(chatMenu.add_contact)
+        } else {
+          menu.push(chatMenu.remove_contact)
+        }
       }
       menu.push(chatMenu.clear)
       this.$emit('menuCallback', {
@@ -91,6 +94,9 @@ export default class ChatContainerMenu extends Vue {
         menu.push(chatMenu.mute)
       }
     }
+    if (newC.category === ConversationCategory.CONTACT) {
+      menu.push(chatMenu.report)
+    }
     if (process.env.NODE_ENV !== 'production') {
       menu.push(chatMenu.create_post)
     }
@@ -226,6 +232,8 @@ export default class ChatContainerMenu extends Vue {
       )
     } else if (key === 'create_post') {
       this.actionToggleEditor()
+    } else if (key === 'report') {
+      this.actionReport(this.user.user_id)
     }
   }
 }

src/components/ChatInputBox.vue

@@ -33,8 +33,9 @@
     </transition>
 
     <div v-if="conversation" class="box" @click.stop>
-      <div v-show="!participant" class="removed">{{$t('home.removed')}}</div>
-      <div v-show="participant" class="input">
+      <div v-if="showUnblock" class="unblock" @click="actionUnblock(user.user_id)">{{$t('menu.chat.unblock')}}</div>
+      <div v-else-if="!participant" class="removed">{{$t('home.removed')}}</div>
+      <div v-show="participant && !showUnblock" class="input">
         <div class="sticker" @click.stop="chooseSticker">
           <svg-icon :icon-class="stickerChoosing ? 'ic_emoticon_on' : 'ic_emoticon'" />
         </div>
@@ -67,7 +68,7 @@ import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 
 import contentUtil from '@/utils/content_util'
-import { MessageCategories, MessageStatus } from '@/utils/constants'
+import { MessageCategories, MessageStatus, ConversationCategory } from '@/utils/constants'
 import conversationDao from '@/dao/conversation_dao'
 import userDao from '@/dao/user_dao'
 
@@ -91,6 +92,7 @@ export default class ChatItem extends Vue {
 
   @Action('sendMessage') actionSendMessage: any
   @Action('sendStickerMessage') actionSendStickerMessage: any
+  @Action('unblock') actionUnblock: any
 
   mentionChoosing: boolean = false
   stickerChoosing: boolean = false
@@ -127,6 +129,10 @@ export default class ChatItem extends Vue {
     this.$emit('panelHeightUpdate', this.panelHeight)
   }
 
+  get showUnblock() {
+    return this.conversation.category === ConversationCategory.CONTACT && this.user.relationship === 'BLOCKING'
+  }
+
   onFocus() {
     this.boxFocus = true
   }
@@ -422,8 +428,15 @@ export default class ChatItem extends Vue {
   position: relative;
   .removed {
     padding: 0.7rem 0.7rem;
-    font-size: 0.75rem;
+    font-size: 0.7rem;
+    text-align: center;
+  }
+  .unblock {
+    padding: 0.7rem 0.7rem;
+    font-size: 0.7rem;
     text-align: center;
+    color: #3a7ee4;
+    cursor: pointer;
   }
   .input {
     box-sizing: border-box;

src/components/Details.vue

@@ -27,7 +27,10 @@
           </span>
 
           <span class="id" v-if="isContact">Mixin ID: {{userId || conversation.ownerIdentityNumber}}</span>
-          <span class="add" v-if="showAddContact" @click="addContact">
+          <span class="unblock" v-if="showUnblock" @click="actionUnblock(user.user_id)">
+            <small>{{$t('menu.chat.unblock')}}</small>
+          </span>
+          <span class="add" v-else-if="showAddContact" @click="addContact">
             <span>+</span>
             <small>{{$t('menu.chat.add_contact')}}</small>
           </span>
@@ -100,6 +103,7 @@ export default class Details extends Vue {
   @Action('refreshUser') actionRefreshUser: any
   @Action('setCurrentUser') actionSetCurrentUser: any
   @Action('syncConversation') actionSyncConversation: any
+  @Action('unblock') actionUnblock: any
 
   @Action('participantSetAsAdmin') actionParticipantSetAsAdmin: any
   @Action('participantDismissAdmin') actionParticipantDismissAdmin: any
@@ -269,6 +273,10 @@ export default class Details extends Vue {
     return this.conversation.category === 'GROUP' && (this.me.role === 'OWNER' || this.user.role === 'ADMIN')
   }
 
+  get showUnblock() {
+    return this.isContact && this.user.relationship === 'BLOCKING' && this.user.user_id !== this.me.user_id
+  }
+
   get showAddContact() {
     return this.isContact && this.user.relationship !== 'FRIEND' && this.user.user_id !== this.me.user_id
   }
@@ -381,12 +389,12 @@ export default class Details extends Vue {
         width: 100%;
         user-select: text;
       }
-      .add {
+      .unblock, .add {
         cursor: pointer;
         color: #3a7ee4;
         font-weight: 400;
         margin-top: 0.8rem;
-        padding: 0.15rem 0.45rem;
+        padding: 0.15rem 0.65rem;
         background: #f2f2f2;
         border-radius: 0.8rem;
       }

src/store/actions.ts

@@ -603,6 +603,25 @@ export default {
   setLinkStatus: ({ commit }: any, status: any) => {
     commit('setLinkStatus', status)
   },
+  unblock: ({ commit }: any, userId: any) => {
+    userApi.updateRelationship({ user_id: userId, action: 'UNBLOCK' }).then((res: any) => {
+      if (res.data && res.data.data) {
+        commit('setCurrentUser', res.data.data)
+      }
+    })
+  },
+  report: ({ commit }: any, userId: any) => {
+    userApi
+      .report({
+        user_id: userId,
+        action: 'BLOCK'
+      })
+      .then(res => {
+        if (res.data && res.data.data) {
+          commit('setCurrentUser', res.data.data)
+        }
+      })
+  },
   exitGroup: ({ commit }: any, conversationId: any) => {
     conversationApi.exit(conversationId)
   },

src/utils/i18n.ts

@@ -37,7 +37,9 @@ let transactions = {
         clear: 'Clear Chat',
         mute: 'Mute',
         cancel_mute: 'Cancel Mute',
-        create_post: 'Create post'
+        create_post: 'Create post',
+        report: 'Report',
+        unblock: 'Unblock User'
       },
       participant: {
         profile: 'Profile',
@@ -225,7 +227,9 @@ let transactions = {
         clear: '清空聊天记录',
         mute: '静音',
         cancel_mute: '取消静音',
-        create_post: '创建文章'
+        create_post: '创建文章',
+        report: '举报',
+        unblock: '解除屏蔽'
       },
       participant: {
         profile: '信息',