feat: added feedback when sending feedback and saved feedback in local storage
Closes #12
This commit is contained in:
@@ -70,11 +70,9 @@ const reportsByStatus = computed(() =>
|
||||
.filter((item) => item.total > 0)
|
||||
)
|
||||
|
||||
// --- INIZIO LOGICA PAGINAZIONE ---
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = ref(12)
|
||||
|
||||
// Reset alla pagina 1 quando cambiano i filtri
|
||||
watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
@@ -93,7 +91,6 @@ const paginatedReports = computed(() => {
|
||||
const handlePageChange = (page: number) => {
|
||||
currentPage.value = page
|
||||
}
|
||||
// --- FINE LOGICA PAGINAZIONE ---
|
||||
|
||||
const formatDate = (value?: string) => {
|
||||
if (!value) return '-'
|
||||
@@ -245,7 +242,6 @@ const truncate = (value?: string, max = 120) => {
|
||||
</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">
|
||||
<span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
|
||||
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
@@ -34,6 +36,19 @@ const isFeedbackOpen = ref(false)
|
||||
const feedbackRating = ref(5)
|
||||
const feedbackComment = ref('')
|
||||
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[]) => {
|
||||
isSubmittingMessage.value = true
|
||||
@@ -51,13 +66,18 @@ const handleSendMessage = async (messageText: string, files: File[]) => {
|
||||
const handleSubmitFeedback = async () => {
|
||||
isSubmittingFeedback.value = true
|
||||
try {
|
||||
await addFeedback(reportId, {
|
||||
const feedbackData = {
|
||||
rating: feedbackRating.value,
|
||||
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
|
||||
feedbackRating.value = 5
|
||||
feedbackComment.value = ''
|
||||
await refreshReport()
|
||||
} catch (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 class="card-body">
|
||||
<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>
|
||||
<button
|
||||
v-if="!isFeedbackOpen"
|
||||
@@ -296,6 +340,7 @@ const formatDate = (dateString: string): string => {
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user