activist/src/views/ProfileView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import Avatar from 'primevue/avatar'
import Button from 'primevue/button'
import Card from 'primevue/card'
import Chip from 'primevue/chip'
import MeterGroup from 'primevue/metergroup'
import Panel from 'primevue/panel'
import Timeline from 'primevue/timeline'

import Sticker from '@/components/Sticker.vue'
import { useSessionStore } from '@/stores/sessionStore'
import { type User } from '@/stores/sessionStore'
import { useUserStore } from '@/stores/userStore'
import { useStickersStore } from '@/stores/stickersStore'


const sessionStore = useSessionStore();
const userStore = useUserStore();
const { getUser } = userStore;
const route = useRoute();
const username = ref<string>(route.params.username as string);
let user = ref<User>();
const stickersStore = useStickersStore();

onMounted(async () => {
  await userStore.fetch(username.value);
  user.value = getUser(username.value);
});

const myPage = computed(() => {
  return !sessionStore.isAnonymous && sessionStore.user.username == user.value?.username;
});

const meterValue = ref([
  { label: 'Apps', color: '#34d399', value: 20 },
  { label: 'Messages', color: '#fbbf24', value: 10 },
  { label: 'Media', color: '#60a5fa', value: 25 },
  { label: 'System', color: '#c084fc', value: 45 }
]);

const events = [{
  color: '#34d399',
  date: "2024-01-01",
  description: "outside white house",
  icon: 'pi pi-megaphone',
  title: "protested",
},{
  color: '#60a5fa',
  date: "2024-01-02",
  description: "Mark Warner",
  icon: 'pi pi-envelope',
  title: "wrote senator",
},{
  color: '#c084fc',
  date: "2024-01-02",
  description: "Working Families Party",
  icon: 'pi pi-graduation-cap',
  title: "attended training",
},];
</script>

<template>
  <div class="profilePage">
    <Panel>
      <div class="flex flex-row content-end">
        <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
        <div>
          {{ user?.name }}
        </div>
      </div>
    </Panel>
    <Panel header="Stickers">
      <div class="stickers">
        <div class="stickerWrapper" v-for="sticker_id in user?.sticker_ids">
          <RouterLink :to="{ name: 'sticker', params: { uuid: sticker_id }}">
            <Sticker v-bind="stickersStore.getSticker(sticker_id)" />
          </RouterLink>
        </div>
        <Button
            as="router-link"
            to="/sticker"
            v-if="myPage">
          New sticker
        </Button>
      </div>
    </Panel>
    <Panel header="Metrics">
      <MeterGroup :value="meterValue" />
    </Panel>
    <div class="grid sm:grid-cols-2 gap-2">
      <div id=1 class="flex">
        <Panel header="Activities">
          <Timeline
            align="left"
            class="h-128 overflow-hidden"
            :pt="{ eventOpposite: { class: 'hidden' } }"
            :value="events">
            <template #marker="slotProps">
            <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
              <i :class="slotProps.item.icon"></i>
            </span>
            </template>
            <template #content="slotProps">
              <Card class="mt-4">
                <template #header>
                  <img v-if="slotProps.item.image" :src="`/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
                </template>
                <template #title>
                  {{ slotProps.item.title }} <span class="text-gray-400 text-sm">{{ slotProps.item.date }}</span>
                </template>
                <template #content>
                  <p>
                    {{ slotProps.item.description }}
                  </p>
                  <Button label="Read more" text></Button>
                </template>
              </Card>
            </template>
          </Timeline>
        </Panel>
      </div>
      <div id=2 class="flex items-center justify-center">
        <Panel header="Tags">
          <Chip label="labor" icon="pi pi-wrench" />
          <Chip label="feminism" icon="pi pi-venus" />
          <Chip label="environmental" icon="pi pi-globe" />
          <Chip label="protest" icon="pi pi-megaphone" />
          <Chip label="tech" icon="pi pi-save" />
          <Chip label="electoral" icon="pi pi-box" />
          <Chip label="mapper" icon="pi pi-map" />
          <Chip label="anti-capitalist" icon="pi pi-wallet" />
        </Panel>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profilePage {
  @apply p-2 gap-2;
  display: flex;
  flex-direction: column;
}
.stickers {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stickerWrapper {
  background-color: #F2F2F2;
  padding: 10px;
  width: 300px;
}
</style>