Merge branch 'app' into app-publish

Author: chriscant

api/ChatAPI.js

@@ -111,4 +111,8 @@ export default class ChatAPI extends BaseAPI {
   typing(chatid) {
     return this.$post('/chatrooms', { id: chatid, action: 'Typing' })
   }
+
+  referToSupport(chatid) {
+    return this.$post('/chatrooms', { id: chatid, action: 'ReferToSupport' })
+  }
 }

components/ChatFooter.vue

@@ -123,7 +123,15 @@
           <external-link v-if="chat && chat.chattype === 'User2Mod' && mod" href="https://discourse.ilovefreegle.org/c/central" class="nocolor btn btn-secondary">
             <v-icon name="question-circle" /> Central
           </external-link>
-          <ModSpammerReport v-if="showSpamModal" ref="spamConfirm" :user="otheruser" />
+          <b-btn
+            v-if="chat && chat.chattype === 'User2Mod' && mod"
+            v-b-tooltip.hover.top
+            title="Ask Support for help"
+            variant="secondary"
+            @click="confirmReferToSupport"
+          >
+            <v-icon name="question-circle" /> Refer to Support
+          </b-btn>
         </span>
         <b-btn variant="primary" class="float-right ml-1" @click="send">
           Send&nbsp;
@@ -168,6 +176,12 @@
             Central
           </div>
         </div>
+        <div v-if="chat && chat.chattype === 'User2Mod' && mod" v-b-tooltip.hover.top title="Ask Support for help" class="mr-2" @click="confirmReferToSupport">
+          <v-icon scale="2" name="question-circle" class="fa-mob" />
+          <div class="mobtext text--smallest">
+            Support
+          </div>
+        </div>
         <div v-if="chat && chat.chattype === 'User2User' && otheruser && !tooSoonToNudge && !simple" v-b-tooltip.hover.top title="Waiting for a reply?  Nudge this freegler." class="mr-2" @click="nudge">
           <v-icon scale="2" name="bell" class="fa-mob" />
           <div class="mobtext text--smallest">
@@ -206,6 +220,8 @@
     <NudgeTooSoonWarningModal ref="nudgetoosoonwarning" @confirm="doNudge" />
     <NudgeWarningModal ref="nudgewarning" @confirm="doNudge" />
     <MicroVolunteering v-if="showMicrovolunteering" />
+    <ConfirmModal ref="referConfirm" title="Refer this chat to Support?" message="The Support volunteers will have a look at the chat and get back to you by email." @confirm="referToSupport" />
+    <ModSpammerReport v-if="showSpamModal" ref="spamConfirm" :user="otheruser" />
   </div>
 </template>
 <script>
@@ -215,6 +231,7 @@ import chat from '@/mixins/chat.js'
 import chatCollate from '@/mixins/chatCollate.js'
 import ExternalLink from './ExternalLink'
 import ModComments from './ModComments'
+import ConfirmModal from '~/components/ConfirmModal'
 
 // Don't use dynamic imports because it stops us being able to scroll to the bottom after render.
 Vue.use(TooltipPlugin)
@@ -245,7 +262,8 @@ export default {
     ProfileModal,
     AddressModal,
     ChatRSVPModal,
-    MicroVolunteering
+    MicroVolunteering,
+    ConfirmModal
   },
   mixins: [chat, chatCollate],
   data: function() {
@@ -297,6 +315,14 @@ export default {
       })
 
       setTimeout(this.saveDraft, 5000)
+    },
+    async referToSupport() {
+      await this.$store.dispatch('chats/referToSupport', {
+        id: this.id
+      })
+    },
+    confirmReferToSupport() {
+      this.$refs.referConfirm.show()
     }
   }
 }

components/GroupSelect.vue

