Ryan Kegel
c18d202ecc
All checks were successful
Chore App Build and Push Docker Images / build-and-push (push) Successful in 1m11s
115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
|
<div class="notification-view">
|
|
<MessageBlock v-if="notificationListCountRef === 0" message="No new notifications">
|
|
</MessageBlock>
|
|
|
|
<ItemList
|
|
v-else
|
|
:key="refreshKey"
|
|
: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, onMounted, onUnmounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import ItemList from '../shared/ItemList.vue'
|
|
import MessageBlock from '../shared/MessageBlock.vue'
|
|
import type { PendingReward, Event, ChildRewardRequestEventPayload } from '@/common/models'
|
|
import { PENDING_REWARD_FIELDS } from '@/common/models'
|
|
import { eventBus } from '@/common/eventBus'
|
|
|
|
const router = useRouter()
|
|
|
|
const notificationListCountRef = ref(-1)
|
|
const refreshKey = ref(0)
|
|
|
|
function handleNotificationClick(item: PendingReward) {
|
|
router.push({ name: 'ParentView', params: { id: item.child_id } })
|
|
}
|
|
|
|
function handleRewardRequest(event: Event) {
|
|
const payload = event.payload as ChildRewardRequestEventPayload
|
|
if (
|
|
payload.operation === 'CREATED' ||
|
|
payload.operation === 'CANCELLED' ||
|
|
payload.operation === 'GRANTED'
|
|
) {
|
|
// Reset count and bump key to force ItemList to re-mount and refetch
|
|
notificationListCountRef.value = -1
|
|
refreshKey.value++
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
eventBus.on('child_reward_request', handleRewardRequest)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
eventBus.off('child_reward_request', handleRewardRequest)
|
|
})
|
|
</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>
|