Annika/keepr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

can delete vaults, and delete from vaults

Browse Source
This commit is contained in:
Annika
2022-08-04 15:12:01 -06:00
parent d21c78a4b2
commit 8687926934
14 changed files with 121 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
keepr.client/src/AppState.js
+2 -1
View File
@@ -10,5 +10,6 @@ export const AppState = reactive({
profileKeeps: [],
profileVaults: [],
vaultKeeps: [],
activeVault: {}
activeVault: {},
myVaults: []
})
keepr.client/src/components/KeepModalButtons.vue
+11 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+23 -4
View File
@@ -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... -->
<button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
<i v-show="account.id == keep.creatorId" @click="deleteKeep()" class="mdi mdi-delete-outline text-secondary" title="Delete"></i>
<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
-26
View File
@@ -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
+3 -2
View File
@@ -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
+8 -1
View File
@@ -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
-6
View File
@@ -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
+3
View File
@@ -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
+9
View File
@@ -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
+34
View File
@@ -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
+24 -1
View File
@@ -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)
}
}
}