activist/src/views/StickerView.vue

<script setup lang="ts">
import {computed, onBeforeMount, ref} from 'vue';
import Button from 'primevue/button';
import Panel from 'primevue/panel';
import Sticker from "@/components/Sticker.vue";
import { useRoute } from 'vue-router';
import { useUserStore } from "@/stores/userStore";
import { useStickerStore } from "@/stores/stickerStore";

const stickerStore = useStickerStore();
const userStore = useUserStore();

const route = useRoute();
const uuid = ref<string>(route.params.uuid as string);
// const uuid = ref(route.params.uuid);

onBeforeMount(async () => {
  await stickerStore.fetch(uuid.value);
});

const first = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[0], parts[1], parts[2]].join('-');
})
const second = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[3], parts[4]].join('-');
})

function claimSticker() {
  stickerStore.setOwner(userStore.user);
}

</script>

<template>
  <div class="profilePage">
    <Panel>
      <div class="flex flex-row content-end">
        <div>
          <div class="font-mono text-sn tracking-wider col">
            {{ first }}
          </div>
          <div class="font-mono text-sn tracking-wider col">
            {{ second }}
          </div>
        </div>
      </div>
    </Panel>
    <Panel header="Sticker">
      <div class="flex flex-col gap-5">
        <div id="StickerWrapper">
          <Sticker
            v-bind="stickerStore.sticker"
            v-if="stickerStore.sticker"
          />
        </div>
        <Button
            v-bind:disabled="userStore.isAnonymous"
            v-if="stickerStore.sticker?.owner == null"
            v-on:click="claimSticker">
          This is my sticker!
        </Button>
        <span v-if="userStore.isAnonymous">
            Log in to claim your sticker.
          </span>
      </div>
    </Panel>
  </div>
</template>

<style scoped>
#StickerWrapper {
  background-color: #DDD;
  padding: 12px;
}
</style>