profile page, but lotsa issues

keepr.client/src/AppState.js

@@ -5,5 +5,8 @@ export const AppState = reactive({
   user: {},
   account: {},
   keeps: [],
-  activeKeep: {}
+  activeKeep: {},
+  activeProfile: {},
+  profileKeeps: [],
+  profileVaults: []
 })

keepr.client/src/components/KeepModal.vue

@@ -1,30 +1,63 @@
  <template>
   <div class="component">
     <div class="modal fade" id="keepModal" tabindex="-1" aria-labelledby="keepModalLabel" aria-hidden="true">
-      <div class="modal-dialog">
+      <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
-          <div class="modal-header">
+          <div class="card">
-            <h5 class="modal-title" id="keepModalLabel">
+            <div class="row">
-              {{ keep?.name }}
+              <div class="col-6">
-            </h5>
+                <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
+              </div>
+              <div class="col-6">
+                <div class="card-body">
+                  <div class="d-flex flex-column justify-content-between">
+                    <div>
+                      <div class="d-flex justify-content-end">
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                       </div>
-          <div class="modal-body">
+                      <div class="d-flex justify-content-center">
-            body
+                        <p>social medi</p>
+                        <p>social medi</p>
+                        <p>social medi</p>
                       </div>
-          <div class="modal-footer">
+                      <h5 class="card-title text-center">{{ keep?.name }}</h5>
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                      <p class="card-text">{{ keep?.description }}</p>
-            <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                    <hr>
+                    <div class="d-flex justify-content-between">
+                      <button class="btn btn-primary">add to vault</button>
+                      <!-- account is empty... -->
+                      <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
+                      <div @click="viewProfile(keep?.creator)">
+                        <img :src="keep?.creator?.picture" :alt="keep?.creator?.name">
+                        <p>{{ keep?.creator?.name }}</p>
+                      </div>  
+                    </div>
+                  </div>
+                  <!-- tags -->
                 </div>
               </div>
             </div>
           </div>
+
+
+
+
+
         </div>
- </template>
+      </div>
+    </div>
+  </div>
+</template>
  
  
  <script>
- export default {
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+export default {
   props: {
     keep: {
       id: Number,
@@ -41,13 +74,32 @@
       }
     }
   },
-  setup(props){
+  setup(props) {
-    return {}
+    // console.log(AppState.account)
+    const router = useRouter()
+    return {
+      account: computed(() => {AppState.account}),
+      viewProfile() {
+        // console.log(user.name)
+        // AppState.activeProfile = user
+        Modal.getOrCreateInstance(document.getElementById('keepModal')).hide()
+        // logger.log(props.keep.creator.id)
+        router.push({name: 'Profile', params: {id: props.keep.creator.id}})
       }
     }
- </script>
+  }
+}
+</script>
  
  
  <style lang="scss" scoped>
+ .modal-content {
+   // width: 84vw;
+   // height: calc(100vh - 16vw);
+   // margin: 8vw;
+ }
  
+ .img-fluid {
+   width: 100%;
+ }
  </style>

keepr.client/src/components/KeepsList.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+    keeps list
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

keepr.client/src/components/Profile.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="component">
+    Profile
+    {{ profile?.name }}
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    profile: {
+      id: String,
+      name: String,
+      picture: String
+    }
+  },
+  setup(props){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

keepr.client/src/components/VaultsList.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+    vaults list
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

keepr.client/src/pages/ProfilePage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="component">
+    <!-- none of this is loading... dafuq? -->
+    {{ profile?.name }}
+    {{ keeps[0]?.name }}
+    {{ vaults[0]?.name }}
+
+  </div>
+</template>
+
+
+<script>
+import VaultsList from '../components/VaultsList.vue'
+import KeepsList from '../components/KeepsList.vue';
+import { profilesService } from '../services/ProfilesService'
+import { computed, onMounted } from 'vue'
+import { AppState } from '../AppState';
+import { logger } from '../utils/Logger.js'
+import { useRoute } from 'vue-router'
+export default {
+    setup() {
+      const route = useRoute()
+      onMounted(async () => {
+        try {
+          await profilesService.getProfile(route.params.id)
+          await profilesService.getKeeps(route.params.id)
+          await profilesService.getVaults(route.params.id)
+        } catch (error) {
+          logger.error(error)
+        }
+      })
+        return {
+          components: { VaultsList, KeepsList },
+          profile: computed(() => {AppState.activeProfile}),
+          keeps: computed(() => {AppState.profileKeeps}),
+          vaults: computed(() => {AppState.profileVaults})
+        };
+    }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

keepr.client/src/router.js

@@ -16,6 +16,11 @@ const routes = [
     name: 'Account',
     component: loadPage('AccountPage'),
     beforeEnter: authGuard
+  },
+  {
+    path: '/profile',
+    name: 'Profile',
+    component: loadPage('ProfilePage')
   }
 ]
 

keepr.client/src/services/ProfilesService.js

@@ -0,0 +1,35 @@
+import { AppState } from '../AppState'
+import { logger } from '../utils/Logger'
+import { api } from './AxiosService'
+
+class ProfilesService {
+  async getProfile(profileId) {
+    try {
+      const res = await api.get('api/profiles/' + profileId)
+      // logger.log(res.data)
+      AppState.activeProfile = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  async getKeeps(profileId) {
+    try {
+      const res = await api.get('api/profiles/' + profileId + '/keeps')
+      AppState.profileKeeps = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  async getVaults(profileId) {
+    try {
+      const res = await api.get('api/profiles/' + profileId + '/vaults')
+      AppState.profileVaults = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+}
+
+export const profilesService = new ProfilesService()