Building the pet table for user profiles.

ginazampino · Jun 17, 2022 · 0db3176 · 0db3176
1 parent 2afadb8
commit 0db3176
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 4 deletions.
diff --git a/client/index.js b/client/index.js
@@ -2,7 +2,10 @@ import './scss/index.scss';
 
 import App from './vue/App.vue';
 import Vue from 'vue';
-import Router from "./router.js";
+import Router from './router.js';
+import SmartTable from 'vuejs-smart-table';
+
+Vue.use(SmartTable);
 
 new Vue ({
     components: { App },

diff --git a/client/vue/private/app/AppPetTable.vue b/client/vue/private/app/AppPetTable.vue
@@ -0,0 +1,95 @@
+<template>
+    <section class="smart-table">
+        <v-table :data="pets" :filters="filters">
+
+            <thead slot="head">
+                <v-th sortKey="id">
+                    ID
+                </v-th>
+                <v-th sortKey="petName">
+                    Name
+                </v-th>
+                 <v-th sortKey="speciesName">
+                    Species
+                </v-th>
+                 <v-th sortKey="breedName">
+                    Breed
+                </v-th>
+            </thead>
+
+            <tbody slot="body" slot-scope="{ displayData }">
+                <tr v-for="row in displayData" :key="row.id">
+
+                    <td class="data-id">
+                        <div>
+                            PH{{ row.id }}
+                        </div>
+                    </td>
+
+                    <td class="data-name">
+                        <div>
+                            {{ row.petName }}
+                        </div>
+                    </td>
+
+                    <td class="data-species">
+                        <div>
+                            <i v-if="(row.petGender == 'Male') && (row.speciesName == 'Cat')" class="fa-solid fa-cat blue plain" title="Male Cat"></i>
+                            <i v-if="(row.petGender == 'Female') && (row.speciesName == 'Cat')" class="fa-solid fa-cat pink plain" title="Female Cat"></i>
+                            <i v-if="(row.petGender == 'Male') && (row.speciesName == 'Dog')" class="fa-solid fa-dog blue plain" title="Male Dog"></i>
+                            <i v-if="(row.petGender == 'Female') && (row.speciesName == 'Dog')" class="fa-solid fa-dog pink plain" title="Female Dog"></i>
+                            {{ row.speciesName }}
+                        </div>
+                    </td>
+
+                    <td class="data-breed">
+                        <div>
+                            {{ row.breedName }}
+                        </div>
+                    </td>
+
+                </tr>
+            </tbody>
+
+        </v-table>
+    </section>
+</template>
+
+<script>
+    import axios from 'axios';
+
+    export default {
+        data() {
+            return {
+                pets: null,
+                filters: {
+                    name: {
+                        value: '',
+                        keys: ['petName']
+                    },
+                    gender: {
+                        value: '',
+                        keys: ['petGender'],
+                        options: [
+                            'Male',
+                            'Female'
+                        ],
+                        extact: true
+                    }
+                }
+            }
+        },
+
+        methods: {
+            loadPets: async function () {
+                const pets = await axios.get(`/api/get/user/${this.$route.params.id}/pets`).then((result) => { return result; });
+
+                this.pets = pets.data;
+            }
+        },
+
+        mounted() {
+            this.loadPets();
+        }
+    };
+</script>
diff --git a/client/vue/private/app/UserProfile.vue b/client/vue/private/app/UserProfile.vue
@@ -2,17 +2,20 @@
     <main>
         <div class="content">
             <AppHeader :heading-text="headerText" />
+            <AppPetTable></AppPetTable>
         </div>
     </main>
 </template>
 
 <script>
     import axios from 'axios';
     import AppHeader from './AppHeader.vue';
+    import AppPetTable from './AppPetTable.vue';
 
     export default {
         components: {
-            AppHeader
+            AppHeader,
+            AppPetTable
         },
 
         data() {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "vue-loader": "^15.9.8",
     "vue-router": "^3.5.2",
     "vue-template-compiler": "^2.6.14",
+    "vuejs-smart-table": "^0.0.8",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2"
   }

diff --git a/server/api/index.js b/server/api/index.js
@@ -10,7 +10,7 @@ const {
     getUserCurrency,
     getUserRole,
     getSessionId,
-    getPetSpecies,
+    getUserPets,
     doLoginUser,
     doRegisterUser,
     doUpdateUser,
@@ -161,6 +161,26 @@ require('dotenv').config();
         };
     });
 
+/* ========================================
+
+    Get all of a user's pets. */
+
+    router.get('/get/user/:id/pets', requireSession, async (req, res) => {
+        const session = await validateSession(req.cookies.token);
+        const sessionId = session.user;
+
+        if (sessionId) {
+            return pets = await getUserPets(req.params.id)
+                .then((result) => {
+                    res.json(result);
+                }).catch((error) => {
+                    throw error;
+                });
+        } else { 
+            res.status(400).send('Server could not find an active session.');
+        };
+    });
+
 /* ========================================
 
     Get a user's public profile data. */

diff --git a/server/logic/index.js b/server/logic/index.js
@@ -197,6 +197,50 @@ const { User, Species, Breed, Pet } = require('../database/models');
             skillPotions: inventory.skillPotions,
         };
     };
+
+    /* ================================== */
+
+    async function getUserPets(id) {
+        const pets = await Pet.query().where('userId', id);
+        const breeds = await Breed.query();
+        const species = await Species.query();
+
+        let mappedPets = [];
+
+        function mapPetsToBreeds() {
+            function mapBreed(pet) {
+                const petData = pet;
+                const petBreedId = petData.breedId;
+                const breedData = breeds.find((breed) => { return breed.id == petBreedId; });
+                const speciesData = species.find((species) => { return species.id == breedData.speciesId; });
+                const breedName = breedData.breedName;
+                const speciesName = speciesData.speciesName;
+                let mappedData = petData;
+
+                Object.assign(mappedData, { breedId: breedName, speciesId: speciesName });
+
+                delete Object.assign(mappedData, { 
+                    ['breedName']: mappedData['breedId']
+                })['breedId'];
+
+                delete Object.assign(mappedData, { 
+                    ['speciesName']: mappedData['speciesId']
+                })['speciesId'];
+
+                mappedPets.push(mappedData);
+            };
+
+            pets.forEach((pet) => {
+                mapBreed(pet);
+            });
+
+            return mappedPets;
+        };
+
+        if (pets.length >= 1) {
+           return mapPetsToBreeds();
+        } else return false;
+    };
 
 /* ========================================
 
@@ -252,6 +296,16 @@ const { User, Species, Breed, Pet } = require('../database/models');
 
     /* ================================== */
 
+    async function findBreedById(id) {
+        const breedName = await Breed.query().where('id', id).first();
+
+        if (breedName) {
+            return breedName;
+        } else return false;
+    };
+
+    /* ================================== */
+
     async function findBreedByName(name) {
         const breed = await Breed.query().where('breedName', name).first();
 
@@ -381,7 +435,9 @@ const { User, Species, Breed, Pet } = require('../database/models');
             } else return false;
         };
 
-        if (isValid) { return registerUser(); } else return false;
+        if (isValid) { 
+            return registerUser(); 
+        } else return false;
     };
 
     /* ================================== */
@@ -541,6 +597,7 @@ module.exports = {
     findUserById,
     findPetByShowName,
     findBreedByName,
+    findBreedById,
     validateForm,
     validatePassword,
     validateSession,
@@ -553,6 +610,7 @@ module.exports = {
     getUserRole,
     getSessionId,
     getAllPetSpecies,
+    getUserPets,
     doLoginUser,
     doRegisterUser,
     doUpdateUser,