Merge branch 'matchView-template' of fyindr/siimee into dev

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

@@ -0,0 +1,35 @@
+<template lang="pug">
+section.pairs-list
+    article(v-if="pairs.length")
+        .pair.w-flex.align-center.justify-space-around(
+            v-for="p in pairs"
+        )
+            .dot--icon
+            .avatar
+            .idCard
+                p S.R.
+                p Registered Nurse  
+    p(v-else) No results.    
+</template>
+
+<script setup>
+const props = defineProps({
+    pairs: {
+        type: [Object, Array],
+        default: () => [{}],
+    },
+})
+</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/MatchesView.vue

@@ -1,38 +0,0 @@
-<template lang="pug">
-main.view--matches
-
-    article.pa12
-        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)
-
-    MainNav
-</template>
-
-<script>
-import ProfileCardList from '../components/ProfileCardList.vue'
-
-import { fetchMembershipsByProfileId } from '../services'
-import { mixins } from '../utils'
-
-export default {
-    name: 'MatchView',
-    components: { ProfileCardList },
-    mixins: [mixins.pidMixin, mixins.cardMixin],
-    methods: {
-        /** Gets called from cardMixin */
-        async getCards() {
-            this.loading = true
-            try {
-                this.cards = await fetchMembershipsByProfileId(this.pid)
-            } catch (err) {
-                console.error(err)
-            }
-            this.loading = false
-        },
-    },
-}
-</script>

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/PairsView.vue

@@ -0,0 +1,103 @@
+<template lang="pug">
+main.view--matches
+    article(v-if="!loading")
+
+        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>
+
+<script>
+// import ProfileCardList from '../components/ProfileCardList.vue'
+import PairsList from '../components/PairsList.vue'
+
+import { fetchMembershipsByProfileId, fetchQueueByProfileId } from '../services'
+import { mixins } from '../utils'
+
+const convertToCard = profile => {
+    if (profile.type !== 'profile') {
+        console.error(`Cannot convert ${profile} to Card. Invalid entity.`)
+    }
+    if (!profile.isValid()) {
+        console.warn(`Profile ${profile.profile_id} is not a valid profile.`)
+    }
+    return new Card({
+        pid: profile.profile_id,
+        name: profile.user_name,
+        avatar: profile.profile_media[0],
+    })
+}
+
+const converGroupingToCard = grouping => {
+    if (grouping.type !== 'grouping') {
+        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
+    }
+    if (!grouping.profile.isValid()) {
+        console.warn(`Profile in ${grouping} is not a valid profile.`)
+    }
+    return new Card({
+        pid: grouping.profile.profile_id,
+        name: grouping.profile.user_name,
+        avatar: grouping.profile.profile_media[0],
+    })
+}
+
+export default {
+    name: 'PairsView',
+    components: { PairsList },
+    mixins: [mixins.pidMixin, mixins.cardMixin],
+    data: () => ({
+        tabs: [
+          { title: 'Pending',},
+          { title: 'Paired',},
+        ],
+        paired: ['x'],
+        pending: ['f'],
+    }),
+    methods: {
+        /** Gets called from cardMixin */
+        async getCards() {
+            this.loading = true
+            try {
+                const pending = await fetchQueueByProfileId(this.pid)
+                this.pending = this._reformat(pending,converGroupingToCard)
+                const paired = await fetchMembershipsByProfileId(this.pid)
+                this.paired = this._reformat(paired,convertToCard)
+            } catch (err) {
+                console.error(err)
+            }
+            this.loading = false
+        },
+    },
+}
+</script>
+<style>
+.select--matches{
+    display: flex;
+    justify-content: space-between;
+    margin: 0 25px;
+}
+.select--matches > div{
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    line-height: 40px;
+}
+.active{
+    border-bottom: 3px solid #F2CD5C;
+    color: #F2CD5C;
+}
+.idle{
+    color: #BCC5D3;
+}
+
+</style>