traxxx-web/components/stashes/stashes.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>