Add print view
This commit is contained in:
parent
86de4e5827
commit
49b0a962a5
1 changed files with 68 additions and 0 deletions
68
src/views/PrintView.vue
Normal file
68
src/views/PrintView.vue
Normal 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>
|
||||
Loading…
Reference in a new issue