reloia
47327d3a69
- Create report creation page with step-by-step media uploads and categories loading - Create report details view page with history events log and messaging section - Implement MessageComposer and MessageList components for chat workflow - Implement MediaUploader with drag-and-drop support, file type, and size validation - Implement Pagination component with dynamic buttons and ellipsis support - Implement user profile settings summary page and notifications listing page
83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
interface Emits {
|
|
(e: 'send', message: string): void
|
|
}
|
|
|
|
// Unica dichiarazione di defineEmits
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const message = ref('')
|
|
const isSubmitting = ref(false)
|
|
|
|
const handleSubmit = () => {
|
|
if (message.value.trim() === '') return
|
|
|
|
emit('send', message.value)
|
|
message.value = ''
|
|
}
|
|
|
|
const handleKeydown = (e: KeyboardEvent) => {
|
|
// Ctrl/Cmd + Enter per inviare
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
|
// Previene l'andata a capo predefinita della textarea
|
|
e.preventDefault()
|
|
handleSubmit()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="message-composer mt-4 border-top pt-3">
|
|
<!-- Non serve passare emit qui -->
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="input-group">
|
|
<textarea
|
|
v-model="message"
|
|
class="form-control"
|
|
placeholder="Scrivi un messaggio... (Ctrl+Enter per inviare)"
|
|
rows="2"
|
|
:disabled="isSubmitting"
|
|
@keydown="handleKeydown"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary"
|
|
:disabled="isSubmitting || message.trim() === ''"
|
|
>
|
|
<span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
<BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
|
|
Invia
|
|
</button>
|
|
</div>
|
|
<small class="text-muted d-block mt-2">
|
|
💡 <strong>Tip:</strong> Premi Ctrl+Enter per inviare velocemente
|
|
</small>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.message-composer {
|
|
background-color: #f9f9f9;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
textarea {
|
|
flex: 1;
|
|
}
|
|
|
|
button {
|
|
flex-shrink: 0;
|
|
}
|
|
</style> |