SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: SnitchItaly/frontend:feature/admin-roles-fix
Branches Tags
SnitchItaly/frontend:master SnitchItaly/frontend:feature/admin-roles-fix SnitchItaly/frontend:feature/favicon
..
compare: SnitchItaly/frontend:5fc54573166c18ab915debb7f29b67c06cf781d7
Branches Tags
SnitchItaly/frontend:master SnitchItaly/frontend:feature/admin-roles-fix SnitchItaly/frontend:feature/favicon
57 Commits
feature/admin-roles-fix .. 5fc5457316
55 changed files with 3615 additions and 2739 deletions
Expand all files Collapse all files
app/assets/css/style.css
+8
View File
@@ -376,3 +376,11 @@ html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-fo
max-width: 14rem;
}
}
.alert-danger {
background-position-y: center;
}
.card::after {
margin-top: 0!important;
}
app/components/ConfirmModal.vue
+60
View File
@@ -0,0 +1,60 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{
open: boolean
title: string
message: string
confirmLabel?: string
cancelLabel?: string
confirmClass?: string
pending?: boolean
}>(), {
confirmLabel: 'Conferma',
cancelLabel: 'Annulla',
confirmClass: 'btn-danger',
pending: false,
})
const emit = defineEmits<{
cancel: []
confirm: []
}>()
const handleBackdropClick = (event: MouseEvent) => {
if (event.target === event.currentTarget && !props.pending) {
emit('cancel')
}
}
</script>
<template>
<div v-if="open">
<div class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div
class="modal fade show d-block"
tabindex="-1"
style="z-index: 1050;"
@click="handleBackdropClick"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content shadow">
<div class="modal-header">
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="btn-close" :disabled="pending" @click="emit('cancel')"></button>
</div>
<div class="modal-body">
<p class="mb-0">{{ message }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" :disabled="pending" @click="emit('cancel')">
{{ cancelLabel }}
</button>
<button type="button" class="btn" :class="confirmClass" :disabled="pending" @click="emit('confirm')">
<span v-if="pending" class="spinner-border spinner-border-sm me-2"></span>
{{ confirmLabel }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
app/components/Footer.vue
+257 -30
View File
@@ -1,44 +1,58 @@
<script setup lang="ts">
import MemberDot from "~/components/MemberDot.vue";
import BIIcon from "~/components/BIIcon.vue";
import { useMembers } from "~/composables/useMembers";
const { sortedMembers } = useMembers();
const footerLinks = [
{ label: "Home", path: "/" },
{ label: "Esplora i dati", path: "/open-data" },
{ label: "Come funziona", path: "/info" },
];
const supportItems = [
{ label: "E-mail", value: "[email protected]", href: "mailto:[email protected]" },
{ label: "Telefono", value: "+39 080 468 2010", href: "tel:+390804682010" },
{ label: "Supporto", value: "Lun - Ven, 9:00 - 18:00" },
];
</script>
<template>
<footer class="it-footer">
<div class="it-footer-main">
<div class="container">
<section>
<div class="row clearfix">
<div class="col-sm-12">
<div class="it-brand-wrapper">
<a href="#" data-focus-mouse="false" class="d-flex align-items-center">
<img src="/icon.svg" alt="Logo Visione" style="width: 42px; height: 42px; margin-right: 12px;" />
<div class="it-brand-text">
<h2>Visione</h2>
<h3 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>
</div>
</a>
<div class="container footer-main-content">
<section class="footer-brand-section">
<div class="it-brand-wrapper">
<NuxtLink to="/" data-focus-mouse="false" class="footer-brand-link">
<img alt="Logo Visione" class="footer-brand-logo" src="/logo-light.svg"/>
<div class="it-brand-text">
<h2>Visione</h2>
<h3>Un occhio per la sicurezza di Bari</h3>
</div>
</div>
</NuxtLink>
</div>
</section>
<section class="py-4 border-white border-top">
<div class="row">
<div class="col-12 pb-2">
<div class="pb-2">
<h4>Progetto di</h4>
<div class="members-list d-flex justify-content-center align-items-center gap-5 flex-wrap w-100">
<MemberDot
v-for="member in sortedMembers"
:key="member.name"
:name="member.name"
:image="member.image"
/>
</div>
<section class="footer-content-section">
<div class="footer-support">
<h4>Assistenza per i cittadini</h4>
<ul class="footer-support-list">
<li v-for="item in supportItems" :key="item.label">
<span class="footer-support-label">{{ item.label }}:</span>
<a v-if="item.href" :href="item.href">{{ item.value }}</a>
<span v-else>{{ item.value }}</span>
</li>
</ul>
</div>
<div class="footer-members">
<div class="footer-members-grid">
<div
v-for="member in sortedMembers"
:key="member.name"
class="footer-member-card"
>
<img :src="member.image" :alt="member.name" class="footer-member-image">
<div class="footer-member-name">{{ member.name }}</div>
</div>
</div>
</div>
@@ -47,12 +61,225 @@ const { sortedMembers } = useMembers();
</div>
<div class="it-footer-small-prints clearfix">
<div class="container">
<ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
<div class="footer-lower-bar">
<ul class="footer-primary-menu list-inline mb-0">
<li v-for="link in footerLinks" :key="link.path" class="list-inline-item">
<NuxtLink :to="link.path">{{ link.label }}</NuxtLink>
</li>
</ul>
<ul class="it-footer-small-prints-list list-inline mb-0">
<li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
<li class="list-inline-item"><a href="/privacy">Privacy policy</a></li>
<li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
</ul>
</div>
</div>
</div>
</footer>
</template>
<style scoped>
.footer-main-content {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.footer-brand-section {
padding-bottom: 1.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.footer-brand-link {
display: inline-flex;
align-items: center;
gap: 1rem;
text-decoration: none;
}
.footer-brand-logo {
width: 52px;
height: 52px;
flex-shrink: 0;
}
.footer-brand-section .it-brand-text h2 {
margin-bottom: 0.25rem;
font-size: 1.75rem;
}
.footer-brand-section .it-brand-text h3 {
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
}
.footer-content-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
padding-top: 2rem;
}
.footer-support {
max-width: 30rem;
}
.footer-support h4 {
margin-bottom: 1.25rem;
font-size: 1.3rem;
text-transform: uppercase;
}
.footer-support-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.75rem;
font-size: 1.05rem;
}
.footer-support-label {
font-weight: 700;
margin-right: 0.35rem;
}
.footer-members {
flex: 1;
display: flex;
justify-content: flex-end;
}
.footer-members-grid {
display: grid;
grid-template-columns: repeat(3, minmax(110px, 140px));
gap: 1rem;
align-items: start;
}
.footer-member-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.footer-member-image {
width: 100%;
max-width: 126px;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.16);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.footer-member-name {
font-size: 0.95rem;
line-height: 1.25;
font-weight: 600;
}
.footer-lower-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.footer-primary-menu,
.it-footer-small-prints-list {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
align-items: center;
}
.footer-primary-menu .list-inline-item,
.it-footer-small-prints-list .list-inline-item {
margin: 0;
}
.footer-primary-menu a,
.it-footer-small-prints-list a {
text-decoration: none;
}
.footer-primary-menu a:hover,
.footer-primary-menu a:focus,
.it-footer-small-prints-list a:hover,
.it-footer-small-prints-list a:focus {
text-decoration: underline;
}
@media (max-width: 991.98px) {
.footer-content-section {
align-items: flex-start;
flex-direction: column;
}
.footer-support {
max-width: none;
}
.footer-members {
width: 100%;
justify-content: flex-start;
}
.footer-lower-bar {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 767.98px) {
.footer-main-content {
padding-top: 2rem;
padding-bottom: 2rem;
}
.footer-brand-link {
align-items: flex-start;
}
.footer-brand-section .it-brand-text h2 {
font-size: 1.45rem;
}
.footer-brand-section .it-brand-text h3 {
font-size: 0.95rem;
}
.footer-support h4 {
font-size: 1.1rem;
}
.footer-support-list {
font-size: 1rem;
}
.footer-members-grid {
width: 100%;
grid-template-columns: repeat(2, minmax(110px, 1fr));
}
.footer-primary-menu,
.it-footer-small-prints-list {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
}
@media (max-width: 479.98px) {
.footer-members-grid {
grid-template-columns: 1fr;
max-width: 150px;
}
}
</style>
app/components/Header.vue
+147 -31
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { computed, onUnmounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import BIIcon from "~/components/BIIcon.vue";
@@ -10,15 +10,31 @@ watch(() => route.path, () => {
isMobileMenuOpen.value = false
})
watch(isMobileMenuOpen, (isOpen) => {
if (typeof document !== 'undefined') {
if (isOpen) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = ''
}
}
})
onUnmounted(() => {
if (typeof document !== 'undefined') {
document.body.style.overflow = ''
}
})
const { isAuthenticated, user, logout, hasUnreadNotifications } = useAuth()
const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
const navLinks = [
{ name: 'Home', path: '/' },
{ name: 'Fai una segnalazione', path: '/reports/new' },
...(isCitizen(user.value?.role) ? [{ name: 'Fai una segnalazione', path: '/reports/new' }] : []),
{ name: 'Esplora i dati', path: '/open-data' },
{ name: 'Come funziona', path: '/info' }
]
const { isAuthenticated, user, logout } = useAuth()
const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello' : 'Dashboard')
</script>
<template>
@@ -28,8 +44,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
<div class="row">
<div class="col-12">
<div class="it-header-slim-wrapper-content">
<a class="d-none d-lg-block navbar-brand"
href="https://www.cittametropolitana.ba.it/">
<a class="d-none d-lg-block navbar-brand" href="https://www.cittametropolitana.ba.it/">
Città metropolitana di Bari
</a>
<div class="nav-mobile">
@@ -48,15 +63,16 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
<NuxtLink class="btn btn-primary btn-icon btn-full" to="/dashboard"
data-element="personal-area-dashboard" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-list" color="black" />
<BIIcon name="it-list" color="black"/>
</span>
<span class="d-none d-lg-block">{{ panelLabel }}</span>
</NuxtLink>
<NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
data-element="personal-area-dashboard" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-user" color="black" />
<span class="rounded-icon profile-icon-wrap" aria-hidden="true">
<BIIcon name="it-user" color="black"/>
<span v-if="hasUnreadNotifications" class="notification-dot"></span>
</span>
<span class="d-none d-lg-block">{{ user?.first_name }}</span>
</NuxtLink>
@@ -64,7 +80,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
<button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
data-element="personal-area-logout" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-logout" color="black" />
<BIIcon name="it-logout" color="black"/>
</span>
<span class="d-none d-lg-block">Esci</span>
</button>
@@ -73,12 +89,11 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
<NuxtLink v-else class="btn btn-primary btn-icon btn-full" to="/auth/login"
data-element="personal-area-login" data-focus-mouse="false">
<span class="rounded-icon" aria-hidden="true">
<BIIcon name="it-user" color="black" />
<BIIcon name="it-user" color="black"/>
</span>
<span class="d-none d-lg-block">Login</span>
</NuxtLink>
</div>
</div>
</div>
</div>
@@ -92,13 +107,13 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<NuxtLink to="/">
<img src="/icon.svg" alt="Logo Visione" style="width: 48px; height: 48px; margin-right: 16px;" />
<div class="it-brand-text">
<div class="it-brand-title">Visione</div>
<div class="it-brand-tagline d-none d-md-block">Un occhio per la sicurezza del cittadino.</div>
</div>
</NuxtLink>
<NuxtLink to="/">
<img alt="Logo Visione" class="logo" src="/logo-light.svg"/>
<div class="it-brand-text">
<div class="it-brand-title">Visione</div>
<div class="it-brand-tagline d-none d-md-block">Un occhio per la sicurezza del cittadino.</div>
</div>
</NuxtLink>
</div>
</div>
</div>
@@ -111,6 +126,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
<button
class="custom-navbar-toggler"
type="button"
@@ -124,19 +140,16 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
class="overlay"
:class="{ 'show': isMobileMenuOpen }"
@click="isMobileMenuOpen = false"
style="display: block;"
v-show="isMobileMenuOpen"
></div>
<div
class="navbar-collapsable"
:class="{ 'expanded': isMobileMenuOpen }"
style="display: block;"
>
<div class="close-div">
<button class="btn close-menu" type="button" @click="isMobileMenuOpen = false">
<span class="visually-hidden">Nascondi la navigazione</span>
<BIIcon name="it-close-big"/>
<BIIcon name="it-close-big" color="black"/>
</button>
</div>
@@ -184,14 +197,117 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
background-color: rgb(0, 76.5, 153);
}
.overlay {
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
@media (max-width: 991.98px) {
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6) !important;
z-index: 1040;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.overlay.show {
opacity: 1;
visibility: visible;
}
.navbar-collapsable {
position: fixed !important;
top: 0;
left: 0;
width: 320px;
max-width: 85vw;
height: 100vh;
background-color: #ffffff !important;
z-index: 1050 !important;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: column;
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
overflow-y: auto;
}
.navbar-collapsable.expanded {
transform: translateX(0);
}
.close-div {
display: flex;
justify-content: flex-end;
padding: 1rem 1.5rem;
}
.close-menu {
background: transparent;
border: none;
padding: 0;
}
.close-menu :deep(svg) {
width: 32px;
height: 32px;
}
.menu-wrapper {
padding: 1rem 0;
}
.navbar-nav {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
width: 100%;
}
.nav-link {
display: block;
padding: 1rem 1.5rem;
color: #1a1a1a !important;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
}
.nav-link.active {
color: #004c99 !important;
background-color: #f8f9fa;
}
}
.overlay.show {
opacity: 1;
pointer-events: auto;
.btn-full {
padding: 14px;
}
.logo {
width: 48px;
height: 48px;
margin-inline: 16px;
}
.profile-icon-wrap {
position: relative;
}
.notification-dot {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #d9364f;
border: 2px solid #ffffff;
}
</style>
app/components/MediaUploader.vue
-169
View File
@@ -1,169 +0,0 @@
<script setup lang="ts">
interface Props {
modelValue?: File[]
maxFiles?: number
acceptedTypes?: string
maxFileSize?: number // in MB
disabled?: boolean
}
interface Emits {
(e: 'update:modelValue', files: File[]): void
}
const props = withDefaults(defineProps<Props>(), {
modelValue: () => [],
maxFiles: 5,
acceptedTypes: 'image/*,video/*',
maxFileSize: 50,
disabled: false
})
const emit = defineEmits<Emits>()
const fileInputRef = ref<HTMLInputElement>()
const isDragging = ref(false)
const error = ref('')
const files = computed({
get: () => props.modelValue || [],
set: (value) => emit('update:modelValue', value)
})
const handleFilesSelected = (selectedFiles: FileList | null) => {
if (!selectedFiles) return
error.value = ''
const newFiles = Array.from(selectedFiles)
if (files.value.length + newFiles.length > props.maxFiles) {
error.value = `Massimo ${props.maxFiles} file consentiti`
return
}
for (const file of newFiles) {
if (file.size > props.maxFileSize! * 1024 * 1024) {
error.value = `Il file ${file.name} supera il limite di ${props.maxFileSize}MB`
return
}
}
files.value = [...files.value, ...newFiles]
}
const removeFile = (index: number) => {
files.value.splice(index, 1)
}
const openFileDialog = () => {
fileInputRef.value?.click()
}
const formatFileSize = (bytes: number): string => {
const mb = Math.round(bytes / (1024 * 1024) * 10) / 10
return mb > 0 ? `${mb}MB` : 'Piccolo'
}
const getFileUrl = (file: File) => {
return URL.createObjectURL(file)
}
</script>
<template>
<div class="media-uploader">
<div
class="upload-area border-2 border-dashed rounded-3 p-4 text-center cursor-pointer position-relative"
:class="{ 'border-primary bg-primary bg-opacity-10': isDragging, 'bg-light': !isDragging }"
@dragover.prevent="isDragging = true"
@dragleave.prevent="isDragging = false"
@drop.prevent="isDragging = false; handleFilesSelected(($event as DragEvent).dataTransfer?.files || null)"
@click="!disabled && openFileDialog()"
>
<BIIcon name="it-upload" size="xl" color="primary" class="mb-3" />
<div class="h6 font-weight-bold">
Trascina i file qui o <span class="text-primary text-decoration-underline">clicca per selezionare</span>
</div>
<small class="text-muted d-block mt-2">
Massimo {{ maxFiles }} file ({{ maxFileSize }}MB max per file). Tipi: {{ acceptedTypes }}
</small>
</div>
<input
ref="fileInputRef"
type="file"
:multiple="maxFiles > 1"
:accept="acceptedTypes"
:disabled="disabled"
class="d-none"
@change="handleFilesSelected(($event.target as HTMLInputElement).files)"
/>
<div v-if="error" class="alert alert-danger mt-3 py-2 small" role="alert">
{{ error }}
</div>
<div v-if="files.length > 0" class="mt-4 row g-3">
<div v-for="(file, idx) in files" :key="`file-${idx}`" class="col-6 col-md-4 col-lg-3">
<div class="card h-100 position-relative shadow-sm border-0">
<div class="ratio ratio-1x1 bg-light rounded-top overflow-hidden">
<img v-if="file.type.startsWith('image/')" :src="getFileUrl(file)" class="object-fit-cover" :alt="file.name" />
<video v-else-if="file.type.startsWith('video/')" :src="getFileUrl(file)" class="object-fit-cover"></video>
<div v-else class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-25">
<BIIcon name="it-file" size="xl" color="secondary" />
</div>
</div>
<button
type="button"
class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 rounded-circle p-1 d-flex align-items-center justify-content-center shadow"
style="width: 28px; height: 28px; z-index: 10;"
@click.stop="removeFile(idx)"
:disabled="disabled"
title="Rimuovi file"
>
<BIIcon name="it-close" size="sm" color="white" />
</button>
<div class="card-body p-2 d-flex flex-column justify-content-between">
<div class="small text-truncate fw-semibold" :title="file.name">{{ file.name }}</div>
<div class="small text-muted d-flex justify-content-between align-items-center mt-1">
<span>{{ formatFileSize(file.size) }}</span>
<div class="progress flex-grow-1 ms-2" style="height: 4px;" title="Pronto per l'upload">
<div class="progress-bar bg-success w-100" role="progressbar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.upload-area {
transition: all 0.2s ease-in-out;
}
.upload-area:hover:not(.border-primary) {
background-color: #f8f9fa !important;
border-color: #0066cc !important;
}
.cursor-pointer {
cursor: pointer;
}
.border-dashed {
border-style: dashed !important;
}
.border-2 {
border-width: 2px !important;
}
.object-fit-cover {
object-fit: cover;
width: 100%;
height: 100%;
}
</style>
app/components/MessageComposer.vue
+35 -125
View File
@@ -1,21 +1,20 @@
<script setup lang="ts">
import { ref } from 'vue'
interface Emits {
(e: 'send', message: string, files: File[]): void
(e: 'send', message: string): void
}
const emit = defineEmits<Emits>()
const message = ref('')
const isSubmitting = ref(false)
const files = ref<File[]>([])
const fileInputRef = ref<HTMLInputElement>()
const handleSubmit = () => {
if (message.value.trim() === '' && files.value.length === 0) return
if (message.value.trim() === '') return
emit('send', message.value, [...files.value])
emit('send', message.value)
message.value = ''
files.value = []
}
const handleKeydown = (e: KeyboardEvent) => {
@@ -24,76 +23,34 @@ const handleKeydown = (e: KeyboardEvent) => {
handleSubmit()
}
}
const handleFileSelect = (e: Event) => {
const target = e.target as HTMLInputElement
if (target.files) {
const newFiles = Array.from(target.files)
files.value = [...files.value, ...newFiles].slice(0, 5) // max 5
}
if (fileInputRef.value) {
fileInputRef.value.value = ''
}
}
const removeFile = (idx: number) => {
files.value.splice(idx, 1)
}
</script>
<template>
<div class="message-composer mt-3">
<form @submit.prevent="handleSubmit">
<div v-if="files.length > 0" class="message-files mb-3">
<div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
<BIIcon name="it-clip" size="xs" />
<span class="text-truncate file-name">{{ file.name }}</span>
<button type="button" class="btn-close btn-close-sm" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
</div>
</div>
<div class="composer-shell">
<input
ref="fileInputRef"
type="file"
multiple
class="d-none"
@change="handleFileSelect"
accept="image/*,video/*,.pdf,.doc,.docx"
/>
<button
type="button"
class="btn btn-outline-primary btn-icon composer-attach"
title="Allega file"
@click="fileInputRef?.click()"
:disabled="isSubmitting || files.length >= 5"
>
<BIIcon name="it-clip" size="sm" />
</button>
<div class="d-flex align-items-stretch gap-2">
<textarea
v-model="message"
class="form-control composer-textarea"
placeholder="Scrivi aggiornamento o domanda"
rows="2"
:disabled="isSubmitting"
@keydown="handleKeydown"
/>
v-model="message"
class="form-control chat-textarea m-0"
placeholder="Scrivi aggiornamento o domanda"
:disabled="isSubmitting"
@keydown="handleKeydown"
></textarea>
<button
type="submit"
class="btn btn-primary composer-submit"
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
type="submit"
class="btn btn-primary btn-square flex-shrink-0"
:disabled="isSubmitting || message.trim() === ''"
title="Invia"
>
<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
<span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<BIIcon v-else color="white" name="it-arrow-right" size="sm"/>
</button>
</div>
<small class="text-muted d-block mt-2">
`Ctrl` + `Invio` per inviare. Fino a 5 allegati.
`Ctrl` + `Invio` per inviare.
</small>
</form>
</div>
@@ -105,75 +62,28 @@ const removeFile = (idx: number) => {
padding-top: 1rem;
}
.message-files {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
.chat-textarea {
resize: none !important;
height: 48px;
min-height: 48px;
overflow-y: auto;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 6px;
}
.message-file-chip {
align-items: center;
background: #fff;
border: 1px solid #d9e3ee;
border-radius: 4px;
display: inline-flex;
gap: 0.5rem;
max-width: 100%;
padding: 0.4rem 0.75rem;
}
.file-name {
max-width: 14rem;
}
.composer-shell {
align-items: flex-end;
background: #fff;
border: 1px solid #c5d0db;
border-radius: 4px;
display: grid;
gap: 0.75rem;
grid-template-columns: auto minmax(0, 1fr) auto;
padding: 0.75rem;
}
.composer-shell:focus-within {
.chat-textarea:focus {
border-color: #06c;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}
.composer-attach {
flex-shrink: 0;
}
.composer-textarea {
border: 0;
box-shadow: none;
min-height: 4rem;
.btn-square {
width: 48px;
height: 48px;
padding: 0;
resize: vertical;
}
.composer-submit {
min-width: 7rem;
}
.btn-close-sm {
font-size: 0.55rem;
}
@media (max-width: 767.98px) {
.composer-shell {
grid-template-columns: auto 1fr;
}
.composer-textarea {
grid-column: 1 / -1;
}
.composer-submit {
grid-column: 2;
justify-self: end;
}
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
</style>
app/components/MessageList.vue
+21 -17
View File
@@ -38,7 +38,7 @@ const auth = useAuth()
const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userId
const senderInitials = (msg: Message): string =>
`${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
`${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
</script>
<template>
@@ -50,27 +50,27 @@ const senderInitials = (msg: Message): string =>
</div>
<div v-else-if="messages.length === 0" class="message-empty-state" role="alert">
<BIIcon name="it-comment" size="lg" color="primary" class="mb-2" />
<BIIcon class="mb-2" color="primary" name="it-comment" size="lg"/>
<strong class="d-block mb-1">Nessun messaggio</strong>
<span>Usa chat per aggiornamenti rapidi tra cittadino e operatori.</span>
</div>
<div v-else class="messages-container">
<div
v-for="msg in messages"
:key="msg.id"
class="message-row"
:class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
v-for="msg in messages"
:key="msg.id"
:class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
class="message-row"
>
<div v-if="!isCurrentUser(msg.user_id)" class="message-avatar" aria-hidden="true">
{{ senderInitials(msg) }}
</div>
<div
class="message-bubble-content"
:class="{
:class="{
'message-bubble-outgoing': isCurrentUser(msg.user_id),
'message-bubble-incoming': !isCurrentUser(msg.user_id)
}"
class="message-bubble-content"
>
<div class="message-meta">
<span v-if="!isCurrentUser(msg.user_id)" class="message-author">
@@ -90,15 +90,16 @@ const senderInitials = (msg: Message): string =>
{{ msg.body }}
</div>
<div v-if="canFlagMessage(msg)" class="message-actions">
<div v-if="canFlagMessage?.(msg)" class="message-actions">
<button
type="button"
class="btn btn-link btn-xs px-0"
:disabled="isFlaggingMessageId === msg.id"
@click="emit('flag', msg)"
:disabled="isFlaggingMessageId === msg.id"
class="btn btn-link btn-xs px-0"
type="button"
@click="emit('flag', msg)"
>
<span v-if="isFlaggingMessageId === msg.id" class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
<BIIcon v-else name="it-flag" size="xs" class="me-1" />
<span v-if="isFlaggingMessageId === msg.id" aria-hidden="true"
class="spinner-border spinner-border-sm me-1"></span>
<BIIcon v-else class="me-1" name="it-flag" size="xs"/>
Segnala messaggio
</button>
</div>
@@ -112,9 +113,12 @@ const senderInitials = (msg: Message): string =>
.message-list {
border: 1px solid #d9e3ee;
border-radius: 4px;
max-height: 34rem;
height: 34rem;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
}
.messages-container {
@@ -129,7 +133,7 @@ const senderInitials = (msg: Message): string =>
display: flex;
flex-direction: column;
justify-content: center;
min-height: 14rem;
flex: 1;
padding: 2rem 1rem;
text-align: center;
}
app/components/Pagination.vue
-4
View File
@@ -57,7 +57,6 @@ const pageNumbers = computed(() => {
<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"
@@ -69,7 +68,6 @@ const pageNumbers = computed(() => {
</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>
@@ -86,7 +84,6 @@ const pageNumbers = computed(() => {
</template>
</li>
<!-- Pagina Successiva -->
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
<button
class="page-link"
@@ -100,7 +97,6 @@ const pageNumbers = computed(() => {
</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>
app/components/ReportForm.vue
+2 -5
View File
@@ -45,7 +45,6 @@ const isResolvingAddress = ref(false)
const addressSearchError = ref('')
const showAddressSuggestions = ref(false)
// Map variables
const mapContainer = ref<HTMLElement | null>(null)
let leaflet: typeof import('leaflet') | null = null
let map: LeafletMap | null = null
@@ -62,7 +61,6 @@ const loadLeaflet = async () => {
const leafletModule = await import('leaflet')
// Fix per le icone di Leaflet in Nuxt/Vite
const defaultIcon = leafletModule.icon({
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
iconRetinaUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
@@ -276,7 +274,6 @@ const initMap = async () => {
void updateLocation(e.latlng.lat, e.latlng.lng)
})
// Se c'è già una posizione, imposta il marker
if (form.value.latitude && form.value.longitude) {
void updateLocation(form.value.latitude, form.value.longitude, { zoomTo: true })
}
@@ -435,7 +432,6 @@ watch(() => form.value.address, (newAddress) => {
}, 350)
})
// Sincronizza input manuali con la mappa
watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]) => {
if (newLat && newLng && map && leaflet) {
if (!marker || marker.getLatLng().lat !== newLat || marker.getLatLng().lng !== newLng) {
@@ -663,7 +659,8 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
.map-container {
height: 300px;
width: 100%;
z-index: 1; /* Fix for Bootstrap elements overlapping map */
z-index: 1;
overflow: hidden;
}
.address-suggestions {
app/components/ReportTable.vue
+38 -34
View File
@@ -9,6 +9,7 @@ interface Props {
actionVariant?: ActionVariant
actionLabel?: string
showAssignee?: boolean
processingIds?: number[]
}
const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
actionVariant: 'open',
actionLabel: 'Open report',
showAssignee: false,
processingIds: () => [],
})
const emit = defineEmits<{
@@ -38,52 +40,54 @@ const reportHref = (report: Report) => `${props.detailBasePath}/${report.id}`
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Categoria</th>
<th scope="col">Indirizzo</th>
<th scope="col">Stato</th>
<th v-if="showAssignee" scope="col">Operatore</th>
<th scope="col">Creazione</th>
<th scope="col" class="text-end">Azioni</th>
</tr>
<tr>
<th scope="col">ID</th>
<th scope="col">Categoria</th>
<th scope="col">Indirizzo</th>
<th scope="col">Stato</th>
<th v-if="showAssignee" scope="col">Operatore</th>
<th scope="col">Creazione</th>
<th scope="col" class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
<tr v-for="report in reports" :key="report.id" class="align-middle">
<td class="report-table-id">#{{ report.id }}</td>
<td class="text-nowrap">{{ report.category_name || '-' }}</td>
<td>
<span class="report-address" :title="report.address">
<tr v-for="report in reports" :key="report.id" class="align-middle">
<td class="report-table-id">#{{ report.id }}</td>
<td class="text-nowrap">{{ report.category_name || '-' }}</td>
<td>
<span class="report-address d-inline-block text-truncate align-middle" style="max-width: 10ch;" :title="report.address">
{{ report.address || '-' }}
</span>
</td>
<td>
<StatusBadge :status="report.status" />
</td>
<td v-if="showAssignee" class="text-muted">
{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
</td>
<td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
<td class="text-end">
<button
</td>
<td>
<StatusBadge :status="report.status" />
</td>
<td v-if="showAssignee" class="text-muted">
{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
</td>
<td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
<td class="text-end">
<button
v-if="actionVariant === 'manage'"
type="button"
class="btn btn-primary btn-xs"
:disabled="processingIds.includes(report.id)"
@click="emit('take', report.id)"
>
Prendi in carico
</button>
<NuxtLink
>
<span v-if="processingIds.includes(report.id)" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
Prendi in carico
</button>
<NuxtLink
v-else
:to="reportHref(report)"
class="btn btn-outline-primary btn-xs btn-icon"
class="btn btn-outline-primary btn-xs"
:aria-label="actionLabel"
:title="actionLabel"
>
<BIIcon name="it-arrow-right" size="xs" />
</NuxtLink>
</td>
</tr>
>
{{ actionLabel }}
</NuxtLink>
</td>
</tr>
</tbody>
</table>
</div>
app/components/StatusBadge.vue
+1 -1
View File
@@ -15,7 +15,7 @@ const badgeConfig = computed(() => {
IN_PROGRESS: { color: 'primary', text: 'In Lavorazione', icon: 'it-settings' },
RESOLVED: { color: 'success', text: 'Risolta', icon: 'it-check-circle' },
REJECTED: { color: 'danger', text: 'Rifiutata', icon: 'it-close-circle' },
CLOSED: { color: 'secondary', text: 'Chiusa', icon: 'it-locked' }
CLOSED: { color: 'secondary', text: 'Conclusa', icon: 'it-locked' }
}
return config[props.status] || { color: 'secondary', text: props.status, icon: 'it-info-circle' }
app/components/dashboard/AdminDashboard.vue
+34 -53
View File
@@ -2,67 +2,48 @@
const { getOverviewStats } = useAdmin()
const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
const adminActions = [
{ to: '/admin/reports', icon: 'it-files', label: 'Report', tone: 'primary' },
{ to: '/admin/catalog', icon: 'it-list', label: 'Categorie e Team', tone: 'primary' },
{ to: '/admin/areas', icon: 'it-map-marker', label: 'Aree', tone: 'primary' },
{ to: '/admin/users', icon: 'it-user', label: 'Gestione Utenti', tone: 'primary' },
{ to: '/admin/moderation', icon: 'it-warning', label: 'Moderazione Abusi', tone: 'danger' }
]
</script>
<template>
<div>
<div class="callout callout-highlight callout-danger mb-4">
<div class="callout-title">Pannello Admin</div>
<p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
</div>
<div class="card card-bg">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="h5 card-title mb-0">Gestione sistema</h2>
</div>
<!-- Statistiche Globali (Mock o Reali) -->
<div class="row mb-5" v-if="!pending && statsRes?.ok">
<div class="col-6 col-md-3 mb-3">
<div class="card-wrapper card-space">
<div class="card card-bg text-center">
<div class="card-body">
<h2 class="text-primary">{{ statsRes.total_users || 0 }}</h2>
<p class="card-text">Utenti Registrati</p>
</div>
<div class="row g-2">
<div
v-for="action in adminActions"
:key="action.to"
class="col-12 col-md-6 col-xl-4"
>
<NuxtLink
:to="action.to"
class="btn btn-sm w-100 d-flex align-items-center justify-content-start gap-2 admin-action"
:class="action.tone === 'danger' ? 'btn-outline-danger' : 'btn-outline-primary'"
>
<BIIcon :name="action.icon" size="sm" :color="action.tone === 'danger' ? 'danger' : 'primary'" />
<span>{{ action.label }}</span>
</NuxtLink>
</div>
</div>
</div>
<div class="col-6 col-md-3 mb-3">
<div class="card-wrapper card-space">
<div class="card card-bg text-center">
<div class="card-body">
<h2 class="text-warning">
{{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
</h2>
<p class="card-text">Segn. Aperte</p>
</div>
</div>
</div>
</div>
</div>
<h3 class="mb-3">Gestione Sistema</h3>
<div class="row">
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/catalog" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-list" size="sm" color="primary" class="mb-2" />
Categorie e Team
</NuxtLink>
</div>
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
Aree
</NuxtLink>
</div>
<div class="col-12 col-md-4 mb-3">
<NuxtLink to="/admin/users" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-user" size="sm" color="primary" class="mb-2" />
Gestione Utenti
</NuxtLink>
</div>
<div class="col-12 col-md-6 mb-3">
<NuxtLink to="/admin/moderation" class="btn btn-outline-danger w-100 py-3 d-flex flex-column align-items-center">
<BIIcon name="it-warning" size="sm" color="danger" class="mb-2" />
Moderazione Abusi
</NuxtLink>
</div>
</div>
</div>
</template>
<style scoped>
.admin-action {
min-height: 44px;
text-align: left;
}
</style>
app/components/dashboard/OperatorDashboard.vue
+6 -14
View File
@@ -1,15 +1,8 @@
<script setup lang="ts">
const { getOpenReports, getAssignedReports, takeReport } = useOperator()
const { getOpenReports, getAssignedReports } = useOperator()
const { data: openReportsRes, refresh: refreshOpen } = useAsyncData('open-reports', () => getOpenReports({ per_page: 5 }))
const { data: assignedReportsRes, refresh: refreshAssigned } = useAsyncData('assigned-reports', () => getAssignedReports({ per_page: 5 }))
const handleTakeReport = async (id: number) => {
const res = await takeReport(id)
if (res.ok) {
await Promise.all([refreshOpen(), refreshAssigned()])
}
}
const { data: openReportsRes } = useAsyncData('open-reports', () => getOpenReports({ per_page: 5 }))
const { data: assignedReportsRes } = useAsyncData('assigned-reports', () => getAssignedReports({ per_page: 5 }))
</script>
<template>
@@ -18,8 +11,8 @@ const handleTakeReport = async (id: number) => {
<div class="card card-bg h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="h5 mb-0">Da prendere in carico</h3>
<NuxtLink to="/operator" class="btn btn-link btn-sm pe-0">Apri coda</NuxtLink>
<h3 class="h5 mb-0">Segnalazioni disponibili</h3>
<NuxtLink to="/operator" class="btn btn-link btn-sm pe-0">Apri elenco</NuxtLink>
</div>
<div v-if="openReportsRes?.ok && openReportsRes.reports.length === 0" class="alert alert-info mb-0">
Nessuna nuova segnalazione in ingresso.
@@ -27,9 +20,8 @@ const handleTakeReport = async (id: number) => {
<ReportTable
v-else
:reports="openReportsRes?.reports || []"
action-variant="manage"
detail-base-path="/operator/reports"
@take="handleTakeReport"
action-label="Visualizza"
/>
</div>
</div>
app/composables/useAdmin.ts
+35 -6
View File
@@ -1,9 +1,18 @@
import type {
AreaListResponse, CategoryListResponse, CreateAreaRequest, CreateCategoryRequest, CreateTeamRequest,
AreaListResponse,
CategoryListResponse,
CreateAreaRequest,
CreateCategoryRequest,
CreateTeamRequest,
ModerationListResponse,
OkResponse,
OverviewStatsResponse, TeamListResponse, UpdateModerationRequest,
UpdateUserBanRequest, UpdateUserRolesRequest,
OverviewStatsResponse,
UpdateAreaRequest,
UpdateCategoryRequest,
UpdateModerationRequest,
UpdateTeamRequest,
UpdateUserBanRequest,
UpdateUserRolesRequest,
UserListResponse
} from "~/types/api";
@@ -26,18 +35,33 @@ export const useAdmin = () => {
const createArea = (body: CreateAreaRequest) =>
useApiFetch<OkResponse>('/api/v1/admin/areas', { method: 'POST', body })
const updateArea = (id: number, body: UpdateAreaRequest) =>
useApiFetch<OkResponse>(`/api/v1/admin/areas/${id}`, { method: 'PATCH', body })
const deleteArea = (id: number) =>
useApiFetch<OkResponse>(`/api/v1/admin/areas/${id}`, { method: 'DELETE' })
const getCategories = () =>
useApiFetch<CategoryListResponse>('/api/v1/admin/categories', { method: 'GET' })
const createCategory = (body: CreateCategoryRequest) =>
useApiFetch<OkResponse>('/api/v1/admin/categories', { method: 'POST', body })
const getTeams = () =>
useApiFetch<TeamListResponse>('/api/v1/admin/teams', { method: 'GET' })
const updateCategory = (id: number, body: UpdateCategoryRequest) =>
useApiFetch<OkResponse>(`/api/v1/admin/categories/${id}`, { method: 'PATCH', body })
const deleteCategory = (id: number) =>
useApiFetch<OkResponse>(`/api/v1/admin/categories/${id}`, { method: 'DELETE' })
const createTeam = (body: CreateTeamRequest) =>
useApiFetch<OkResponse>('/api/v1/admin/teams', { method: 'POST', body })
const updateTeam = (id: number, body: UpdateTeamRequest) =>
useApiFetch<OkResponse>(`/api/v1/admin/teams/${id}`, { method: 'PATCH', body })
const deleteTeam = (id: number) =>
useApiFetch<OkResponse>(`/api/v1/admin/teams/${id}`, { method: 'DELETE' })
const getModerationFlags = (query?: { status?: string; page?: number; per_page?: number }) =>
useApiFetch<ModerationListResponse>('/api/v1/admin/moderation', { method: 'GET', query })
@@ -51,10 +75,15 @@ export const useAdmin = () => {
updateUserRoles,
getAreas,
createArea,
updateArea,
deleteArea,
getCategories,
createCategory,
getTeams,
updateCategory,
deleteCategory,
createTeam,
updateTeam,
deleteTeam,
getModerationFlags,
updateModerationFlag,
}
app/composables/useAuth.ts
+50 -15
View File
@@ -1,10 +1,17 @@
import type {
ChangePasswordRequest,
CurrentUserResponse, EmailRequest, NotificationListResponse,
CieSessionResponse,
CieStartResponse,
CurrentUserResponse,
EmailRequest,
NotificationListResponse,
OkResponse,
OtpRequestResponse, PasswordLoginRequest, RegisterCitizenRequest,
RegisterCitizenResponse, RewardsResponse,
TokenResponse, VerifyOtpRequest, UpdateProfileRequest
OtpRequestResponse,
RegisterCitizenRequest,
RegisterCitizenResponse,
RewardsResponse,
TokenResponse,
UpdateProfileRequest,
VerifyOtpRequest
} from "~/types/api";
export const useAuth = () => {
@@ -22,7 +29,10 @@ export const useAuth = () => {
type UserContext = CurrentUserResponse['user']
const user = useState<UserContext | null>('auth_user', () => null)
const isSyncingUser = useState<boolean>('auth_syncing', () => false)
const unreadNotifications = useState<number>('auth_unread_notifications', () => 0)
const isRefreshingNotifications = useState<boolean>('auth_refreshing_notifications', () => false)
const isAuthenticated = computed(() => !!(tokenState.value || token.value))
const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
const isAuthStatusError = (error: any) => {
const status = error?.statusCode || error?.status || error?.response?.status
return status === 401 || status === 403
@@ -32,6 +42,24 @@ export const useAuth = () => {
tokenState.value = newVal || null
})
const refreshUnreadNotifications = async () => {
if (!(tokenState.value || token.value) || !user.value || isRefreshingNotifications.value) {
unreadNotifications.value = user.value ? unreadNotifications.value : 0
return
}
isRefreshingNotifications.value = true
try {
const res = await fetchNotifications({ page: 1, per_page: 20 })
unreadNotifications.value = (res.notifications || []).filter(notification => !notification.read_at).length
} catch (error) {
console.error('[Auth] Failed to refresh notifications:', error)
} finally {
isRefreshingNotifications.value = false
}
}
const syncUser = async (options: { redirectOnSuccess?: boolean; currentPath?: string } = {}) => {
const { redirectOnSuccess = false, currentPath } = options
const tokenVal = tokenState.value || token.value
@@ -42,11 +70,10 @@ export const useAuth = () => {
const res = await fetchCurrentUser()
if (res.ok) {
user.value = res.user
await refreshUnreadNotifications()
const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
if (res.user.must_change_password && path !== '/auth/change-password') {
await nuxtApp.runWithContext(() => navigateTo('/auth/change-password'))
} else if (redirectOnSuccess && path.startsWith('/auth')) {
if (redirectOnSuccess && path.startsWith('/auth')) {
await nuxtApp.runWithContext(() => navigateTo('/dashboard'))
}
}
@@ -66,13 +93,15 @@ export const useAuth = () => {
const handleLoginSuccess = async (jwtToken: string) => {
token.value = jwtToken
tokenState.value = jwtToken
await syncUser({ redirectOnSuccess: true })
await syncUser()
window.location.reload();
}
const logout = () => {
token.value = null
tokenState.value = null
user.value = null
unreadNotifications.value = 0
nuxtApp.runWithContext(() => navigateTo('/auth/login'))
}
@@ -85,11 +114,14 @@ export const useAuth = () => {
const verifyOtp = (body: VerifyOtpRequest) =>
useApiFetch<TokenResponse>('/api/v1/auth/otp/verify', { method: 'POST', body })
const loginWithPassword = (body: PasswordLoginRequest) =>
useApiFetch<TokenResponse>('/api/v1/auth/login/password', { method: 'POST', body })
const startCieLogin = (frontendRedirectUri: string) =>
useApiFetch<CieStartResponse>('/api/v1/auth/cie/start', {
method: 'POST',
body: { frontend_redirect_uri: frontendRedirectUri }
})
const changePassword = (body: ChangePasswordRequest) =>
useApiFetch<OkResponse>('/api/v1/auth/change-password', { method: 'POST', body })
const fetchCieSession = (id: string) =>
useApiFetch<CieSessionResponse>(`/api/v1/auth/cie/session/${id}`, { method: 'GET' })
const updateProfile = (body: UpdateProfileRequest) =>
useApiFetch<CurrentUserResponse>('/api/v1/me', { method: 'PATCH', body })
@@ -112,6 +144,9 @@ export const useAuth = () => {
tokenState,
isSyncingUser,
isAuthenticated,
unreadNotifications,
hasUnreadNotifications,
refreshUnreadNotifications,
handleLoginSuccess,
syncUser,
logout,
@@ -119,8 +154,8 @@ export const useAuth = () => {
register,
requestOtp,
verifyOtp,
loginWithPassword,
changePassword,
startCieLogin,
fetchCieSession,
updateProfile,
fetchCurrentUser,
fetchRewards,
app/composables/useMembers.ts
+3 -3
View File
@@ -7,9 +7,9 @@ export interface Member {
export function useMembers() {
const members: Member[] = [
{ name: "Renato Loiacono", image: "https://placehold.co/50x50" },
{ name: "Michelangelo Parisi", image: "https://placehold.co/50x50" },
{ name: "Gabriele Schiraldi", image: "https://placehold.co/50x50" },
{ name: "Renato Loiacono", image: "/renatoloiacono.webp" },
{ name: "Michelangelo Parisi", image: "/michelangeloparisi.webp" },
{ name: "Paolo Gabriele Schiraldi", image: "/paologabrieleschiraldi.webp" },
];
const sortedMembers = computed(() => {
app/composables/useOperator.ts
+13
View File
@@ -1,4 +1,5 @@
import type {
AssignmentLinkResponse,
AssignTeamRequest,
InterventionSummaryResponse,
OkResponse,
@@ -32,6 +33,15 @@ export const useOperator = () => {
const getInterventionSummary = (id: number) =>
useApiFetch<InterventionSummaryResponse>(`/api/v1/reports/${id}/intervention-summary`, { method: 'GET' })
const createInterventionLink = (id: number) =>
useApiFetch<AssignmentLinkResponse>(`/api/v1/reports/${id}/intervention-link`, { method: 'POST' })
const revokeInterventionLink = (id: number) =>
useApiFetch<OkResponse>(`/api/v1/reports/${id}/intervention-link`, { method: 'DELETE' })
const getPublicIntervention = (token: string) =>
useApiFetch<any>(`/api/v1/interventions/${token}`, { method: 'GET' })
return {
getOpenReports,
getAssignedReports,
@@ -41,5 +51,8 @@ export const useOperator = () => {
updateReportStatus,
assignTeam,
getInterventionSummary,
createInterventionLink,
revokeInterventionLink,
getPublicIntervention,
}
}
app/composables/useReports.ts
+1 -1
View File
@@ -9,7 +9,7 @@ import type {
} from "~/types/api";
export const useReports = () => {
const getReports = (query?: { area_id?: number; category_id?: number; status?: string }) =>
const getReports = (query?: { area_id?: number; category_id?: number; status?: string; page?: number; per_page?: number }) =>
useApiFetch<ReportListResponse>('/api/v1/reports', { method: 'GET', query })
const getCategories = () =>
app/layouts/default.vue
+14
View File
@@ -11,6 +11,7 @@ import Footer from "~/components/Footer.vue";
<slot />
</main>
<div class="italian-flag"></div>
<Footer />
</div>
</template>
@@ -22,6 +23,19 @@ import Footer from "~/components/Footer.vue";
min-height: 100vh;
}
div.italian-flag {
height: 8px;
width: 100%;
background: linear-gradient(to right, #009246 0%, #009246 33.33%, #F1F2F1 33.33%, #F1F2F1 66.66%, #CE2B37 66.66%, #CE2B37 100%);
}
div.italian-flag {
height: 8px;
width: 100%;
box-shadow: rgb(0 0 0 / 0.7) 0 0 30px;
background: linear-gradient(to right, #009246 0%, #009246 33.33%, #F1F2F1 33.33%, #F1F2F1 66.66%, #CE2B37 66.66%, #CE2B37 100%);
}
.app-main {
flex-grow: 1;
}
app/middleware/auth.ts
+6 -16
View File
@@ -1,7 +1,8 @@
import { checkRoleAccess, type MetaRoleRequirement } from '~/utils/roles'
export default defineNuxtRouteMiddleware(async (to) => {
const auth = useAuth()
// Se c'è un token ma l'utente non è ancora caricato e non stiamo già sincronizzando, sincronizza
if ((auth.token.value || auth.tokenState.value) && !auth.user.value && !auth.isSyncingUser.value) {
try {
await auth.syncUser({ currentPath: to.path })
@@ -11,28 +12,17 @@ export default defineNuxtRouteMiddleware(async (to) => {
}
}
// Se non autenticato, redirige al login
if (!auth.isAuthenticated.value) {
return navigateTo('/auth/login')
}
// Verifica ruoli se richiesto
const requiredRole = to.meta.auth?.role
const requiredRole = to.meta.auth?.role as MetaRoleRequirement | undefined
if (requiredRole && auth.user.value) {
const userRole = auth.user.value.role.toUpperCase()
const userRole = auth.user.value.role
const roleLevels: Record<string, number> = {
'CITIZEN': 1,
'OPERATOR': 2,
'ADMIN': 3
}
const userLevel = roleLevels[userRole] || 0
const requiredLevel = roleLevels[requiredRole] || 0
if (userLevel < requiredLevel) {
console.warn(`[Auth] User role ${userRole} (level ${userLevel}) insufficient for required ${requiredRole} (level ${requiredLevel})`)
if (!checkRoleAccess(userRole, requiredRole)) {
console.warn(`[Auth] User role '${userRole}' rejected for route requirement:`, requiredRole)
return navigateTo('/')
}
}
app/pages/admin/areas.vue
+320 -44
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, nextTick, onBeforeUnmount } from 'vue'
import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue'
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
definePageMeta({
@@ -9,23 +9,129 @@ definePageMeta({
useHead({ title: 'Aree - Admin' })
const { getAreas, createArea } = useAdmin()
const { getAreas, createArea, updateArea, deleteArea } = useAdmin()
const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
const isCreating = ref(false)
const editingAreaId = ref<number | null>(null)
const formData = reactive({
name: '',
description: '',
geojson: ''
})
const jsonError = ref('')
const actionError = ref('')
const modalError = ref('')
const deletingAreaId = ref<number | null>(null)
const areaPendingDelete = ref<any | null>(null)
// Map variables
let map: any = null
let mainMap: any = null
let polygon: any = null
const mapPoints = ref<[number, number][]>([])
const modalTitle = computed(() => editingAreaId.value ? 'Modifica Area' : 'Nuova Area')
const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Crea Area')
const isEditing = computed(() => editingAreaId.value !== null)
const areas = computed(() => areasRes.value?.areas || [])
const areaDeleteMessage = computed(() =>
areaPendingDelete.value ? `Vuoi eliminare area "${areaPendingDelete.value.name}"? Operazione irreversibile.` : ''
)
const initMainMap = async () => {
const mapElement = document.getElementById('mainMap')
if (!mapElement) return
const L = (await import('leaflet')).default
if (mainMap) {
mainMap.remove()
mainMap = null
}
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
mainMap = L.map('mainMap', {
maxBounds: bariBounds,
maxBoundsViscosity: 1,
minZoom: 11
}).setView(BARI_CENTER, 12)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(mainMap)
const featureGroup = L.featureGroup().addTo(mainMap)
let hasLayers = false
areas.value.forEach((area: any) => {
if (area.boundary_geojson) {
try {
const layer = L.geoJSON(JSON.parse(area.boundary_geojson), {
style: {
color: '#0d6efd',
weight: 2,
fillOpacity: 0.2
}
}).bindPopup(`<strong>${area.name}</strong><br/>${area.description || ''}`)
layer.addTo(featureGroup)
hasLayers = true
} catch (e) {
console.error('Invalid geojson for area', area.id, e)
}
}
})
if (hasLayers) {
mainMap.fitBounds(featureGroup.getBounds())
} else {
mainMap.fitBounds(bariBounds)
}
}
watch([areas, pending], () => {
if (!pending.value) {
if (areas.value.length > 0) {
nextTick(() => {
initMainMap()
})
} else if (mainMap) {
mainMap.remove()
mainMap = null
}
}
}, { immediate: true })
const renderExistingAreasInModal = (L: any, currentMap: any) => {
areas.value.forEach((area: any) => {
if (area.id === editingAreaId.value) return
if (area.boundary_geojson) {
try {
L.geoJSON(JSON.parse(area.boundary_geojson), {
style: {
color: '#6c757d',
weight: 2,
dashArray: '5, 5',
fillOpacity: 0.1
},
interactive: false
}).addTo(currentMap)
} catch (e) {
}
}
})
}
const openCreateModal = () => {
actionError.value = ''
modalError.value = ''
editingAreaId.value = null
formData.name = ''
formData.description = ''
formData.geojson = ''
@@ -34,7 +140,6 @@ const openCreateModal = () => {
isCreating.value = true
nextTick(async () => {
// Import leaflet solo client-side
const L = (await import('leaflet')).default
if (map) {
@@ -43,8 +148,8 @@ const openCreateModal = () => {
}
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map('areaMap', {
@@ -60,6 +165,8 @@ const openCreateModal = () => {
polygon = L.polygon([], { color: 'red' }).addTo(map)
map.fitBounds(bariBounds)
renderExistingAreasInModal(L, map)
map.on('click', (e: any) => {
if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
@@ -67,6 +174,88 @@ const openCreateModal = () => {
}
jsonError.value = ''
modalError.value = ''
mapPoints.value.push([e.latlng.lat, e.latlng.lng])
polygon.setLatLngs(mapPoints.value)
updateGeojson()
})
})
}
const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
const coordinates = boundaryGeojson?.coordinates?.[0]
if (!Array.isArray(coordinates)) {
mapPoints.value = []
return
}
const normalized = coordinates
.slice(0, -1)
.map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
mapPoints.value = normalized
if (polygon) {
polygon.setLatLngs(mapPoints.value)
}
}
const openEditModal = (area: any) => {
actionError.value = ''
modalError.value = ''
editingAreaId.value = area.id
formData.name = area.name || ''
formData.description = area.description || ''
formData.geojson = area.boundary_geojson || ''
jsonError.value = ''
mapPoints.value = []
isCreating.value = true
nextTick(async () => {
const L = (await import('leaflet')).default
if (map) {
map.remove()
map = null
}
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map('areaMap', {
maxBounds: bariBounds,
maxBoundsViscosity: 1,
minZoom: 12
}).setView(BARI_CENTER, 12)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map)
console.log(JSON.parse(area.boundary_geojson))
L.geoJSON(JSON.parse(area.boundary_geojson), {
style: {
color: '#0d6efd',
weight: 2,
fillOpacity: 0.2
}
}).addTo(map)
polygon = L.polygon([], { color: 'red' }).addTo(map)
map.fitBounds(bariBounds)
renderExistingAreasInModal(L, map)
loadPolygonFromGeoJson(area.boundary_geojson)
map.on('click', (e: any) => {
if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
return
}
jsonError.value = ''
modalError.value = ''
mapPoints.value.push([e.latlng.lat, e.latlng.lng])
polygon.setLatLngs(mapPoints.value)
updateGeojson()
@@ -80,6 +269,7 @@ const clearMap = () => {
polygon.setLatLngs([])
}
formData.geojson = ''
modalError.value = ''
}
const updateGeojson = () => {
@@ -87,9 +277,9 @@ const updateGeojson = () => {
formData.geojson = ''
return
}
const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number])
if (coords[0]) {
coords.push([...coords[0]]) // Chiudi poligono
coords.push([...coords[0]])
}
formData.geojson = JSON.stringify({
@@ -100,6 +290,7 @@ const updateGeojson = () => {
const closeCreateModal = () => {
isCreating.value = false
editingAreaId.value = null
if (map) {
map.remove()
map = null
@@ -108,10 +299,12 @@ const closeCreateModal = () => {
onBeforeUnmount(() => {
if (map) map.remove()
if (mainMap) mainMap.remove()
})
const handleCreate = async () => {
jsonError.value = ''
modalError.value = ''
let parsedGeojson = null
try {
@@ -131,19 +324,65 @@ const handleCreate = async () => {
}
try {
const res = await createArea({
const payload = {
name: formData.name,
description: formData.description || undefined,
boundary_geojson: parsedGeojson
})
}
const res = editingAreaId.value
? await updateArea(editingAreaId.value, payload)
: await createArea(payload)
if (res.ok) {
await refresh()
closeCreateModal()
actionError.value = ''
}
} catch (err) {
console.error('Failed to create area', err)
alert('Errore durante la creazione dell\'area.')
} catch (err: any) {
console.error('Failed to save area', err)
const backendError = err?.data?.error || err?.response?.data?.error || err?.response?._data?.error;
if (backendError === 'area_outside_allowed_boundary') {
modalError.value = "Attenzione: l'area disegnata esce dai confini consentiti per il Comune di Bari.";
} else {
modalError.value = err?.data?.message || err?.message || "Errore durante il salvataggio dell'area.";
}
}
}
const askDeleteArea = (area: any) => {
areaPendingDelete.value = area
}
const closeDeleteAreaModal = () => {
if (deletingAreaId.value) return
areaPendingDelete.value = null
}
const handleDeleteArea = async () => {
if (!areaPendingDelete.value) return
const area = areaPendingDelete.value
deletingAreaId.value = area.id
actionError.value = ''
try {
const res = await deleteArea(area.id)
if (res.ok) {
if (editingAreaId.value === area.id) {
closeCreateModal()
}
await refresh()
areaPendingDelete.value = null
}
} catch (err: any) {
console.error('Failed to delete area', err)
actionError.value = err?.data?.message || 'Errore durante eliminazione area.'
} finally {
deletingAreaId.value = null
}
}
</script>
@@ -155,7 +394,7 @@ const handleCreate = async () => {
<div>
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna al pannello admin</NuxtLink>
<button class="btn btn-primary btn-sm" @click="openCreateModal">
<BIIcon name="it-plus" size="xs" class="me-1" />
<BIIcon class="me-1" name="it-plus" size="xs"/>
Nuova Area
</button>
</div>
@@ -165,55 +404,79 @@ const handleCreate = async () => {
<div class="spinner-border text-primary" role="status"></div>
</div>
<div v-else-if="!areasRes?.areas || areasRes.areas.length === 0" class="alert alert-info">
<div v-else-if="areas.length === 0" class="alert alert-info">
Nessuna area configurata.
</div>
<div v-else class="table-responsive">
<table class="table table-hover align-middle bg-white shadow-sm rounded">
<thead class="table-light">
<template v-else>
<div class="card mb-4 shadow-sm border-0">
<div id="mainMap" class="rounded" style="height: 400px; width: 100%; z-index: 1;"></div>
</div>
<div v-if="actionError" class="alert alert-danger">
{{ actionError }}
</div>
<div v-else class="table-responsive">
<table class="table table-hover align-middle bg-white shadow-sm rounded">
<thead class="table-light">
<tr>
<th>ID</th>
<th>Nome</th>
<th>Descrizione</th>
<th>Stato</th>
<th>GeoJSON</th>
<th class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
<tr v-for="area in areasRes.areas" :key="area.id">
</thead>
<tbody>
<tr v-for="area in areas" :key="area.id">
<td>{{ area.id }}</td>
<td><strong>{{ area.name }}</strong></td>
<td>{{ area.description || '-' }}</td>
<td>
<span v-if="area.active" class="badge bg-success">Attiva</span>
<span v-else class="badge bg-secondary">Inattiva</span>
</td>
<td>
<span v-if="area.boundary_geojson" class="badge border border-primary text-primary">Configurato</span>
<span v-else class="badge border border-danger text-danger">Mancante</span>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary me-2" @click="openEditModal(area)">
Modifica
</button>
<button
class="btn btn-sm btn-outline-danger ms-2"
:disabled="deletingAreaId === area.id"
@click="askDeleteArea(area)"
>
<span v-if="deletingAreaId === area.id" class="spinner-border spinner-border-sm me-1"></span>
Elimina
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</template>
<!-- Modale Creazione -->
<div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isCreating" class="modal-backdrop fade show d-block"
style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isCreating" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nuova Area</h5>
<h5 class="modal-title">{{ modalTitle }}</h5>
<button type="button" class="btn-close" @click="closeCreateModal"></button>
</div>
<div class="modal-body">
<div v-if="modalError" class="alert alert-danger mb-4 d-flex align-items-center" role="alert">
<strong>Errore:</strong>&nbsp;{{ modalError }}
</div>
<form @submit.prevent="handleCreate">
<div class="row">
<div class="col-md-5">
<div class="mb-3">
<label class="form-label">Nome Area</label>
<input type="text" class="form-control" v-model="formData.name" required placeholder="Es. Centro Storico" />
<input v-model="formData.name" class="form-control" placeholder="Es. Centro Storico" required
type="text"/>
</div>
<div class="mb-3">
<label class="form-label">Descrizione (opzionale)</label>
@@ -222,12 +485,12 @@ const handleCreate = async () => {
<div class="mb-3">
<label class="form-label">GeoJSON Generato</label>
<textarea
class="form-control font-monospace text-sm"
rows="6"
v-model="formData.geojson"
required
readonly
placeholder='{ "type": "Polygon", "coordinates": [...] }'
class="form-control font-monospace text-sm"
rows="6"
v-model="formData.geojson"
required
readonly
placeholder='{ "type": "Polygon", "coordinates": [...] }'
></textarea>
<div v-if="jsonError" class="form-text text-danger mt-1">{{ jsonError }}</div>
</div>
@@ -241,7 +504,8 @@ const handleCreate = async () => {
</button>
</div>
<div class="alert alert-light border small mb-2 p-2">
Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi solo punti nel Comune di Bari.
Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi
solo punti nel Comune di Bari.
</div>
<div id="areaMap" class="rounded border" style="height: 400px; width: 100%; z-index: 1;"></div>
</div>
@@ -250,22 +514,34 @@ const handleCreate = async () => {
</div>
<div class="modal-footer d-flex justify-content-end gap-2">
<button type="button" class="btn btn-outline-secondary" @click="closeCreateModal">Annulla</button>
<button type="button" class="btn btn-primary" :disabled="!formData.name || !formData.geojson" @click="handleCreate">
Crea Area
<button :disabled="!formData.name || !formData.geojson" class="btn btn-primary" type="button"
@click="handleCreate">
{{ submitLabel }}
</button>
</div>
</div>
</div>
</div>
<ConfirmModal
:open="areaPendingDelete !== null"
title="Elimina area"
:message="areaDeleteMessage"
confirm-label="Elimina area"
confirm-class="btn-danger"
:pending="deletingAreaId !== null"
@cancel="closeDeleteAreaModal"
@confirm="handleDeleteArea"
/>
</div>
</template>
<style scoped>
#areaMap {
#areaMap, #mainMap {
background: #e9ecef;
}
.modal-dialog {
margin-block: 0!important;
margin-block: 0 !important;
}
</style>
app/pages/admin/catalog.vue
+299 -58
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { Category, Team } from '~/types/api'
definePageMeta({
middleware: 'auth',
auth: { role: 'ADMIN' }
@@ -6,10 +8,14 @@ definePageMeta({
useHead({ title: 'Categorie e Team - Admin' })
const { createCategory, getTeams, createTeam, getAreas } = useAdmin()
const { createCategory, updateCategory, deleteCategory, createTeam, updateTeam, deleteTeam, getAreas } = useAdmin()
const { getCategories } = useReports()
const { getTeams } = useOperator()
const { data: categoriesRes, refresh: refreshCategories } = await useAsyncData('report-categories-admin-view', () => getCategories())
const {
data: categoriesRes,
refresh: refreshCategories
} = await useAsyncData('report-categories-admin-view', () => getCategories())
const { data: teamsRes, refresh: refreshTeams } = await useAsyncData('admin-teams', () => getTeams())
const { data: areasRes } = await useAsyncData('admin-team-areas', () => getAreas())
@@ -18,6 +24,8 @@ const categoryForm = reactive({
description: '',
})
const editingCategoryId = ref<number | null>(null)
const teamForm = reactive({
name: '',
description: '',
@@ -25,26 +33,70 @@ const teamForm = reactive({
area_id: null as number | null,
})
const editingTeamId = ref<number | null>(null)
const isSavingCategory = ref(false)
const isSavingTeam = ref(false)
const categoryError = ref('')
const teamError = ref('')
const deletingCategoryId = ref<number | null>(null)
const deletingTeamId = ref<number | null>(null)
const categoryPendingDelete = ref<Category | null>(null)
const teamPendingDelete = ref<Team | null>(null)
const categories = computed(() => categoriesRes.value?.categories || [])
const teams = computed(() => teamsRes.value?.teams || [])
const areas = computed(() => areasRes.value?.areas || [])
const categoryDeleteMessage = computed(() =>
categoryPendingDelete.value ? `Vuoi eliminare categoria "${categoryPendingDelete.value.name}"? Operazione irreversibile.` : ''
)
const teamDeleteMessage = computed(() =>
teamPendingDelete.value ? `Vuoi eliminare team "${teamPendingDelete.value.name}"? Operazione irreversibile.` : ''
)
const resetCategoryForm = () => {
editingCategoryId.value = null
categoryForm.name = ''
categoryForm.description = ''
}
const resetTeamForm = () => {
editingTeamId.value = null
teamForm.name = ''
teamForm.description = ''
teamForm.team_category_id = null
teamForm.area_id = null
}
const editCategory = (category: Category) => {
editingCategoryId.value = category.id
categoryForm.name = category.name
categoryForm.description = category.description || ''
}
const editTeam = (team: Team) => {
editingTeamId.value = team.id
teamForm.name = team.name
teamForm.description = team.description || ''
teamForm.team_category_id = team.team_category_id
teamForm.area_id = team.area_id ?? null
}
const submitCategory = async () => {
categoryError.value = ''
isSavingCategory.value = true
try {
await createCategory({
const payload = {
name: categoryForm.name.trim(),
description: categoryForm.description.trim() || undefined,
})
categoryForm.name = ''
categoryForm.description = ''
}
if (editingCategoryId.value) {
await updateCategory(editingCategoryId.value, payload)
} else {
await createCategory(payload)
}
resetCategoryForm()
await refreshCategories()
} catch (error: any) {
categoryError.value = error?.data?.message || 'Creazione categoria non riuscita.'
@@ -60,16 +112,18 @@ const submitTeam = async () => {
isSavingTeam.value = true
try {
await createTeam({
const payload = {
name: teamForm.name.trim(),
description: teamForm.description.trim() || undefined,
team_category_id: teamForm.team_category_id,
area_id: teamForm.area_id || undefined,
})
teamForm.name = ''
teamForm.description = ''
teamForm.team_category_id = null
teamForm.area_id = null
}
if (editingTeamId.value) {
await updateTeam(editingTeamId.value, payload)
} else {
await createTeam(payload)
}
resetTeamForm()
await refreshTeams()
} catch (error: any) {
teamError.value = error?.data?.message || 'Creazione team non riuscita.'
@@ -77,6 +131,86 @@ const submitTeam = async () => {
isSavingTeam.value = false
}
}
const toggleCategoryActive = async (category: Category) => {
try {
await updateCategory(category.id, { active: category.active === false })
await refreshCategories()
} catch (error: any) {
categoryError.value = error?.data?.message || 'Aggiornamento categoria non riuscito.'
}
}
const askDeleteCategory = (category: Category) => {
categoryPendingDelete.value = category
}
const closeDeleteCategoryModal = () => {
if (deletingCategoryId.value) return
categoryPendingDelete.value = null
}
const handleDeleteCategory = async () => {
if (!categoryPendingDelete.value) return
const category = categoryPendingDelete.value
deletingCategoryId.value = category.id
categoryError.value = ''
try {
await deleteCategory(category.id)
if (editingCategoryId.value === category.id) {
resetCategoryForm()
}
await refreshCategories()
categoryPendingDelete.value = null
} catch (error: any) {
categoryError.value = error?.data?.message || 'Eliminazione categoria non riuscita.'
} finally {
deletingCategoryId.value = null
}
}
const toggleTeamActive = async (team: Team) => {
try {
await updateTeam(team.id, { active: team.active === false })
await refreshTeams()
} catch (error: any) {
teamError.value = error?.data?.message || 'Aggiornamento team non riuscito.'
}
}
const askDeleteTeam = (team: Team) => {
teamPendingDelete.value = team
}
const closeDeleteTeamModal = () => {
if (deletingTeamId.value) return
teamPendingDelete.value = null
}
const handleDeleteTeam = async () => {
if (!teamPendingDelete.value) return
const team = teamPendingDelete.value
deletingTeamId.value = team.id
teamError.value = ''
try {
await deleteTeam(team.id)
if (editingTeamId.value === team.id) {
resetTeamForm()
}
await refreshTeams()
teamPendingDelete.value = null
} catch (error: any) {
teamError.value = error?.data?.message || 'Eliminazione team non riuscita.'
} finally {
deletingTeamId.value = null
}
}
</script>
<template>
@@ -105,7 +239,7 @@ const submitTeam = async () => {
<form class="mb-4" @submit.prevent="submitCategory">
<div class="mb-3">
<label class="form-label">Nome categoria</label>
<input v-model="categoryForm.name" type="text" class="form-control" required />
<input v-model="categoryForm.name" class="form-control" required type="text"/>
</div>
<div class="mb-3">
<label class="form-label">Descrizione</label>
@@ -113,35 +247,68 @@ const submitTeam = async () => {
</div>
<button type="submit" class="btn btn-primary" :disabled="isSavingCategory || !categoryForm.name.trim()">
<span v-if="isSavingCategory" class="spinner-border spinner-border-sm me-2"></span>
Crea categoria
{{ editingCategoryId ? 'Salva categoria' : 'Crea categoria' }}
</button>
<button
v-if="editingCategoryId"
class="btn btn-outline-secondary ms-2"
type="button"
@click="resetCategoryForm"
>
Annulla
</button>
</form>
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0">
<table class="table table-hover report-table mb-0 align-middle">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Stato</th>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Stato</th>
<th class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
<tr v-for="category in categories" :key="category.id">
<td class="report-table-id">#{{ category.id }}</td>
<td>
<strong>{{ category.name }}</strong>
<div v-if="category.description" class="small text-muted mt-1">{{ category.description }}</div>
</td>
<td>
<tr v-for="category in categories" :key="category.id">
<td class="report-table-id">#{{ category.id }}</td>
<td>
<strong>{{ category.name }}</strong>
<div v-if="category.description" class="small text-muted mt-1">{{ category.description }}</div>
</td>
<td>
<span class="badge" :class="category.active === false ? 'bg-secondary' : 'bg-success'">
{{ category.active === false ? 'Inattiva' : 'Attiva' }}
</span>
</td>
</tr>
<tr v-if="categories.length === 0">
<td colspan="3" class="text-muted">Nessuna categoria configurata.</td>
</tr>
</td>
<td class="text-end">
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-outline-primary btn-icon" title="Modifica" @click="editCategory(category)">
<Icon name="lucide:pencil" size="16"/>
</button>
<button
:class="category.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
:title="category.active === false ? 'Attiva' : 'Disattiva'"
class="btn btn-icon"
@click="toggleCategoryActive(category)"
>
<Icon :name="category.active === false ? 'lucide:check-circle' : 'lucide:ban'" size="16"/>
</button>
<button
:disabled="deletingCategoryId === category.id"
class="btn btn-outline-danger btn-icon"
title="Elimina"
@click="askDeleteCategory(category)"
>
<span v-if="deletingCategoryId === category.id" class="spinner-border spinner-icon"></span>
<Icon v-else name="lucide:trash-2" size="16"/>
</button>
</div>
</td>
</tr>
<tr v-if="categories.length === 0">
<td class="text-muted text-center py-4" colspan="4">Nessuna categoria configurata.</td>
</tr>
</tbody>
</table>
</div>
@@ -164,7 +331,7 @@ const submitTeam = async () => {
<form class="row g-3 mb-4" @submit.prevent="submitTeam">
<div class="col-12 col-md-6">
<label class="form-label">Nome team</label>
<input v-model="teamForm.name" type="text" class="form-control" required />
<input v-model="teamForm.name" class="form-control" required type="text"/>
</div>
<div class="col-12 col-md-6">
<label class="form-label">Categoria coperta</label>
@@ -186,45 +353,79 @@ const submitTeam = async () => {
</div>
<div class="col-12 col-md-6">
<label class="form-label">Descrizione</label>
<input v-model="teamForm.description" type="text" class="form-control" />
<input v-model="teamForm.description" class="form-control" type="text"/>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary" :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id">
<button :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id" class="btn btn-primary"
type="submit">
<span v-if="isSavingTeam" class="spinner-border spinner-border-sm me-2"></span>
Crea team
{{ editingTeamId ? 'Salva team' : 'Crea team' }}
</button>
<button
v-if="editingTeamId"
class="btn btn-outline-secondary ms-2"
type="button"
@click="resetTeamForm"
>
Annulla
</button>
</div>
</form>
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0">
<table class="table table-hover report-table mb-0 align-middle">
<thead>
<tr>
<th>ID</th>
<th>Team</th>
<th>Categoria</th>
<th>Area</th>
<th>Stato</th>
</tr>
<tr>
<th>ID</th>
<th>Team</th>
<th>Categoria</th>
<th>Area</th>
<th>Stato</th>
<th class="text-end">Azioni</th>
</tr>
</thead>
<tbody>
<tr v-for="team in teams" :key="team.id">
<td class="report-table-id">#{{ team.id }}</td>
<td>
<strong>{{ team.name }}</strong>
<div v-if="team.description" class="small text-muted mt-1">{{ team.description }}</div>
</td>
<td>{{ team.category_name || '-' }}</td>
<td>{{ team.area_name || 'Tutte' }}</td>
<td>
<tr v-for="team in teams" :key="team.id">
<td class="report-table-id">#{{ team.id }}</td>
<td>
<strong>{{ team.name }}</strong>
<div v-if="team.description" class="small text-muted mt-1">{{ team.description }}</div>
</td>
<td>{{ team.category_name || '-' }}</td>
<td>{{ team.area_name || 'Tutte' }}</td>
<td>
<span class="badge" :class="team.active === false ? 'bg-secondary' : 'bg-success'">
{{ team.active === false ? 'Inattivo' : 'Attivo' }}
</span>
</td>
</tr>
<tr v-if="teams.length === 0">
<td colspan="5" class="text-muted">Nessun team configurato.</td>
</tr>
</td>
<td class="text-end">
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-outline-primary btn-icon" title="Modifica" @click="editTeam(team)">
<Icon name="lucide:pencil" size="16"/>
</button>
<button
:class="team.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
:title="team.active === false ? 'Attiva' : 'Disattiva'"
class="btn btn-icon"
@click="toggleTeamActive(team)"
>
<Icon :name="team.active === false ? 'lucide:check-circle' : 'lucide:ban'" size="16"/>
</button>
<button
:disabled="deletingTeamId === team.id"
class="btn btn-outline-danger btn-icon"
title="Elimina"
@click="askDeleteTeam(team)"
>
<span v-if="deletingTeamId === team.id" class="spinner-border spinner-icon"></span>
<Icon v-else name="lucide:trash-2" size="16"/>
</button>
</div>
</td>
</tr>
<tr v-if="teams.length === 0">
<td class="text-muted text-center py-4" colspan="6">Nessun team configurato.</td>
</tr>
</tbody>
</table>
</div>
@@ -232,5 +433,45 @@ const submitTeam = async () => {
</div>
</div>
</div>
<ConfirmModal
:message="categoryDeleteMessage"
:open="categoryPendingDelete !== null"
:pending="deletingCategoryId !== null"
confirm-class="btn-danger"
confirm-label="Elimina categoria"
title="Elimina categoria"
@cancel="closeDeleteCategoryModal"
@confirm="handleDeleteCategory"
/>
<ConfirmModal
:message="teamDeleteMessage"
:open="teamPendingDelete !== null"
:pending="deletingTeamId !== null"
confirm-class="btn-danger"
confirm-label="Elimina team"
title="Elimina team"
@cancel="closeDeleteTeamModal"
@confirm="handleDeleteTeam"
/>
</div>
</template>
<style scoped>
.btn-icon {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.spinner-icon {
width: 14px;
height: 14px;
border-width: 2px;
}
</style>
app/pages/admin/moderation.vue
+175 -38
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { reactive, ref } from 'vue'
definePageMeta({
middleware: 'auth',
@@ -13,43 +13,92 @@ const { getModerationFlags, updateModerationFlag } = useAdmin()
const page = ref(1)
const perPage = ref(10)
const statusFilter = ref('')
const actionError = ref('')
const resolveModal = reactive({
open: false,
flagId: null as number | null,
rejectReport: false,
note: '',
pending: false,
})
const dismissModal = reactive({
open: false,
flagId: null as number | null,
pending: false,
})
const { data: flagsRes, pending, refresh } = useAsyncData(
'admin-moderation-flags',
() => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
{ watch: [page, statusFilter] }
'admin-moderation-flags',
() => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
{ watch: [page, statusFilter] }
)
const handleResolve = async (id: number, rejectReport: boolean) => {
const note = prompt('Inserisci una nota di risoluzione (opzionale):')
if (note === null) return // cancelled
const openResolveModal = (id: number, rejectReport: boolean) => {
resolveModal.open = true
resolveModal.flagId = id
resolveModal.rejectReport = rejectReport
resolveModal.note = ''
}
const closeResolveModal = () => {
if (resolveModal.pending) return
resolveModal.open = false
resolveModal.flagId = null
resolveModal.note = ''
}
const handleResolve = async () => {
if (!resolveModal.flagId) return
resolveModal.pending = true
actionError.value = ''
try {
const res = await updateModerationFlag(id, {
await updateModerationFlag(resolveModal.flagId, {
status: 'RESOLVED',
reject_report: rejectReport,
resolution_note: note
reject_report: resolveModal.rejectReport,
resolution_note: resolveModal.note || undefined
})
if (res.ok) {
await refresh()
}
resolveModal.pending = false
await refresh()
closeResolveModal()
} catch (err) {
console.error('Failed to resolve flag', err)
alert('Errore durante la risoluzione della segnalazione.')
actionError.value = 'Errore durante la risoluzione della segnalazione.'
} finally {
resolveModal.pending = false
}
}
const handleDismiss = async (id: number) => {
if (!confirm('Sei sicuro di voler ignorare (dismiss) questo flag?')) return
const openDismissModal = (id: number) => {
dismissModal.open = true
dismissModal.flagId = id
}
const closeDismissModal = () => {
if (dismissModal.pending) return
dismissModal.open = false
dismissModal.flagId = null
}
const handleDismiss = async () => {
if (!dismissModal.flagId) return
dismissModal.pending = true
actionError.value = ''
try {
const res = await updateModerationFlag(id, { status: 'DISMISSED' })
if (res.ok) {
await refresh()
}
await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
dismissModal.pending = false
await refresh()
closeDismissModal()
} catch (err) {
console.error('Failed to dismiss flag', err)
alert('Errore durante l\'aggiornamento.')
actionError.value = 'Errore durante l\'aggiornamento.'
} finally {
dismissModal.pending = false
}
}
@@ -59,6 +108,19 @@ const formatDate = (dateStr: string) => {
hour: '2-digit', minute: '2-digit'
})
}
const formatFlagStatus = (status: string) => {
const map: Record<string, string> = {
OPEN: 'Aperto',
RESOLVED: 'Risolto',
DISMISSED: 'Ignorato'
}
return map[status] || status
}
const contentTypeLabel = (type: string) => type === 'REPORT' ? 'Segnalazione' : 'Messaggio'
const canRejectReport = (flag: any) => flag.content_type === 'REPORT'
</script>
<template>
@@ -80,24 +142,33 @@ const formatDate = (dateStr: string) => {
</div>
</div>
<div v-if="actionError" class="alert alert-danger mb-4">
{{ actionError }}
</div>
<div v-if="pending" class="text-center py-5">
<div class="spinner-border text-danger" role="status"></div>
</div>
<div v-else-if="!flagsRes?.flags || flagsRes.flags.length === 0" class="alert alert-success">
<div v-else-if="!flagsRes || !flagsRes.flags || flagsRes.flags.length === 0" class="alert alert-success">
Nessun elemento da moderare al momento.
</div>
<div v-else>
<div class="card mb-3 shadow-sm border-0" v-for="flag in flagsRes.flags" :key="flag.id">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<div
class="card mb-3 border-0"
:class="flag.status === 'DISMISSED' ? 'dismissed-card shadow-none' : 'shadow-sm'"
v-for="flag in flagsRes.flags"
:key="flag.id"
>
<div class="card-header d-flex justify-content-between align-items-center" :class="flag.status === 'DISMISSED' ? 'bg-transparent' : 'bg-light'">
<div>
<strong>Flag #{{ flag.id }}</strong> -
<span class="badge" :class="{
'bg-warning': flag.status === 'OPEN',
'bg-success': flag.status === 'RESOLVED',
'bg-secondary': flag.status === 'DISMISSED'
}">{{ flag.status }}</span>
}">{{ formatFlagStatus(flag.status) }}</span>
</div>
<small class="text-muted">{{ formatDate(flag.created_at) }}</small>
</div>
@@ -109,8 +180,8 @@ const formatDate = (dateStr: string) => {
{{ flag.details || 'Nessun dettaglio aggiuntivo fornito.' }}
</p>
<div class="mt-3">
<span class="badge bg-info me-2">{{ flag.content_type }}</span>
<div class="mt-info">
<span class="badge bg-info me-2">{{ contentTypeLabel(flag.content_type) }}</span>
<span v-if="flag.report_id">
Rif:
<NuxtLink :to="`/operator/reports/${flag.report_id}`" class="text-decoration-none">
@@ -122,7 +193,7 @@ const formatDate = (dateStr: string) => {
</span>
</div>
<div class="mt-3 small">
<div class="mt-info small text-muted">
Segnalato da: {{ flag.created_by_email }} (ID: {{ flag.created_by_user_id }})
</div>
@@ -134,13 +205,13 @@ const formatDate = (dateStr: string) => {
<div class="col-md-4 text-end" v-if="flag.status === 'OPEN'">
<div class="d-flex flex-column gap-2 mt-3 mt-md-0">
<button class="btn btn-outline-danger btn-sm" @click="handleResolve(flag.id, true)">
<BIIcon name="it-ban" size="xs" /> Risolvi & Rigetta Segn.
<button class="btn btn-outline-danger btn-sm" @click="openResolveModal(flag.id, canRejectReport(flag))">
<BIIcon name="it-ban" size="xs" /> {{ canRejectReport(flag) ? 'Risolvi & Rigetta Segn.' : 'Risolvi flag' }}
</button>
<button class="btn btn-outline-warning btn-sm" @click="handleResolve(flag.id, false)">
<BIIcon name="it-check" size="xs" /> Risolvi (Solo Avviso)
<button class="btn btn-outline-warning btn-sm" @click="openResolveModal(flag.id, false)">
<BIIcon name="it-check" size="xs" /> {{ canRejectReport(flag) ? 'Risolvi (Solo Avviso)' : 'Risolvi senza rigetto' }}
</button>
<button class="btn btn-outline-secondary btn-sm" @click="handleDismiss(flag.id)">
<button class="btn btn-outline-secondary btn-sm" @click="openDismissModal(flag.id)">
<BIIcon name="it-close" size="xs" /> Ignora Flag
</button>
</div>
@@ -150,12 +221,78 @@ const formatDate = (dateStr: string) => {
</div>
<Pagination
v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
:current-page="page"
:per-page="perPage"
:total-items="flagsRes.total || (page * perPage + 1)"
@page-change="page = $event"
v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
:current-page="page"
:per-page="perPage"
:total-items="flagsRes.total || (page * perPage + 1)"
@page-change="page = $event"
/>
</div>
<div v-if="resolveModal.open" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="resolveModal.open" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ resolveModal.rejectReport ? 'Risolvi e rigetta segnalazione' : 'Risolvi flag' }}</h5>
<button type="button" class="btn-close" :disabled="resolveModal.pending" @click="closeResolveModal"></button>
</div>
<div class="modal-body">
<label class="form-label">Nota di risoluzione</label>
<textarea v-model="resolveModal.note" class="form-control" rows="4" placeholder="Nota opzionale"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" :disabled="resolveModal.pending" @click="closeResolveModal">Annulla</button>
<button type="button" class="btn btn-primary" :disabled="resolveModal.pending" @click="handleResolve">
<span v-if="resolveModal.pending" class="spinner-border spinner-border-sm me-2"></span>
Conferma
</button>
</div>
</div>
</div>
</div>
<ConfirmModal
:open="dismissModal.open"
title="Ignora flag"
message="Vuoi ignorare questo flag? Azione registrata in moderazione."
confirm-label="Ignora flag"
confirm-class="btn-outline-secondary"
:pending="dismissModal.pending"
@cancel="closeDismissModal"
@confirm="handleDismiss"
/>
</div>
</template>
<style scoped>
.dismissed-card {
background-color: #f8f9fa;
opacity: 0.7;
border: 1px solid #e9ecef !important;
}
.dismissed-card .card-header {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dismissed-card .card-body {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.dismissed-card h5.card-title {
font-size: 1rem;
margin-bottom: 0.2rem;
}
.mt-info {
margin-top: 1rem;
}
.dismissed-card .mt-info {
margin-top: 0.4rem;
}
</style>
app/pages/admin/reports.vue
+231
View File
@@ -0,0 +1,231 @@
<script setup lang="ts">
import type { Report, ReportStatus } from '~/types/api'
definePageMeta({
middleware: 'auth',
auth: { role: 'ADMIN' }
})
useHead({ title: 'Overview Segnalazioni - Admin' })
const { getReports, getCategories } = useReports()
const { getAreas } = useAdmin()
const search = ref('')
const selectedStatus = ref<'ALL' | ReportStatus>('ALL')
const selectedCategoryId = ref<number | 'ALL'>('ALL')
const selectedAreaId = ref<number | 'ALL'>('ALL')
const { data: reportsRes, pending } = await useAsyncData('admin-report-overview', () => getReports())
const { data: categoriesRes } = await useAsyncData('admin-report-overview-categories', () => getCategories())
const { data: areasRes } = await useAsyncData('admin-report-overview-areas', () => getAreas())
const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
const categories = computed(() => categoriesRes.value?.categories || [])
const areas = computed(() => areasRes.value?.areas || [])
const statusMeta: Record<ReportStatus, { label: string; tone: string }> = {
OPEN: { label: 'Aperta', tone: 'danger' },
UNDER_REVIEW: { label: 'In revisione', tone: 'warning' },
ASSIGNED: { label: 'Assegnata', tone: 'info' },
IN_PROGRESS: { label: 'In corso', tone: 'primary' },
RESOLVED: { label: 'Risolta', tone: 'success' },
REJECTED: { label: 'Rigettata', tone: 'secondary' },
CLOSED: { label: 'Chiusa', tone: 'dark' }
}
const filteredReports = computed(() => {
const term = search.value.trim().toLowerCase()
return reports.value.filter((report) => {
const matchesStatus = selectedStatus.value === 'ALL' || report.status === selectedStatus.value
const matchesCategory = selectedCategoryId.value === 'ALL' || report.category_id === selectedCategoryId.value
const matchesArea = selectedAreaId.value === 'ALL' || (report.area_id ?? null) === selectedAreaId.value
const matchesSearch = !term || [
report.id,
report.address,
report.description,
report.category_name,
report.area_name,
report.assigned_operator_id ? `#${report.assigned_operator_id}` : ''
].some((value) => String(value || '').toLowerCase().includes(term))
return matchesStatus && matchesCategory && matchesArea && matchesSearch
})
})
const totalReports = computed(() => reports.value.length)
const openReports = computed(() => reports.value.filter((report) => report.status === 'OPEN').length)
const activeReports = computed(() => reports.value.filter((report) => ['UNDER_REVIEW', 'ASSIGNED', 'IN_PROGRESS'].includes(report.status)).length)
const closedReports = computed(() => reports.value.filter((report) => ['RESOLVED', 'CLOSED'].includes(report.status)).length)
const reportsByStatus = computed(() =>
Object.entries(statusMeta)
.map(([status, meta]) => ({
status: status as ReportStatus,
label: meta.label,
tone: meta.tone,
total: reports.value.filter((report) => report.status === status).length
}))
.filter((item) => item.total > 0)
)
const recentReports = computed(() =>
[...filteredReports.value]
.sort((a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime())
.slice(0, 12)
)
const formatDate = (value?: string) => {
if (!value) return '-'
return new Date(value).toLocaleString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
}
const truncate = (value?: string, max = 120) => {
if (!value) return '-'
return value.length > max ? `${value.slice(0, max).trim()}...` : value
}
</script>
<template>
<div class="container my-5">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
<div>
<h1 class="h3 font-weight-bold mb-1">Overview Segnalazioni</h1>
<p class="text-muted mb-0">Vista completa in sola lettura per monitorare carico, stato e distribuzione.</p>
</div>
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
</div>
<div class="row g-3 mb-4">
<div class="col-6 col-xl-3" v-for="card in [
{ label: 'Totali', value: totalReports, tone: 'primary' },
{ label: 'Aperte', value: openReports, tone: 'danger' },
{ label: 'In lavorazione', value: activeReports, tone: 'warning' },
{ label: 'Chiuse/Risolte', value: closedReports, tone: 'success' }
]" :key="card.label">
<div class="card card-bg dashboard-stat h-100">
<div class="card-body py-3">
<div class="stat-value">{{ card.value }}</div>
<div class="small text-muted">{{ card.label }}</div>
</div>
</div>
</div>
</div>
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="row g-3 align-items-end">
<div class="col-12 col-lg-4">
<label class="form-label">Cerca</label>
<input v-model="search" type="text" class="form-control" placeholder="ID, indirizzo, descrizione, area..." />
</div>
<div class="col-12 col-md-4 col-lg-3">
<label class="form-label">Stato</label>
<select v-model="selectedStatus" class="form-select">
<option value="ALL">Tutti</option>
<option v-for="item in reportsByStatus" :key="item.status" :value="item.status">{{ item.label }}</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-2">
<label class="form-label">Categoria</label>
<select v-model="selectedCategoryId" class="form-select">
<option value="ALL">Tutte</option>
<option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
</select>
</div>
<div class="col-12 col-md-4 col-lg-3">
<label class="form-label">Area</label>
<select v-model="selectedAreaId" class="form-select">
<option value="ALL">Tutte</option>
<option v-for="area in areas" :key="area.id" :value="area.id">{{ area.name }}</option>
</select>
</div>
</div>
</div>
</div>
<div v-if="pending" class="text-center py-5">
<div class="spinner-border text-primary" role="status"></div>
</div>
<template v-else>
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
<h2 class="h5 mb-0">Distribuzione stati</h2>
<span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
</div>
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0 align-middle">
<thead>
<tr>
<th>Stato</th>
<th class="text-end">Totale</th>
</tr>
</thead>
<tbody>
<tr v-for="item in reportsByStatus" :key="item.status">
<td>
<span class="badge" :class="`bg-${item.tone}`">
{{ item.label }}
</span>
</td>
<td class="text-end">{{ item.total }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div v-if="recentReports.length === 0" class="alert alert-info">
Nessuna segnalazione trovata con filtri correnti.
</div>
<div v-else class="card card-bg border-0 shadow-sm">
<div class="card-body p-0">
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0 align-middle">
<thead>
<tr>
<th>ID</th>
<th>Categoria</th>
<th>Indirizzo</th>
<th>Area</th>
<th>Stato</th>
<th>Operatore</th>
<th>Aggiornata</th>
</tr>
</thead>
<tbody>
<tr v-for="report in recentReports" :key="report.id">
<td class="report-table-id">#{{ report.id }}</td>
<td>
<div class="fw-semibold">{{ report.category_name || '-' }}</div>
<small class="text-muted">{{ truncate(report.description, 72) }}</small>
</td>
<td>{{ report.address || '-' }}</td>
<td>{{ report.area_name || 'Non assegnata' }}</td>
<td>
<span class="badge" :class="`bg-${statusMeta[report.status].tone}`">
{{ statusMeta[report.status].label }}
</span>
</td>
<td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
<td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
</div>
</template>
app/pages/admin/users.vue
+54 -8
View File
@@ -13,7 +13,18 @@ const { getUsers, updateUserBan, updateUserRoles } = useAdmin()
const { data: usersRes, pending, refresh } = useAsyncData('admin-users', () => getUsers())
const search = ref('')
const parseRoles = (roles?: string) => roles ? roles.split(',').map((r) => r.trim().toUpperCase()).filter(Boolean) : []
const banError = ref('')
const roleError = ref('')
const pendingBanUser = ref<any | null>(null)
const isUpdatingBan = ref(false)
const parseRoles = (roles?: string) => roles ? roles.split(',').map(normalizeRole).filter(Boolean) : []
const banConfirmMessage = computed(() =>
pendingBanUser.value
? `Vuoi ${pendingBanUser.value.banned ? 'sbloccare' : 'bannare'} utente ${pendingBanUser.value.first_name} ${pendingBanUser.value.last_name}?`
: ''
)
const banConfirmLabel = computed(() => pendingBanUser.value?.banned ? 'Sblocca utente' : 'Banna utente')
const banConfirmClass = computed(() => pendingBanUser.value?.banned ? 'btn-success' : 'btn-danger')
const filteredUsers = computed(() => {
if (!usersRes.value?.users) return []
@@ -27,21 +38,36 @@ const filteredUsers = computed(() => {
)
})
const handleToggleBan = async (id: number, currentBanStatus: boolean) => {
if (!confirm(`Sei sicuro di voler ${currentBanStatus ? 'sbloccare' : 'bannare'} questo utente?`)) return
const askToggleBan = (user: any) => {
pendingBanUser.value = user
}
const closeBanModal = () => {
if (isUpdatingBan.value) return
pendingBanUser.value = null
}
const handleToggleBan = async () => {
if (!pendingBanUser.value) return
const user = pendingBanUser.value
isUpdatingBan.value = true
banError.value = ''
try {
const res = await updateUserBan(id, { banned: !currentBanStatus })
const res = await updateUserBan(user.id, { banned: !user.banned })
if (res.ok) {
await refresh()
pendingBanUser.value = null
}
} catch (err) {
console.error('Failed to update user ban status', err)
alert('Errore durante l\'aggiornamento dello stato di ban.')
banError.value = 'Errore durante l\'aggiornamento dello stato di ban.'
} finally {
isUpdatingBan.value = false
}
}
// Modal per i ruoli
const editingUserId = ref<number | null>(null)
const selectedRoles = ref<string[]>([])
const availableRoles = ['CITIZEN', 'OPERATOR', 'ADMIN']
@@ -59,6 +85,7 @@ const closeRoleModal = () => {
const saveRoles = async () => {
if (!editingUserId.value) return
roleError.value = ''
try {
const res = await updateUserRoles(editingUserId.value, { roles: selectedRoles.value })
if (res.ok) {
@@ -67,7 +94,7 @@ const saveRoles = async () => {
}
} catch (err) {
console.error('Failed to update roles', err)
alert('Errore durante l\'aggiornamento dei ruoli.')
roleError.value = 'Errore durante l\'aggiornamento dei ruoli.'
}
}
</script>
@@ -95,6 +122,14 @@ const saveRoles = async () => {
Nessun utente trovato.
</div>
<div v-if="banError" class="alert alert-danger">
{{ banError }}
</div>
<div v-if="roleError" class="alert alert-danger">
{{ roleError }}
</div>
<div v-else class="table-responsive">
<table class="table table-hover align-middle">
<thead>
@@ -138,7 +173,7 @@ const saveRoles = async () => {
<button
class="btn btn-sm"
:class="user.banned ? 'btn-outline-success' : 'btn-outline-danger'"
@click="handleToggleBan(user.id, !!user.banned)"
@click="askToggleBan(user)"
>
{{ user.banned ? 'Sblocca' : 'Banna' }}
</button>
@@ -177,5 +212,16 @@ const saveRoles = async () => {
</div>
</div>
</div>
<ConfirmModal
:open="pendingBanUser !== null"
title="Conferma stato utente"
:message="banConfirmMessage"
:confirm-label="banConfirmLabel"
:confirm-class="banConfirmClass"
:pending="isUpdatingBan"
@cancel="closeBanModal"
@confirm="handleToggleBan"
/>
</div>
</template>
app/pages/auth/change-password.vue
-217
View File
@@ -1,217 +0,0 @@
<script setup lang="ts">
definePageMeta({
middleware: 'auth'
})
useHead({ title: 'Cambio Password - Visione' })
const { changePassword, user, syncUser } = useAuth()
const router = useRouter()
const formData = reactive({
current_password: '',
new_password: '',
confirm_password: ''
})
const isLoading = ref(false)
const errorMessage = ref('')
const showCurrent = ref(false)
const showNew = ref(false)
const showConfirm = ref(false)
const canSubmit = computed(() => {
return (
formData.current_password.length > 0 &&
formData.new_password.length >= 8 &&
formData.new_password === formData.confirm_password
)
})
const handleSubmit = async () => {
if (!canSubmit.value) return
isLoading.value = true
errorMessage.value = ''
try {
const res = await changePassword({
current_password: formData.current_password,
new_password: formData.new_password
})
if (res.ok) {
await syncUser()
await router.push('/profile')
}
} catch (error: any) {
errorMessage.value = error.data?.message || 'Errore. Verifica la password attuale.'
} finally {
isLoading.value = false
}
}
</script>
<template>
<div class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 col-xl-6">
<div v-if="user?.must_change_password" class="callout callout-highlight callout-warning mb-4">
<div class="callout-title d-flex align-items-center">
<BIIcon name="it-warning-circle" size="sm" color="warning" class="me-2" />
Azione richiesta
</div>
<p class="mb-0">Per motivi di sicurezza, imposta una nuova password per il tuo account.</p>
</div>
<div class="card card-bg border-0 shadow-sm">
<div class="card-body p-4 p-lg-5">
<h1 class="h3 mb-3">Cambia password</h1>
<p class="text-muted mb-4">
Aggiorna credenziali prima di continuare. Password nuova deve essere diversa da quella attuale.
</p>
<form @submit.prevent="handleSubmit" class="d-grid gap-4">
<div class="password-field">
<label for="current_password" class="form-label">Password attuale</label>
<div class="password-field-control">
<BIIcon name="it-lock" size="sm" class="password-field-icon" />
<input
id="current_password"
v-model="formData.current_password"
:type="showCurrent ? 'text' : 'password'"
class="form-control"
autocomplete="current-password"
>
<button
type="button"
class="btn btn-password-toggle"
:aria-label="showCurrent ? 'Nascondi password attuale' : 'Mostra password attuale'"
@click="showCurrent = !showCurrent"
>
<BIIcon :name="showCurrent ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
</button>
</div>
</div>
<div class="password-field">
<label for="new_password" class="form-label">Nuova password</label>
<div class="password-field-control">
<BIIcon name="it-lock" size="sm" class="password-field-icon" />
<input
id="new_password"
v-model="formData.new_password"
:type="showNew ? 'text' : 'password'"
class="form-control"
autocomplete="new-password"
>
<button
type="button"
class="btn btn-password-toggle"
:aria-label="showNew ? 'Nascondi nuova password' : 'Mostra nuova password'"
@click="showNew = !showNew"
>
<BIIcon :name="showNew ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
</button>
</div>
<div class="form-text">Minimo 8 caratteri.</div>
</div>
<div class="password-field">
<label for="confirm_password" class="form-label">Conferma nuova password</label>
<div class="password-field-control">
<BIIcon name="it-lock" size="sm" class="password-field-icon" />
<input
id="confirm_password"
v-model="formData.confirm_password"
:type="showConfirm ? 'text' : 'password'"
:class="{ 'is-invalid': formData.confirm_password && formData.confirm_password !== formData.new_password }"
class="form-control"
autocomplete="new-password"
>
<button
type="button"
class="btn btn-password-toggle"
:aria-label="showConfirm ? 'Nascondi conferma password' : 'Mostra conferma password'"
@click="showConfirm = !showConfirm"
>
<BIIcon :name="showConfirm ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
</button>
</div>
</div>
<div v-if="errorMessage" class="alert alert-danger mb-0" role="alert">
{{ errorMessage }}
</div>
<button
type="submit"
class="btn btn-primary w-100 py-2"
:disabled="!canSubmit || isLoading"
>
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
{{ isLoading ? 'Aggiornamento in corso' : 'Aggiorna password' }}
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.password-field {
display: grid;
gap: 0.5rem;
}
.password-field-control {
align-items: center;
background: #fff;
border: 1px solid #c5d0db;
border-radius: 8px;
display: grid;
gap: 0.5rem;
grid-template-columns: auto minmax(0, 1fr) auto;
padding-left: 0.875rem;
}
.password-field-control:focus-within {
border-color: #06c;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.16);
}
.password-field-icon {
color: #5c6f82;
}
.password-field-control .form-control {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
min-width: 0;
padding-left: 0;
padding-right: 0;
}
.btn-password-toggle {
align-items: center;
color: #06c;
display: inline-flex;
height: 100%;
justify-content: center;
min-height: 3rem;
padding: 0 0.875rem;
}
.btn-password-toggle:hover,
.btn-password-toggle:focus {
background: rgba(0, 102, 204, 0.08);
color: #06c;
}
</style>
app/pages/auth/cie/callback.vue
+153
View File
@@ -0,0 +1,153 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
definePageMeta({
middleware: 'guest'
})
useHead({ title: 'Accesso CIE - Visione' })
const route = useRoute()
const router = useRouter()
const { fetchCieSession, handleLoginSuccess } = useAuth()
const state = computed(() => {
const value = route.query.state
return typeof value === 'string' ? value : ''
})
const providerError = computed(() => {
const value = route.query.error
return typeof value === 'string' ? value : ''
})
const providerCieError = computed(() => {
const value = route.query.cie_error
return typeof value === 'string' ? value : ''
})
const providerErrorDescription = computed(() => {
const value = route.query.error_description
return typeof value === 'string' ? value : ''
})
const isLoading = ref(true)
const errorMessage = ref('')
const statusMessage = ref('Verifica dell’autenticazione CIE in corso...')
let pollTimer: ReturnType<typeof setTimeout> | null = null
let attempts = 0
const maxAttempts = 30
const stopPolling = () => {
if (pollTimer) {
clearTimeout(pollTimer)
pollTimer = null
}
}
const scheduleNextPoll = () => {
pollTimer = setTimeout(checkSession, 2000)
}
const redirectToLoginError = async (code: string, fallbackMessage: string) => {
stopPolling()
isLoading.value = false
try {
await router.replace({
path: '/auth/login',
query: { cie_error: code }
})
} catch {
errorMessage.value = fallbackMessage
}
}
const checkSession = async () => {
if (providerError.value || providerCieError.value) {
const isCancelled = providerErrorDescription.value.toLowerCase().includes('rejected by user')
|| providerError.value === 'access_denied'
|| providerCieError.value === 'invalid_request'
await redirectToLoginError(
isCancelled ? 'cancelled' : 'failed',
providerErrorDescription.value || 'Autenticazione CIE non completata. Riprova dal login.'
)
return
}
if (!state.value) {
await redirectToLoginError('invalid_session', 'Sessione CIE non valida: parametro state mancante.')
return
}
attempts += 1
try {
const res = await fetchCieSession(state.value)
if (res.status === 'authenticated' && res.auth?.token) {
stopPolling()
await handleLoginSuccess(res.auth.token)
return
}
if (['failed', 'expired', 'cancelled', 'error'].includes(res.status)) {
await redirectToLoginError('failed', 'Autenticazione CIE non completata. Riprova dal login.')
return
}
if (attempts >= maxAttempts) {
await redirectToLoginError('timeout', 'Tempo di attesa scaduto durante la verifica CIE. Riprova.')
return
}
statusMessage.value = 'Autenticazione completata sul provider. Attendo conferma finale da Visione...'
scheduleNextPoll()
} catch (err: any) {
await redirectToLoginError('verification_error', err.data?.message || 'Errore durante la verifica della sessione CIE.')
}
}
onMounted(() => {
checkSession()
})
onBeforeUnmount(() => {
stopPolling()
})
</script>
<template>
<div class="d-flex align-items-center bg-light py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="card card-bg shadow-sm">
<div class="card-body p-4 p-md-5 text-center">
<BIIcon name="it-card" size="xl" color="primary" class="mb-3" />
<h1 class="h3 font-weight-bold mb-3">Accesso con CIE</h1>
<div v-if="isLoading" class="py-3">
<div class="spinner-border text-primary mb-3" role="status">
<span class="visually-hidden">Caricamento...</span>
</div>
<p class="text-muted mb-0">{{ statusMessage }}</p>
</div>
<div v-else-if="errorMessage" class="py-2">
<div class="alert alert-danger text-start mb-4" role="alert">
{{ errorMessage }}
</div>
<button class="btn btn-primary" @click="router.push('/auth/login')">
Torna al login
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
app/pages/auth/login.vue
+85 -78
View File
@@ -7,20 +7,35 @@ definePageMeta({
useHead({ title: 'Accedi - Visione' })
const { requestOtp, verifyOtp, loginWithPassword, handleLoginSuccess } = useAuth()
const router = useRouter()
const runtimeConfig = useRuntimeConfig()
const route = useRoute()
const { requestOtp, verifyOtp, handleLoginSuccess, startCieLogin } = useAuth()
// UI State
const loginMethod = ref<'otp' | 'password'>('otp')
const otpStep = ref<1 | 2>(1)
const isLoading = ref(false)
const isCieLoading = ref(false)
const errorMessage = ref('')
const email = ref('')
const password = ref('')
const otpCode = ref('')
const showPassword = ref(false)
const cieCallbackUrl = `${runtimeConfig.public.url}/auth/cie/callback`
const cieErrorMessage = computed(() => {
const error = route.query.cie_error
if (typeof error !== 'string') return ''
const messages: Record<string, string> = {
invalid_session: 'Sessione CIE non valida o incompleta. Avvia di nuovo accesso con CIE.',
cancelled: 'Accesso con CIE annullato. Se vuoi, riprova dal pulsante Entra con CIE.',
failed: 'Autenticazione CIE non completata. Riprova dal pulsante Entra con CIE.',
timeout: 'Tempo di attesa scaduto durante verifica CIE. Riprova.',
verification_error: 'Errore durante verifica autenticazione CIE. Riprova tra poco.'
}
return messages[error] || 'Accesso con CIE non riuscito. Riprova.'
})
const handleRequestOtp = async () => {
isLoading.value = true
@@ -48,18 +63,24 @@ const handleVerifyOtp = async () => {
}
}
const handlePasswordLogin = async () => {
isLoading.value = true
const handleCieLogin = async () => {
isCieLoading.value = true
errorMessage.value = ''
try {
const res = await loginWithPassword({ email: email.value, password: password.value })
await handleLoginSuccess(res.token)
const res = await startCieLogin(cieCallbackUrl)
await navigateTo(res.authorization_url, {
external: true,
replace: true,
})
} catch (err: any) {
errorMessage.value = 'Credenziali non valide.'
} finally {
isLoading.value = false
errorMessage.value = err.data?.message || 'Avvio autenticazione CIE non riuscito. Riprova.'
isCieLoading.value = false
}
}
const handleOTPInput = async (value: string) => {
console.log(value)
}
</script>
<template>
@@ -79,9 +100,13 @@ const handlePasswordLogin = async () => {
<div class="card-body p-4 p-md-5">
<button class="btn btn-primary w-100 mb-4 d-flex align-items-center justify-content-center gap-2" disabled title="Integrazione CIE prevista per la fase successiva">
<BIIcon name="it-card" size="sm" color="white" />
Entra con CIE (Presto disponibile)
<button
class="btn btn-primary w-100 mb-4 d-flex align-items-center justify-content-center gap-2 entraconcie"
:disabled="isCieLoading || isLoading"
@click="handleCieLogin"
>
<span v-if="isCieLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
&#8203;
</button>
<div class="d-flex align-items-center my-4">
@@ -90,77 +115,52 @@ const handlePasswordLogin = async () => {
<hr class="flex-grow-1">
</div>
<div v-if="cieErrorMessage" class="alert alert-danger mb-4" role="alert">
{{ cieErrorMessage }}
</div>
<div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
{{ errorMessage }}
</div>
<div v-if="loginMethod === 'otp'">
<form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
<div class="form-group mb-4">
<input type="email" class="form-control" id="email" v-model="email" required>
<label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
</div>
<button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
Ricevi codice OTP
</button>
</form>
<form v-else @submit.prevent="handleVerifyOtp">
<div class="alert alert-success mb-4 small">
Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
</div>
<div class="form-group mb-4">
<input type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
<label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
Verifica e Accedi
</button>
<div class="text-center">
<a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
</div>
</form>
</div>
<form v-else @submit.prevent="handlePasswordLogin">
<form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
<div class="form-group mb-4">
<input type="email" class="form-control" id="emailPwd" v-model="email" required>
<label for="emailPwd" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
<input type="email" class="form-control" id="email" v-model="email" required>
<label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
</div>
<div class="form-group mb-4 position-relative">
<input :type="showPassword ? 'text' : 'password'" class="form-control pe-5" id="password" v-model="password" required>
<label for="password" :class="{ 'active': password.length > 0 }">Password</label>
<button
type="button"
class="btn bg-transparent border-0 shadow-none position-absolute p-2"
style="right: 0; top: 2px; z-index: 10;"
@click="showPassword = !showPassword"
:aria-pressed="showPassword"
aria-label="Mostra/Nascondi password"
>
<BIIcon :name="showPassword ? 'it-password-visible' : 'it-password-invisible'" color="primary" size="sm" />
</button>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
<button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
Accedi
Entra
</button>
</form>
<div class="text-center mt-4">
<a href="#" class="small text-decoration-none" @click.prevent="loginMethod = loginMethod === 'otp' ? 'password' : 'otp'; errorMessage = ''">
{{ loginMethod === 'otp' ? 'Vuoi usare la password? Clicca qui' : 'Usa il login sicuro senza password (OTP)' }}
</a>
</div>
<form v-else @submit.prevent="handleVerifyOtp">
<div v-show="!errorMessage" class="alert alert-success mb-4 small">
Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
</div>
<div class="form-group mb-4">
<input
id="otp"
v-model="otpCode"
autocomplete="one-time-code"
class="form-control text-center text-tracking-widest fs-4"
inputmode="numeric"
maxlength="6"
pattern="[0-9]*"
required
type="text"
@input="otpCode = otpCode.replace(/\D/g, '')"
>
<label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
</div>
<button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
Verifica e Accedi
</button>
<div class="text-center">
<a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
</div>
</form>
</div>
</div>
@@ -182,4 +182,11 @@ const handlePasswordLogin = async () => {
.pe-5 {
padding-right: 3rem !important;
}
button.entraconcie {
background-image: url('/entraconcie.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}
</style>
app/pages/auth/register.vue
+7 -31
View File
@@ -14,14 +14,12 @@ const router = useRouter()
const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref(false)
const showPassword = ref(false)
const form = ref({
first_name: '',
last_name: '',
fiscal_code: '',
email: '',
password: '',
phone: '',
privacy: false
})
@@ -56,7 +54,6 @@ const handleRegister = async () => {
last_name: form.value.last_name,
fiscal_code: fiscalCode,
email: form.value.email,
password: form.value.password,
phone: form.value.phone || undefined
})
@@ -89,7 +86,7 @@ const handleRegister = async () => {
<div class="card-body p-4 p-md-5">
<div v-if="successMessage" class="alert alert-success" role="alert">
Registrazione completata con successo! Reindirizzamento al login...
Registrazione completata con successo! Reindirizzamento all'accesso con OTP...
</div>
<div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
@@ -100,7 +97,6 @@ const handleRegister = async () => {
<h2 class="h5 text-primary font-weight-bold mb-4 border-bottom pb-2">Dati Anagrafici</h2>
<!-- FIX LAYOUT: form-group separato da col -->
<div class="row mb-4">
<div class="col-12 col-md-6 mb-4 mb-md-0">
<div class="form-group">
@@ -122,33 +118,15 @@ const handleRegister = async () => {
<small class="form-text text-muted">Sarà utilizzato come identificativo univoco nel sistema PA.</small>
</div>
<h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Credenziali e Contatti</h2>
<h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Contatti</h2>
<div class="row mb-4">
<div class="col-12 col-md-6 mb-4 mb-md-0">
<div class="form-group">
<div class="col-12">
<div class="form-group position-relative">
<input type="email" class="form-control" id="regEmail" v-model="form.email" required>
<label for="regEmail" :class="{ 'active': form.email.length > 0 }">Indirizzo Email</label>
</div>
</div>
<div class="col-12 col-md-6">
<!-- INPUT PASSWORD FIXATO -->
<div class="form-group position-relative">
<input :type="showPassword ? 'text' : 'password'" class="form-control pe-5" id="regPwd" v-model="form.password" required minlength="10">
<label for="regPwd" :class="{ 'active': form.password.length > 0 }">Password (min. 10 crt)</label>
<button
type="button"
class="btn bg-transparent border-0 shadow-none position-absolute p-2"
style="right: 0; top: 2px; z-index: 10;"
@click="showPassword = !showPassword"
:aria-pressed="showPassword"
aria-label="Mostra/Nascondi password"
>
<BIIcon :name="showPassword ? 'it-password-visible' : 'it-password-invisible'" color="primary" size="sm" />
</button>
</div>
</div>
</div>
<div class="form-group mb-5">
@@ -157,7 +135,6 @@ const handleRegister = async () => {
<small class="form-text text-muted">Faciliterà il contatto da parte degli operatori comunali in caso di intervento.</small>
</div>
<!-- Privacy Checkbox -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="privacyCheck" v-model="form.privacy" required>
<label class="form-check-label small" for="privacyCheck">
@@ -169,6 +146,9 @@ const handleRegister = async () => {
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
Registra Profilo
</button>
<p class="small text-muted mt-3 mb-0">
Dopo la registrazione potrai accedere usando OTP via email o CIE, quando disponibile.
</p>
</form>
</div>
@@ -185,8 +165,4 @@ const handleRegister = async () => {
</template>
<style scoped>
/* Previene che il testo finisca sotto l'icona */
.pe-5 {
padding-right: 3rem !important;
}
</style>
app/pages/dashboard/index.vue
+7 -10
View File
@@ -10,24 +10,21 @@ import OperatorDashboard from '~/components/dashboard/OperatorDashboard.vue'
import AdminDashboard from '~/components/dashboard/AdminDashboard.vue'
const currentDashboard = computed(() => {
const role = user.value?.role?.toUpperCase()
if (role === 'CITIZEN') return CitizenDashboard
if (role === 'OPERATOR') return OperatorDashboard
if (role === 'ADMIN') return AdminDashboard
if (isCitizen(user.value?.role)) return CitizenDashboard
if (isOperator(user.value?.role)) return OperatorDashboard
if (isAdmin(user.value?.role)) return AdminDashboard
return null
})
const heroTitle = computed(() => {
const role = user.value?.role?.toUpperCase()
if (role === 'ADMIN') return 'Pannello Admin'
if (role === 'OPERATOR') return 'Gestione Operativa'
if (isAdmin(user.value?.role)) return 'Pannello Admin'
if (isOperator(user.value?.role)) return 'Gestione Operativa'
return 'Dashboard'
})
const heroSubtitle = computed(() => {
const role = user.value?.role?.toUpperCase()
if (role === 'ADMIN') return 'Accesso amministrativo per configurazioni, utenti e moderazione'
if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
if (isAdmin(user.value?.role)) return 'Accesso amministrativo per configurazioni, utenti e moderazione'
if (isOperator(user.value?.role)) return 'Prendi in carico e gestisci le segnalazioni in corso'
return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
})
</script>
app/pages/index.vue
+67 -22
View File
@@ -3,6 +3,8 @@ import BIIcon from "~/components/BIIcon.vue";
const { getOpenDataReports } = usePublic()
const { user } = useAuth();
const stats = {
total_reports: 14523,
resolved_reports: 13890,
@@ -12,6 +14,17 @@ const stats = {
const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
getOpenDataReports({ page: 1, per_page: 3 })
)
const getStatusBadge = (status: string) => {
switch (status) {
case 'RESOLVED':
return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED':
return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default:
return { class: 'bg-info', text: status, icon: 'it-info-circle' }
}
}
</script>
<template>
@@ -27,7 +40,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
e monitora l'intervento in totale trasparenza.
</p>
<div class="it-btn-container d-flex justify-content-center gap-3">
<NuxtLink class="btn btn-primary" to="/auth/login">
<NuxtLink v-if="!user || isCitizen(user.role)" class="btn btn-primary" to="/auth/login">
Fai una segnalazione
</NuxtLink>
<NuxtLink class="btn btn-outline-primary" to="/open-data">
@@ -45,7 +58,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
<div class="row text-center">
<div class="col-12 col-md-4 mb-4">
<div class="mb-3">
<BIIcon name="it-camera" size="xl" color="primary" />
<BIIcon color="primary" name="it-camera" size="xl"/>
</div>
<h3 class="h5 font-weight-semibold">1. Segnala</h3>
<p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
@@ -53,14 +66,14 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="mb-3">
<BIIcon name="it-tool" size="xl" color="primary" />
<BIIcon color="primary" name="it-tool" size="xl"/>
</div>
<h3 class="h5 font-weight-semibold">2. Intervento</h3>
<p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="mb-3">
<BIIcon name="it-star-outline" size="xl" color="primary" />
<BIIcon color="primary" name="it-star-outline" size="xl"/>
</div>
<h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
<p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
@@ -96,31 +109,47 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
<h2 class="font-weight-bold">Ultimi interventi risolti</h2>
<NuxtLink to="/open-data" class="read-more">
<span class="text">Vedi tutti</span>
<BIIcon name="it-arrow-right" />
<BIIcon name="it-arrow-right"/>
</NuxtLink>
</div>
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
<div class="col-12 col-md-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
<div class="card-wrapper card-space">
<div class="card card-bg card-big">
<div class="card-body">
<div class="category-top">
<BIIcon name="it-check-circle" size="sm" color="success" />
<span class="category text-success font-weight-semibold">Risolto</span>
</div>
<h3 class="card-title h5 mt-2">{{ report.category_name }}</h3>
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<p class="card-text text-muted">
<span class="me-1"><BIIcon name="it-map-marker-circle" size="xs" /></span>
{{ report.area_name || 'Area comunale' }}
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="category-top m-0">
<span :class="getStatusBadge(report.status).class"
class="badge rounded-pill text-white px-3 py-1">
<BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
{{ getStatusBadge(report.status).text }}
</span>
</div>
<span class="text-muted small">ID: #{{ report.id }}</span>
</div>
<h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
<p class="card-text text-muted mb-4">
<BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
{{ report.area_name || 'Area comunale non specificata' }}
</p>
<div class="it-card-footer mt-4">
<span class="card-signature">
Aggiornato il {{ new Date(report.updated_at).toLocaleDateString('it-IT') }}
</span>
<div class="mt-auto pt-3 border-top">
<div class="row text-muted small">
<div class="col-6">
<div class="fw-bold text-uppercase">Segnalato</div>
<div>{{ new Date(report.created_at).toLocaleDateString('it-IT') }}</div>
</div>
<div class="col-6 text-end">
<div class="fw-bold text-uppercase">Risolto</div>
<div>{{ new Date(report.updated_at).toLocaleDateString('it-IT') }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -132,10 +161,10 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
</div>
</div>
<div class="container my-5 pb-5">
<div v-show="!user" class="container my-5 pb-5">
<div class="callout callout-highlight callout-primary">
<div class="callout-title">
<BIIcon name="it-info-circle" />
<BIIcon name="it-info-circle"/>
Partecipa alla cura della tua città
</div>
<p>
@@ -150,3 +179,19 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
</div>
</div>
</template>
<style scoped>
.card-wrapper {
height: 100%;
}
.card-bg {
border: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-bg:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
</style>
app/pages/info.vue
+39 -32
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// La pagina è statica, usiamo solo i componenti UI
useHead({
title: 'Informazioni sul Progetto - Visione',
})
@@ -7,7 +6,6 @@ useHead({
<template>
<div>
<!-- HERO SECTION (Senza pt-5/mt-5 come richiesto) -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -24,72 +22,79 @@ useHead({
</div>
</div>
<!-- OBIETTIVO DEL PROGETTO -->
<div class="container my-5 py-3">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h2 class="mb-4 font-weight-bold">Migliorare la qualità della vita in città</h2>
<p class="lead text-muted">
Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare, gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti abbandonati).
Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare,
gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti
abbandonati).
</p>
<p>
Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai cittadini tramite un portale Open Data dedicato.
Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti
tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai
cittadini tramite un portale Open Data dedicato.
</p>
</div>
</div>
</div>
<!-- RUOLI E FUNZIONALITÀ (Card Grid) -->
<div class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-5 font-weight-bold">Come funziona il sistema</h2>
<div class="row">
<!-- Cittadino -->
<div class="col-12 col-md-4 mb-4">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100">
<div class="card-body">
<BIIcon name="it-user" size="xl" color="primary" class="mb-3" />
<BIIcon class="mb-3" color="primary" name="it-user" size="xl"/>
<h3 class="card-title h5 font-weight-bold">Cittadini</h3>
<p class="card-text text-muted">
Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni geolocalizzate complete di foto.
Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni
geolocalizzate complete di foto.
<br><br>
Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva. Possono inoltre chattare con gli operatori e lasciare un feedback finale.
Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni
segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva.
Possono inoltre chattare con gli operatori e lasciare un feedback finale.
</p>
</div>
</div>
</div>
</div>
<!-- Operatore -->
<div class="col-12 col-md-4 mb-4">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100">
<div class="card-body">
<BIIcon name="it-tool" size="xl" color="primary" class="mb-3" />
<BIIcon class="mb-3" color="primary" name="it-tool" size="xl"/>
<h3 class="card-title h5 font-weight-bold">Operatori e Squadre</h3>
<p class="card-text text-muted">
Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in
carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
<br><br>
Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a <em>In Lavorazione</em> e <em>Risolta</em>.
Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a
<em>In Lavorazione</em> e <em>Risolta</em>.
</p>
</div>
</div>
</div>
</div>
<!-- Amministratore -->
<div class="col-12 col-md-4 mb-4">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100">
<div class="card-body">
<BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
<BIIcon class="mb-3" color="primary" name="it-settings" size="xl"/>
<h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
<p class="card-text text-muted">
Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane
tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare
eventuali abusi.
<br><br>
Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e monitorare i tempi medi di risoluzione.
Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e
monitorare i tempi medi di risoluzione.
</p>
</div>
</div>
@@ -100,44 +105,46 @@ useHead({
</div>
</div>
<!-- STACK TECNOLOGICO E FILOSOFIA -->
<div class="container my-5 py-4">
<div class="row align-items-center">
<div class="col-12 col-lg-6 mb-4 mb-lg-0">
<h2 class="font-weight-bold mb-4">Tecnologia e Indipendenza</h2>
<ul class="it-list">
<li>
<BIIcon name="it-code-circle" color="primary" class="me-2" />
<strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>. Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
<BIIcon class="me-2" color="primary" name="it-code-circle"/>
<strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>.
Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
</li>
<li class="mt-3">
<BIIcon name="it-lock" color="primary" class="me-2" />
<strong>Sicurezza:</strong> Login Passwordless (OTP nativo) e sistema di autorizzazione Role-Based basato su token JWT.
<BIIcon class="me-2" color="primary" name="it-lock"/>
<strong>Sicurezza:</strong> Accesso con OTP e sistema di autorizzazione Role-Based basato su token JWT.
</li>
<li class="mt-3">
<BIIcon name="it-piu" color="primary" class="me-2" />
<strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di dati anonimizzati accessibili al pubblico.
<BIIcon class="me-2" color="primary" name="it-piu"/>
<strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di
dati anonimizzati accessibili al pubblico.
</li>
</ul>
</div>
<div class="col-12 col-lg-5 offset-lg-1">
<!-- Callout Ribellione Gitea -->
<div class="callout callout-highlight callout-warning">
<div class="callout-title">
<BIIcon name="it-warning-circle" />
<BIIcon name="it-warning-circle"/>
Un approccio etico al codice sorgente
</div>
<p>
In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo
l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo
di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
<br><br>
Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul codice.
Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul
codice.
</p>
</div>
</div>
</div>
</div>
<!-- CREDITI ACCADEMICI (Footer Style Callout) -->
<div class="container mb-5 pb-5">
<div class="card-wrapper card-space">
<div class="card card-bg border-start border-primary border-5">
@@ -146,7 +153,8 @@ useHead({
<div class="col-12 col-md-8">
<h4 class="h5 font-weight-bold text-primary mb-2">Crediti Accademici</h4>
<p class="mb-1">
Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di Programmazione</strong> (tenuto dal Prof. Vessio).
Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di
Programmazione</strong> (tenuto dal Prof. Vessio).
</p>
<p class="text-muted small mb-0">
Università degli Studi di Bari "Aldo Moro" - Dipartimento di Informatica.
@@ -170,7 +178,6 @@ useHead({
</template>
<style scoped>
/* Leggere correzioni stilistiche per le liste */
.it-list {
list-style-type: none;
padding-left: 0;
app/pages/interventions/[token].vue
+117
View File
@@ -0,0 +1,117 @@
<script setup lang="ts">
definePageMeta({
layout: 'default'
})
useHead({ title: 'Intervento pubblico - Visione' })
const route = useRoute()
const runtimeConfig = useRuntimeConfig()
const token = computed(() => String(route.params.token || ''))
const { getPublicIntervention } = useOperator()
const { data, pending, error } = await useAsyncData(
`public-intervention-${token.value}`,
() => getPublicIntervention(token.value),
)
const payload = computed<any>(() => data.value || null)
const report = computed<any>(() => payload.value?.report || payload.value?.summary || payload.value?.intervention || payload.value)
const media = computed<any[]>(() => payload.value?.media || [])
const messages = computed<any[]>(() => payload.value?.latest_messages || payload.value?.messages || [])
const formatDate = (dateString?: string) => {
if (!dateString) return '-'
return new Date(dateString).toLocaleString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
}
</script>
<template>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-12 col-lg-8">
<div v-if="pending" class="text-center py-5">
<div class="spinner-border text-primary" role="status"></div>
</div>
<div v-else-if="error || !report" class="card card-bg border-0 shadow-sm">
<div class="card-body py-5 text-center">
<BIIcon name="it-close-circle" size="lg" color="danger" class="mb-3" />
<h1 class="h4 mb-2">Link non disponibile</h1>
<p class="text-muted mb-0">Questo link di intervento non è valido, è scaduto oppure è stato revocato.</p>
</div>
</div>
<template v-else>
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<h1 class="h4 mb-2">Intervento pubblico</h1>
<p class="text-muted mb-4">Scheda condivisa per team esterno.</p>
<div class="row g-3">
<div class="col-12 col-md-6">
<small class="text-muted d-block">Segnalazione</small>
<strong>#{{ report.id || '-' }}</strong>
</div>
<div class="col-12 col-md-6">
<small class="text-muted d-block">Categoria</small>
<strong>{{ report.category_name || '-' }}</strong>
</div>
<div class="col-12">
<small class="text-muted d-block">Indirizzo</small>
<strong>{{ report.address || '-' }}</strong>
</div>
<div class="col-12">
<small class="text-muted d-block">Descrizione</small>
<p class="mb-0">{{ report.description || '-' }}</p>
</div>
<div class="col-12 col-md-6">
<small class="text-muted d-block">Stato</small>
<strong>{{ report.status || '-' }}</strong>
</div>
<div class="col-12 col-md-6">
<small class="text-muted d-block">Aperta</small>
<strong>{{ formatDate(report.created_at) }}</strong>
</div>
</div>
</div>
</div>
<div v-if="media.length > 0" class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<h2 class="h6 mb-3">Allegati</h2>
<div class="row g-2">
<div v-for="item in media" :key="item.id" class="col-6 col-md-4">
<img
v-if="item.media_kind === 'IMAGE'"
:src="runtimeConfig.public.api + item.url"
class="img-fluid rounded border"
:alt="item.original_filename || 'Allegato'"
/>
</div>
</div>
</div>
</div>
<div v-if="messages.length > 0" class="card card-bg border-0 shadow-sm">
<div class="card-body">
<h2 class="h6 mb-3">Ultimi aggiornamenti</h2>
<ul class="list-unstyled mb-0">
<li v-for="message in messages" :key="message.id" class="border-bottom py-2">
<div class="small text-muted mb-1">{{ formatDate(message.created_at) }}</div>
<div>{{ message.body }}</div>
</li>
</ul>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
app/pages/note-legali.vue
-3
View File
@@ -6,7 +6,6 @@ useHead({
<template>
<div>
<!-- HERO SECTION -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -22,7 +21,6 @@ useHead({
</div>
</div>
<!-- CONTENUTO PRINCIPALE -->
<div class="container my-5 py-4">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
@@ -53,7 +51,6 @@ useHead({
Gli operatori e gli amministratori di sistema si riservano il diritto di moderare, nascondere o rimuovere segnalazioni contenenti materiale inappropriato, offensivo, non pertinente o illegale. L'abuso ripetuto del sistema comporterà il ban permanente dell'account dell'utente, associato al proprio Codice Fiscale.
</p>
<!-- DISCLAIMER ACCADEMICO -->
<div class="callout callout-highlight callout-info mt-5">
<div class="callout-title">
<BIIcon name="it-info-circle" />
app/pages/notifications.vue
+79 -96
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import type { Notification } from '~/types/api'
definePageMeta({
middleware: 'auth',
})
useHead({ title: 'Notifiche - Visione' })
const { fetchNotifications, markNotificationRead } = useAuth()
const { fetchNotifications, markNotificationRead, refreshUnreadNotifications } = useAuth()
const router = useRouter()
const page = ref(1)
@@ -13,27 +15,25 @@ const perPage = ref(15)
const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
'notifications',
() => fetchNotifications({ page: page.value, per_page: perPage.value })
() => fetchNotifications({ page: page.value, per_page: perPage.value }),
{ watch: [page] }
)
const notifications = computed(() => notificationsData.value?.notifications || [])
const notifications = computed<Notification[]>(() => notificationsData.value?.notifications || [])
const totalNotifications = computed(() => notificationsData.value?.notifications?.length || 0)
const unreadCount = computed(() => notifications.value.filter((n: any) => !n.read_at).length)
const handlePageChange = (newPage: number) => {
page.value = newPage
}
const unreadCount = computed(() => notifications.value.filter((notification) => !notification.read_at).length)
const handleMarkAsRead = async (notificationId: number) => {
try {
await markNotificationRead(notificationId)
await refreshNotifications()
await refreshUnreadNotifications()
} catch (error) {
console.error('Error marking notification as read:', error)
}
}
const handleNotificationClick = async (notification: any) => {
const handleNotificationClick = async (notification: Notification) => {
if (!notification.read_at) {
await handleMarkAsRead(notification.id)
}
@@ -92,7 +92,6 @@ const getNotificationColor = (type: string): string => {
<template>
<div>
<!-- HERO -->
<div class="bg-light border-bottom py-4 mb-4">
<div class="container">
<div class="row">
@@ -109,92 +108,82 @@ const getNotificationColor = (type: string): string => {
</div>
</div>
<!-- CONTENUTO -->
<div class="container mb-5">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<!-- FILTRI (Opzionale) -->
<div class="d-flex gap-2 mb-4">
<button class="btn btn-sm btn-outline-primary active">Tutti</button>
<button class="btn btn-sm btn-outline-secondary">Solo non letti</button>
<div v-if="notifications.length === 0" class="card card-bg border-0 shadow-sm">
<div class="card-body py-5 text-center">
<BIIcon name="it-bell" size="lg" color="secondary" class="mb-3 d-block mx-auto" />
<h2 class="h5 mb-2">Nessuna notifica</h2>
<p class="text-muted mb-3">Quando arriveranno aggiornamenti sulle tue segnalazioni, li troverai qui.</p>
<NuxtLink to="/reports" class="btn btn-outline-primary btn-sm">
Vai alle segnalazioni
</NuxtLink>
</div>
</div>
<!-- LISTA NOTIFICHE -->
<div v-if="notifications.length === 0" class="text-center py-5">
<BIIcon name="it-bell" size="xl" color="info" class="mb-3 d-block" />
<h6 class="text-muted">Nessuna notifica</h6>
<p class="small text-muted">Quando riceverai nuovi aggiornamenti sulle tue segnalazioni, appariranno qui.</p>
</div>
<div v-else class="list-group">
<button
v-for="notification in notifications"
:key="notification.id"
type="button"
class="list-group-item list-group-item-action border-0 p-3 mb-3 rounded-2"
:class="{
'bg-light': !notification.read_at,
'bg-white': notification.read_at,
}"
@click="handleNotificationClick(notification)"
>
<div class="d-flex align-items-start gap-3">
<!-- ICONA -->
<div class="flex-shrink-0 mt-1">
<div class="rounded-circle p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
<BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
</div>
</div>
<!-- CONTENUTO -->
<div class="flex-grow-1">
<div class="d-flex align-items-start justify-content-between">
<div>
<h6 class="mb-1 font-weight-bold" :class="{ 'text-dark': !notification.read_at }">
{{ notification.title }}
</h6>
<p class="mb-1 small" :class="{ 'text-muted': notification.read_at }">
{{ notification.body }}
</p>
<small class="text-muted">
{{ formatDate(notification.created_at) }}
</small>
</div>
<!-- INDICATORE NON LETTO -->
<div v-if="!notification.read_at" class="flex-shrink-0">
<span class="badge bg-primary rounded-pill">Nuovo</span>
</div>
</div>
<!-- AZIONI RAPIDE -->
<div v-if="notification.report_id" class="mt-2 d-flex gap-2">
<NuxtLink :to="`/reports/${notification.report_id}`" class="btn btn-sm btn-outline-primary">
<BIIcon name="it-arrow-right" size="xs" class="me-1" />
Vedi segnalazione
</NuxtLink>
<button
v-if="!notification.read_at"
type="button"
class="btn btn-sm btn-outline-secondary"
@click.stop="handleMarkAsRead(notification.id)"
<div v-else class="card card-bg border-0 shadow-sm">
<div class="card-body p-0">
<div
v-for="notification in notifications"
:key="notification.id"
class="notification-row p-3"
:class="{ 'notification-row-unread': !notification.read_at }"
>
<div class="d-flex align-items-start gap-3">
<div class="flex-shrink-0 mt-1">
<div
class="rounded-circle d-flex align-items-center justify-content-center notification-icon"
:class="`bg-${getNotificationColor(notification.type)}`"
>
Segna come letta
</button>
<BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex flex-wrap justify-content-between gap-2">
<div>
<h2 class="h6 mb-1">{{ notification.title }}</h2>
<p class="mb-1 text-muted">{{ notification.body }}</p>
<small class="text-muted">{{ formatDate(notification.created_at) }}</small>
</div>
<div v-if="!notification.read_at" class="flex-shrink-0">
<span class="badge bg-primary">Nuovo</span>
</div>
</div>
<div class="mt-3 d-flex flex-wrap gap-2">
<button
type="button"
class="btn btn-outline-primary btn-sm"
@click="handleNotificationClick(notification)"
>
Apri notifica
</button>
<NuxtLink v-if="notification.report_id" :to="`/reports/${notification.report_id}`" class="btn btn-outline-primary btn-sm">
Vedi segnalazione
</NuxtLink>
<button
v-if="!notification.read_at"
type="button"
class="btn btn-outline-secondary btn-sm"
@click.stop="handleMarkAsRead(notification.id)"
>
Segna come letta
</button>
</div>
</div>
</div>
</div>
</button>
</div>
</div>
<!-- PAGINATION -->
<Pagination
v-if="notifications.length > 0"
:current-page="page"
:per-page="perPage"
:total-items="totalNotifications"
@page-change="handlePageChange"
@page-change="page = $event"
/>
</div>
@@ -205,23 +194,17 @@ const getNotificationColor = (type: string): string => {
</template>
<style scoped>
.list-group-item {
border: 1px solid #e9ecef;
transition: all 0.2s ease;
cursor: pointer;
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
&.bg-light {
border-left: 4px solid #006f9d;
}
.notification-row + .notification-row {
border-top: 1px solid #e9ecef;
}
.rounded-2 {
border-radius: 0.5rem;
.notification-row-unread {
border-left: 4px solid #0066cc;
background: #f8fbff;
}
.notification-icon {
width: 40px;
height: 40px;
}
</style>
app/pages/open-data.vue
+50 -47
View File
@@ -1,27 +1,22 @@
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
import type { Map as LeafletMap, CircleMarker, LatLngBoundsExpression } from 'leaflet'
import type { CircleMarker, LatLngBoundsExpression, Map as LeafletMap } from 'leaflet'
import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
// 1. API Fetching Logic
const { getOpenDataReports } = usePublic()
// Reactive pagination state
const currentPage = ref(1)
const perPage = ref(9)
// Fetch data automatically when currentPage changes
const { data: openDataResponse, pending } = await useAsyncData(
'open-data-reports',
() => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
{ watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
{ watch: [currentPage] }
)
const visibleReports = computed(() =>
(openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
(openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
)
// Pagination logic: If we receive less items than `perPage`, we are on the last page.
const isLastPage = computed(() => {
if (!openDataResponse.value?.reports) return true
return openDataResponse.value.reports.length < perPage.value
@@ -34,19 +29,30 @@ const prevPage = () => {
if (currentPage.value > 1) currentPage.value--
}
// 2. View Toggle (Grid vs Map)
const { data: mapOpenDataResponse, pending: mapPending } = useAsyncData(
'open-data-map-reports',
() => getOpenDataReports({ page: 1, per_page: 200 }),
{ lazy: true }
)
const mapVisibleReports = computed(() =>
(mapOpenDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
)
const currentView = ref<'grid' | 'map'>('grid')
const mapContainer = ref<HTMLElement | null>(null)
let leaflet: typeof import('leaflet') | null = null
let map: LeafletMap | null = null
let markers: CircleMarker[] = []
// 3. Helper to style status badges
const getStatusBadge = (status: string) => {
switch (status) {
case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
case 'RESOLVED':
return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
case 'CLOSED':
return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
default:
return { class: 'bg-info', text: status, icon: 'it-info-circle' }
}
}
@@ -70,12 +76,12 @@ const renderMapMarkers = async () => {
clearMarkers()
if (visibleReports.value.length === 0) {
if (mapVisibleReports.value.length === 0) {
map.setView(BARI_CENTER, 12)
return
}
visibleReports.value.forEach((report) => {
mapVisibleReports.value.forEach((report) => {
const marker = L.circleMarker([report.latitude, report.longitude], {
radius: 8,
weight: 2,
@@ -97,7 +103,7 @@ const renderMapMarkers = async () => {
markers.push(marker)
})
const fitBounds: LatLngBoundsExpression = visibleReports.value.map((report) => [report.latitude, report.longitude])
const fitBounds: LatLngBoundsExpression = mapVisibleReports.value.map((report) => [report.latitude, report.longitude])
map.fitBounds(fitBounds, { padding: [32, 32], maxZoom: 15 })
}
@@ -106,8 +112,8 @@ const initMap = async () => {
const L = await loadLeaflet()
const bariBounds = L.latLngBounds(
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
[BARI_BOUNDS.south, BARI_BOUNDS.west],
[BARI_BOUNDS.north, BARI_BOUNDS.east]
)
map = L.map(mapContainer.value, {
@@ -126,12 +132,15 @@ const initMap = async () => {
watch(currentView, async (view) => {
if (view !== 'map') return
await nextTick()
await initMap()
map?.invalidateSize()
await renderMapMarkers()
if (!map) {
await initMap()
} else {
map.invalidateSize()
await renderMapMarkers()
}
})
watch(visibleReports, async () => {
watch(mapVisibleReports, async () => {
if (currentView.value === 'map' && map) {
await renderMapMarkers()
}
@@ -146,7 +155,6 @@ onBeforeUnmount(() => {
<template>
<div>
<!-- HERO SECTION (Small version for internal pages) -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -162,19 +170,15 @@ onBeforeUnmount(() => {
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container my-5">
<!-- TOOLBAR: View Toggles & Export -->
<div class="row align-items-center mb-5 pb-3 border-bottom">
<div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
<!-- View Toggle Buttons -->
<button
class="btn btn-sm"
:class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
@click="currentView = 'grid'"
>
<BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
<BIIcon :color="currentView === 'grid' ? 'white' : 'primary'" class="me-1" name="it-grid" size="sm"/>
Griglia Dati
</button>
<button
@@ -182,39 +186,36 @@ onBeforeUnmount(() => {
:class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
@click="currentView = 'map'"
>
<BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
<BIIcon :color="currentView === 'map' ? 'white' : 'primary'" class="me-1" name="it-map-marker" size="sm"/>
Mappa
</button>
</div>
<div class="col-12 col-md-6 text-md-end">
<!-- Fake Export CTA (Very common in Open Data portals) -->
<button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
<BIIcon name="it-download" size="sm" class="me-1" />
<BIIcon class="me-1" name="it-download" size="sm"/>
Scarica JSON
</button>
</div>
</div>
<!-- LOADER -->
<div v-if="pending" class="d-flex justify-content-center my-5 py-5">
<div class="progress-spinner progress-spinner-active" role="status">
<span class="visually-hidden">Caricamento in corso...</span>
</div>
</div>
<!-- GRID VIEW -->
<div v-else-if="currentView === 'grid'">
<div v-show="!pending && currentView === 'grid'">
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
<div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
<!-- Strict BI Card -->
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="category-top m-0">
<span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
<BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
<span :class="getStatusBadge(report.status).class"
class="badge rounded-pill text-white px-3 py-1">
<BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
{{ getStatusBadge(report.status).text }}
</span>
</div>
@@ -224,7 +225,7 @@ onBeforeUnmount(() => {
<h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
<p class="card-text text-muted mb-4">
<BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
<BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
{{ report.area_name || 'Area comunale non specificata' }}
</p>
@@ -251,12 +252,11 @@ onBeforeUnmount(() => {
Nessun dato pubblico disponibile al momento.
</div>
<!-- BOOTSTRAP ITALIA PAGINATION -->
<nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
<ul class="pagination">
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
<BIIcon name="it-chevron-left" size="sm" />
<BIIcon name="it-chevron-left" size="sm"/>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
@@ -266,18 +266,20 @@ onBeforeUnmount(() => {
<li class="page-item" :class="{ disabled: isLastPage }">
<a class="page-link" href="#" @click.prevent="nextPage">
<span class="visually-hidden">Pagina successiva</span>
<BIIcon name="it-chevron-right" size="sm" />
<BIIcon name="it-chevron-right" size="sm"/>
</a>
</li>
</ul>
</nav>
</div>
<!-- MAP VIEW -->
<div v-else-if="currentView === 'map'" class="map-view-wrapper">
<div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
<p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
<span class="badge bg-light text-dark border">{{ visibleReports.length }} punti</span>
<span class="badge bg-light text-dark border">
<template v-if="mapPending">Caricamento...</template>
<template v-else>{{ mapVisibleReports.length }} punti</template>
</span>
</div>
<ClientOnly>
<div ref="mapContainer" class="open-data-map rounded border"></div>
@@ -289,17 +291,18 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* Ensures the cards inside the grid stretch to equal heights */
.card-wrapper {
height: 100%;
}
.card-bg {
border: 1px solid rgba(0,0,0,0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-bg:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.open-data-map {
app/pages/operator/assigned.vue
+3 -3
View File
@@ -25,7 +25,7 @@ const { data: reportsRes, pending } = useAsyncData(
<h1 class="h3 font-weight-bold mb-0">Le Mie Assegnazioni</h1>
<div>
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</NuxtLink>
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Segnalazioni disponibili</NuxtLink>
</div>
</div>
@@ -45,10 +45,10 @@ const { data: reportsRes, pending } = useAsyncData(
/>
<Pagination
v-if="reportsRes.total > perPage"
v-if="(reportsRes.total || 0) > perPage"
:current-page="page"
:per-page="perPage"
:total-items="reportsRes.total"
:total-items="reportsRes.total!"
@page-change="page = $event"
/>
</div>
app/pages/operator/index.vue
+5 -18
View File
@@ -6,34 +6,22 @@ definePageMeta({
useHead({ title: 'Segnalazioni Aperte - Operatore' })
const { getOpenReports, takeReport } = useOperator()
const { getOpenReports } = useOperator()
const page = ref(1)
const perPage = ref(10)
const { data: reportsRes, pending, refresh } = useAsyncData(
const { data: reportsRes, pending } = useAsyncData(
'operator-open-reports',
() => getOpenReports({ page: page.value, per_page: perPage.value }),
{ watch: [page] }
)
const handleTakeReport = async (id: number) => {
try {
const res = await takeReport(id)
if (res.ok) {
await refresh()
}
} catch (err) {
console.error('Failed to take report', err)
}
}
</script>
<template>
<div class="container my-5">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 font-weight-bold mb-0">Segnalazioni da prendere in carico (OPEN)</h1>
<h1 class="h3 font-weight-bold mb-0">Segnalazioni da valutare</h1>
<div>
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
<NuxtLink to="/operator/assigned" class="btn btn-outline-primary btn-sm">Le mie assegnazioni</NuxtLink>
@@ -45,15 +33,14 @@ const handleTakeReport = async (id: number) => {
</div>
<div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
Non ci sono segnalazioni aperte in questo momento.
Non ci sono segnalazioni disponibili in questo momento.
</div>
<div v-else>
<ReportTable
:reports="reportsRes.reports"
action-variant="manage"
detail-base-path="/operator/reports"
@take="handleTakeReport"
action-label="Visualizza"
/>
<Pagination
app/pages/operator/others.vue
+1 -1
View File
@@ -25,7 +25,7 @@ const { data: reportsRes, pending } = useAsyncData(
<h1 class="h3 font-weight-bold mb-0">Gestite da altri Operatori</h1>
<div>
<NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</NuxtLink>
<NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Segnalazioni disponibili</NuxtLink>
</div>
</div>
app/pages/operator/reports/[id].vue
+510 -110
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { Message, ReportStatus } from '~/types/api'
import type { FlagRequest, Message, Report, ReportStatus } from '~/types/api'
definePageMeta({
middleware: 'auth',
@@ -16,23 +16,41 @@ if (!reportId) {
navigateTo('/operator')
}
const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
const { getInterventionSummary, updateReportStatus, assignTeam, getTeams } = useOperator()
const { getReportDetail, getMessages, addMessage, flagMessage, flagReport } = useReports()
const {
takeReport,
getInterventionSummary,
updateReportStatus,
assignTeam,
getTeams,
createInterventionLink,
revokeInterventionLink
} = useOperator()
const { user } = useAuth()
// Dati principali
const { data: reportData, refresh: refreshReport } = await useAsyncData(`op-report-${reportId}`, () => getReportDetail(reportId))
const { data: messagesData, refresh: refreshMessages } = await useAsyncData(`op-messages-${reportId}`, () => getMessages(reportId))
const { data: summaryData, refresh: refreshSummary } = await useAsyncData(`op-summary-${reportId}`, () => getInterventionSummary(reportId))
const { data: teamsData } = await useAsyncData('operator-teams', () => getTeams())
const report = computed(() => (reportData.value as any)?.report)
const report = computed<Report | undefined>(() => (reportData.value as any)?.report)
const media = computed(() => (reportData.value as any)?.media || [])
const statusHistory = computed(() => (reportData.value as any)?.history || [])
const messages = computed(() => (messagesData.value as any)?.messages || [])
const messages = computed<Message[]>(() => (messagesData.value as any)?.messages || [])
const summary = computed(() => (summaryData.value as any)?.summary)
const summaryMedia = computed(() => (summaryData.value as any)?.media || [])
const teams = computed(() => teamsData.value?.teams || [])
const currentUserId = computed(() => user.value?.id ?? null)
const isTakenByCurrentOperator = computed(() => report.value?.assigned_operator_id === currentUserId.value)
const isOpenAndUnassigned = computed(() => report.value?.status === 'OPEN' && !report.value?.assigned_operator_id)
const isReadOnlyPreview = computed(() => !isTakenByCurrentOperator.value)
const canTakeReport = computed(() => isOpenAndUnassigned.value && !isTakenByCurrentOperator.value)
const isFinalStatus = computed(() => ['REJECTED', 'RESOLVED', 'CLOSED'].includes(report.value?.status || ''))
const canAssignTeam = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value && teams.value.length > 0)
const canSendMessage = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value)
const canChangeStatus = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value && selectableStatuses.value.length > 0)
const statusMeta: Record<string, string> = {
OPEN: 'Aperta',
UNDER_REVIEW: 'In revisione',
@@ -40,22 +58,18 @@ const statusMeta: Record<string, string> = {
IN_PROGRESS: 'In lavorazione',
RESOLVED: 'Risolta',
REJECTED: 'Respinta',
CLOSED: 'Chiusa'
CLOSED: 'Conclusa'
}
// Form Cambia Stato
const newStatus = ref<ReportStatus>('IN_PROGRESS')
const statusNote = ref('')
const isUpdatingStatus = ref(false)
// Form Assegna Squadra
const isAssignModalOpen = ref(false)
const selectedTeamId = ref<number | null>(null)
const isAssigning = ref(false)
// Messaggi
const isSubmittingMessage = ref(false)
const isFlaggingMessageId = ref<number | null>(null)
const statusTransitions: Record<string, string[]> = {
OPEN: ['UNDER_REVIEW', 'REJECTED'],
UNDER_REVIEW: ['ASSIGNED', 'REJECTED'],
ASSIGNED: ['IN_PROGRESS', 'REJECTED'],
IN_PROGRESS: ['RESOLVED', 'REJECTED'],
RESOLVED: ['CLOSED'],
REJECTED: ['CLOSED'],
CLOSED: []
}
const availableStatuses: { value: ReportStatus, label: string }[] = [
{ value: 'OPEN', label: 'Aperta' },
@@ -64,16 +78,116 @@ const availableStatuses: { value: ReportStatus, label: string }[] = [
{ value: 'IN_PROGRESS', label: 'In Lavorazione' },
{ value: 'RESOLVED', label: 'Risolta' },
{ value: 'REJECTED', label: 'Rifiutata' },
{ value: 'CLOSED', label: 'Chiusa' }
{ value: 'CLOSED', label: 'Conclusa' }
]
// Inizializza lo stato nel form
const selectableStatuses = computed(() => {
if (!report.value?.status) return []
const allowed = statusTransitions[report.value.status] || []
return availableStatuses.filter(s => allowed.includes(s.value))
})
const canCreateInterventionLink = computed(() => {
if (isReadOnlyPreview.value) return false
if (summary.value?.assignments && Array.isArray(summary.value.assignments)) {
return summary.value.assignments.some((a: any) => !a.ended_at)
}
return ['ASSIGNED', 'IN_PROGRESS'].includes(report.value?.status || '')
})
const newStatus = ref<ReportStatus>('IN_PROGRESS')
const statusNote = ref('')
const isUpdatingStatus = ref(false)
const isTakingReport = ref(false)
const isAssignModalOpen = ref(false)
const selectedTeamId = ref<number | null>(null)
const isAssigning = ref(false)
const interventionLink = ref('')
const interventionLinkExpiresAt = ref('')
const interventionPublicLink = ref('')
const isGeneratingInterventionLink = ref(false)
const isRevokingInterventionLink = ref(false)
const interventionLinkError = ref('')
const interventionLinkSuccess = ref('')
const isRevokeInterventionModalOpen = ref(false)
const copyFeedback = ref('')
const actionError = ref('')
const actionSuccess = ref('')
const isSubmittingMessage = ref(false)
const flaggedMessageIds = ref<number[]>([])
const isFlagMessageModalOpen = ref(false)
const messageToFlag = ref<Message | null>(null)
const isFlaggingMessage = ref(false)
const isFlaggingMessageId = computed(() => isFlaggingMessage.value ? messageToFlag.value?.id : null)
const isFlagReportModalOpen = ref(false)
const isFlaggingReport = ref(false)
const reportFlagError = ref('')
const reportFlagSuccess = ref('')
const reportFlagForm = reactive<FlagRequest>({
reason: '',
details: ''
})
watch(() => report.value?.status, (val) => {
if (val) newStatus.value = val as ReportStatus
if (val) {
const allowed = statusTransitions[val] || []
if (allowed.length > 0) {
newStatus.value = allowed[0] as ReportStatus
}
}
}, { immediate: true })
const resetReportFlagForm = () => {
reportFlagForm.reason = ''
reportFlagForm.details = ''
reportFlagError.value = ''
}
const clearActionFeedback = () => {
actionError.value = ''
actionSuccess.value = ''
}
const setPublicInterventionLink = (url?: string) => {
if (!url) {
interventionPublicLink.value = ''
return
}
try {
const rawUrl = new URL(url, runtimeConfig.public.api)
interventionPublicLink.value = `${runtimeConfig.public.url}${rawUrl.pathname.replace(/^\/api\/v1/, '')}`
} catch {
interventionPublicLink.value = url
}
}
const handleTakeReport = async () => {
if (!canTakeReport.value || !report.value) return
isTakingReport.value = true
clearActionFeedback()
try {
const res = await takeReport(report.value.id)
if (res.ok) {
await Promise.all([refreshReport(), refreshSummary()])
actionSuccess.value = 'Segnalazione presa in carico.'
}
} catch (e: any) {
console.error('Failed to take report', e)
actionError.value = e?.data?.message || 'Presa in carico non riuscita.'
} finally {
isTakingReport.value = false
}
}
const handleStatusUpdate = async () => {
if (!canChangeStatus.value) return
isUpdatingStatus.value = true
clearActionFeedback()
try {
const res = await updateReportStatus(reportId, {
status: newStatus.value,
@@ -82,17 +196,22 @@ const handleStatusUpdate = async () => {
if (res.ok) {
statusNote.value = ''
await Promise.all([refreshReport(), refreshSummary()])
actionSuccess.value = 'Stato aggiornato con successo.'
}
} catch (e) {
} catch (e: any) {
console.error('Failed to update status', e)
actionError.value = e?.data?.message || 'Aggiornamento stato non riuscito.'
} finally {
isUpdatingStatus.value = false
}
}
const handleAssignTeam = async () => {
if (!canAssignTeam.value) return
if (!selectedTeamId.value) return
isAssigning.value = true
clearActionFeedback()
try {
const res = await assignTeam(reportId, {
team_id: selectedTeamId.value
@@ -101,22 +220,104 @@ const handleAssignTeam = async () => {
isAssignModalOpen.value = false
selectedTeamId.value = null
await Promise.all([refreshReport(), refreshSummary()])
actionSuccess.value = 'Team assegnato con successo.'
}
} catch (e) {
} catch (e: any) {
console.error('Failed to assign team', e)
actionError.value = e?.data?.message || 'Assegnazione team non riuscita.'
} finally {
isAssigning.value = false
}
}
const copyInterventionLink = async () => {
if (!interventionPublicLink.value || !navigator?.clipboard) return
try {
await navigator.clipboard.writeText(interventionPublicLink.value)
copyFeedback.value = 'Copiato'
interventionLinkSuccess.value = 'Link copiato negli appunti.'
interventionLinkError.value = ''
setTimeout(() => {
copyFeedback.value = ''
}, 2000)
} catch {
interventionLinkError.value = 'Copia automatica non riuscita.'
interventionLinkSuccess.value = ''
copyFeedback.value = ''
}
}
const handleCreateInterventionLink = async () => {
if (!canCreateInterventionLink.value) return
isGeneratingInterventionLink.value = true
clearActionFeedback()
interventionLinkError.value = ''
interventionLinkSuccess.value = ''
try {
const res = await createInterventionLink(reportId)
if (res.ok) {
interventionLink.value = res.url
interventionLinkExpiresAt.value = res.expires_at
setPublicInterventionLink(res.url)
interventionLinkSuccess.value = 'Link intervento generato.'
}
} catch (e: any) {
console.error('Failed to create intervention link', e)
interventionLinkError.value = e?.data?.message || 'Generazione link non riuscita.'
} finally {
isGeneratingInterventionLink.value = false
}
}
const openRevokeInterventionLinkModal = () => {
if (!interventionLink.value) return
isRevokeInterventionModalOpen.value = true
}
const closeRevokeInterventionLinkModal = () => {
if (isRevokingInterventionLink.value) return
isRevokeInterventionModalOpen.value = false
}
const handleRevokeInterventionLink = async () => {
if (!interventionLink.value) return
isRevokingInterventionLink.value = true
clearActionFeedback()
interventionLinkError.value = ''
interventionLinkSuccess.value = ''
try {
const res = await revokeInterventionLink(reportId)
if (res.ok) {
interventionLink.value = ''
interventionLinkExpiresAt.value = ''
interventionPublicLink.value = ''
interventionLinkSuccess.value = 'Link intervento revocato.'
isRevokeInterventionModalOpen.value = false
}
} catch (e: any) {
console.error('Failed to revoke intervention link', e)
interventionLinkError.value = e?.data?.message || 'Revoca link non riuscita.'
} finally {
isRevokingInterventionLink.value = false
}
}
const handleSendMessage = async (msgText: string, files: File[]) => {
if (!canSendMessage.value) return
if (!msgText.trim() && files.length === 0) return
isSubmittingMessage.value = true
clearActionFeedback()
try {
await addMessage(reportId, { body: msgText })
await refreshMessages()
} catch (e) {
actionSuccess.value = 'Messaggio inviato.'
} catch (e: any) {
console.error('Failed to send message', e)
actionError.value = e?.data?.message || 'Invio messaggio non riuscito.'
} finally {
isSubmittingMessage.value = false
}
@@ -124,21 +325,64 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
const canFlagMessage = (message: Message) => {
if (!user.value) return false
return message.user_id !== user.value.id && message.user_id === report.value?.user_id
const isCitizenMessage = message.user_id !== user.value.id && message.user_id === report.value?.user_id
const isAlreadyFlagged = flaggedMessageIds.value.includes(message.id)
return isCitizenMessage && !isAlreadyFlagged
}
const handleFlagMessage = async (message: Message) => {
const handleFlagMessage = (message: Message) => {
if (!canFlagMessage(message)) return
isFlaggingMessageId.value = message.id
messageToFlag.value = message
isFlagMessageModalOpen.value = true
}
const executeFlagMessage = async () => {
if (!messageToFlag.value) return
isFlaggingMessage.value = true
try {
await flagMessage(reportId, message.id, {
await flagMessage(reportId, messageToFlag.value.id, {
reason: 'Messaggio segnalato da operatore responsabile per verifica moderazione',
})
} catch (e) {
flaggedMessageIds.value.push(messageToFlag.value.id)
isFlagMessageModalOpen.value = false
messageToFlag.value = null
actionSuccess.value = 'Messaggio segnalato alla moderazione.'
} catch (e: any) {
console.error('Failed to flag message', e)
actionError.value = e?.data?.message || 'Segnalazione messaggio non riuscita.'
} finally {
isFlaggingMessageId.value = null
isFlaggingMessage.value = false
}
}
const executeFlagReport = async () => {
if (!reportFlagForm.reason.trim()) {
reportFlagError.value = 'Inserisci un motivo.'
return
}
isFlaggingReport.value = true
reportFlagError.value = ''
reportFlagSuccess.value = ''
try {
await flagReport(reportId, {
reason: reportFlagForm.reason.trim(),
details: reportFlagForm.details.trim() || undefined
})
reportFlagSuccess.value = 'Segnalazione inviata alla moderazione.'
isFlagReportModalOpen.value = false
resetReportFlagForm()
} catch (e: any) {
console.error('Failed to flag report', e)
reportFlagError.value = e?.data?.message || 'Invio segnalazione non riuscito.'
} finally {
isFlaggingReport.value = false
}
}
@@ -155,23 +399,28 @@ const latestCitizenMessage = computed(() => {
if (!reportUserId) return null
return [...messages.value]
.reverse()
.find((message) => message.user_id === reportUserId) || null
.reverse()
.find((message) => message.user_id === reportUserId) || null
})
const formattedInterventionLinkExpiry = computed(() =>
interventionLinkExpiresAt.value ? formatDate(interventionLinkExpiresAt.value) : ''
)
</script>
<template>
<div v-if="report">
<div class="report-hero py-4">
<div class="container">
<NuxtLink to="/operator/assigned" class="btn btn-sm btn-link text-decoration-none ps-0 mb-2">
&larr; Torna alle assegnazioni
<NuxtLink :to="isTakenByCurrentOperator ? '/operator/assigned' : '/operator'" class="btn btn-sm btn-link text-decoration-none ps-0 mb-2">
&larr; Torna all'elenco
</NuxtLink>
<div class="row g-3 align-items-end">
<div class="col-12 col-lg-8">
<div class="report-hero-meta mb-2">
<span class="report-id">Intervento #{{ reportId }}</span>
<span class="report-id">Segnalazione #{{ reportId }}</span>
<StatusBadge :status="report.status" />
<span v-if="isReadOnlyPreview" class="badge bg-secondary">Sola lettura</span>
</div>
<h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
<p class="mb-0 report-hero-address">{{ report.address }}</p>
@@ -184,15 +433,26 @@ const latestCitizenMessage = computed(() => {
</div>
<div class="hero-stat">
<span class="hero-stat-label">Aperta</span>
<strong>{{ formatDate(report.created_at) }}</strong>
<strong>{{ formatDate(report.created_at || '') }}</strong>
</div>
</div>
</div>
</div>
<div v-if="isReadOnlyPreview" class="alert alert-info mt-3 mb-0">
Stai visualizzando segnalazione in sola lettura. Prendila in carico per aggiornare stato, assegnare team o scrivere al cittadino.
</div>
</div>
</div>
<div class="container my-5">
<div v-if="actionError" class="alert alert-danger mb-4">
{{ actionError }}
</div>
<div v-if="actionSuccess" class="alert alert-success mb-4">
{{ actionSuccess }}
</div>
<div class="row g-4">
<div class="col-12 col-xl-7">
<div class="card card-bg border-0 shadow-sm mb-4">
@@ -233,6 +493,20 @@ const latestCitizenMessage = computed(() => {
</div>
</div>
</div>
<div class="mt-4 d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-warning btn-sm" @click="isFlagReportModalOpen = true">
Segnala alla moderazione
</button>
<button v-if="canTakeReport" type="button" class="btn btn-primary btn-sm" :disabled="isTakingReport" @click="handleTakeReport">
<span v-if="isTakingReport" class="spinner-border spinner-border-sm me-2"></span>
Prendi in carico
</button>
</div>
<div v-if="reportFlagSuccess" class="alert alert-success mt-3 mb-0">
{{ reportFlagSuccess }}
</div>
</div>
</div>
@@ -249,96 +523,171 @@ const latestCitizenMessage = computed(() => {
<span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
</div>
<MessageList
:messages="messages"
:can-flag-message="canFlagMessage"
:is-flagging-message-id="isFlaggingMessageId"
@flag="handleFlagMessage"
:messages="messages"
:can-flag-message="canFlagMessage"
:is-flagging-message-id="isFlaggingMessageId"
@flag="handleFlagMessage"
/>
<MessageComposer @send="handleSendMessage" />
<div v-if="isReadOnlyPreview" class="alert alert-secondary mt-3 mb-0 small">
{{ isFinalStatus ? 'Messaggistica non disponibile per segnalazioni concluse o rifiutate.' : 'Messaggistica disponibile dopo la presa in carico.' }}
</div>
<MessageComposer v-else-if="canSendMessage" @send="handleSendMessage" />
<div v-else class="alert alert-secondary mt-3 mb-0 small">
Messaggistica non disponibile per segnalazioni concluse o rifiutate.
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-5">
<div class="report-sidebar">
<div class="card card-bg border-0 shadow-sm mb-4" v-if="summary">
<div class="card-body">
<h2 class="h6 mb-3">Quadro operativo</h2>
<ul class="report-summary-list list-unstyled mb-4">
<li>
<span>Operatore</span>
<strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
</li>
<li>
<span>Team disponibili</span>
<strong>{{ teams.length }}</strong>
</li>
<li>
<span>Allegati</span>
<strong>{{ summaryMedia.length || media.length }}</strong>
</li>
</ul>
<div class="report-description">
<h3 class="h6 mb-2">Ultimo messaggio cittadino</h3>
<p class="small mb-0">
{{ latestCitizenMessage?.body || 'Nessun messaggio del cittadino disponibile.' }}
</p>
<div class="card card-bg border-0 shadow-sm mb-4" v-if="summary">
<div class="card-body">
<h2 class="h6 mb-3">Quadro operativo</h2>
<ul class="report-summary-list list-unstyled mb-4">
<li>
<span>Operatore</span>
<strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
</li>
<li>
<span>Team disponibili</span>
<strong>{{ teams.length }}</strong>
</li>
<li>
<span>Allegati</span>
<strong>{{ summaryMedia.length || media.length }}</strong>
</li>
</ul>
<div class="report-description">
<h3 class="h6 mb-2">Ultimo messaggio cittadino</h3>
<p class="small mb-0">
{{ latestCitizenMessage?.body || 'Nessun messaggio del cittadino disponibile.' }}
</p>
</div>
</div>
<div class="card-body pt-0" v-if="!isReadOnlyPreview">
<button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="!canAssignTeam">
Assegna team
</button>
<div v-if="isFinalStatus" class="small text-muted mt-2">
Assegnazione team non disponibile per segnalazioni concluse o rifiutate.
</div>
</div>
</div>
<div class="card-body pt-0">
<button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
Assegna team
</button>
</div>
</div>
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<h2 class="h6 mb-3">Aggiorna stato</h2>
<form @submit.prevent="handleStatusUpdate">
<div class="mb-3">
<label class="form-label">Nuovo Stato</label>
<select class="form-select" v-model="newStatus">
<option v-for="st in availableStatuses" :key="st.value" :value="st.value">
{{ st.label }}
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Nota (visibile nella cronologia)</label>
<textarea class="form-control" v-model="statusNote" rows="2" placeholder="Motivazione o dettaglio..."></textarea>
</div>
<button type="submit" class="btn btn-primary w-100" :disabled="isUpdatingStatus || newStatus === report.status">
<span v-if="isUpdatingStatus" class="spinner-border spinner-border-sm me-2"></span>
Aggiorna Stato
</button>
</form>
</div>
</div>
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<h2 class="h6 mb-3">Link intervento pubblico</h2>
<p class="text-muted small mb-3">Genera link temporaneo per team esterno. Nuova generazione ruota link esistente.</p>
<div class="card card-bg border-0 shadow-sm">
<div class="card-body">
<h2 class="h6 mb-3">Cronologia eventi</h2>
<div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
<ul class="list-unstyled mb-0 ms-2">
<li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
<small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
<div class="d-flex align-items-center gap-2 mt-1">
<StatusBadge :status="item.old_status" />
<BIIcon name="it-arrow-right" size="xs" />
<StatusBadge :status="item.new_status" />
<div v-if="interventionLinkError" class="alert alert-danger py-2" role="alert">
{{ interventionLinkError }}
</div>
<div v-if="interventionLinkSuccess" class="alert alert-success py-2" role="alert">
{{ interventionLinkSuccess }}
</div>
<template v-if="interventionPublicLink">
<label class="form-label">URL attivo</label>
<div class="input-group mb-2">
<input type="text" class="form-control" :value="interventionPublicLink" readonly />
<button type="button" class="btn btn-outline-primary" @click="copyInterventionLink">
{{ copyFeedback || 'Copia' }}
</button>
</div>
<div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
</li>
</ul>
<p class="small text-muted mb-3">
Scade: {{ formattedInterventionLinkExpiry || '-' }}
</p>
<div class="d-grid gap-2" v-if="!isReadOnlyPreview">
<button type="button" class="btn btn-outline-primary" :disabled="isGeneratingInterventionLink || !canCreateInterventionLink" @click="handleCreateInterventionLink">
<span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
Rigenera link
</button>
<button type="button" class="btn btn-outline-danger" :disabled="isRevokingInterventionLink" @click="openRevokeInterventionLinkModal">
<span v-if="isRevokingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
Revoca link
</button>
</div>
</template>
<button
v-else
type="button"
class="btn btn-outline-primary w-100"
:disabled="isGeneratingInterventionLink || !canCreateInterventionLink"
@click="handleCreateInterventionLink"
>
<span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
Genera link
</button>
<div v-if="!canCreateInterventionLink" class="text-danger small mt-2">
È necessaria una presa in carico e un'assegnazione in corso per generare questo link.
</div>
</div>
</div>
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<h2 class="h6 mb-3">Aggiorna stato</h2>
<template v-if="isReadOnlyPreview">
<div class="alert alert-secondary mb-0 small">
Aggiornamento stato disponibile dopo la presa in carico.
</div>
</template>
<template v-else-if="canChangeStatus">
<form @submit.prevent="handleStatusUpdate">
<div class="mb-3">
<label class="form-label">Nuovo Stato</label>
<select class="form-select" v-model="newStatus">
<option v-for="st in selectableStatuses" :key="st.value" :value="st.value">
{{ st.label }}
</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Nota (visibile nella cronologia)</label>
<textarea class="form-control" v-model="statusNote" rows="2" placeholder="Motivazione o dettaglio..."></textarea>
</div>
<button type="submit" class="btn btn-primary w-100" :disabled="isUpdatingStatus">
<span v-if="isUpdatingStatus" class="spinner-border spinner-border-sm me-2"></span>
Aggiorna Stato
</button>
</form>
</template>
<template v-else>
<div class="alert alert-info mb-0 small">
La segnalazione è attualmente in stato <strong>{{ statusMeta[report.status] }}</strong>. Non sono consentite ulteriori transizioni.
</div>
</template>
</div>
</div>
<div class="card card-bg border-0 shadow-sm">
<div class="card-body">
<h2 class="h6 mb-3">Cronologia eventi</h2>
<div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
<ul class="list-unstyled mb-0 ms-2">
<li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
<small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
<div class="d-flex align-items-center gap-2 mt-1">
<StatusBadge :status="item.old_status" />
<BIIcon name="it-arrow-right" size="xs" />
<StatusBadge :status="item.new_status" />
</div>
<div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modale Assegnazione -->
<div v-if="isAssignModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isAssignModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-dialog-centered">
@@ -375,6 +724,57 @@ const latestCitizenMessage = computed(() => {
</div>
</div>
<div v-if="isFlagReportModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
<div v-if="isFlagReportModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Segnala segnalazione alla moderazione</h5>
<button type="button" class="btn-close" :disabled="isFlaggingReport" @click="isFlagReportModalOpen = false; resetReportFlagForm()"></button>
</div>
<div class="modal-body">
<div v-if="reportFlagError" class="alert alert-danger py-2">{{ reportFlagError }}</div>
<div class="mb-3">
<label class="form-label">Motivo</label>
<input v-model="reportFlagForm.reason" type="text" class="form-control" maxlength="200" />
</div>
<div>
<label class="form-label">Dettagli</label>
<textarea v-model="reportFlagForm.details" class="form-control" rows="4" placeholder="Dettagli aggiuntivi opzionali"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" :disabled="isFlaggingReport" @click="isFlagReportModalOpen = false; resetReportFlagForm()">Annulla</button>
<button type="button" class="btn btn-warning" :disabled="isFlaggingReport || !reportFlagForm.reason.trim()" @click="executeFlagReport">
<span v-if="isFlaggingReport" class="spinner-border spinner-border-sm me-2"></span>
Invia a moderazione
</button>
</div>
</div>
</div>
</div>
<ConfirmModal
:open="isRevokeInterventionModalOpen"
title="Revoca link intervento"
message="Vuoi revocare link pubblico per team esterno? Link non sara piu utilizzabile."
confirm-label="Revoca link"
confirm-class="btn-danger"
:pending="isRevokingInterventionLink"
@cancel="closeRevokeInterventionLinkModal"
@confirm="handleRevokeInterventionLink"
/>
<ConfirmModal
:open="isFlagMessageModalOpen"
title="Segnala messaggio"
message="Sei sicuro di voler segnalare questo messaggio al team di moderazione per una verifica?"
confirm-label="Segnala"
confirm-class="btn-warning"
:pending="isFlaggingMessage"
@cancel="isFlagMessageModalOpen = false; messageToFlag = null"
@confirm="executeFlagMessage"
/>
</div>
<div v-else class="text-center py-5">
<div class="spinner-border text-primary" role="status"></div>
app/pages/privacy.vue
+1 -3
View File
@@ -6,7 +6,6 @@ useHead({
<template>
<div>
<!-- HERO SECTION -->
<div class="it-hero-wrapper it-primary">
<div class="container">
<div class="row">
@@ -22,7 +21,6 @@ useHead({
</div>
</div>
<!-- CONTENUTO PRINCIPALE -->
<div class="container my-5 py-4">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
@@ -48,7 +46,7 @@ useHead({
<h2 class="h3 font-weight-bold mb-3">3. Finalità del Trattamento</h2>
<p class="text-muted mb-4">
I dati forniti verranno trattati esclusivamente per le seguenti finalità:
<br>- Consentire la registrazione e l'autenticazione sicura (incluso login Passwordless tramite OTP).
<br>- Consentire la registrazione e l'autenticazione sicura tramite OTP.
<br>- Gestire la presa in carico e la risoluzione delle segnalazioni urbane da parte delle squadre operative.
<br>- Fornire comunicazioni di servizio relative allo stato di avanzamento delle segnalazioni.
<br>- Attribuire punteggi virtuali all'utente nell'ambito del sistema di <em>Gamification</em> volto a incentivare la cittadinanza attiva.
app/pages/profile.vue
+9 -3
View File
@@ -71,7 +71,7 @@ const formatDate = (dateString: string) =>
</div>
<div class="col-md-6 mb-0">
<small class="text-muted d-block">Ruolo</small>
<span class="badge bg-info">{{ user?.role }}</span>
<span class="badge bg-info">{{ normalizeRole(user?.role) }}</span>
</div>
</div>
</div>
@@ -130,9 +130,9 @@ const formatDate = (dateString: string) =>
<div class="card-body">
<h2 class="h6 card-title mb-3">Azioni account</h2>
<div class="d-grid gap-2">
<NuxtLink to="/reports/new" class="btn btn-primary">Nuova segnalazione</NuxtLink>
<NuxtLink v-if="isCitizen(user?.role)" class="btn btn-primary" to="/reports/new">Nuova segnalazione
</NuxtLink>
<NuxtLink to="/notifications" class="btn btn-outline-primary">Notifiche</NuxtLink>
<NuxtLink to="/auth/change-password" class="btn btn-outline-secondary">Cambia password</NuxtLink>
<button type="button" class="btn btn-outline-danger" @click="logout">
Logout
</button>
@@ -154,3 +154,9 @@ const formatDate = (dateString: string) =>
</div>
</div>
</template>
<style>
.card .card-body .d-grid > a {
padding-block: 8px;
}
</style>
app/pages/reports/[id].vue
+63 -83
View File
@@ -6,7 +6,6 @@ definePageMeta({
useHead({ title: 'Dettaglio Segnalazione - Visione' })
const runtimeConfig = useRuntimeConfig()
const route = useRoute()
const { getReportDetail, getMessages, addMessage, addFeedback } = useReports()
const { user } = useAuth()
@@ -16,13 +15,12 @@ if (!reportId) {
navigateTo('/')
}
// Fetch dati
const { data: reportData, refresh: refreshReport } = await useAsyncData(`report-${reportId}`, () =>
getReportDetail(reportId)
getReportDetail(reportId)
)
const { data: messagesData, refresh: refreshMessages } = await useAsyncData(`messages-${reportId}`, () =>
getMessages(reportId)
getMessages(reportId)
)
const report = computed(() => (reportData.value as any)?.report)
@@ -30,23 +28,18 @@ const media = computed(() => (reportData.value as any)?.media || [])
const statusHistory = computed(() => (reportData.value as any)?.history || [])
const messages = computed(() => (messagesData.value as any)?.messages || [])
const newMessage = ref('')
const isSubmittingMessage = ref(false)
const isFeedbackOpen = ref(false)
const feedbackRating = ref(5)
const feedbackComment = ref('')
const isSubmittingFeedback = ref(false)
const selectedMediaIndex = ref(0)
const isGalleryOpen = ref(false)
// Invia messaggio
const handleSendMessage = async (msgText: string, files: File[]) => {
if (!msgText.trim() && files.length === 0) return
const handleSendMessage = async (messageText: string, files: File[]) => {
isSubmittingMessage.value = true
try {
// Gestione mock di file, nella realtà si usa FormData o simle
await addMessage(reportId, { body: msgText })
await addMessage(reportId, { body: messageText })
await refreshMessages()
} catch (error) {
console.error('Error sending message:', error)
@@ -55,7 +48,6 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
}
}
// Invia feedback (solo se risolta)
const handleSubmitFeedback = async () => {
isSubmittingFeedback.value = true
try {
@@ -75,7 +67,14 @@ const handleSubmitFeedback = async () => {
}
const isOwner = computed(() => report.value?.user_id === user.value?.id)
const canFeedback = computed(() => report.value?.status === 'RESOLVED' || report.value?.status === 'CLOSED')
const canFeedback = computed(() => report.value?.status === 'RESOLVED')
const canChat = computed(() => {
if (!report.value) return false
const closedStatuses = ['RESOLVED', 'CLOSED', 'REJECTED']
return !closedStatuses.includes(report.value.status)
})
const statusMeta: Record<string, { label: string; tone: string }> = {
OPEN: { label: 'Aperta', tone: 'info' },
UNDER_REVIEW: { label: 'In revisione', tone: 'warning' },
@@ -83,7 +82,7 @@ const statusMeta: Record<string, { label: string; tone: string }> = {
IN_PROGRESS: { label: 'In lavorazione', tone: 'primary' },
RESOLVED: { label: 'Risolta', tone: 'success' },
REJECTED: { label: 'Respinta', tone: 'danger' },
CLOSED: { label: 'Chiusa', tone: 'secondary' },
CLOSED: { label: 'Conclusa', tone: 'secondary' },
}
const formatDate = (dateString: string): string => {
@@ -105,7 +104,7 @@ const formatDate = (dateString: string): string => {
<div class="col-12 col-lg-8">
<div class="report-hero-meta mb-2">
<span class="report-id">Segnalazione #{{ report.id }}</span>
<StatusBadge :status="report.status" />
<StatusBadge :status="report.status"/>
</div>
<h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
<p class="mb-0 report-hero-address">{{ report.address }}</p>
@@ -132,7 +131,7 @@ const formatDate = (dateString: string): string => {
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="report-section-head mb-3">
<BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-map-marker-circle" size="sm"/>
<h2 class="h6 mb-0">Posizione e dettagli</h2>
</div>
<dl class="report-detail-grid mb-0">
@@ -164,46 +163,40 @@ const formatDate = (dateString: string): string => {
<div v-if="media.length > 0" class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="report-section-head mb-3">
<BIIcon name="it-camera" size="sm" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-camera" size="sm"/>
<h2 class="h6 mb-0">Allegati ({{ media.length }})</h2>
</div>
<div class="row g-3">
<div v-for="(m, idx) in media" :key="m.id" class="col-6 col-md-4 mb-3">
<div v-if="m.media_kind === 'IMAGE'" class="ratio ratio-1x1 bg-light rounded overflow-hidden report-media-frame">
<img :src="runtimeConfig.public.api + m.url" :alt="`Allegato ${Number(idx) + 1}`" class="object-fit-cover" />
<div v-if="m.media_kind === 'IMAGE'"
class="ratio ratio-1x1 bg-light rounded overflow-hidden report-media-frame">
<img :alt="`Allegato ${Number(idx) + 1}`" :src="runtimeConfig.public.api + m.url"
class="object-fit-cover"/>
</div>
<div v-else class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center report-media-frame">
<BIIcon name="it-video" size="xl" color="white" />
<div v-else
class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center report-media-frame">
<BIIcon color="white" name="it-video" size="xl"/>
</div>
</div>
</div>
</div>
</div>
<div v-if="statusHistory.length > 0" class="card card-bg border-0 shadow-sm mb-4">
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="report-section-head mb-4">
<BIIcon name="it-history" size="sm" color="primary" class="me-2" />
<h2 class="h6 mb-0">Cronologia</h2>
</div>
<div class="timeline">
<div v-for="item in statusHistory" :key="item.id" class="timeline-item mb-3">
<div class="d-flex gap-3">
<div class="flex-shrink-0">
<div class="timeline-marker"></div>
</div>
<div class="flex-grow-1">
<small class="text-muted">{{ formatDate(item.created_at) }}</small>
<div class="small font-weight-semibold d-flex align-items-center gap-2 mt-1">
<StatusBadge :status="item.old_status" />
<BIIcon name="it-arrow-right" size="xs" />
<StatusBadge :status="item.new_status" />
</div>
<small v-if="item.note" class="text-muted d-block">{{ item.note }}</small>
</div>
<h2 class="h6 mb-3">Cronologia eventi</h2>
<div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
<ul class="list-unstyled mb-0 ms-2">
<li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
<small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
<div class="d-flex align-items-center gap-2 mt-1">
<StatusBadge :status="item.old_status"/>
<BIIcon name="it-arrow-right" size="xs"/>
<StatusBadge :status="item.new_status"/>
</div>
</div>
</div>
<div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
</li>
</ul>
</div>
</div>
@@ -212,15 +205,23 @@ const formatDate = (dateString: string): string => {
<div class="report-chat-header mb-3">
<div>
<div class="report-section-head mb-1">
<BIIcon name="it-comment" size="sm" color="primary" class="me-2" />
<BIIcon class="me-2" color="primary" name="it-comment" size="sm"/>
<h2 class="h6 mb-0">Chat segnalazione</h2>
</div>
<p class="text-muted small mb-0">Usa chat per chiarimenti, aggiornamenti operativi e richieste rapide.</p>
<p class="text-muted small mb-0">Usa chat per chiarimenti, aggiornamenti operativi e richieste
rapide.</p>
</div>
<span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
</div>
<MessageList :messages="messages" />
<MessageComposer @send="handleSendMessage" />
<MessageList :messages="messages"/>
<MessageComposer v-if="canChat" @send="handleSendMessage"/>
<div v-else class="alert alert-secondary mt-3 mb-0 text-center small">
La chat è disabilitata poiché la segnalazione è in stato
<strong>{{ statusMeta[report.status]?.label || report.status }}</strong>.
</div>
</div>
</div>
</div>
@@ -252,10 +253,10 @@ const formatDate = (dateString: string): string => {
<h2 class="h6 mb-3">Valuta intervento</h2>
<p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p>
<button
v-if="!isFeedbackOpen"
type="button"
class="btn btn-primary w-100"
@click="isFeedbackOpen = true"
v-if="!isFeedbackOpen"
type="button"
class="btn btn-primary w-100"
@click="isFeedbackOpen = true"
>
Valuta intervento
</button>
@@ -267,9 +268,9 @@ const formatDate = (dateString: string): string => {
<button v-for="n in 5" :key="n" type="button" class="btn btn-link p-0"
@click="feedbackRating = n" :aria-label="`${n} stelle`">
<BIIcon
:name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
size="lg"
:color="n <= feedbackRating ? 'warning' : 'primary'"
:name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
size="lg"
:color="n <= feedbackRating ? 'warning' : 'primary'"
/>
</button>
</div>
@@ -277,15 +278,16 @@ const formatDate = (dateString: string): string => {
<div class="mb-3">
<textarea
v-model="feedbackComment"
class="form-control"
placeholder="Commento opzionale"
rows="3"
v-model="feedbackComment"
class="form-control"
placeholder="Commento opzionale"
rows="3"
/>
</div>
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary" @click="handleSubmitFeedback" :disabled="isSubmittingFeedback">
<button :disabled="isSubmittingFeedback" class="btn btn-primary" type="button"
@click="handleSubmitFeedback">
<span v-if="isSubmittingFeedback" class="spinner-border spinner-border-sm me-2"></span>
Invia
</button>
@@ -408,25 +410,6 @@ const formatDate = (dateString: string): string => {
justify-content: space-between;
}
.timeline-marker {
width: 12px;
height: 12px;
background-color: #006f9d;
border-radius: 50%;
border: 3px solid #f0f0f0;
}
.timeline-item:not(:last-child) .timeline-marker::after {
content: '';
position: absolute;
left: 50%;
top: 20px;
width: 2px;
height: calc(100% + 20px);
background-color: #006f9d;
transform: translateX(-50%);
}
.ratio {
position: relative;
display: block;
@@ -457,6 +440,3 @@ const formatDate = (dateString: string): string => {
}
}
</style>
app/pages/reports/new.vue
+3
View File
@@ -3,6 +3,9 @@ import type { CreateReportRequest } from '~/types/api'
definePageMeta({
middleware: 'auth',
auth: {
role: ['!ADMIN', '!OPERATOR']
}
})
useHead({ title: 'Nuova segnalazione - Visione' })
app/types/api.d.ts
Vendored
+291 -256
View File
@@ -4,416 +4,451 @@ export type FlagStatus = 'OPEN' | 'RESOLVED' | 'DISMISSED';
export type FlagContentType = 'REPORT' | 'MESSAGE';
export interface GeoJsonObject {
type: string;
coordinates: any[];
[key: string]: any;
type: string;
coordinates: any[];
[key: string]: any;
}
export interface ErrorResponse {
error: string;
message?: string;
fields?: string[];
error: string;
message?: string;
fields?: string[];
}
export interface OkResponse {
ok: boolean;
ok: boolean;
}
/**
* USER & AUTHENTICATION
*/
export interface CurrentUser {
id: number;
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
points: number;
must_change_password: boolean;
role: string;
roles: string[];
permissions: string[];
phone?: string;
id: number;
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
points: number;
role: string;
roles: string[];
permissions: string[];
phone?: string;
}
export interface AdminUser {
id: number;
email: string;
first_name: string;
last_name: string;
fiscal_code: string;
phone?: string;
banned?: boolean;
points?: number;
must_change_password?: boolean;
roles?: string; // Comma-separated
id: number;
email: string;
first_name: string;
last_name: string;
fiscal_code: string;
phone?: string;
banned?: boolean;
points?: number;
roles?: string;
}
export interface TokenResponse {
ok: boolean;
token: string;
token_type: string;
expires_in_hours: number;
ok: boolean;
token: string;
token_type: string;
expires_in_hours: number;
}
export interface CieStartRequest {
frontend_redirect_uri: string;
}
export interface CieStartResponse {
ok: boolean;
authorization_url: string;
state: string;
status: string;
}
export interface CieExchangeRequest {
state: string;
issuer: string;
subject: string;
fiscal_code: string;
first_name?: string;
last_name?: string;
email?: string;
}
export interface CieSessionAuth {
token?: string;
token_type?: string;
expires_in_hours?: number;
[key: string]: any;
}
export interface CieSessionResponse {
ok: boolean;
status: string;
user_id?: number;
auth?: CieSessionAuth;
}
/**
* REPORTS & MEDIA
*/
export interface Report {
id: number;
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
status: ReportStatus;
area_id?: number;
area_name?: string;
category_name?: string;
assigned_operator_id?: number;
created_at?: string;
updated_at?: string;
user_id?: number;
id: number;
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
status: ReportStatus;
area_id?: number;
area_name?: string;
category_name?: string;
assigned_operator_id?: number;
created_at?: string;
updated_at?: string;
user_id?: number;
}
export interface OpenDataReport {
id: number;
category_id: number;
category_name: string;
latitude: number;
longitude: number;
status: ReportStatus;
created_at: string;
updated_at: string;
area_id?: number | null;
area_name?: string | null;
id: number;
category_id: number;
category_name: string;
latitude: number;
longitude: number;
status: ReportStatus;
created_at: string;
updated_at: string;
area_id?: number | null;
area_name?: string | null;
}
export interface Media {
id: number;
report_id: number;
url: string;
media_kind: MediaKind;
content_type: string;
original_filename: string;
size_bytes: number;
created_at: string;
id: number;
report_id: number;
url: string;
media_kind: MediaKind;
content_type: string;
original_filename: string;
size_bytes: number;
created_at: string;
}
export interface StatusHistoryItem {
id: number;
report_id: number;
changed_by_user_id: number;
old_status: ReportStatus;
new_status: ReportStatus;
note?: string;
created_at: string;
id: number;
report_id: number;
changed_by_user_id: number;
old_status: ReportStatus;
new_status: ReportStatus;
note?: string;
created_at: string;
}
export interface Message {
id: number;
report_id: number;
user_id: number;
first_name: string;
last_name: string;
body: string;
created_at: string;
id: number;
report_id: number;
user_id: number;
first_name: string;
last_name: string;
body: string;
created_at: string;
}
/**
* ENTITIES (Areas, Teams, Categories, Notifications, Rewards, Moderation)
*/
export interface Area {
id: number;
name: string;
description?: string;
active?: boolean;
boundary_geojson?: GeoJsonObject;
id: number;
name: string;
description?: string;
active?: boolean;
boundary_geojson?: GeoJsonObject;
}
export interface Category {
id: number;
name: string;
description?: string;
active?: boolean;
id: number;
name: string;
description?: string;
active?: boolean;
}
export interface Team {
id: number;
name: string;
description?: string;
team_category_id: number;
area_id?: number;
active?: boolean;
area_name?: string;
category_name?: string;
id: number;
name: string;
description?: string;
team_category_id: number;
area_id?: number;
active?: boolean;
area_name?: string;
category_name?: string;
}
export interface Notification {
id: number;
title: string;
body: string;
type: string;
created_at: string;
report_id?: number | null;
read_at?: string | null;
id: number;
title: string;
body: string;
type: string;
created_at: string;
report_id?: number | null;
read_at?: string | null;
}
export interface RewardEvent {
id: number;
report_id: number;
points: number;
reason: string;
created_at: string;
id: number;
report_id: number;
points: number;
reason: string;
created_at: string;
}
export interface ModerationFlag {
id: number;
report_id: number;
message_id?: number | null;
reason: string;
details?: string;
status: FlagStatus;
content_type: FlagContentType;
created_by_user_id: number;
created_by_email: string;
created_at: string;
resolved_by_user_id?: number | null;
resolved_by_email?: string | null;
resolution_note?: string | null;
resolved_at?: string | null;
id: number;
report_id: number;
message_id?: number | null;
reason: string;
details?: string;
status: FlagStatus;
content_type: FlagContentType;
created_by_user_id: number;
created_by_email: string;
created_at: string;
resolved_by_user_id?: number | null;
resolved_by_email?: string | null;
resolution_note?: string | null;
resolved_at?: string | null;
}
/**
* REQUEST BODIES
*/
export interface RegisterCitizenRequest {
first_name: string;
last_name: string;
email: string;
password: string;
fiscal_code: string;
phone?: string;
birth_date?: string;
birth_place?: string;
}
export interface PasswordLoginRequest {
email: string;
password: string;
}
export interface ChangePasswordRequest {
current_password: string;
new_password: string;
first_name: string;
last_name: string;
email: string;
fiscal_code: string;
phone?: string;
birth_date?: string;
birth_place?: string;
}
export interface UpdateProfileRequest {
first_name?: string;
last_name?: string;
phone?: string;
first_name?: string;
last_name?: string;
phone?: string;
}
export interface EmailRequest {
email: string;
email: string;
}
export interface VerifyOtpRequest {
email: string;
code: string;
email: string;
code: string;
}
export interface CreateReportRequest {
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
media?: string[]; // Array of URLs if already uploaded
category_id: number;
latitude: number;
longitude: number;
address: string;
description: string;
media?: string[];
}
export interface UpdateStatusRequest {
status: ReportStatus;
note?: string;
status: ReportStatus;
note?: string;
}
export interface AssignTeamRequest {
team_id: number;
team_id: number;
}
export interface MessageRequest {
body: string;
body: string;
}
export interface FeedbackRequest {
rating: number; // 1 to 5
comment?: string;
rating: number;
comment?: string;
}
export interface FlagRequest {
reason: string;
details?: string;
reason: string;
details?: string;
}
export interface UpdateModerationRequest {
status: 'RESOLVED' | 'DISMISSED';
reject_report?: boolean;
resolution_note?: string;
status: 'RESOLVED' | 'DISMISSED';
reject_report?: boolean;
resolution_note?: string;
}
export interface CreateAreaRequest {
name: string;
boundary_geojson: GeoJsonObject;
description?: string;
name: string;
boundary_geojson: GeoJsonObject;
description?: string;
}
export interface UpdateAreaRequest {
name?: string;
boundary_geojson?: GeoJsonObject;
description?: string;
active?: boolean;
}
export interface CreateCategoryRequest {
name: string;
description?: string;
name: string;
description?: string;
}
export interface UpdateCategoryRequest {
name?: string;
description?: string;
active?: boolean;
}
export interface CreateTeamRequest {
team_category_id: number;
name: string;
description?: string;
area_id?: number;
team_category_id: number;
name: string;
description?: string;
area_id?: number;
}
export interface UpdateTeamRequest {
team_category_id?: number;
name?: string;
description?: string;
area_id?: number | null;
active?: boolean;
}
export interface UpdateUserBanRequest {
banned: boolean;
banned: boolean;
}
export interface UpdateUserRolesRequest {
roles: string[];
roles: string[];
}
/**
* RESPONSE BODIES
*/
export interface CurrentUserResponse {
ok: boolean;
user: CurrentUser;
ok: boolean;
user: CurrentUser;
}
export interface RegisterCitizenResponse {
ok: boolean;
user_id: number;
ok: boolean;
user_id: number;
}
export interface OtpRequestResponse {
ok: boolean;
delivery: string;
expires_in_minutes: number;
ok: boolean;
delivery: string;
expires_in_minutes: number;
}
export interface CreateReportResponse {
ok: boolean;
report_id: number;
area_id?: number;
ok: boolean;
report_id: number;
area_id?: number;
}
export interface ReportListResponse {
ok: boolean;
reports: Report[];
ok: boolean;
reports: Report[];
}
export interface PagedReportListResponse {
ok: boolean;
page: number;
per_page: number;
total?: number;
reports: Report[];
ok: boolean;
page: number;
per_page: number;
total?: number;
reports: Report[];
}
export interface OpenDataReportListResponse {
ok: boolean;
page: number;
per_page: number;
reports: OpenDataReport[];
ok: boolean;
page: number;
per_page: number;
reports: OpenDataReport[];
}
export interface ReportDetailResponse {
ok: boolean;
report: Report;
history: StatusHistoryItem[];
media: Media[];
ok: boolean;
report: Report;
history: StatusHistoryItem[];
media: Media[];
}
export interface InterventionSummaryResponse {
ok: boolean;
summary: Report;
media: Media[];
latest_messages: Message[];
ok: boolean;
summary: Report;
media: Media[];
latest_messages: Message[];
}
export interface AssignmentLinkResponse {
ok: boolean;
url: string;
expires_at: string;
}
export interface MediaUploadResponse {
ok: boolean;
media: Media[];
ok: boolean;
media: Media[];
}
export interface MessageListResponse {
ok: boolean;
messages: Message[];
ok: boolean;
messages: Message[];
}
export interface FlagResponse {
ok: boolean;
flag_id: number;
ok: boolean;
flag_id: number;
}
export interface RewardsResponse {
ok: boolean;
points: number;
page: number;
per_page: number;
reward_events: RewardEvent[];
ok: boolean;
points: number;
page: number;
per_page: number;
reward_events: RewardEvent[];
}
export interface NotificationListResponse {
ok: boolean;
page: number;
per_page: number;
notifications: Notification[];
ok: boolean;
page: number;
per_page: number;
notifications: Notification[];
}
export interface AreaListResponse {
ok: boolean;
areas: Area[];
ok: boolean;
areas: Area[];
}
export interface CategoryListResponse {
ok: boolean;
categories: Category[];
ok: boolean;
categories: Category[];
}
export interface TeamListResponse {
ok: boolean;
teams: Team[];
ok: boolean;
teams: Team[];
}
export interface UserListResponse {
ok: boolean;
users: AdminUser[];
ok: boolean;
users: AdminUser[];
}
export interface ModerationListResponse {
ok: boolean;
page: number;
per_page: number;
total?: number;
flags: ModerationFlag[];
ok: boolean;
page: number;
per_page: number;
total?: number;
flags: ModerationFlag[];
}
export interface OverviewStatsResponse {
ok: boolean;
reports_by_status: { status: ReportStatus; total: number }[];
reports_by_area: { area: string; total: number }[];
avg_resolution_hours: { value: number }[];
reports_by_category: { category: string; total: number }[];
reports_by_team: { team: string; total: number }[];
monthly_reports: { month: string; total: number }[];
avg_resolution_hours_by_category: { category: string; value: number }[];
avg_resolution_hours_by_area: { area: string; value: number }[];
total_users?: number;
open_reports?: number;
ok: boolean;
reports_by_status: { status: ReportStatus; total: number }[];
reports_by_area: { area: string; total: number }[];
avg_resolution_hours: { value: number }[];
reports_by_category: { category: string; total: number }[];
reports_by_team: { team: string; total: number }[];
monthly_reports: { month: string; total: number }[];
avg_resolution_hours_by_category: { category: string; value: number }[];
avg_resolution_hours_by_area: { area: string; value: number }[];
total_users?: number;
open_reports?: number;
}
app/utils/roles.ts
+74
View File
@@ -0,0 +1,74 @@
export const ROLES = {
CITIZEN: 'CITIZEN',
OPERATOR: 'OPERATOR',
ADMIN: 'ADMIN'
} as const
export type Role = keyof typeof ROLES
export type NegatedRole = `!${Role}`
export type MetaRoleRequirement = Role | NegatedRole | Array<Role | NegatedRole>
export const ROLE_LEVELS: Record<string, number> = {
[ROLES.CITIZEN]: 1,
[ROLES.OPERATOR]: 2,
[ROLES.ADMIN]: 3
}
export function normalizeRole(role?: string | null): string {
return role?.trim().toUpperCase() ?? ''
}
export function isRole(userRole: string | undefined | null, targetRole: string): boolean {
return normalizeRole(userRole) === normalizeRole(targetRole)
}
export function hasMinimumRole(userRole: string | undefined | null, requiredRole: string): boolean {
const userLvl = ROLE_LEVELS[normalizeRole(userRole)] || 0
const reqLvl = ROLE_LEVELS[normalizeRole(requiredRole)] || 0
return userLvl >= reqLvl
}
export function isAdmin(userRole?: string | null): boolean {
return isRole(userRole, ROLES.ADMIN)
}
export function isOperator(userRole?: string | null): boolean {
return isRole(userRole, ROLES.OPERATOR)
}
export function isCitizen(userRole?: string | null): boolean {
return isRole(userRole, ROLES.CITIZEN)
}
export function canAccess(userRole: string | undefined | null, requiredRole: string): boolean {
return hasMinimumRole(userRole, requiredRole)
}
export function checkRoleAccess(userRole: string | undefined | null, requirement: MetaRoleRequirement | undefined): boolean {
if (!requirement) return true
const normalizedUserRole = normalizeRole(userRole)
if (!normalizedUserRole) return false
const requirements = Array.isArray(requirement) ? requirement : [requirement]
for (const req of requirements) {
const isNegated = req.startsWith('!')
const rawTarget = isNegated ? req.substring(1) : req
const targetRole = normalizeRole(rawTarget)
if (isNegated) {
console.log("negated", normalizedUserRole, targetRole)
if (normalizedUserRole === targetRole) {
return false
}
} else {
if (!hasMinimumRole(normalizedUserRole, targetRole)) {
return false
}
}
}
return true
}
public/entraconcie.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

public/icon.svg
+4 -1
View File
File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

public/logo-dark.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1940.28 1402.502">
<path d="M1750.752 723.02a183 183 0 0 0-.378-15.172c-12.607-201.546-306.563-352.873-691.458-375.02L1104.93 0c-32.106 110.228-64.212 220.499-96.318 330.727-52.026-1.47-105.564-.546-160.069 2.858C365.313 363.842-14.414 580.516.42 817.489c14.877 236.972 418.642 404.52 901.83 374.263 115.02-7.186 224.197-24.962 323.584-51.059l255.63 261.809-207.975-275.172c271.389-81.148 459.572-225.752 476.087-383.425 63.582-4.329 127.122-8.657 190.704-12.985-63.162-2.648-126.366-5.253-189.528-7.9M1022.27 597.998c256.178 5.84 455.202 49.924 515.884 116.153-176.29-7.312-352.621-14.666-528.91-22.02 4.328-31.392 8.656-62.742 13.027-94.133ZM39.713 849.637C34.628 768.32 215.876 686.753 480.08 639.182c-69.381 32.568-116.742 97.747-116.742 172.801 0 100.605 85.056 183.392 194.234 193.814-296.562-8.867-512.438-69.381-517.86-156.16m771.22 151.664c-73.878 4.623-145.444 6.303-213.27 5.379 16.599-.84 32.652-3.74 47.906-8.531-16.64 4.664-34.207 7.564-52.32 8.447-2.898.168-5.882.252-8.824.294a165 165 0 0 1-13.742-.714c-99.765-8.573-178.055-92.285-178.055-194.277 0-78.71 46.605-146.536 113.8-177.34 22.778-10.464 47.95-16.641 74.467-17.523h.294q3.214-.127 6.43-.127c9.287 0 18.364.63 27.315 1.891.547-.084 1.093-.126 1.64-.21a77 77 0 0 1-2.396-1.554l6.009 1.134c53.244-6.514 108.758-11.64 165.826-15.213 49.504-3.11 97.915-4.874 144.898-5.421-7.229 24.879-14.499 49.715-21.727 74.592L620.187 618.17a106 106 0 0 0-3.614.42c.252.21.504.378.756.547h.043c11.052 1.722 21.81 4.328 32.19 7.858.21.042.42.084.588.168 28.66 9.666 54.379 25.845 75.307 46.773 35.342 35.3 57.194 84.047 57.194 137.963 0 2.27-.042 4.497-.126 6.724-2.774 82.493-56.816 152.042-131.324 177.72-.841.293-1.724.587-2.606.881 10.338-2.941 20.298-6.64 29.837-10.926 90.561-37.023 159.648-102.664 250-150.193 44.923 46.016 89.846 91.99 134.77 138.006-78.669 12.313-163.557 21.642-252.269 27.19m335.686-41.814-125.483-165.994c178.727-12.145 357.412-24.332 536.139-36.519 1.513 77.408-165.195 154.774-410.656 202.513"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

public/logo-light.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1940.28 1402.502">
<path d="M1750.752 723.02a183 183 0 0 0-.378-15.172c-12.607-201.546-306.563-352.873-691.458-375.02L1104.93 0c-32.106 110.228-64.212 220.499-96.318 330.727-52.026-1.47-105.564-.546-160.069 2.858C365.313 363.842-14.414 580.516.42 817.489c14.877 236.972 418.642 404.52 901.83 374.263 115.02-7.186 224.197-24.962 323.584-51.059l255.63 261.809-207.975-275.172c271.389-81.148 459.572-225.752 476.087-383.425 63.582-4.329 127.122-8.657 190.704-12.985-63.162-2.648-126.366-5.253-189.528-7.9M1022.27 597.998c256.178 5.84 455.202 49.924 515.884 116.153-176.29-7.312-352.621-14.666-528.91-22.02 4.328-31.392 8.656-62.742 13.027-94.133ZM39.713 849.637C34.628 768.32 215.876 686.753 480.08 639.182c-69.381 32.568-116.742 97.747-116.742 172.801 0 100.605 85.056 183.392 194.234 193.814-296.562-8.867-512.438-69.381-517.86-156.16m771.22 151.664c-73.878 4.623-145.444 6.303-213.27 5.379 16.599-.84 32.652-3.74 47.906-8.531-16.64 4.664-34.207 7.564-52.32 8.447-2.898.168-5.882.252-8.824.294a165 165 0 0 1-13.742-.714c-99.765-8.573-178.055-92.285-178.055-194.277 0-78.71 46.605-146.536 113.8-177.34 22.778-10.464 47.95-16.641 74.467-17.523h.294q3.214-.127 6.43-.127c9.287 0 18.364.63 27.315 1.891.547-.084 1.093-.126 1.64-.21a77 77 0 0 1-2.396-1.554l6.009 1.134c53.244-6.514 108.758-11.64 165.826-15.213 49.504-3.11 97.915-4.874 144.898-5.421-7.229 24.879-14.499 49.715-21.727 74.592L620.187 618.17a106 106 0 0 0-3.614.42c.252.21.504.378.756.547h.043c11.052 1.722 21.81 4.328 32.19 7.858.21.042.42.084.588.168 28.66 9.666 54.379 25.845 75.307 46.773 35.342 35.3 57.194 84.047 57.194 137.963 0 2.27-.042 4.497-.126 6.724-2.774 82.493-56.816 152.042-131.324 177.72-.841.293-1.724.587-2.606.881 10.338-2.941 20.298-6.64 29.837-10.926 90.561-37.023 159.648-102.664 250-150.193 44.923 46.016 89.846 91.99 134.77 138.006-78.669 12.313-163.557 21.642-252.269 27.19m335.686-41.814-125.483-165.994c178.727-12.145 357.412-24.332 536.139-36.519 1.513 77.408-165.195 154.774-410.656 202.513"
style="fill:#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

public/michelangeloparisi.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

public/paologabrieleschiraldi.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

public/renatoloiacono.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

public/sprites.svg
+1 -1
View File
File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 90 KiB

yarn.lock
+203 -1026
View File
File diff suppressed because it is too large Load Diff