@@ -103,6 +103,11 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    disabledExceptFor: {
+      type: Array,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -153,7 +158,7 @@ export default {
     },
 
     groupOptions() {
-      const groups = []
+      let groups = []
 
       if (this.all) {
         groups.push({
@@ -218,6 +223,14 @@ export default {
         }
       }
 
+      if (this.disabledExceptFor !== null) {
+        // Only show groups they are a member of.  Mods are expected to add them if they want them to post on other
+        // groups.
+        groups = groups.filter(g => {
+          return this.disabledExceptFor.includes(g.value)
+        })
+      }
+
       return groups
     },
 

components/ModBanMemberConfirmModal.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <b-modal
+      id="banMemberModal"
+      v-model="showModal"
+      title="Ban Member"
+      size="lg"
+      no-stacking
+    >
+      <template slot="default">
+        <NoticeMessage v-if="homeGroup" variant="danger" class="mb-2">
+          <p>
+            You are banning this member on their home group.  This should be an absolute last resort - it's
+            basically stopping them using Freegle at all.
+          </p>
+          <p>
+            Please don't ban members on their home group because they've joined other groups.  Let those other
+            groups ban them if they wish.
+          </p>
+        </NoticeMessage>
+        <NoticeMessage v-else variant="info" class="mb-2">
+          Please be responsible in how you use this feature - it should
+          be a last resort.
+        </NoticeMessage>
+      </template>
+      <template slot="modal-footer" slot-scope="{ cancel }">
+        <b-button variant="white" @click="cancel">
+          Close
+        </b-button>
+        <b-button variant="primary" :disabled="!userid" @click="ban">
+          Ban
+        </b-button>
+      </template>
+    </b-modal>
+  </div>
+</template>
+<script>
+import modal from '@/mixins/modal'
+import NoticeMessage from './NoticeMessage'
+
+export default {
+  components: { NoticeMessage },
+  mixins: [modal],
+  props: {
+    userid: {
+      type: Number,
+      required: true
+    },
+    groupid: {
+      type: Number,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      homeGroup: false
+    }
+  },
+  computed: {
+    group() {
+      return this.$store.getters['group/get'](this.groupid)
+    },
+    user() {
+      return this.$store.getters['user/get'](this.userid)
+    }
+  },
+  mounted() {
+    const area = this.group.poly || this.group.polyofficial
+    console.log('Area', area)
+
+    const Wkt = require('wicket')
+    const wkt = new Wkt.Wkt()
+    wkt.read(area)
+    const obj = wkt.toObject()
+    const bounds = obj.getBounds()
+    console.log('Bounds', bounds, this.user)
+
+    const lat = this.user.settings?.mylocation?.lat
+    const lng = this.user.settings?.mylocation?.lng
+    console.log(
+      'Check home',
+      this.user.memberof.length,
+      bounds,
+      lat,
+      lng,
+      bounds.contains([lat, lng])
+    )
+
+    if (this.user.memberof.length === 1 || bounds.contains([lat, lng])) {
+      this.homeGroup = true
+    }
+  },
+  methods: {
+    ban() {
+      this.$emit('confirm')
+      this.hide()
+    }
+  }
+}
+</script>

components/ModBanMemberModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-modal
-      id="addMemberModal"
+      id="banMemberModal"
       v-model="showModal"
       title="Ban Member"
       size="lg"

components/ModChatModal.vue

@@ -22,6 +22,9 @@
                 <v-icon name="hashtag" class="text-muted" scale="0.8" />{{ user1.id }}
               </span>
             </div>
+            <div v-if="chat2 && chat2.group">
+              {{ chat2.group.namedisplay }} Volunteers
+            </div>
           </div>
           <div v-else class="d-flex justify-content-between">
             <div v-if="user1">
@@ -36,6 +39,9 @@
                 <v-icon name="hashtag" class="text-muted" scale="0.8" />{{ user2.id }}
               </span>
             </div>
+            <div v-if="chat2 && chat2.group">
+              {{ chat2.group.namedisplay }} Volunteers
+            </div>
           </div>
         </div>
       </template>

components/ModChatNoteModal.vue

@@ -30,7 +30,7 @@
         <b-button variant="white" @click="cancel">
           Close
         </b-button>
-        <b-button variant="primary" @click="addit">
+        <b-button variant="primary" :disabled="!note" @click="addit">
           Add Mod Message
         </b-button>
       </template>

components/ModChatReviewUser.vue

@@ -52,7 +52,7 @@ export default {
     email() {
       let ret = null
 
-      if (this.user) {
+      if (this.user && this.user.emails) {
         this.user.emails.forEach(e => {
           if (!e.ourdomain && (!ret || e.preferred)) {
             ret = e.email

components/ModMemberActions.vue

@@ -17,7 +17,7 @@
     </b-btn>
     <ConfirmModal v-if="removeConfirm && groupname" ref="removeConfirm" :title="'Remove ' + displayname + ' from ' + groupname + '?'" @confirm="removeConfirmed" />
     <ConfirmModal v-if="removeConfirm && !groupname" ref="removeConfirm" title="Please select a group first." />
-    <ConfirmModal v-if="banConfirm" ref="banConfirm" :title="'Ban ' + displayname + ' from ' + groupname + '?'" @confirm="banConfirmed" />
+    <ModBanMemberConfirmModal v-if="banConfirm" ref="banConfirm" :userid="userid" :groupid="groupid" @confirm="banConfirmed" />
     <ModCommentAddModal v-if="addComment" ref="addComment" :user="user" :groupid="groupid" @added="updateComments" />
     <ModSpammerReport v-if="showSpamModal" ref="spamConfirm" :user="reportUser" :whitelist="whitelist" />
   </div>
@@ -26,9 +26,15 @@
 import ModCommentAddModal from './ModCommentAddModal'
 import ModSpammerReport from './ModSpammerReport'
 const ConfirmModal = () => import('./ConfirmModal')
+const ModBanMemberConfirmModal = () => import('./ModBanMemberConfirmModal')
 
 export default {
-  components: { ModSpammerReport, ModCommentAddModal, ConfirmModal },
+  components: {
+    ModSpammerReport,
+    ModCommentAddModal,
+    ConfirmModal,
+    ModBanMemberConfirmModal
+  },
 
   props: {
     userid: {

components/ModMessage.vue

@@ -6,7 +6,7 @@
         <div class="d-flex justify-content-between">
           <div class="flex-grow-1">
             <div v-if="editing" class="d-flex flex-wrap">
-              <GroupSelect v-model="editgroup" modonly class="mr-1" size="lg" />
+              <GroupSelect v-model="editgroup" modonly class="mr-1" size="lg" :disabled-except-for="memberGroupIds" />
               <div v-if="message.item && message.location" class="d-flex justify-content-start">
                 <b-select v-model="message.type" :options="typeOptions" class="type mr-1" size="lg" />
                 <b-input v-model="message.item.name" size="lg" class="mr-1" />
@@ -63,13 +63,22 @@
               {{ message.fromuser.displayname }}
             </div>
             <div v-if="expanded" class="d-flex">
-              <div>
-                <b-btn v-if="message.source === 'Email'" variant="white" @click="viewSource">
-                  <v-icon name="book-open" /><span class="d-none d-sm-inline"> View Email Source</span>
-                </b-btn>
+              <div class="d-flex flex-column align-content-end">
                 <b-btn v-if="!editing" variant="white" @click="startEdit">
                   <v-icon name="pen" /><span class="d-none d-sm-inline"> Edit</span>
                 </b-btn>
+                <b-btn v-if="message.source === 'Email'" variant="white" class="mt-2" @click="viewSource">
+                  <v-icon name="book-open" /><span class="d-none d-sm-inline"> View Email Source</span>
+                </b-btn>
+                <SpinButton
+                  v-if="message.groups[0].collection === 'Approved'"
+                  class="mt-2"
+                  variant="white"
+                  :handler="backToPending"
+                  name="reply"
+                  label="Back to Pending"
+                  confirm
+                />
               </div>
               <div class="ml-2">
                 <b-btn v-if="summary" variant="white" @click="expanded = !expanded">
@@ -350,6 +359,7 @@ import GroupSelect from './GroupSelect'
 import MessageMap from './MessageMap'
 import ModMessageMicroVolunteering from './ModMessageMicroVolunteering'
 import twem from '~/assets/js/twem'
+import SpinButton from '~/components/SpinButton'
 const Highlighter = () => import('vue-highlight-words')
 const OurFilePond = () => import('~/components/OurFilePond')
 
@@ -378,7 +388,8 @@ export default {
     MessageReplyInfo,
     MessageUserInfo,
     MessageHistory,
-    Highlighter
+    Highlighter,
+    SpinButton
   },
   mixins: [keywords],
   props: {
@@ -622,6 +633,13 @@ export default {
     },
     duplicates() {
       return this.checkHistory(true)
+    },
+    memberGroupIds() {
+      return this.message &&
+        this.message.fromuser &&
+        this.message.fromuser.memberof
+        ? this.message.fromuser.memberof.map(g => g.id)
+        : []
     }
   },
   watch: {
@@ -880,6 +898,11 @@ export default {
       this.$store.dispatch('messages/fetch', {
         id: this.message.id
       })
+    },
+    backToPending() {
+      this.$store.dispatch('messages/backToPending', {
+        id: this.message.id
+      })
     }
   }
 }