From 68dc18954d613d62eb906730865899c97f7f78ff Mon Sep 17 00:00:00 2001
From: Annika <nikzneko@gmail.com>
Date: Wed, 3 Aug 2022 12:03:15 -0600
Subject: [PATCH] profile page, but lotsa issues

---
 keepr.client/src/AppState.js                 |  5 +-
 keepr.client/src/components/KeepModal.vue    | 90 +++++++++++++++-----
 keepr.client/src/components/KeepsList.vue    | 20 +++++
 keepr.client/src/components/Profile.vue      | 28 ++++++
 keepr.client/src/components/VaultsList.vue   | 20 +++++
 keepr.client/src/pages/ProfilePage.vue       | 45 ++++++++++
 keepr.client/src/router.js                   |  5 ++
 keepr.client/src/services/ProfilesService.js | 35 ++++++++
 8 files changed, 228 insertions(+), 20 deletions(-)
 create mode 100644 keepr.client/src/components/KeepsList.vue
 create mode 100644 keepr.client/src/components/Profile.vue
 create mode 100644 keepr.client/src/components/VaultsList.vue
 create mode 100644 keepr.client/src/pages/ProfilePage.vue
 create mode 100644 keepr.client/src/services/ProfilesService.js

diff --git a/keepr.client/src/AppState.js b/keepr.client/src/AppState.js
index c5e1525..087e34a 100644
--- a/keepr.client/src/AppState.js
+++ b/keepr.client/src/AppState.js
@@ -5,5 +5,8 @@ export const AppState = reactive({
   user: {},
   account: {},
   keeps: [],
-  activeKeep: {}
+  activeKeep: {},
+  activeProfile: {},
+  profileKeeps: [],
+  profileVaults: []
 })
diff --git a/keepr.client/src/components/KeepModal.vue b/keepr.client/src/components/KeepModal.vue
index 9436840..2b5ae94 100644
--- a/keepr.client/src/components/KeepModal.vue
+++ b/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">
-            <h5 class="modal-title" id="keepModalLabel">
-              {{ keep?.name }}
-            </h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          <div class="modal-body">
-            body
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary">Save changes</button>
+          <div class="card">
+            <div class="row">
+              <div class="col-6">
+                <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="d-flex justify-content-center">
+                        <p>social medi</p>
+                        <p>social medi</p>
+                        <p>social medi</p>
+                      </div>
+                      <h5 class="card-title text-center">{{ keep?.name }}</h5>
+                      <p class="card-text">{{ keep?.description }}</p>
+                    </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>
       </div>
     </div>
   </div>
- </template>
+</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){
-    return {}
+  setup(props) {
+    // 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>
\ No newline at end of file
diff --git a/keepr.client/src/components/KeepsList.vue b/keepr.client/src/components/KeepsList.vue
new file mode 100644
index 0000000..27669d3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/keepr.client/src/components/Profile.vue b/keepr.client/src/components/Profile.vue
new file mode 100644
index 0000000..2103b78
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/keepr.client/src/components/VaultsList.vue b/keepr.client/src/components/VaultsList.vue
new file mode 100644
index 0000000..74d7d2f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/keepr.client/src/pages/ProfilePage.vue b/keepr.client/src/pages/ProfilePage.vue
new file mode 100644
index 0000000..4e93a1e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/keepr.client/src/router.js b/keepr.client/src/router.js
index e4d3a8e..c599a54 100644
--- a/keepr.client/src/router.js
+++ b/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')
   }
 ]
 
diff --git a/keepr.client/src/services/ProfilesService.js b/keepr.client/src/services/ProfilesService.js
new file mode 100644
index 0000000..44e2286
--- /dev/null
+++ b/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()
\ No newline at end of file