home, vault, and profile pages are framed out

keepr.client/src/AppState.js

@@ -8,5 +8,7 @@ export const AppState = reactive({
   activeKeep: {},
   activeProfile: {},
   profileKeeps: [],
-  profileVaults: []
+  profileVaults: [],
+  vaultKeeps: [],
+  activeVault: {}
 })

keepr.client/src/components/KeepModal.vue

@@ -81,7 +81,7 @@ export default {
       account: computed(() => {AppState.account}),
       viewProfile() {
         // console.log(user.name)
-        // AppState.activeProfile = user
+        // AppState.activeProfile = props.keep.creator
         Modal.getOrCreateInstance(document.getElementById('keepModal')).hide()
         // logger.log(props.keep.creator.id)
         router.push({name: 'Profile', params: {id: props.keep.creator.id}})

keepr.client/src/components/KeepTile.vue

@@ -5,9 +5,7 @@
       <img :src="keep.img" class="card-img" :alt="keep.name">
       <div class="card-img-overlay d-flex justify-content-between align-items-end">
         <h5 class="card-title">{{ keep.name }}</h5>
-        <a href="#">
-          <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
-        </a>
+        <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid profile-pic">
       </div>
     </div>
   </div>
@@ -54,9 +52,10 @@ export default {
 .card-img {
   min-height: 160px;
   max-height: 80vh;
+  object-fit: cover;
 }
 
-.card-img-overlay img {
-  max-height: 36px;
+.profile-pic {
+  height: 36px;
 }
 </style>

keepr.client/src/components/Profile.vue

@@ -1,28 +0,0 @@
-<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/ProfileKeepTile.vue

@@ -0,0 +1,60 @@
+<template>
+  <div @click="viewKeep()" class="component">
+    <div class="card bg-dark text-white">
+      <!-- TODO check if keep.img is a valid image -->
+      <img :src="keep.img" class="card-img" :alt="keep.name">
+      <div class="card-img-overlay d-flex justify-content-between align-items-end">
+        <h5 class="card-title">{{ keep.name }}</h5>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { computed, onMounted, ref } from 'vue'
+import { router } from '../router.js'
+import { AppState } from '../AppState.js'
+import { logger } from '../utils/Logger.js'
+
+export default {
+  props: {
+    keep: {
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      views: Number,
+      kept: Number,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
+    }
+  },
+  setup(props) {
+    return {
+      viewKeep() {
+        AppState.activeKeep = props.keep;
+        // console.log(props.keep.id)
+        // router.push({name: 'Keep'})
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.card-img {
+  min-height: 160px;
+  max-height: 80vh;
+  object-fit: cover;
+}
+
+.profile-pic {
+  height: 36px;
+}
+</style>

keepr.client/src/components/VaultTile.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="component">
+    <div class="card text-white">
+      <img :src="vault.img" :alt="vault.name" class="vault-img">
+      <div class="card-img-overlay d-flex align-items-end">
+        <h5 class="card-title">{{vault.name}}</h5>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    vault: {
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      isPrivate: Boolean,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
+    }
+  },
+  setup(props){
+    return {
+
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+.vault-img {
+  height: 160px;
+  object-fit: cover;
+}
+
+</style>

keepr.client/src/components/VaultsList.vue

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

keepr.client/src/pages/HomePage.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- TODO add masonry later -->
   <div class="container-fluid px-md-5 pt-4">
-    <div class="row">
-      <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="col-6 col-md-4 col-lg-3 p-2">
+    <div class="masonry-frame">
+      <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2">
       <!-- <img src="../assets/img/404.svg" alt=""> TODO use this as default img in DB-->
         <KeepTile :keep="k" />
       </div>
@@ -22,7 +22,7 @@ export default {
   setup() {
     onMounted(async () => {
       try {
-        await keepsService.GetAll()
+        await keepsService.getAll()
         // document.getElementById('keepModal').
         
       } catch (error) {
@@ -37,8 +37,6 @@ export default {
       viewKeep(keep) {
         AppState.activeKeep = keep
         Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
-        
-        
       }
     }
   }
@@ -63,4 +61,24 @@ export default {
     }
   }
 }
+
+.masonry-frame {
+  columns: 6;
+
+  div {
+    break-inside: avoid;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .masonry-frame {
+    columns: 4
+  }
+}
+
+@media (max-width: 767.98px) {
+  .masonry-frame {
+    columns: 2;
+  }
+}
 </style>

keepr.client/src/pages/ProfilePage.vue

@@ -1,45 +1,118 @@
 <template>
   <div class="component">
-    <!-- none of this is loading... dafuq? -->
-    {{ profile?.name }}
-    {{ keeps[0]?.name }}
-    {{ vaults[0]?.name }}
+    <div class="container">
+      <div class="row">
+        <div class="d-flex">
+          <img :src="profile?.picture" :alt="profile?.name" class="profile-pic">
+          <div class="d-flex flex-column">
+            <h3>{{profile?.name}}</h3>
+            <h5>Vaults: {{vaults?.length}}</h5>
+            <h5>Keeps: {{keeps?.length}}</h5>
+          </div>
+        </div>
+      </div>
+      
+      <div class="row">
+        <h4>
+          Vaults
+          <i class="mdi mdi-plus"></i>
+        </h4>
+        <div class="col-12">
+          <div class="row">
+            <div v-for="v in vaults" :key="v.id" @click="viewVault(v)" class="col-6 col-md-3 col-lg-2 p-2">
+              <VaultTile :vault="v" />
+            </div>
+          </div>
+        </div>
+      </div>
 
+      <div class="row">
+        <h4>
+          Keeps
+          <i class="mdi mdi-plus"></i>
+        </h4>
+      </div>
+  <!-- masonry goes here -->
+      <div class="masonry-frame">
+        <ProfileKeepTile v-for="k in keeps" :key="k.id" :keep="k" @click="viewKeep(k)" class="py-2" />
+      </div>
+    </div>
+    <KeepModal :keep="activeKeep" />
   </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'
+import { useRouter, useRoute } from 'vue-router'
+import { Modal } from 'bootstrap'
+import { keepsService } from '../services/KeepsService';
+import VaultTile from '../components/VaultTile.vue';
 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)
-        }
-      })
+        const router = useRouter();
+        const route = useRoute();
+        onMounted(async () => {
+            try {
+                await profilesService.getProfile(route.params.id);
+                await profilesService.getVaults(AppState.activeProfile.id);
+                await profilesService.getKeeps(AppState.activeProfile.id);
+            }
+            catch (error) {
+                logger.error(error);
+            }
+        });
         return {
-          components: { VaultsList, KeepsList },
-          profile: computed(() => {AppState.activeProfile}),
-          keeps: computed(() => {AppState.profileKeeps}),
-          vaults: computed(() => {AppState.profileVaults})
+            // no curly gorls
+            profile: computed(() => AppState.activeProfile),
+            keeps: computed(() => AppState.profileKeeps),
+            vaults: computed(() => AppState.profileVaults),
+            activeKeep: computed(() => AppState.activeKeep),
+
+            async viewKeep(keep) {
+                keep.creator = AppState.activeProfile;
+                AppState.activeKeep = keep;
+                Modal.getOrCreateInstance(document.getElementById("keepModal")).show();
+            },
+
+            async viewVault(vault) {
+              router.push({name: 'Vault', params: {id: vault.id}})
+            }
         };
-    }
+    },
+    components: { VaultTile }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.profile-pic {
+  height: 200px;
+  width: 200px;
+  object-fit: contain;
+}
+
+.masonry-frame {
+  columns: 6;
+
+  div {
+    break-inside: avoid;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .masonry-frame {
+    columns: 4
+  }
+}
+
+@media (max-width: 767.98px) {
+  .masonry-frame {
+    columns: 2;
+  }
+}
 
 </style>

keepr.client/src/pages/VaultPage.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="component">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 d-flex justify-content-between">
+          <div>
+            <h4>{{ vault.name }}</h4>
+            <h6>Keeps: vaultKeep stoufe</h6>
+          </div>
+          <i @click="" class="mdi mdi-delete"></i>
+        </div>
+      </div>
+      <div class="masonry-frame">
+        <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2">
+          <KeepTile :keep="k" />
+        </div>
+      </div>
+    </div>
+  <KeepModal :keep="activeKeep" />
+  </div>
+</template>
+
+
+<script>
+import { profilesService } from '../services/ProfilesService'
+import { computed, onMounted } from 'vue'
+import { AppState } from '../AppState';
+import { logger } from '../utils/Logger.js'
+import { useRouter, useRoute } from 'vue-router'
+import { Modal } from 'bootstrap'
+import { keepsService } from '../services/KeepsService';
+import { vaultsService } from '../services/VaultsService'
+import KeepTile from '../components/KeepTile.vue';
+import KeepModal from '../components/KeepModal.vue';
+export default {
+  setup() {
+    const route = useRoute();
+    onMounted(async () => {
+      await vaultsService.getVault(route.params.id);
+      await vaultsService.getVaultKeeps(route.params.id);
+    });
+    return {
+      vault: computed(() => AppState.activeVault),
+      keeps: computed(() => AppState.vaultKeeps),
+      activeKeep: computed(() => AppState.activeKeep),
+
+      viewKeep(keep) {
+        AppState.activeKeep = keep
+        Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
+      }
+    };
+  },
+  components: { KeepTile, KeepModal }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.masonry-frame {
+  columns: 6;
+
+  div {
+    break-inside: avoid;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .masonry-frame {
+    columns: 4
+  }
+}
+
+@media (max-width: 767.98px) {
+  .masonry-frame {
+    columns: 2;
+  }
+}
+</style>

keepr.client/src/router.js

@@ -18,9 +18,14 @@ const routes = [
     beforeEnter: authGuard
   },
   {
-    path: '/profile',
+    path: '/profile/:id',
     name: 'Profile',
     component: loadPage('ProfilePage')
+  },
+  {
+    path: '/vault/:id',
+    name: 'Vault',
+    component: loadPage('VaultPage')
   }
 ]
 

keepr.client/src/services/KeepsService.js

@@ -3,7 +3,7 @@ import { logger } from '../utils/Logger'
 import { api } from './AxiosService'
 
 class KeepsService {
-  async GetAll() {
+  async getAll() {
     try {
       const res = await api.get('api/keeps')
       AppState.keeps = res.data
@@ -11,6 +11,15 @@ class KeepsService {
       logger.error(error)
     }
   }
+
+  async getById(id) {
+    try {
+      const res = await api.get('api/keeps/' + id)
+      AppState.keeps = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
 }
 
 export const keepsService = new KeepsService()

keepr.client/src/services/VaultsService.js

@@ -0,0 +1,25 @@
+import { AppState } from '../AppState'
+import { logger } from '../utils/Logger'
+import { api } from './AxiosService'
+
+class VaultsService {
+  async getVault(vaultId) {
+    try {
+      const res = await api.get('api/vaults/' + vaultId)
+      AppState.activeVault = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  async getVaultKeeps(vaultId) {
+    try {
+      const res = await api.get('api/vaults/' + vaultId + '/keeps')
+      AppState.vaultKeeps = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+}
+
+export const vaultsService = new VaultsService()