From 49b0a962a537b38b65fb061763d6de787ef6e8f5 Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Mon, 23 Dec 2024 16:14:07 -0500
Subject: [PATCH] Add print view

---
 src/views/PrintView.vue | 68 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/views/PrintView.vue

diff --git a/src/views/PrintView.vue b/src/views/PrintView.vue
new file mode 100644
index 0000000..4e436a8
--- /dev/null
+++ b/src/views/PrintView.vue
@@ -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>