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