Ryan Kegel
a0a059472b
Some checks failed
Gitea Actions Demo / build-and-push (push) Failing after 6s
86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<template>
|
|
<div class="notification-view">
|
|
<ItemList
|
|
:fetchUrl="`/api/pending-rewards`"
|
|
itemKey="rewards"
|
|
:itemFields="PENDING_REWARD_FIELDS"
|
|
:imageFields="['child_image_id', 'reward_image_id']"
|
|
@clicked="handleNotificationClick"
|
|
@loading-complete="(count) => (notificationListCountRef = count)"
|
|
>
|
|
<template #item="{ item }">
|
|
<div class="notification-centered">
|
|
<div class="child-info">
|
|
<img v-if="item.child_image_url" :src="item.child_image_url" alt="Child" />
|
|
<span>{{ item.child_name }}</span>
|
|
</div>
|
|
<span class="requested-text">requested</span>
|
|
<div class="reward-info">
|
|
<span>{{ item.reward_name }}</span>
|
|
<img v-if="item.reward_image_url" :src="item.reward_image_url" alt="Reward" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ItemList>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import ItemList from '../shared/ItemList.vue'
|
|
import type { PendingReward } from '@/common/models'
|
|
import { PENDING_REWARD_FIELDS } from '@/common/models'
|
|
|
|
const router = useRouter()
|
|
|
|
const notificationListCountRef = ref(-1)
|
|
|
|
function handleNotificationClick(item: PendingReward) {
|
|
router.push({ name: 'ParentView', params: { id: item.child_id } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.notification-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
min-height: 0;
|
|
}
|
|
.notification-centered {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-inline: auto;
|
|
align-items: center;
|
|
}
|
|
.child-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-weight: 600;
|
|
color: var(--dialog-child-name);
|
|
}
|
|
|
|
.reward-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin-bottom: 0rem;
|
|
font-weight: 600;
|
|
color: var(--notification-reward-name);
|
|
}
|
|
|
|
.requested-text {
|
|
margin: 0 0.7rem;
|
|
font-weight: 500;
|
|
color: var(--dialog-message);
|
|
font-size: 1.05rem;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|