can delete vaults, and delete from vaults

keepr.client/src/AppState.js

@@ -10,5 +10,6 @@ export const AppState = reactive({
   profileKeeps: [],
   profileVaults: [],
   vaultKeeps: [],
-  activeVault: {}
+  activeVault: {},
+  myVaults: []
 })

keepr.client/src/components/KeepModalButtons.vue

@@ -7,7 +7,7 @@
         <button id="addToVaultGroup" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
           aria-expanded="false">Add to Vault</button>
         <ul class="dropdown-menu" aria-labelledby="addToVaultGroup">
-          <!-- <li v-for="v in userVaults"><a @click="addToVault(v.id)" class="dropdown-item">{{v.name}}</a></li> -->
+          <li v-for="v in myVaults" :key="v.id"><a @click="addToVault(v.id)" class="dropdown-item">{{v.name}}</a></li>
         </ul>
       </div>
 
@@ -27,11 +27,14 @@
 
 <script>
 import { AppState } from '../AppState'
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { Modal } from 'bootstrap'
 import { logger } from '../utils/Logger.js'
 import { useRouter } from 'vue-router'
 import { keepsService } from '../services/KeepsService'
+import { vaultsService } from '../services/VaultsService'
+import { profilesService } from '../services/ProfilesService'
+import { vaultKeepsService } from '../services/VaultKeepsService'
 export default {
   props: {
     keep: {
@@ -53,6 +56,7 @@ export default {
     const router = useRouter()
     return {
       account: computed(() => AppState.account ),
+      myVaults: computed(() => AppState.myVaults),
 
       viewProfile() {
         // console.log(user.name)
@@ -66,6 +70,11 @@ export default {
         await keepsService.delete(props.keep.id)
         Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
         // do more things
+      },
+
+      async addToVault(vaultId) {
+        await vaultKeepsService.create(props.keep.id, vaultId)
+        Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
       }
     }
   }

keepr.client/src/components/KeepTile.vue

@@ -5,7 +5,7 @@
       <img :src="keep.img" class="card-img rounded-3" :alt="keep.name">
       <div class="card-img-overlay d-flex justify-content-between align-items-end">
         <h5 class="card-title">{{ keep.name }}</h5>
-        <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid profile-pic">
+        <img :src="keep.creator?.picture" :alt="keep.creator?.name" class="rounded-pill img-fluid profile-pic">
       </div>
     </div>
   </div>

keepr.client/src/components/Login.vue

@@ -29,7 +29,7 @@
         class="dropdown-menu p-0 list-group w-100"
         aria-labelledby="authDropdown"
       >
-        <router-link :to="{ name: 'Account' }">
+        <router-link :to="{ name: 'Profile' , params: {id: account.id}}">
           <div class="list-group-item list-group-item-action hoverable">
             Manage Account
           </div>

keepr.client/src/components/NewKeepModal.vue

@@ -23,10 +23,10 @@
               <textarea name="keepDescription" id="keepDescription" v-model="description"
                 placeholder="Keep Description..." rows="5" class="form-control"></textarea>
             </div>
-            <div class="mb-1">
+            <!-- <div class="mb-1">
               <label for="keepTags" class="form-label">Tags</label>
               <input type="text" id="keepTags" name="keepTags" v-model="img" placeholder="Tags..." class="form-control">
-            </div>
+            </div> -->
             <button @click="createKeep()" class="btn btn-primary">Create</button>
             <!-- </form> -->
           </div>

keepr.client/src/components/VaultKeepModalButtons.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="d-flex justify-content-between align-items-end">
-    <button class="btn btn-outline-secondary">Remove from Vault</button>
+    <button v-if="account.id == vault.creatorId" @click="removeFromVault(keep.id)" class="btn btn-outline-secondary">Remove from Vault</button>
 
-    <!-- account is empty... -->
+    <i v-show="account.id == keep.creatorId" @click="deleteKeep()" class="mdi mdi-delete-outline text-secondary" title="Delete"></i>
-    <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
 
     <div @click="viewProfile(keep?.creator)" class="d-flex align-items-end">
       <img :src="keep?.creator?.picture" :alt="keep?.creator?.name" class="profile-pic rounded-3 me-2">
@@ -19,6 +18,7 @@ import { computed } from 'vue'
 import { Modal } from 'bootstrap'
 import { logger } from '../utils/Logger.js'
 import { useRouter } from 'vue-router'
+import { vaultKeepsService } from '../services/VaultKeepsService'
 export default {
   props: {
     keep: {
@@ -29,6 +29,7 @@ export default {
       img: String,
       views: Number,
       kept: Number,
+      vaultKeepId: Number,
       creator: {
         id: String,
         name: String,
@@ -39,13 +40,26 @@ export default {
   setup(props) {
     const router = useRouter()
     return {
-      account: computed(() => { AppState.account; }),
+      account: computed(() => AppState.account),
+      vault: computed(() => AppState.activeVault),
+
       viewProfile() {
         // console.log(user.name)
         // 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 } });
+      },
+
+      async removeFromVault() {
+        await vaultKeepsService.delete(props.keep.vaultKeepId)
+        Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
+      },
+
+      async deleteKeep() {
+        await keepsService.delete(props.keep.id)
+        Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
+        // do more things
       }
     }
   }
@@ -64,4 +78,9 @@ export default {
    font-size: 18px;
    font-weight: 300;
  }
+
+.mdi-delete-outline {
+  font-size: 36px;
+  line-height: 36px;
+}
 </style>

keepr.client/src/pages/AccountPage.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="about text-center">
-    <h1>Welcome {{ account.name }}</h1>
-    <img class="rounded" :src="account.picture" alt="" />
-    <p>{{ account.email }}</p>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue'
-import { AppState } from '../AppState'
-export default {
-  name: 'Account',
-  setup() {
-    return {
-      account: computed(() => AppState.account)
-    }
-  }
-}
-</script>
-
-<style scoped>
-img {
-  max-width: 100px;
-}
-</style>

keepr.client/src/pages/ProfilePage.vue

@@ -15,7 +15,7 @@
       <div class="row mt-5">
         <h4 class="profile-heading">
           Vaults
-          <i @click="newVault()" class="mdi mdi-plus"></i>
+          <i v-if="profile.id == account.id" @click="newVault()" class="mdi mdi-plus"></i>
         </h4>
         <div class="col-12">
           <div class="row">
@@ -29,7 +29,7 @@
       <div class="row mt-5">
         <h4 class="profile-heading">
           Keeps
-          <i @click="newKeep()" class="mdi mdi-plus"></i>
+          <i v-if="profile.id == account.id" @click="newKeep()" class="mdi mdi-plus"></i>
         </h4>
       </div>
   <!-- masonry goes here -->
@@ -75,6 +75,7 @@ export default {
         return {
             // no curly gorls
             profile: computed(() => AppState.activeProfile),
+            account: computed(() => AppState.account),
             keeps: computed(() => AppState.profileKeeps),
             vaults: computed(() => AppState.profileVaults),
             activeKeep: computed(() => AppState.activeKeep),

keepr.client/src/pages/VaultPage.vue

@@ -5,7 +5,7 @@
         <div class="col-12 d-flex justify-content-between">
           <div>
             <h4 class="vault-title">{{ vault.name }}</h4>
-            <h6 class="vault-stats">Keeps: vaultKeep stoufe</h6>
+            <h6 class="vault-stats">Keeps: {{ keeps.length }}</h6>
           </div>
           <div class="d-flex align-items-start">
             <button v-if="account.id == vault.creatorId" @click="deleteVault()" class="btn btn-outline-secondary">Delete Vault</button>
@@ -37,9 +37,11 @@ import { vaultsService } from '../services/VaultsService'
 import KeepTile from '../components/KeepTile.vue';
 import KeepModal from '../components/KeepModal.vue';
 import KeepModalButtons from '../components/KeepModalButtons.vue';
+import { vaultKeepsService } from '../services/VaultKeepsService';
 export default {
   setup() {
     const route = useRoute();
+    const router = useRouter()
     onMounted(async () => {
       await vaultsService.getVault(route.params.id);
       await vaultsService.getVaultKeeps(route.params.id);
@@ -53,6 +55,11 @@ export default {
       viewKeep(keep) {
         AppState.activeKeep = keep
         Modal.getOrCreateInstance(document.getElementById('keepModal')).show()
+      },
+
+      async deleteVault() {
+        await vaultsService.delete(AppState.activeVault.id, AppState.vaultKeeps)
+        router.push({ name: "Profile", params: { id: AppState.account.id } })
       }
     };
   },

keepr.client/src/router.js

@@ -11,12 +11,6 @@ const routes = [
     name: 'Home',
     component: loadPage('HomePage')
   },
-  {
-    path: '/account',
-    name: 'Account',
-    component: loadPage('AccountPage'),
-    beforeEnter: authGuard
-  },
   {
     path: '/profile/:id',
     name: 'Profile',

keepr.client/src/services/AuthService.js

@@ -5,6 +5,7 @@ import { router } from '../router'
 import { accountService } from './AccountService'
 import { api } from './AxiosService'
 import { socketService } from './SocketService'
+import { profilesService } from './ProfilesService'
 
 export const AuthService = initialize({
   domain,
@@ -27,6 +28,8 @@ AuthService.on(AuthService.AUTH_EVENTS.AUTHENTICATED, async function() {
   await accountService.getAccount()
   socketService.authenticate(AuthService.bearer)
   // NOTE if there is something you want to do once the user is authenticated, place that here
+  await profilesService.getMyVaults(AppState.account.id)
+
 })
 
 async function refreshAuthToken(config) {

keepr.client/src/services/ProfilesService.js

@@ -30,6 +30,15 @@ class ProfilesService {
       logger.error(error)
     }
   }
+
+  async getMyVaults(profileId) {
+    try {
+      const res = await api.get('api/profiles/' + profileId + '/vaults')
+      AppState.myVaults = res.data
+    } catch (error) {
+      logger.error(error)
+    }
+  }
 }
 
 export const profilesService = new ProfilesService()

keepr.client/src/services/VaultKeepsService.js

@@ -0,0 +1,34 @@
+import { AppState } from '../AppState'
+import { logger } from '../utils/Logger'
+import { api } from './AxiosService'
+import Pop from '../utils/Pop'
+import { vaultsService } from '../services/VaultsService'
+
+class VaultKeepsService {
+  async create(keepId, vaultId) {
+    try {
+      let newVaultKeep = {
+        vaultId: vaultId,
+        keepId: keepId
+      }
+      const res = await api.post('api/vaultkeeps', newVaultKeep)
+      AppState.vaultKeeps.push(res.data)
+    } catch (error) {
+      logger.error(error)
+      Pop.error(error)
+    }
+  }
+
+  async delete(vaultKeepId) {
+    try {
+      logger.log(vaultKeepId)
+      await api.delete('api/vaultkeeps/' + vaultKeepId)
+      await vaultsService.getVaultKeeps(AppState.activeVault.id)
+    } catch (error) {
+      logger.error(error)
+      Pop.error(error)
+    }
+  }
+}
+
+export const vaultKeepsService = new VaultKeepsService()

keepr.client/src/services/VaultsService.js

@@ -1,6 +1,9 @@
 import { AppState } from '../AppState'
 import { logger } from '../utils/Logger'
 import { api } from './AxiosService'
+import Pop from '../utils/Pop'
+import { profilesService } from './ProfilesService'
+import { vaultKeepsService } from './VaultKeepsService'
 
 class VaultsService {
   async getVault(vaultId) {
@@ -9,6 +12,7 @@ class VaultsService {
       AppState.activeVault = res.data
     } catch (error) {
       logger.error(error)
+      Pop.error(error)
     }
   }
 
@@ -18,6 +22,7 @@ class VaultsService {
       AppState.vaultKeeps = res.data
     } catch (error) {
       logger.error(error)
+      Pop.error(error)
     }
   }
 
@@ -25,9 +30,27 @@ class VaultsService {
     try {
       const res = await api.post('api/vaults', vaultData)
       // logger.log(res.data)
-      AppState.profileVaults.push(res.data)
+      // AppState.myVaults.push(res.data)
+      profilesService.getVaults(AppState.account.id)
+      AppState.myVaults = AppState.profileVaults
     } catch (error) {
       logger.error(error)
+      Pop.error(error)
+    }
+  }
+
+  async delete(vaultId, vaultKeeps) {
+    try {
+      // vaultKeeps will collect in db... if this isn't here
+      // for (let vk = 0; vk < vaultKeeps.length; vk++) {
+      //   await vaultKeepsService.delete(vaultKeeps[vk].id)
+      // }
+      await api.delete('api/vaults/' + vaultId)
+      profilesService.getVaults(AppState.account.id)
+      AppState.myVaults = AppState.profileVaults
+    } catch (error) {
+      logger.error(error)
+      Pop.error(error)
     }
   }
 }