79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<template>
|
|
<section class="profile-section">
|
|
<div class="section-header">
|
|
<h3 class="heading">Stashes</h3>
|
|
|
|
<button
|
|
v-if="profile.id === user?.id"
|
|
class="button"
|
|
@click="showStashDialog = true"
|
|
>
|
|
<Icon icon="folder-plus2" />
|
|
<span class="button-label">New stash</span>
|
|
</button>
|
|
</div>
|
|
|
|
<StashDialog
|
|
v-if="showStashDialog"
|
|
@created="showStashDialog = false; reloadStashes();"
|
|
@close="showStashDialog = false"
|
|
/>
|
|
|
|
<ul class="stashes nolist">
|
|
<li
|
|
v-for="stash in stashes"
|
|
:key="`stash-${stash.id}`"
|
|
>
|
|
<StashTile
|
|
:stash="stash"
|
|
:profile="profile"
|
|
@reload="reloadStashes"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, inject } from 'vue';
|
|
|
|
import StashTile from '#/components/stashes/tile.vue';
|
|
import StashDialog from '#/components/stashes/create.vue';
|
|
|
|
import { get } from '#/src/api.js';
|
|
|
|
const pageContext = inject('pageContext');
|
|
|
|
const user = pageContext.user;
|
|
const stashes = ref(pageContext.pageProps.stashes);
|
|
const profile = ref(pageContext.pageProps.profile);
|
|
|
|
const showStashDialog = ref(false);
|
|
|
|
async function reloadStashes() {
|
|
// profile.value = await get(`/users/${profile.value.id}`);
|
|
stashes.value = await get(`/users/${profile.value.id}/stashes`);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stashes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
|
gap: .5rem;
|
|
padding: 0 0 1rem 0;
|
|
}
|
|
|
|
@media(--compact) {
|
|
.stashes {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
}
|
|
|
|
@media(--small-20) {
|
|
.stashes {
|
|
padding: 0 .5rem 1rem .5rem;
|
|
}
|
|
}
|
|
</style>
|