:wrench: renaming matches to pairview and created messagesview

docs/processes/login.md

@@ -52,6 +52,6 @@ flowchart LR
     a(login form component)-->b{{login service}}
     b{{login service}}-.->z(storeToken)
     z(storeToken)--->v{{vue router}}
-    v{{vue router}}-.->y(forward to /matches)
+    v{{vue router}}-.->y(forward to /pairs)
     z(storeToken)-.->x(fetch profiles)-->w{{profile service}}-->u(API)
 ```

docs/processes/match.md

@@ -49,5 +49,5 @@ flowchart LR
 flowchart LR
     a(profile card component)-->b{{match service}}
     b{{match service}}-.->z(storeGroupings)
-    z(storeGroupings)-.->y(forward to /matches/<profile_id>)
+    z(storeGroupings)-.->y(forward to /pairs/<profile_id>)
 ```

docs/processes/survey.md

@@ -35,14 +35,14 @@ flowchart LR
 flowchart LR
     h((DB))<-->|schwifty model|g{{backend matchQueue model}}
     g{{backend matchQueue model}}-->d{{backend machQueue service}}
-    d{{backend matchQueue service}}-->c(/<profile_id>/matches route)
+    d{{backend matchQueue service}}-->c(/<profile_id>/pairs route)
 ```
 
 ### Frontend
 
 ```mermaid
 flowchart LR
-    c(/<profile_id>/matches route)-->API-->b{{match service}}
+    c(/<profile_id>/pairs route)-->API-->b{{match service}}
     b{{match service}}-->a(matches component)
 ```
 
@@ -53,5 +53,5 @@ flowchart LR
 flowchart LR
     a(matches component)-->b{{survey service}}
     b{{match service}}-.->z(storeMatchQueue)
-    z(storeMatchQueue)-.->y(forward to /matches/<profile_id>)
+    z(storeMatchQueue)-.->y(forward to /pairs/<profile_id>)
 ```

frontend/src/components/MainNav.vue

@@ -4,12 +4,12 @@ w-toolbar.mt6.py1(bottom fixed)
         w-button.pa8(bg-color='primary')
             w-icon.mr1(xl) mdi mdi-home
             //- p.text-upper home queue
-    router-link.w-flex.column(:to='`/matches`')
+    router-link.w-flex.column(:to='`/pairs`')
         w-button.pa8(bg-color='primary')
             w-icon.mr1(xl) mdi mdi-tooltip-account
             //- p.text-upper pending matches
-    router-link.w-flex.column(:to='`/chats`')
-        w-button.pa8(bg-color='primary' disabled)
+    router-link.w-flex.column(:to='`/messages`')
+        w-button.pa8(bg-color='primary')
             w-icon.mr1(xl) mdi mdi-forum
             //- p.text-upper active chats
     router-link.w-flex.column(:to='`/onboarding`')

frontend/src/components/PairsList.vue

@@ -1,11 +1,15 @@
 <template lang="pug">
 section.pairs-list
-    article
-        .pair(
+    article(v-if="pairs.length")
+        .pair.w-flex.align-center.justify-space-around(
             v-for="p in pairs"
         )
-            h3 {{p.name}}
-    
+            .dot--icon
+            .avatar
+            .idCard
+                p S.R.
+                p Registered Nurse  
+    p(v-else) No results.    
 </template>
 
 <script setup>
@@ -15,4 +19,17 @@ const props = defineProps({
         default: () => [{}],
     },
 })
-</script>
+</script>
+<style lang="sass">
+.pairs-list
+    article
+        .dot--icon
+            width:3vw
+            height:3vw
+            border-radius:50%
+            background-color:#60C3FF
+        .avatar
+            width:10vw
+            height:10vw
+            background-color:#D5D5D5
+</style>

frontend/src/router/index.js

@@ -3,10 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import ChatView from '../views/ChatView.vue'
-import MatchesView from '../views/MatchesView.vue'
+import PairsView from '../views/PairsView.vue'
 import LoginView from '../views/LoginView.vue'
 import SurveyView from '../views/SurveyView.vue'
 import OnboardingView from '../views/OnboardingView.vue'
