feat: added feedback when sending feedback and saved feedback in local storage

Closes #12
This commit is contained in:
2026-06-18 22:32:00 +02:00 Unverified
parent ef92cd91b2
commit bb88c2ed4b
2 changed files with 87 additions and 46 deletions
-4
View File
@@ -70,11 +70,9 @@ const reportsByStatus = computed(() =>
.filter((item) => item.total > 0) .filter((item) => item.total > 0)
) )
// --- INIZIO LOGICA PAGINAZIONE ---
const currentPage = ref(1) const currentPage = ref(1)
const itemsPerPage = ref(12) const itemsPerPage = ref(12)
// Reset alla pagina 1 quando cambiano i filtri
watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => { watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
currentPage.value = 1 currentPage.value = 1
}) })
@@ -93,7 +91,6 @@ const paginatedReports = computed(() => {
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
currentPage.value = page currentPage.value = page
} }
// --- FINE LOGICA PAGINAZIONE ---
const formatDate = (value?: string) => { const formatDate = (value?: string) => {
if (!value) return '-' if (!value) return '-'
@@ -245,7 +242,6 @@ const truncate = (value?: string, max = 120) => {
</div> </div>
</div> </div>
<!-- Paginazione Component -->
<div class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1"> <div class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1">
<span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span> <span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
+49 -4
View File
@@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
definePageMeta({ definePageMeta({
middleware: 'auth', middleware: 'auth',
}) })
@@ -34,6 +36,19 @@ const isFeedbackOpen = ref(false)
const feedbackRating = ref(5) const feedbackRating = ref(5)
const feedbackComment = ref('') const feedbackComment = ref('')
const isSubmittingFeedback = ref(false) const isSubmittingFeedback = ref(false)
const submittedFeedback = ref<{ rating: number; comment?: string } | null>(null)
// Carica l'eventuale feedback da local storage dopo il mount (per evitare mismatch nel SSR)
onMounted(() => {
try {
const saved = localStorage.getItem(`feedback_${reportId}`)
if (saved) {
submittedFeedback.value = JSON.parse(saved)
}
} catch (error) {
console.error('Errore nel recupero del feedback da local storage:', error)
}
})
const handleSendMessage = async (messageText: string, files: File[]) => { const handleSendMessage = async (messageText: string, files: File[]) => {
isSubmittingMessage.value = true isSubmittingMessage.value = true
@@ -51,13 +66,18 @@ const handleSendMessage = async (messageText: string, files: File[]) => {
const handleSubmitFeedback = async () => { const handleSubmitFeedback = async () => {
isSubmittingFeedback.value = true isSubmittingFeedback.value = true
try { try {
await addFeedback(reportId, { const feedbackData = {
rating: feedbackRating.value, rating: feedbackRating.value,
comment: feedbackComment.value || undefined, comment: feedbackComment.value || undefined,
}) }
await addFeedback(reportId, feedbackData)
// Salva in local storage in mancanza di un endpoint dal backend
localStorage.setItem(`feedback_${reportId}`, JSON.stringify(feedbackData))
submittedFeedback.value = feedbackData
isFeedbackOpen.value = false isFeedbackOpen.value = false
feedbackRating.value = 5
feedbackComment.value = ''
await refreshReport() await refreshReport()
} catch (error) { } catch (error) {
console.error('Error submitting feedback:', error) console.error('Error submitting feedback:', error)
@@ -251,6 +271,30 @@ const formatDate = (dateString: string): string => {
<div v-if="canFeedback && isOwner" class="card card-bg border-0 shadow-sm mb-4"> <div v-if="canFeedback && isOwner" class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body"> <div class="card-body">
<h2 class="h6 mb-3">Valuta intervento</h2> <h2 class="h6 mb-3">Valuta intervento</h2>
<template v-if="submittedFeedback">
<div class="alert alert-success small mb-3">
Grazie! Il tuo feedback è stato inviato con successo.
</div>
<div class="mb-3">
<span class="d-block text-muted small mb-1">La tua valutazione</span>
<div class="d-flex gap-1">
<BIIcon
v-for="n in 5"
:key="n"
:name="n <= submittedFeedback.rating ? 'it-star-full' : 'it-star-outline'"
size="sm"
:color="n <= submittedFeedback.rating ? 'warning' : 'primary'"
/>
</div>
</div>
<div v-if="submittedFeedback.comment">
<span class="d-block text-muted small mb-1">Il tuo commento</span>
<p class="mb-0 small text-break">{{ submittedFeedback.comment }}</p>
</div>
</template>
<template v-else>
<p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p> <p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p>
<button <button
v-if="!isFeedbackOpen" v-if="!isFeedbackOpen"
@@ -296,6 +340,7 @@ const formatDate = (dateString: string): string => {
</button> </button>
</div> </div>
</template> </template>
</template>
</div> </div>
</div> </div>