feat: implement citizen report creation, detail view, and chat system

- 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
2026-06-12 19:04:19 +02:00
parent 4c6367b328
commit 47327d3a69
9 changed files with 1800 additions and 0 deletions
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+interface Props {
+  currentPage: number
+  perPage: number
+  totalItems: number
+}
+
+interface Emits {
+  (e: 'page-change', page: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentPage: 1,
+  perPage: 10,
+  totalItems: 0
+})
+
+const emit = defineEmits<Emits>()
+
+const totalPages = computed(() => Math.ceil(props.totalItems / props.perPage))
+
+const goToPage = (page: number) => {
+  if (page >= 1 && page <= totalPages.value) {
+    emit('page-change', page)
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+const pageNumbers = computed(() => {
+  const pages: (number | string)[] = []
+  const maxVisible = 5
+  
+  if (totalPages.value <= maxVisible) {
+    for (let i = 1; i <= totalPages.value; i++) pages.push(i)
+  } else {
+    if (props.currentPage <= 3) {
+      for (let i = 1; i <= maxVisible - 1; i++) pages.push(i)
+      pages.push('...')
+      pages.push(totalPages.value)
+    } else if (props.currentPage >= totalPages.value - 2) {
+      pages.push(1)
+      pages.push('...')
+      for (let i = totalPages.value - (maxVisible - 2); i <= totalPages.value; i++) pages.push(i)
+    } else {
+      pages.push(1)
+      pages.push('...')
+      for (let i = props.currentPage - 1; i <= props.currentPage + 1; i++) pages.push(i)
+      pages.push('...')
+      pages.push(totalPages.value)
+    }
+  }
+  
+  return pages
+})
+</script>
+
+<template>
+  <nav v-if="totalPages > 1" class="d-flex justify-content-center mt-5 mb-5">
+    <ul class="pagination mb-0">
+      <!-- Pagina Precedente -->
+      <li class="page-item" :class="{ disabled: currentPage === 1 }">
+        <button
+          class="page-link"
+          @click="goToPage(currentPage - 1)"
+          :disabled="currentPage === 1"
+          aria-label="Pagina precedente"
+        >
+          <span aria-hidden="true">&laquo;</span>
+        </button>
+      </li>
+
+      <!-- Numeri Pagine -->
+      <li v-for="page in pageNumbers" :key="`page-${page}`" class="page-item" :class="{ active: page === currentPage }">
+        <template v-if="page === '...'">
+          <span class="page-link">...</span>
+        </template>
+        <template v-else>
+          <button
+            class="page-link"
+            @click="goToPage(page as number)"
+            :aria-label="`Vai a pagina ${page}`"
+            :aria-current="page === currentPage ? 'page' : undefined"
+          >
+            {{ page }}
+          </button>
+        </template>
+      </li>
+
+      <!-- Pagina Successiva -->
+      <li class="page-item" :class="{ disabled: currentPage === totalPages }">
+        <button
+          class="page-link"
+          @click="goToPage(currentPage + 1)"
+          :disabled="currentPage === totalPages"
+          aria-label="Pagina successiva"
+        >
+          <span aria-hidden="true">&raquo;</span>
+        </button>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Info Pagina -->
+  <div v-if="totalPages > 1" class="text-center text-muted small mt-3">
+    Pagina {{ currentPage }} di {{ totalPages }} ({{ totalItems }} elementi totali)
+  </div>
+</template>
+
+<style scoped>
+.pagination {
+  gap: 0.25rem;
+}
+</style>
+
+