95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<template>
|
|
<div class="modal-overlay" @click.self="$emit('close')">
|
|
<div class="modal-content">
|
|
<h2 class="text-xl font-bold mb-4">{{ __('api.print_dialog.title') }}</h2>
|
|
<p class="mb-4">{{ __('api.print_dialog.quantity_prompt') }}</p>
|
|
|
|
<div class="flex items-center justify-center space-x-4 mb-6">
|
|
<button @click="decrementQuantity" class="quantity-button">
|
|
-
|
|
</button>
|
|
<span class="text-5xl font-bold">{{ quantity }}</span>
|
|
<button @click="incrementQuantity" class="quantity-button">
|
|
+
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-2">
|
|
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
|
|
{{ __('api.print_dialog.cancel_button') }}
|
|
</button>
|
|
<button @click="confirmPrint" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
|
|
{{ __('api.print_dialog.print_button') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
maxCopies: {
|
|
type: Number,
|
|
default: 10, // Default max if not provided
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['close', 'printConfirmed']);
|
|
|
|
const quantity = ref(1);
|
|
|
|
const incrementQuantity = () => {
|
|
if (quantity.value < props.maxCopies) {
|
|
quantity.value++;
|
|
}
|
|
};
|
|
|
|
const decrementQuantity = () => {
|
|
if (quantity.value > 1) {
|
|
quantity.value--;
|
|
}
|
|
};
|
|
|
|
const confirmPrint = () => {
|
|
emit('printConfirmed', quantity.value);
|
|
};
|
|
|
|
// Watch for changes in maxCopies prop and adjust quantity if it exceeds new max
|
|
watch(() => props.maxCopies, (newMax) => {
|
|
if (quantity.value > newMax) {
|
|
quantity.value = newMax;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--color-background);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
width: 90%;
|
|
max-width: 400px;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.quantity-button {
|
|
@apply bg-blue-500 text-white rounded-full w-16 h-16 flex items-center justify-center text-4xl font-bold;
|
|
@apply hover:bg-blue-600 transition-colors duration-200;
|
|
}
|
|
</style> |