1
0
Fork 0

Add print view

This commit is contained in:
Brian D 2024-12-23 16:14:07 -05:00
parent 86de4e5827
commit 49b0a962a5

68
src/views/PrintView.vue Normal file
View file

@ -0,0 +1,68 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Avatar from 'primevue/avatar'
import Panel from 'primevue/panel'
import Sticker from '@/components/Sticker.vue'
import { type User } from '@/stores/sessionStore'
import { useUserStore } from '@/stores/userStore'
import { useStickersStore } from '@/stores/stickersStore'
const userStore = useUserStore();
const { getUser } = userStore;
const route = useRoute();
const username = ref<string>(route.params.username as string);
console.log(username);
let user = ref<User>();
const stickersStore = useStickersStore();
onMounted(async () => {
await userStore.fetch(username.value);
user.value = getUser(username.value);
});
</script>
<template>
<!-- <Panel>-->
<!-- from {{ user?.name }}-->
<!-- </Panel>-->
<Panel>
<div class="stickers">
<div class="stickerWrapper" v-for="sticker_id in user?.sticker_ids">
<RouterLink :to="{ name: 'sticker', params: { id: sticker_id }}">
<Sticker v-bind="stickersStore.getSticker(sticker_id)" />
</RouterLink>
</div>
</div>
<div class="stickers">
<div v-for="sticker in stickersStore.getStickersCreatedBy(user?.username)">
<div class="stickerWrapper">
<Sticker v-bind="sticker" />
</div>
</div>
</div>
</Panel>
</template>
<style scoped>
.stickers {
display: flex;
flex-direction: column;
gap: 10px;
}
.stickerWrapper {
background-color: #F2F2F2;
display: flex;
flex-direction: column;
padding: 10px;
.sticker {
width: 300px;
@media (screen(sm)) {
zoom: 250%;
}
}
}
</style>