+import MessagesView from '../views/MessagesView.vue'
 
 const routes = [
     {
@@ -22,16 +23,25 @@ const routes = [
         meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
     {
-        path: '/matches',
-        component: MatchesView,
-        name: 'MatchesView',
+        path: '/pairs',
+        component: PairsView,
+        name: 'PairsView',
         meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
     {
-        path: '/matches/:pid',
+        path: '/pairs/:pid',
         component: ProfileView,
         meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
+    {
+        path: '/messages',
+        component: MessagesView,
+        meta: {
+            requiresAuth: true,
+            requiresCompleteProfile: true,
+            props: true,
+        },
+    },
     {
         path: '/chat/:pid',
         component: ChatView,

frontend/src/views/MessagesView.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+main.view--messages
+    article(v-if="!loading")
+        PairsList(:pairs="inboxes")
+
+    w-spinner(v-else bounce)
+    MainNav
+</template>
+
+<script>
+import PairsList from '../components/PairsList.vue'
+
+import { fetchMembershipsByProfileId } from '../services'
+import { mixins } from '../utils'
+
+export default {
+    name: 'MessagesView',
+    components: { PairsList },
+    mixins: [mixins.pidMixin, mixins.cardMixin],
+    data: () => ({
+        inboxes: ['x'],
+    }),
+    methods: {
+        /** Gets called from cardMixin */
+        async getCards() {
+            this.loading = true
+            try {
+                this.inboxes = await fetchMembershipsByProfileId(this.pid)
+            } catch (err) {
+                console.error(err)
+            }
+            this.loading = false
+        },
+    },
+}
+</script>

frontend/src/views/MatchesView.vue → frontend/src/views/PairsView.vue

@@ -1,22 +1,18 @@
 <template lang="pug">
 main.view--matches
-    .select--matches
-        .matches--pending(:class="currentTab =='pending' ? 'active':'idle'" @click="switchTab('pending')") Pending
-        .matches--paired(:class="currentTab =='paired' ? 'active':'idle'" @click="switchTab('paired')") Paired
+    article(v-if="!loading")
 
-    article.pa12
-        //- TODO add and render appropriate lists for both tabs
-        template(v-if="currentTab=='pending'")
-            PairsList(:list='pendingList')
-        template(v-else)
-            PairsList(:list='pairedList')
-        //- template(v-if='matches.length && !loading')
-        //-     h2 atches
-        //-     ProfileCardList(:pid='pid' :profiles='matches' @reload='getCards')
-
-        //- p(v-else-if='matches.length === 0') No matches.
-        //- w-spinner(v-else bounce)
+        w-tabs(:items="tabs" fill-bar)
+            template(#item-title="{ item }")
+               span.green {{ item.title }}
+            //- pending tab
+            template(#item-content.1="{ item }")
+                PairsList(:pairs="pending")
+            //- paired tab 
+            template(#item-content.2="{ item }")
+                PairsList(:pairs="paired")
 
+    w-spinner(v-else bounce)
     MainNav
 </template>
 
@@ -56,11 +52,16 @@ const converGroupingToCard = grouping => {
 }
 
 export default {
-    name: 'MatchView',
+    name: 'PairsView',
     components: { PairsList },
     mixins: [mixins.pidMixin, mixins.cardMixin],
     data: () => ({
-        currentTab: 'pending'
+        tabs: [
+          { title: 'Pending',},
+          { title: 'Paired',},
+        ],
+        paired: ['x'],
+        pending: ['f'],
     }),
     methods: {
         /** Gets called from cardMixin */
@@ -68,18 +69,14 @@ export default {
             this.loading = true
             try {
                 const pending = await fetchQueueByProfileId(this.pid)
-                this.pendingList = this._reformat(pending,converGroupingToCard)
+                this.pending = this._reformat(pending,converGroupingToCard)
                 const paired = await fetchMembershipsByProfileId(this.pid)
-                this.PairedList = this._reformat(paired,convertToCard)
+                this.paired = this._reformat(paired,convertToCard)
             } catch (err) {
                 console.error(err)
             }
             this.loading = false
         },
-        switchTab(tab){
-            if(this.currentTab === tab) return
-            this.currentTab = tab
-        }
     },
 }
 </script>