Ryan Kegel
127378797c
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 2m46s
48 lines
1.0 KiB
Vue
48 lines
1.0 KiB
Vue
<template>
|
|
<ModalDialog
|
|
v-if="task"
|
|
title="Confirm Task"
|
|
:subtitle="task.name"
|
|
:imageUrl="task.image_url"
|
|
@backdrop-click="$emit('cancel')"
|
|
>
|
|
<div class="modal-message">
|
|
{{ task.type === 'penalty' ? 'Subtract' : 'Add' }} these points
|
|
{{ task.type === 'penalty' ? 'from' : 'to' }}
|
|
<span class="child-name">{{ childName }}</span>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button @click="$emit('confirm')" class="btn btn-primary">Yes</button>
|
|
<button @click="$emit('cancel')" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</ModalDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ModalDialog from '../shared/ModalDialog.vue'
|
|
import type { Task } from '@/common/models'
|
|
|
|
defineProps<{
|
|
task: Task | null
|
|
childName?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
confirm: []
|
|
cancel: []
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal-message {
|
|
margin-bottom: 1.2rem;
|
|
font-size: 1rem;
|
|
color: var(--modal-message-color, #333);
|
|
}
|
|
|
|
.child-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
</style>
|