broken vue/vite

backend/lib/routes/membership/join.js

                 // TODO: LIMIT the amount of groupings by checking type
                 // !: You should only be able to match with the target_id ONCE
                 // !: You should only be associated with a single company too
-                console.log('---')
 
                 /** User membership service method to create membership */
                 const memberships = await membershipService.joinGrouping(
                     groupingToWrite,
                     role,
                 )
-                console.log(memberships)
+
                 return h
                     .response({
                         ok: true,

backend/lib/routes/profile/patch-queue.js

             const { include_profile, reinsert } = request.query
             const { profileService, matchQueueService } =
                 request.server.services()
-            console.log('reinsert', reinsert)
+            // console.log('reinsert', reinsert)
             const updatedQueue = await matchQueueService.markAsDeleted(
                 profile_id,
                 target_id,

backend/lib/routes/profile/queue.js

 
             const queue = await matchQueueService.getQueue(profile_id)
             const queueIds = queue.map(entry => entry.target_id)
-            console.log('queueIds', queueIds)
+            // console.log('queueIds', queueIds)
             const res =  {
                 ok:true,
                 handler: pluginConfig.handlerType,
                 data: queueIds
             }
 
-            // HELP: I think there's an issue here
-            // queueIds spits out the queue profiles in the correct order
-            // ~However~ when it goes through getProfilesFor
-            // it comes back in literal database order regardless of is_deleted status
-            console.log(
-                'include_profile results',
-                await profileService.getProfilesFor(queueIds),
-            )
             if(include_profile) {
                 res.data = await profileService.getProfilesFor(queueIds)
             }

backend/lib/routes/profile/score.js

         tags: ['api'],
         /** Protect this route with authentication? */
         auth: false,
-
+        cors: true,
         handler: async function (request, h) {
             const { profileService, matchQueueService } =
                 request.server.services()

backend/lib/routes/user/current.js

         tags: ['api'],
         auth: 'default_jwt',
         handler: async function (request, h) {
-            // console.log('current')
-            // console.log(request)
             try {
                 const auth = {
                     credentials: request.auth.credentials,

backend/lib/routes/user/list-profiles.js

                 userId,
                 type,
             )
-            console.log('get profiles - const profiles / in list-profiles.js', profiles)
             try {
                 return {
                     ok: true,

backend/lib/services/match.js

         }
 
         this.swapWith = p => {
-            console.log('%s & %s swap partners', this.name, p.name)
             const thisFiance = this.fiance
             const pFiance = p.fiance
             this.engageTo(pFiance)
         for (let d = 0; d < diff; d++) {
             smallerList.push({ profile_id: `${d}-dummy`, queue: [] })
         }
-        console.log('---')
         let allPeople = [...seekers, ...posters]
         const queuesById = allPeople.reduce((queuesById, profile) => {
             queuesById[profile.profile_id] = profile.queue

backend/lib/services/matchqueue.js

         const { MatchQueue } = this.server.models()
         return await MatchQueue.query()
             .where('profile_id', profileId)
-            .andWhere('is_deleted', false)
+            .where('is_deleted', 0)
     }
     /**
      * Returns queues by profile id by user type

backend/lib/services/profile.js

  * Grab the zip code string
  */
 const getZipCodeFromProfile = profile => {
-    console.log('profile getZipCode', profile)
     // There should only be one zip code entry per profile
     let zipRes = profile.responses.filter(
         // Whatever the zipcode questions is
 
     async getProfilesFor(profileIdArray, type) {
         const { Profile } = this.server.models()
-
+        // profilesEntries is profiles in database row order 
         const profilesEntries = await Profile.query()
             .whereIn('profile_id', profileIdArray)
             .withGraphFetched('responses')
             .withGraphFetched('user')
 
-        return profilesEntries.map(profile => {
-            return new CompleteProfile(profile, type)
-        })
+        // taking the info from profilesEntries
+        // to repack into completeProfiles
+        // in same order as profileIdArray
+        const completeProfiles = []
+        profileIdArray.forEach(pid => {
+            profilesEntries.forEach(entry => {
+                if (entry.profile_id == pid) {
+                    completeProfiles.push(new CompleteProfile(entry, type))
+                }
+            })
+        })  
+        return completeProfiles
     }
 
     /**
             parseInt(zipCode),
         )
         if (!zipInfo) {
-            console.log('zip:', zipCode)
+            console.error('zip:', zipCode)
         }
 
         return {

frontend/package.json

         "format": "prettier .  --write"
     },
     "dependencies": {
-        "joi": "^17.4.0",
-        "vue": "^3.0.5",
-        "vue-router": "^4.0.12"
+        "joi": "^17.6.0",
+        "vue": "^3.2.31",
+        "vue-router": "^4.0.14"
     },
     "devDependencies": {
-        "@prettier/plugin-pug": "^1.17.3",
-        "@vitejs/plugin-vue": "^1.2.2",
-        "@vue/compiler-sfc": "^3.0.5",
-        "autoprefixer": "^10.2.5",
-        "eslint": "^8.3.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-vue": "^8.1.1",
-        "naive-ui": "^2.20.3",
-        "postcss": "^8.2.13",
-        "postcss-calc": "^8.0.0",
-        "postcss-import": "^14.0.1",
+        "@prettier/plugin-pug": "^1.19.2",
+        "@vitejs/plugin-vue": "^2.2.4",
+        "@vue/compiler-sfc": "^3.2.31",
+        "autoprefixer": "^10.4.2",
+        "eslint": "^8.11.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-vue": "^8.5.0",
+        "naive-ui": "^2.26.4",
+        "postcss": "^8.4.8",
+        "postcss-calc": "^8.2.4",
+        "postcss-import": "^14.0.2",
         "precss": "^4.0.0",
         "pug": "^3.0.2",
         "pug-plain-loader": "^1.1.0",
-        "sugarss": "^3.0.3",
-        "vite": "^2.2.3",
+        "sugarss": "^4.0.1",
+        "vite": "^2.8.6",
         "vite-fs": "^0.0.2",
         "watch": "^1.0.2"
     }

frontend/src/components/ProfileCardList.vue

     .profile_card_list_container.w-full
         .swipe(
             :config='config'
-            :key='profile.uid'
+            :key='profile.pid'
             @throwout='swipped(profile)'
-            v-for='profile in profiles'
+            v-for='(profile, i) in profiles'
+            :style='{"z-index": 1000-i}'
         )
             .card.b-solid.rounded.p-0.bg-cover(
                 :style='{ "background-image": `url(${profile.avatar})` }'
             )
                 .card__content
-                    h3.p-1.mv-0.b-solid.rounded {{ profile.name }}
+                    h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
                 nav.swipe_icons.w-full.f-row.between
                     //- Accept
                     button.p-1(@click='accept') Accept
 </template>
 
 <script setup>
-import { computed, defineProps } from 'vue'
-import { updateQueueByProfileId } from '../services/queue.service'
+import { computed, defineProps, defineEmits } from 'vue'
+import { updateQueueByProfileId, fetchMembershipsByProfileId, postMembershipByProfileId } from '../services'
 
+const emit = defineEmits(['reloadQueue'])
 // TODO: Please review this conversion from script to script setup
 // converted from the props section
 const props = defineProps({
         type: [Object, Array],
         default: () => [
             {
-                uid: '1',
+                pid: '1',
                 name: 'Full Name',
                 avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                 metadata: { age: '21', rawMetadata: 'Some Text Here!' },
             },
         ],
     },
-    uid: {
+    pid: {
         type: Number,
         default: 9999,
     },
 
 
 const swipped = profile => {
-    const index = props.profiles.findIndex(u => u.uid == profile.uid)
+    const index = props.profiles.findIndex(u => u.pid == profile.pid)
     // TODO: bug, fix this
     props.profiles.splice(index, 1)
     profile.id = Date.now() + (Math.random() * 100000).toFixed()
     const data = { ...currentCard }
 }
 // AHP Button behavior
-const accept = () => {
+
+const accept = async () => {
     console.log('accepted aka do NOT reinsert')
     // need to pass these arguments (profileId, targetId, status)
     // the url structure is
     // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=false`)
     // http://localhost:3001/api/profile/38/queue/9/delete?include_profile=true&reinsert=true
-    const profileId = props.uid
-    const targetId = props.profiles[0].uid
+    const profileId = props.pid
+    const targetId = props.profiles[0].pid
     updateQueueByProfileId(profileId, targetId, false)
     // TODO: next step is grouping/membership
-    postMembershipByProfileId({ profileId, targetId })
+    const checkMembership = await fetchMembershipsByProfileId(profileId)
+    if (!checkMembership.length) {
+        console.log('Make membership')
+        postMembershipByProfileId({ profileId, targetId })
+    }
+    emit('reloadQueue')
 }
 const hold = () => {
     console.log('held? do we need this?')
 const pass = () => {
     console.log('passed aka do reinsert')
     // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=true`)
-    const profileId = props.uid
-    const targetId = props.profiles[0].uid
+    const profileId = props.pid
+    const targetId = props.profiles[0].pid
     updateQueueByProfileId(profileId, targetId, true)
+    emit('reloadQueue')
 }
 
 // from the data() section

frontend/src/components/form.vue

 import { validatorMapping, makeKebob } from '@/utils'
 import { defineProps, reactive, ref } from 'vue'
 import { saveSurveyByProfileID, scoreSurveyByProfileId } from '../services/survey.service'
-import { fetchMembershipsByProfileId, postMembershipByProfileId } from '../services/grouping.service'
 
 const slidevalue = ref('0')
 
 /**
  * Save or take the-nNext step in the form
  */
-const next = e => {
+const next = async e => {
     const validity = isValid(state.step - 1)
     if (validity.error) return console.error(validity.error)
     if (state.step === props.form.length) {
         // Bc we don't want to pass the 1st question to backend & we want profileId
         // Necessary atm bc we manually added question in Survey class (entity)
         const profileId = idWithResponseVal.shift().val
-        const targetId = 0
-        const maxDistance = 10
+        const maxDistance = 100
         saveSurveyByProfileID(idWithResponseVal, profileId)
         alert('Responses submitted!')
         resetAnswers()
         scoreSurveyByProfileId(profileId, maxDistance)
-
-        const checkMembership = fetchMembershipsByProfileId(profileId)
-        console.log(checkMembership)
-        if (!checkMembership) {
-            console.log('Make membership')
-            // postMembershipByProfileId({ profileId, targetId })
-        }
-
         state.step = 1
     } else if (state.step < props.form.length) {
         state.step++

frontend/src/services/queue.service.js

     // targetId - the id of the profile viewed by the profileId
     // reinsert - if profileId accepted targetId, FALSE reinsert so no reinsert; if profileId passed targetId, TRUE reinsert so reinsert at end
     //
-    const updateQueue = db.patch(
+    const updateQueue = await db.patch(
         `/profile/${profileId}/queue/${targetId}/delete?include_profile=true&reinsert=${reinsert}`,
         // HELP: responseScheme says the structure should be array of either:
         // 1) NUMBER

frontend/src/services/survey.service.js

 }
 
 const scoreSurveyByProfileId = async (profileId, maxDistance) => {
-    const scoreSurvey = db.get(`/profile/${profileId}/score?max_distance=${maxDistance}`)
+    const scoreSurvey = await db.get(`/profile/${profileId}/score?max_distance=${maxDistance}`)
     return scoreSurvey
 }
 

frontend/src/views/home.vue

 <template lang="pug">
 sidebar
 main.f-col.start.w-full
-    article#home
+    article#home(v-if='!loading')
         h1(v-if='user') {{ user.user_name }}
-        profile-card-list(:profiles='swipables' :uid='mypid')
+        profile-card-list(:profiles='swipables' :pid='parseInt(mypid)' @reloadQueue='getQueue')
+        input(v-model='mypid')
+        button(@click='getQueue') Submit
+    p(v-else) Loading...
     main-nav
 </template>
 
 import mainNav from '../components/MainNav.vue'
 import profileCardList from '../components/ProfileCardList.vue'
 import { fetchQueueByProfileId } from '../services'
-import { fetchMembershipsByProfileId, postMembershipByProfileId } from '../services/grouping.service'
 
 import batch_10 from '../../../backend/db/generated/_batch_10.js.ref'
 import batch_20 from '../../../backend/db/generated/_batch_20.js.ref'
         swipables: [],
         user: null,
         mypid: null,
+        loading: true
     }),
     async created() {
         // this.mypid = auth.currentUser?.mypid || "99999";
-        this.mypid = 38
+        this.mypid = 45
         // Uncomment below to use for batch file data
         // this.processProfilesFromBatch(this.parseBatch([batch_10, batch_20, batch_30]))
-
-        // Uncomment below to use API
-        const queueList = await fetchQueueByProfileId(this.mypid)
-        console.log('queueList', queueList)
-        this.processQueue(queueList)
-        const profileId = 38
-        const checkMembership = fetchMembershipsByProfileId(profileId)
-        console.log('checkMembership', checkMembership)
+        this.getQueue()
     },
     methods: {
+        async getQueue() {
+            this.loading = true
+            const queueList = await fetchQueueByProfileId(this.mypid)
+            this.processQueue(queueList)
+            this.loading = false
+        },
         processQueue(queueList) {
             const formattedList = []
             queueList.forEach(profile => {
                 const formatted = {
-                        uid: profile.profile_id,
+                        pid: profile.profile_id,
                         name: profile.user_name,
                         avatar: profile.user_media,
                     }
                 formattedList.push(formatted)
             })
+            console.log('formattedList', formattedList)
+            // formattedList.reverse()
             this.swipables = formattedList
         },
         // For Batch Data Parsing & Processing
             parsed.profiles.forEach(p => {
                 // console.log(parsed)
                 const user = findUser(p)
-                p.uid = p.profile_id
+                p.pid = p.profile_id
                 p.name = user.user_name
                 p.email = user.user_email
                 p.avatar = p.user_media[0]
         height: 100%
         width: 100%
         flex-direction: column
+
+    input, button
+        position: relative
+        z-index: 1000
 </style>