:recycle: adding back button to send to back of matchQueue | adding back button to match and create grouping from matchQueue

frontend/src/components/PairingButton.vue

@@ -1,11 +1,23 @@
 <template lang="pug">
-w-tag(color="mint-green" bg-color="green" xl).xs12.mt4.mb4
-    p.pa4.text-upper pair pending
+.pairing-button.w-flex.row
+    w-button.xs6.mt4.mb4(@click='pass' bg-color='red' color='white' xl)
+        p.pa4.text-upper pass
+    w-button.xs6.mt4.mb4(@click='pair' bg-color='green' color='mint-green' xl)
+        p.pa4.text-upper pair
 </template>
 
 <script>
 export default {
     props: {},
+    emits: ['pair', 'pass'],
     data: () => ({}),
+    methods: {
+        pair() {
+            this.$emit('pair')
+        },
+        pass() {
+            this.$emit('pass')
+        },
+    },
 }
 </script>

frontend/src/components/ProfileCard.vue

@@ -2,50 +2,55 @@
 w-card.profile-card-list--card.xs12.pa12
     header.xs12.w-flex.column.center
         NamePlate(
-            :pid="card.pid"
-            :name="card.name"
-            :pronouns="card.pronouns"
-            :role="card.role"
-            :is-list="isList"
-            :is-paired="isPaired"
+            :is-list='isList'
+            :is-paired='isPaired'
+            :name='card.name'
+            :pid='card.pid'
+            :pronouns='card.pronouns'
+            :role='card.role'
         )
-        
-        w-button.text-upper.xs12.pa6(v-if="isPaired && !isList")
-            w-icon(xl).mr1 mdi mdi-chat
+
+        w-button.text-upper.xs12.pa6(v-if='isPaired && !isList')
+            w-icon.mr1(xl) mdi mdi-chat
             | start chat
-        
-        template(v-if="!isList")
-            SummaryBar(
-                :is-tab="isPaired"
-                :tab-content="card.summary"
-            )
-            TagList(v-if="!isPaired || isList")
+
+        template(v-if='!isList')
+            SummaryBar(:is-tab='isPaired' :tab-content='card.summary')
+            TagList(v-if='!isPaired || isList')
 
     article.xs12.w-flex.column.justify-space-between
         AspectBar(
-            v-if="!isPaired || isList"
-            v-for="aspect in aspects"
-            :labels="aspect.labels"
-            :percentage="aspect.percentage"
-            :key="aspect.name"
+            :key='aspect.name'
+            :labels='aspect.labels'
+            :percentage='aspect.percentage'
+            v-for='aspect in aspects'
+            v-if='!isPaired || isList'
         )
-    
-    footer(v-if="!isList && !isPaired")
+
+    footer(v-if='!isList && !isPaired')
         .pa12
             p {{ card.summary.about.tab }}
-        PairingButton(v-if="!isPaired")
+        PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+    updateQueueByProfileId,
+    postMembershipByProfileId,
+    currentProfile,
+} from '../services'
+
 import NamePlate from './NamePlate.vue'
 import AspectBar from './AspectBar.vue'
 import SummaryBar from './SummaryBar.vue'
 import TagList from './TagList.vue'
 import PairingButton from './PairingButton.vue'
 
-const isPaired = ref(true)
-// const isPaired = ref(false)
+const router = useRouter()
+// const isPaired = ref(true)
+const isPaired = ref(false)
 
 const props = defineProps({
     card: {
@@ -62,6 +67,21 @@ const props = defineProps({
         default: true,
     },
 })
+
+const onPair = async () => {
+    const group = await postMembershipByProfileId({
+        profileId: currentProfile.id.value,
+        targetId: props.card.pid,
+    })
+    updateQueueByProfileId(currentProfile.id.value, props.card.pid, false)
+    console.warn('created grouping:', group)
+    console.log('is grouping a match?:', group.membershipMatch.hasMatch)
+    router.push({ name: 'HomeView' })
+}
+const onPass = async () => {
+    updateQueueByProfileId(currentProfile.id.value, props.card.pid, true)
+    router.push({ name: 'HomeView' })
+}
 </script>
 
 <style lang="sass">

frontend/src/services/grouping.service.js

@@ -40,6 +40,7 @@ const postMembershipByProfileId = async ({
         grouping_type: groupingType,
         grouping_name: `${utcDateInSeconds}_${profileId}_${targetId}`,
     }
+    console.log('membership :', membership)
     const membershipMatch = await db.post(
         `/membership/${profileId}/join`,
         membership,