props to keepModal working

keepr.client/src/AppState.js

@@ -4,5 +4,6 @@ import { reactive } from 'vue'
 export const AppState = reactive({
   user: {},
   account: {},
-  keeps: []
+  keeps: [],
+  activeKeep: {}
 })

keepr.client/src/components/KeepModal.vue

@@ -0,0 +1,53 @@
+ <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-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>
+        </div>
+      </div>
+    </div>
+  </div>
+ </template>
+ 
+ 
+ <script>
+ 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 {}
+  }
+ }
+ </script>
+ 
+ 
+ <style lang="scss" scoped>
+ 
+ </style>

keepr.client/src/components/KeepTile.vue

@@ -1,32 +1,50 @@
 <template>
-  <div @click="" class="component">
+  <div @click="viewKeep()" class="component">
-      <div class="card bg-dark text-white">
+    <div class="card bg-dark text-white">
-        <!-- TODO check if keep.img is a valid image -->
+      <!-- TODO check if keep.img is a valid image -->
-        <img :src="keep.img" class="card-img" :alt="keep.name">
+      <img :src="keep.img" class="card-img" :alt="keep.name">
-        <div class="card-img-overlay d-flex justify-content-between align-items-end">
+      <div class="card-img-overlay d-flex justify-content-between align-items-end">
-          <h5 class="card-title">{{ keep.name }}</h5>
+        <h5 class="card-title">{{ keep.name }}</h5>
-          <a href="#">
+        <a href="#">
-            <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
+          <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
-          </a>
+        </a>
-        </div>
       </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'
-import { Keep } from "../models/Keep.js"
+
 export default {
   props: {
     keep: {
-      type: 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 {}
+    return {
+      viewKeep() {
+        AppState.activeKeep = props.keep;
+        // console.log(props.keep.id)
+        // router.push({name: 'Keep'})
+      }
+    }
   }
 }
 </script>
@@ -35,6 +53,7 @@ export default {
 <style lang="scss" scoped>
 .card-img {
   min-height: 160px;
+  max-height: 80vh;
 }
 
 .card-img-overlay img {

keepr.client/src/models/Keep.js

@@ -1,12 +0,0 @@
-export class Keep {
-  constructor(keepData) {
-    this.id = keepData.id
-    this.creatorId = keepData.creatorId
-    this.name = keepData.name
-    this.description = keepData.description
-    this.img = keepData.img
-    this.views = keepData.views
-    this.kept = keepData.kept
-    this.creator = keepData.creator
-  }
-}

keepr.client/src/models/Profile.js

@@ -1,7 +0,0 @@
-export class Profile {
-  constructor(profileData) {
-    this.id = profileData.id
-    this.name = profileData.name
-    this.picture = profileData.picture
-  }
-}

keepr.client/src/pages/HomePage.vue

@@ -2,12 +2,13 @@
   <!-- 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" class="col-6 col-md-4 col-lg-3 p-2">
+      <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="col-6 col-md-4 col-lg-3 p-2">
       <!-- <img src="../assets/img/404.svg" alt=""> TODO use this as default img in DB-->
         <KeepTile :keep="k" />
       </div>
     </div>
   </div>
+  <KeepModal :keep="activeKeep" />
 </template>
 
 <script>
@@ -15,19 +16,30 @@ import { computed, onMounted, ref } from 'vue'
 import { AppState } from '../AppState.js'
 import { logger } from '../utils/Logger.js'
 import { keepsService } from '../services/KeepsService.js'
+import { Modal } from 'bootstrap'
 export default {
   name: 'Home',
   setup() {
     onMounted(async () => {
       try {
         await keepsService.GetAll()
+        // document.getElementById('keepModal').
+        
       } catch (error) {
         logger.error(error)
       }
     })
 
     return {
-      keeps: computed(() => AppState.keeps)
+      keeps: computed(() => AppState.keeps),
+      activeKeep: computed(() => AppState.activeKeep),
+
+      viewKeep(keep) {
+        AppState.activeKeep = keep
+        Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
+        
+        
+      }
     }
   }
 }