Compare commits
31
Commits
f9fd4ccb25
...
master
-
reloia
2026-06-19 23:41:10 +02:00 -
2026-06-19 23:38:27 +02:00 -
2026-06-19 21:54:05 +02:00 -
2026-06-19 16:06:43 +02:00 -
2026-06-19 15:52:36 +02:00 -
Mikangeo
2026-06-19 08:04:39 +02:00 -
2026-06-18 22:32:00 +02:00 -
2026-06-18 22:18:00 +02:00 -
2026-06-18 22:13:00 +02:00 -
2026-06-19 00:33:01 +02:00 -
2026-06-18 21:04:33 +02:00 -
2026-06-18 20:58:17 +02:00 -
2026-06-18 20:58:11 +02:00 -
gabdevele
2026-06-18 20:41:39 +02:00 -
2026-06-18 20:21:06 +02:00 -
2026-06-18 20:20:51 +02:00 -
2026-06-18 18:23:57 +02:00 -
2026-06-18 18:20:10 +02:00 -
2026-06-18 18:08:22 +02:00 -
gabdevele
2026-06-18 18:05:49 +02:00 -
gabdevele
2026-06-18 17:52:57 +02:00 -
gabdevele
2026-06-18 14:32:27 +02:00 -
gabdevele
2026-06-18 14:25:52 +02:00 -
gabdevele
2026-06-18 14:03:16 +02:00 -
gabdevele
2026-06-18 13:51:54 +02:00 -
gabdevele
2026-06-18 13:29:41 +02:00 -
gabdevele
2026-06-18 12:48:26 +02:00 -
gabdevele
2026-06-18 12:37:33 +02:00 -
gabdevele
2026-06-18 12:16:50 +02:00 -
gabdevele
2026-06-18 11:45:05 +02:00 -
2026-06-18 02:46:49 +02:00
@@ -1,75 +1,125 @@
|
||||
# Nuxt Minimal Starter
|
||||
<div align="center">
|
||||
<img src="https://git.reloia.uk/SnitchItaly/frontend/raw/branch/master/public/icon-512.webp" width="128" height="128" alt="Logo Visione">
|
||||
<h1>Visione</h1>
|
||||
<p><b>Un'occhio per la sicurezza del cittadino.</b></p>
|
||||
</div>
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
**Visione** è una piattaforma progettata per gestire le segnalazioni dei cittadini, implementando un flusso operativo
|
||||
sicuro, trasparente e istituzionalmente conforme.
|
||||
|
||||
## Setup
|
||||
## Punti di Forza e Funzionalità Principali
|
||||
|
||||
Make sure to install dependencies:
|
||||
- **Conformità Istituzionale e UX/UI Standardizzata:** Il frontend è sviluppato utilizzando **Bootstrap Italia** (creato
|
||||
da Designers Italia). Questa scelta assicura un'identità visiva coerente con i servizi pubblici italiani, garantendo
|
||||
uniformità, riconoscibilità e accessibilità.
|
||||
- **Trasparenza e Open Data:** Il sistema espone un endpoint pubblico Open Data con dataset anonimizzati relativi alle
|
||||
segnalazioni chiuse o risolte, favorendo la trasparenza amministrativa.
|
||||
- **Automazione e Smistamento Intelligente:** Il calcolo automatico della "Zona" di competenza tramite le coordinate
|
||||
geografiche elimina i colli di bottiglia durante il triage iniziale, instradando immediatamente la segnalazione
|
||||
all'operatore corretto.
|
||||
- **Sicurezza e Onboarding Smart:** L'autenticazione è gestita tramite **OTP (One-Time Password)** e integrazione con *
|
||||
*CIE (Carta d'Identità Elettronica)**, riducendo l'uso di password statiche e garantendo identità verificate.
|
||||
- **Infrastruttura DevOps e CI/CD:** Sfruttiamo un'istanza self-hosted di **Gitea** per il versionamento del codice e un
|
||||
flusso di deployment automatizzato basato su webhook con **Dokploy**, assicurando un rilascio continuo e stabile.
|
||||
- **Ottimizzazione SEO e Reperibilità:** Configurazione avanzata per sitemap e `robots.txt` (via `@nuxtjs/robots` e
|
||||
`@nuxtjs/sitemap`) per esplicitare chiaramente le pagine pubbliche e separarle dalle aree private.
|
||||
|
||||
## Tecnologie Utilizzate
|
||||
|
||||
Il progetto è costruito su uno stack moderno orientato a performance, accessibilità e manutenibilità:
|
||||
|
||||
- **Framework Core:** [Nuxt 4](https://nuxt.com/) (Vue 3) con rendering SSR attivato.
|
||||
- **UI / Styling:** [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) per componenti accessibili e conformi
|
||||
agli standard AGID.
|
||||
- **Mappe e Georeferenziazione:** [Leaflet](https://leafletjs.com/) interfacciato con Nominatim/OpenStreetMap per il
|
||||
suggerimento e la validazione degli indirizzi.
|
||||
- **PWA e Ottimizzazione:** Modulo `@vite-pwa/nuxt` per Progressive Web App (manifest auto-generato) e moduli ufficiali
|
||||
Nuxt per icone, font (Google Fonts: Lora, Roboto Mono, Titillium Web) ed elaborazione immagini.
|
||||
- **Infrastruttura:** Docker, Docker Compose, NodeJS 22.
|
||||
- **Package Manager:** **Yarn**.
|
||||
|
||||
## Limiti e Punti di Attenzione
|
||||
|
||||
L'attuale architettura presenta alcune criticità e aree di miglioramento individuate durante i test:
|
||||
|
||||
1. **Rischio di Abuso e Moderazione:** L'apertura della piattaforma all'invio di messaggi e allegati potrebbe generare
|
||||
un elevato carico di moderazione. In futuro, andranno valutati filtri automatici o code dedicate.
|
||||
2. **Dipendenza da API Cartografiche di Terze Parti:** L'utilizzo di Nominatim/OpenStreetMap per il geocoding esonera
|
||||
dal lock-in di provider commerciali (es. Google Maps), ma introduce dipendenze su disponibilità e policy d'uso di
|
||||
servizi esterni.
|
||||
3. **Barriere all'Ingresso:** I flussi OTP e CIE, seppur estremamente sicuri, possono rappresentare un "attrito" (
|
||||
digital divide) per le fasce di utenza più anziane o meno avvezze agli strumenti digitali.
|
||||
|
||||
---
|
||||
|
||||
## Come utilizzare il progetto (Sviluppo)
|
||||
|
||||
### Requisiti
|
||||
|
||||
- Node.js (v22 o superiore consigliato)
|
||||
- **Yarn** (utilizza esclusivamente `yarn`, non `npm`)
|
||||
|
||||
### 1. Installazione Dipendenze
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
### 2. Configurazione Variabili d'Ambiente (.env)
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
Copia il file di esempio per creare la tua configurazione locale:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
## Production
|
||||
Il file `.env` richiede le seguenti chiavi:
|
||||
|
||||
Build the application for production:
|
||||
- `NUXT_PUBLIC_URL`: URL pubblico dell'applicativo frontend (es. `http://localhost:3000`).
|
||||
- `NUXT_PUBLIC_API`: URL base per il backend API (es. `http://localhost:5555`).
|
||||
|
||||
*(Nota: il proxy integrato in `nuxt.config.ts` inoltrerà già le richieste di `/api/v1` al target di staging
|
||||
configurato `https://api.visionebari.it` in ambiente di sviluppo).*
|
||||
|
||||
### 3. Avvio del Server di Sviluppo
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
yarn run dev
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
Il server sarà accessibile all'indirizzo [http://localhost:3000](http://localhost:3000).
|
||||
|
||||
---
|
||||
|
||||
## Distribuzione e Produzione (Docker)
|
||||
|
||||
Il progetto è ottimizzato per essere deployato tramite container Docker, sfruttando processi multi-stage per generare
|
||||
un'immagine finale snella e performante basata su `node:22-bookworm`.
|
||||
|
||||
### Build locale e avvio tramite Docker Compose
|
||||
|
||||
Il file `docker-compose.yml` espone il servizio `visione-frontend`.
|
||||
|
||||
1. Assicurati che il file `.env` sia valorizzato correttamente.
|
||||
2. Esegui il build e avvia in background:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
### Dettagli sul Dockerfile
|
||||
|
||||
- **Fase di Build (`AS build`):** Copia `package.json` e `yarn.lock`, esegue `yarn install`, copia i sorgenti ed esegue
|
||||
`yarn run build`. Iniettando gli argomenti di environment per le API.
|
||||
- **Fase di Run (`AS run`):** Esegue `yarn install --production` per alleggerire le dipendenze finali. Trasferisce
|
||||
l'artefatto compilato `.output` e avvia il webserver sulla porta `80` tramite `node /app/server/index.mjs`.
|
||||
|
||||
## Testing e Azioni Migliorative Future
|
||||
|
||||
I test attuali coprono con successo i flussi primari (registrazione, autenticazione, gestione segnalazioni,
|
||||
moderazione).
|
||||
Prossimi step suggeriti:
|
||||
|
||||
- Consolidamento con test end-to-end (E2E) automatici per le rotte critiche (in particolare CIE/OTP).
|
||||
- Verifiche di regressione per gli endpoint Open Data per garantirne l'integrità.
|
||||
- Monitoraggio della qualità del dato geografico (segnalazioni in aree limite).
|
||||
|
||||
+3
-2
@@ -1,14 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
useSeoMeta({
|
||||
title: "Visione - UniBA",
|
||||
ogTitle: "Visione - UniBA",
|
||||
title: "Visione",
|
||||
ogTitle: "Visione",
|
||||
description: "Un'occhio per la sicurezza del cittadino.",
|
||||
ogDescription: "Un'occhio per la sicurezza del cittadino.",
|
||||
ogImage: "/favicon.png"
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<NuxtPwaManifest/>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
|
||||
+252
-24
@@ -1,43 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import MemberDot from "~/components/MemberDot.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="container footer-main-content">
|
||||
<section class="footer-brand-section">
|
||||
<div class="it-brand-wrapper">
|
||||
<a href="#" data-focus-mouse="false" class="d-flex align-items-center">
|
||||
<img alt="Logo Visione" src="/logo-light.svg" style="width: 42px; height: 42px; margin-right: 12px;"/>
|
||||
|
||||
<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 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<h3>Un occhio per la sicurezza di Bari</h3>
|
||||
</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
|
||||
|
||||
<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"
|
||||
:name="member.name"
|
||||
:image="member.image"
|
||||
/>
|
||||
</div>
|
||||
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>
|
||||
@@ -46,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>
|
||||
|
||||
@@ -26,7 +26,7 @@ onUnmounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const { isAuthenticated, user, logout } = useAuth()
|
||||
const { isAuthenticated, user, logout, hasUnreadNotifications } = useAuth()
|
||||
const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
|
||||
|
||||
const navLinks = [
|
||||
@@ -70,10 +70,11 @@ const navLinks = [
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<span class="d-none d-lg-block username">{{ user?.first_name }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
|
||||
@@ -294,4 +295,26 @@ const navLinks = [
|
||||
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;
|
||||
}
|
||||
|
||||
.username {
|
||||
max-width: 8ch;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
modelValue?: File[]
|
||||
maxFiles?: number
|
||||
@@ -72,14 +72,14 @@ const getFileUrl = (file: File) => {
|
||||
<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 }"
|
||||
class="upload-area border-2 border-dashed rounded-3 p-4 text-center cursor-pointer position-relative"
|
||||
@click="!disabled && openFileDialog()"
|
||||
@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" />
|
||||
<BIIcon class="mb-3" color="primary" name="it-upload" size="xl"/>
|
||||
<div class="h6 font-weight-bold">
|
||||
Trascina i file qui o <span class="text-primary text-decoration-underline">clicca per selezionare</span>
|
||||
</div>
|
||||
@@ -90,11 +90,11 @@ const getFileUrl = (file: File) => {
|
||||
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
:multiple="maxFiles > 1"
|
||||
:accept="acceptedTypes"
|
||||
:disabled="disabled"
|
||||
:multiple="maxFiles > 1"
|
||||
class="d-none"
|
||||
type="file"
|
||||
@change="handleFilesSelected(($event.target as HTMLInputElement).files)"
|
||||
/>
|
||||
|
||||
@@ -106,26 +106,27 @@ const getFileUrl = (file: File) => {
|
||||
<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" />
|
||||
<img v-if="file.type.startsWith('image/')" :alt="file.name" :src="getFileUrl(file)"
|
||||
class="object-fit-cover"/>
|
||||
<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" />
|
||||
<BIIcon color="secondary" name="it-file" size="xl"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
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"
|
||||
type="button"
|
||||
@click.stop="removeFile(idx)"
|
||||
>
|
||||
<BIIcon name="it-close" size="sm" color="white" />
|
||||
<BIIcon color="white" name="it-close" size="sm"/>
|
||||
</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 :title="file.name" class="small text-truncate fw-semibold">{{ 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">
|
||||
@@ -143,27 +144,27 @@ const getFileUrl = (file: File) => {
|
||||
.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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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,55 +23,13 @@ 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="d-flex align-items-stretch gap-2">
|
||||
<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-square flex-shrink-0"
|
||||
title="Allega file"
|
||||
@click="fileInputRef?.click()"
|
||||
:disabled="isSubmitting || files.length >= 5"
|
||||
>
|
||||
<BIIcon name="it-clip" size="sm" />
|
||||
</button>
|
||||
|
||||
<textarea
|
||||
v-model="message"
|
||||
class="form-control chat-textarea m-0"
|
||||
@@ -84,16 +41,16 @@ const removeFile = (idx: number) => {
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-square flex-shrink-0"
|
||||
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
|
||||
:disabled="isSubmitting || message.trim() === ''"
|
||||
title="Invia"
|
||||
>
|
||||
<span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<BIIcon v-else name="it-arrow-right" size="sm" color="white" />
|
||||
<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,31 +62,6 @@ const removeFile = (idx: number) => {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.message-files {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-close-sm {
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
resize: none !important;
|
||||
height: 48px;
|
||||
|
||||
@@ -80,11 +80,11 @@ const reportHref = (report: Report) => `${props.detailBasePath}/${report.id}`
|
||||
<NuxtLink
|
||||
v-else
|
||||
:to="reportHref(report)"
|
||||
class="btn btn-outline-primary btn-xs btn-icon d-inline-flex align-items-center justify-content-center"
|
||||
class="btn btn-outline-primary btn-xs"
|
||||
:aria-label="actionLabel"
|
||||
:title="actionLabel"
|
||||
>
|
||||
<BIIcon name="it-arrow-right" size="xs" />
|
||||
{{ actionLabel }}
|
||||
</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -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' }
|
||||
|
||||
@@ -2,97 +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="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 card-bg">
|
||||
<div class="card-body">
|
||||
<h2 class="text-primary">
|
||||
{{ statsRes.reports_by_status?.reduce((sum, item) => sum + Number(item.total), 0) || 0 }}
|
||||
</h2>
|
||||
<p class="card-text">Totale Segnalazioni</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h5 card-title mb-0">Gestione sistema</h2>
|
||||
</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-danger">
|
||||
{{ statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
|
||||
</h2>
|
||||
<p class="card-text">Aperte (Da Gestire)</p>
|
||||
</div>
|
||||
</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.reports_by_status?.find(s => s.status === 'ASSIGNED')?.total ?? 0 }}
|
||||
</h2>
|
||||
<p class="card-text">In Carico (Assegnate)</p>
|
||||
</div>
|
||||
</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-success">
|
||||
{{ statsRes.reports_by_status?.find(s => s.status === 'CLOSED')?.total ?? 0 }}
|
||||
</h2>
|
||||
<p class="card-text">Risolte (Chiuse)</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
|
||||
<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 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>
|
||||
|
||||
@@ -1,22 +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 processingIds = ref<number[]>([])
|
||||
|
||||
const handleTakeReport = async (id: number) => {
|
||||
processingIds.value.push(id)
|
||||
try {
|
||||
const res = await takeReport(id)
|
||||
if (res.ok) {
|
||||
await Promise.all([refreshOpen(), refreshAssigned()])
|
||||
}
|
||||
} finally {
|
||||
processingIds.value = processingIds.value.filter(pid => pid !== id)
|
||||
}
|
||||
}
|
||||
const { data: openReportsRes } = useAsyncData('open-reports', () => getOpenReports({ per_page: 5 }))
|
||||
const { data: assignedReportsRes } = useAsyncData('assigned-reports', () => getAssignedReports({ per_page: 5 }))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -25,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.
|
||||
@@ -34,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>
|
||||
|
||||
@@ -29,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
|
||||
@@ -39,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
|
||||
@@ -49,7 +70,8 @@ export const useAuth = () => {
|
||||
const res = await fetchCurrentUser()
|
||||
if (res.ok) {
|
||||
user.value = res.user
|
||||
const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
|
||||
await nuxtApp.runWithContext(() => refreshUnreadNotifications())
|
||||
const path = currentPath ?? nuxtApp.$router.currentRoute.value.path
|
||||
|
||||
if (redirectOnSuccess && path.startsWith('/auth')) {
|
||||
await nuxtApp.runWithContext(() => navigateTo('/dashboard'))
|
||||
@@ -79,6 +101,7 @@ export const useAuth = () => {
|
||||
token.value = null
|
||||
tokenState.value = null
|
||||
user.value = null
|
||||
unreadNotifications.value = 0
|
||||
nuxtApp.runWithContext(() => navigateTo('/auth/login'))
|
||||
}
|
||||
|
||||
@@ -121,6 +144,9 @@ export const useAuth = () => {
|
||||
tokenState,
|
||||
isSyncingUser,
|
||||
isAuthenticated,
|
||||
unreadNotifications,
|
||||
hasUnreadNotifications,
|
||||
refreshUnreadNotifications,
|
||||
handleLoginSuccess,
|
||||
syncUser,
|
||||
logout,
|
||||
|
||||
@@ -9,7 +9,7 @@ export function useMembers() {
|
||||
const members: Member[] = [
|
||||
{ name: "Renato Loiacono", image: "/renatoloiacono.webp" },
|
||||
{ name: "Michelangelo Parisi", image: "/michelangeloparisi.webp" },
|
||||
{ name: "Gabriele Schiraldi", image: "/gabrielepaoloschiraldi.webp" },
|
||||
{ name: "Paolo Gabriele Schiraldi", image: "/paologabrieleschiraldi.webp" },
|
||||
];
|
||||
|
||||
const sortedMembers = computed(() => {
|
||||
|
||||
@@ -39,6 +39,9 @@ export const useOperator = () => {
|
||||
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,
|
||||
@@ -50,5 +53,6 @@ export const useOperator = () => {
|
||||
getInterventionSummary,
|
||||
createInterventionLink,
|
||||
revokeInterventionLink,
|
||||
getPublicIntervention,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,21 @@
|
||||
import type {
|
||||
CategoryListResponse,
|
||||
CreateReportRequest,
|
||||
CreateReportResponse, FeedbackRequest, FlagRequest, FlagResponse,
|
||||
CreateReportResponse,
|
||||
FeedbackRequest,
|
||||
FlagRequest,
|
||||
FlagResponse,
|
||||
MediaUploadResponse,
|
||||
MessageListResponse, MessageRequest, OkResponse,
|
||||
MessageListResponse,
|
||||
MessageRequest,
|
||||
OkResponse,
|
||||
ReportDetailResponse,
|
||||
ReportListResponse
|
||||
ReportListResponse,
|
||||
TeamListResponse
|
||||
} 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 = () =>
|
||||
@@ -39,6 +45,9 @@ export const useReports = () => {
|
||||
const flagMessage = (reportId: number, messageId: number, body: FlagRequest) =>
|
||||
useApiFetch<FlagResponse>(`/api/v1/reports/${reportId}/messages/${messageId}/flags`, { method: 'POST', body })
|
||||
|
||||
const getTeamSuggestions = (id: number) =>
|
||||
useApiFetch<TeamListResponse>(`/api/v1/reports/${id}/team-suggestions`, { method: 'GET' })
|
||||
|
||||
return {
|
||||
getReports,
|
||||
getCategories,
|
||||
@@ -50,5 +59,6 @@ export const useReports = () => {
|
||||
addFeedback,
|
||||
flagReport,
|
||||
flagMessage,
|
||||
getTeamSuggestions,
|
||||
}
|
||||
}
|
||||
@@ -466,8 +466,6 @@ const handleDeleteArea = async () => {
|
||||
<button type="button" class="btn-close" @click="closeCreateModal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<!-- ALERT ERRORE DEL BACKEND -->
|
||||
<div v-if="modalError" class="alert alert-danger mb-4 d-flex align-items-center" role="alert">
|
||||
<strong>Errore:</strong> {{ modalError }}
|
||||
</div>
|
||||
|
||||
@@ -60,6 +60,7 @@ const handleResolve = async () => {
|
||||
resolution_note: resolveModal.note || undefined
|
||||
})
|
||||
|
||||
resolveModal.pending = false
|
||||
await refresh()
|
||||
closeResolveModal()
|
||||
} catch (err) {
|
||||
@@ -90,6 +91,7 @@ const handleDismiss = async () => {
|
||||
try {
|
||||
await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
|
||||
|
||||
dismissModal.pending = false
|
||||
await refresh()
|
||||
closeDismissModal()
|
||||
} catch (err) {
|
||||
@@ -106,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>
|
||||
@@ -153,7 +168,7 @@ const formatDate = (dateStr: string) => {
|
||||
'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>
|
||||
@@ -166,7 +181,7 @@ const formatDate = (dateStr: string) => {
|
||||
</p>
|
||||
|
||||
<div class="mt-info">
|
||||
<span class="badge bg-info me-2">{{ flag.content_type }}</span>
|
||||
<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">
|
||||
@@ -190,11 +205,11 @@ 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="openResolveModal(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="openResolveModal(flag.id, false)">
|
||||
<BIIcon name="it-check" size="xs" /> Risolvi (Solo Avviso)
|
||||
<BIIcon name="it-check" size="xs" /> {{ canRejectReport(flag) ? 'Risolvi (Solo Avviso)' : 'Risolvi senza rigetto' }}
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" @click="openDismissModal(flag.id)">
|
||||
<BIIcon name="it-close" size="xs" /> Ignora Flag
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
<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 currentPage = ref(1)
|
||||
const itemsPerPage = ref(12)
|
||||
|
||||
watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
|
||||
const totalPages = computed(() => Math.ceil(filteredReports.value.length / itemsPerPage.value))
|
||||
|
||||
const paginatedReports = computed(() => {
|
||||
const sorted = [...filteredReports.value].sort(
|
||||
(a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime()
|
||||
)
|
||||
const start = (currentPage.value - 1) * itemsPerPage.value
|
||||
const end = start + itemsPerPage.value
|
||||
return sorted.slice(start, end)
|
||||
})
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
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 trovati</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="filteredReports.length === 0" class="alert alert-info">
|
||||
Nessuna segnalazione trovata con filtri correnti.
|
||||
</div>
|
||||
|
||||
<div v-else class="card card-bg border-0 shadow-sm mb-5">
|
||||
<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 paginatedReports" :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 class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1">
|
||||
<span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
|
||||
|
||||
<Pagination
|
||||
:current-page="currentPage"
|
||||
:per-page="itemsPerPage"
|
||||
:total-items="filteredReports.length"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -16,6 +16,21 @@ const state = computed(() => {
|
||||
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...')
|
||||
@@ -35,10 +50,35 @@ const scheduleNextPoll = () => {
|
||||
pollTimer = setTimeout(checkSession, 2000)
|
||||
}
|
||||
|
||||
const checkSession = async () => {
|
||||
if (!state.value) {
|
||||
const redirectToLoginError = async (code: string, fallbackMessage: string) => {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = 'Sessione CIE non valida: parametro state mancante.'
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
@@ -54,25 +94,19 @@ const checkSession = async () => {
|
||||
}
|
||||
|
||||
if (['failed', 'expired', 'cancelled', 'error'].includes(res.status)) {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = 'Autenticazione CIE non completata. Riprova dal login.'
|
||||
await redirectToLoginError('failed', 'Autenticazione CIE non completata. Riprova dal login.')
|
||||
return
|
||||
}
|
||||
|
||||
if (attempts >= maxAttempts) {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = 'Tempo di attesa scaduto durante la verifica CIE. Riprova.'
|
||||
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) {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = err.data?.message || 'Errore durante la verifica della sessione CIE.'
|
||||
await redirectToLoginError('verification_error', err.data?.message || 'Errore durante la verifica della sessione CIE.')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ definePageMeta({
|
||||
useHead({ title: 'Accedi - Visione' })
|
||||
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const route = useRoute()
|
||||
const { requestOtp, verifyOtp, handleLoginSuccess, startCieLogin } = useAuth()
|
||||
|
||||
const otpStep = ref<1 | 2>(1)
|
||||
@@ -20,6 +21,22 @@ const otpCode = ref('')
|
||||
|
||||
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
|
||||
errorMessage.value = ''
|
||||
@@ -60,6 +77,10 @@ const handleCieLogin = async () => {
|
||||
isCieLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleOTPInput = async (value: string) => {
|
||||
console.log(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -94,6 +115,10 @@ const handleCieLogin = 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>
|
||||
@@ -110,11 +135,22 @@ const handleCieLogin = async () => {
|
||||
</form>
|
||||
|
||||
<form v-else @submit.prevent="handleVerifyOtp">
|
||||
<div class="alert alert-success mb-4 small">
|
||||
<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 type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
|
||||
<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">
|
||||
|
||||
+5
-7
@@ -36,7 +36,7 @@ const getStatusBadge = (status: string) => {
|
||||
<div class="it-hero-text-wrapper p-4">
|
||||
<h1 class="no_toc font-weight-bold">Miglioriamo insieme la città</h1>
|
||||
<p class="d-none d-lg-block mt-3 mb-4 text-muted">
|
||||
Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
|
||||
Il portale ufficiale della città metropolitana di Bari per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
|
||||
e monitora l'intervento in totale trasparenza.
|
||||
</p>
|
||||
<div class="it-btn-container d-flex justify-content-center gap-3">
|
||||
@@ -61,22 +61,21 @@ const getStatusBadge = (status: string) => {
|
||||
<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
|
||||
esatta.</p>
|
||||
<p class="text-muted">Fotografa il problema stradale e condividi la tua posizione.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 mb-4">
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
<p class="text-muted">Il Comune attiva subito le squadre operative per risolvere il problema.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 mb-4">
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
<p class="text-muted">Problema risolto! Guadagna Punti Cittadino e valuta l'intervento.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,7 +126,6 @@ const getStatusBadge = (status: string) => {
|
||||
{{ 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>
|
||||
@@ -161,7 +159,7 @@ const getStatusBadge = (status: string) => {
|
||||
</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"/>
|
||||
|
||||
+102
-64
@@ -1,7 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { useMembers } from "~/composables/useMembers";
|
||||
|
||||
useHead({
|
||||
title: 'Informazioni sul Progetto - Visione',
|
||||
})
|
||||
|
||||
const { sortedMembers } = useMembers();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -11,10 +15,10 @@ useHead({
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="it-hero-text-wrapper p-4">
|
||||
<h1 class="text-white font-weight-bold">Il Progetto Visione</h1>
|
||||
<h1 class="text-white font-weight-bold">Il Progetto "Visione"</h1>
|
||||
<p class="text-white mt-3 lead font-weight-semibold">
|
||||
La piattaforma digitale per la gestione intelligente delle segnalazioni urbane,
|
||||
pensata per avvicinare cittadini e pubblica amministrazione.
|
||||
La piattaforma digitale della Città Metropolitana di Bari per la partecipazione attiva,
|
||||
la trasparenza e la gestione condivisa del territorio.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,16 +29,20 @@ useHead({
|
||||
<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>
|
||||
<h2 class="mb-4 font-weight-bold">Un nuovo dialogo tra Cittadini ed Ente</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).
|
||||
Il progetto nasce dall'esigenza di digitalizzare e ottimizzare i flussi di comunicazione tra la cittadinanza
|
||||
e la Pubblica Amministrazione. Sostituisce i tradizionali canali non tracciabili con un unico punto di
|
||||
accesso telematico.
|
||||
</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.
|
||||
L'adozione della piattaforma persegue un triplice obiettivo strategico: ridurre drasticamente i tempi di
|
||||
risposta
|
||||
dell'Ente nella risoluzione dei disservizi (quali buche stradali, illuminazione guasta o degrado urbano),
|
||||
responsabilizzare la <strong>cittadinanza attiva</strong> tramite meccanismi di partecipazione diretta e
|
||||
fornire
|
||||
agli organi competenti un quadro analitico costantemente aggiornato e geolocalizzato delle criticità del
|
||||
territorio.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,7 +50,7 @@ useHead({
|
||||
|
||||
<div class="bg-light py-5">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5 font-weight-bold">Come funziona il sistema</h2>
|
||||
<h2 class="text-center mb-5 font-weight-bold">Come si articola l'ecosistema digitale</h2>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-md-4 mb-4">
|
||||
@@ -50,14 +58,17 @@ useHead({
|
||||
<div class="card card-bg h-100">
|
||||
<div class="card-body">
|
||||
<BIIcon class="mb-3" color="primary" name="it-user" size="xl"/>
|
||||
<h3 class="card-title h5 font-weight-bold">Cittadini</h3>
|
||||
<h3 class="card-title h5 font-weight-bold">I 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.
|
||||
L'accesso è garantito attraverso l'autocompletamento anagrafico e il supporto ai sistemi di identità
|
||||
digitale
|
||||
nazionali (<strong>CIE</strong>).
|
||||
<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.
|
||||
Il cittadino può compilare form guidati inserendo descrizioni, documentazione fotografica e
|
||||
posizione esatta (GPS).
|
||||
Per incentivare la partecipazione, è previsto il conferimento di "<strong>Punti di Cittadinanza
|
||||
Attiva</strong>"
|
||||
per ogni segnalazione validata e risolta dall'Ente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,13 +80,15 @@ useHead({
|
||||
<div class="card card-bg h-100">
|
||||
<div class="card-body">
|
||||
<BIIcon class="mb-3" color="primary" name="it-tool" size="xl"/>
|
||||
<h3 class="card-title h5 font-weight-bold">Operatori e Squadre</h3>
|
||||
<h3 class="card-title h5 font-weight-bold">Squadre Operative</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.
|
||||
Gli operatori tecnici e logistici dell'Ente prendono in carico la segnalazione per l'immediata
|
||||
istruttoria.
|
||||
<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>.
|
||||
La piattaforma provvede a instradare automaticamente l'intervento alla squadra specializzata di
|
||||
turno in base alla
|
||||
categoria del problema e all'area geografica, garantendo un canale diretto per le comunicazioni di
|
||||
servizio e aggiornando in tempo reale lo stato dei lavori.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,14 +100,15 @@ useHead({
|
||||
<div class="card card-bg h-100">
|
||||
<div class="card-body">
|
||||
<BIIcon class="mb-3" color="primary" name="it-settings" size="xl"/>
|
||||
<h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
|
||||
<h3 class="card-title h5 font-weight-bold">L'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 dispongono del controllo completo sulle operazioni, con privilegi di gestione dei
|
||||
profili e assegnazione delle nomine agli operatori.
|
||||
<br><br>
|
||||
Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e
|
||||
monitorare i tempi medi di risoluzione.
|
||||
L'Ente utilizza funzioni di ricerca avanzata e filtraggio per area geografica per prevenire le
|
||||
duplicazioni
|
||||
e si avvale di strumenti analitici per il monitoraggio continuo dei tempi medi di risoluzione e
|
||||
dell'efficienza dei servizi.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,38 +121,50 @@ useHead({
|
||||
|
||||
<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>
|
||||
<div class="col-12 col-lg-7 mb-4 mb-lg-0">
|
||||
<h2 class="font-weight-bold mb-4">Sicurezza, Centralità e Conformità</h2>
|
||||
<p class="mb-4">Per soddisfare gli elevati standard richiesti da un Ente Pubblico, il sistema adotta precise
|
||||
scelte organizzative e architetturali:</p>
|
||||
<ul class="it-list">
|
||||
<li>
|
||||
<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 class="d-flex align-items-start mb-3">
|
||||
<BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-pa"/>
|
||||
<div>
|
||||
<strong>Modello Centralizzato:</strong> Tutta la gestione logica e la persistenza dei dati risiedono
|
||||
lato server, garantendo tracciabilità totale dei passaggi di stato e convalida rigorosa dei permessi
|
||||
utente.
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<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 class="d-flex align-items-start mb-3">
|
||||
<BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-lock"/>
|
||||
<div>
|
||||
<strong>Sicurezza e Privacy:</strong> Tutte le comunicazioni sono interamente cifrate (tramite rigidi
|
||||
protocolli crittografici) per garantire la massima conformità alle normative sulla protezione dei dati
|
||||
personali.
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<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 class="d-flex align-items-start mb-3">
|
||||
<BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-mail"/>
|
||||
<div>
|
||||
<strong>Accesso Operatori:</strong> Il personale tecnico comunale accede al sistema tramite un approccio
|
||||
sicuro basato su One-Time Password (OTP) inviata sull'e-mail aziendale.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-5 offset-lg-1">
|
||||
<div class="callout callout-highlight callout-warning">
|
||||
|
||||
<div class="col-12 col-lg-4 offset-lg-1">
|
||||
<div class="callout callout-highlight callout-note">
|
||||
<div class="callout-title">
|
||||
<BIIcon name="it-warning-circle"/>
|
||||
Un approccio etico al codice sorgente
|
||||
<BIIcon name="it-info-circle"/>
|
||||
Customer Satisfaction Integrata
|
||||
</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>.
|
||||
La piattaforma non si esaurisce con l'intervento tecnico, ma chiude il ciclo con un modulo dedicato alla
|
||||
<strong>Valutazione della Qualità</strong>.
|
||||
<br><br>
|
||||
Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul
|
||||
codice.
|
||||
A risoluzione avvenuta, il cittadino viene invitato a esprimere un riscontro sulla tempestività e
|
||||
sull'efficacia
|
||||
del lavoro svolto, assicurando all'amministrazione un controllo qualità costante.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,26 +176,34 @@ useHead({
|
||||
<div class="card card-bg border-start border-primary border-5">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-md-8">
|
||||
<h4 class="h5 font-weight-bold text-primary mb-2">Crediti Accademici</h4>
|
||||
<div class="col-12 col-md-6 mb-4 mb-md-0">
|
||||
<h4 class="h5 font-weight-bold text-primary mb-2">Il Team di Sviluppo</h4>
|
||||
<p class="mb-1">
|
||||
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.
|
||||
Questo portale è stato ideato e sviluppato per facilitare il percorso di transizione digitale
|
||||
e modernizzare l'infrastruttura telematica a disposizione della cittadinanza.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 mt-3 mt-md-0 text-md-end">
|
||||
<p class="font-weight-bold mb-1">Sviluppato da:</p>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li>Renato Loiacono</li>
|
||||
<li>Michelangelo Parisi</li>
|
||||
<li>Gabriele Schiraldi</li>
|
||||
</ul>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="d-flex flex-wrap justify-content-md-end justify-content-center gap-4">
|
||||
<div
|
||||
v-for="member in sortedMembers"
|
||||
:key="member.name"
|
||||
class="d-flex flex-column align-items-center text-center"
|
||||
style="max-width: 90px;"
|
||||
>
|
||||
<img
|
||||
:alt="member.name"
|
||||
:src="member.image"
|
||||
class="rounded-circle mb-2 shadow-sm"
|
||||
style="width: 72px; height: 72px; object-fit: cover; border: 2px solid #0066cc;"
|
||||
>
|
||||
<span class="font-weight-bold small" style="line-height: 1.2;">{{ member.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,4 +216,8 @@ useHead({
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
+53
-61
@@ -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)
|
||||
}
|
||||
@@ -111,65 +111,62 @@ const getNotificationColor = (type: string): string => {
|
||||
<div class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
<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"
|
||||
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)"
|
||||
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 p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
<div
|
||||
class="rounded-circle d-flex align-items-center justify-content-center notification-icon"
|
||||
:class="`bg-${getNotificationColor(notification.type)}`"
|
||||
>
|
||||
<BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-items-start justify-content-between">
|
||||
<div class="d-flex flex-wrap justify-content-between gap-2">
|
||||
<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>
|
||||
<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 rounded-pill">Nuovo</span>
|
||||
<span class="badge bg-primary">Nuovo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<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-sm btn-outline-secondary"
|
||||
class="btn btn-outline-secondary btn-sm"
|
||||
@click.stop="handleMarkAsRead(notification.id)"
|
||||
>
|
||||
Segna come letta
|
||||
@@ -177,7 +174,8 @@ const getNotificationColor = (type: string): string => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
@@ -185,7 +183,7 @@ const getNotificationColor = (type: string): string => {
|
||||
:current-page="page"
|
||||
:per-page="perPage"
|
||||
:total-items="totalNotifications"
|
||||
@page-change="handlePageChange"
|
||||
@page-change="page = $event"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@@ -196,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);
|
||||
.notification-row + .notification-row {
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
border-left: 4px solid #006f9d;
|
||||
}
|
||||
.notification-row-unread {
|
||||
border-left: 4px solid #0066cc;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.rounded-2 {
|
||||
border-radius: 0.5rem;
|
||||
.notification-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
+28
-39
@@ -7,28 +7,28 @@ const { getOpenDataReports } = usePublic()
|
||||
|
||||
const currentPage = ref(1)
|
||||
const perPage = ref(9)
|
||||
|
||||
const { data: openDataResponse, pending } = await useAsyncData(
|
||||
'open-data-reports',
|
||||
() => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
|
||||
{ watch: [currentPage] }
|
||||
() => getOpenDataReports({ page: 1, per_page: 200 })
|
||||
)
|
||||
|
||||
const visibleReports = computed(() =>
|
||||
const allVisibleReports = computed(() =>
|
||||
(openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
|
||||
)
|
||||
|
||||
const isLastPage = computed(() => {
|
||||
if (!openDataResponse.value?.reports) return true
|
||||
return openDataResponse.value.reports.length < perPage.value
|
||||
const visibleReports = computed(() => {
|
||||
const start = (currentPage.value - 1) * perPage.value
|
||||
const end = start + perPage.value
|
||||
return allVisibleReports.value.slice(start, end)
|
||||
})
|
||||
|
||||
const nextPage = () => {
|
||||
if (!isLastPage.value) currentPage.value++
|
||||
}
|
||||
const prevPage = () => {
|
||||
if (currentPage.value > 1) currentPage.value--
|
||||
const handlePageChange = (page: number) => {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
const mapVisibleReports = computed(() => allVisibleReports.value)
|
||||
|
||||
const currentView = ref<'grid' | 'map'>('grid')
|
||||
const mapContainer = ref<HTMLElement | null>(null)
|
||||
let leaflet: typeof import('leaflet') | null = null
|
||||
@@ -66,12 +66,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,
|
||||
@@ -93,7 +93,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 })
|
||||
}
|
||||
|
||||
@@ -130,7 +130,7 @@ watch(currentView, async (view) => {
|
||||
}
|
||||
})
|
||||
|
||||
watch(visibleReports, async () => {
|
||||
watch(mapVisibleReports, async () => {
|
||||
if (currentView.value === 'map' && map) {
|
||||
await renderMapMarkers()
|
||||
}
|
||||
@@ -160,7 +160,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-5">
|
||||
<div class="container my-5" id="grid-start">
|
||||
<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">
|
||||
<button
|
||||
@@ -188,7 +188,6 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sostituito v-else-if con v-show -->
|
||||
<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>
|
||||
@@ -196,7 +195,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<div v-show="!pending && currentView === 'grid'">
|
||||
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
|
||||
<div class="row" v-if="allVisibleReports.length > 0">
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
|
||||
<div class="card-wrapper card-space h-100">
|
||||
<div class="card card-bg h-100 shadow-sm">
|
||||
@@ -210,7 +209,6 @@ onBeforeUnmount(() => {
|
||||
{{ 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>
|
||||
@@ -243,31 +241,22 @@ onBeforeUnmount(() => {
|
||||
Nessun dato pubblico disponibile al momento.
|
||||
</div>
|
||||
|
||||
<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"/>
|
||||
<span class="visually-hidden">Pagina precedente</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<span class="page-link font-weight-semibold">Pagina {{ currentPage }}</span>
|
||||
</li>
|
||||
<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"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<Pagination
|
||||
v-if="allVisibleReports.length > 0"
|
||||
:current-page="currentPage"
|
||||
:per-page="perPage"
|
||||
:total-items="allVisibleReports.length"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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="pending">Caricamento...</template>
|
||||
<template v-else>{{ mapVisibleReports.length }} punti</template>
|
||||
</span>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<div ref="mapContainer" class="open-data-map rounded border"></div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,22 +16,49 @@ if (!reportId) {
|
||||
navigateTo('/operator')
|
||||
}
|
||||
|
||||
const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
|
||||
const { getInterventionSummary, updateReportStatus, assignTeam, getTeams, createInterventionLink, revokeInterventionLink } = useOperator()
|
||||
const { getReportDetail, getMessages, addMessage, flagMessage, flagReport, getTeamSuggestions } = useReports()
|
||||
const {
|
||||
takeReport,
|
||||
getInterventionSummary,
|
||||
updateReportStatus,
|
||||
assignTeam,
|
||||
getTeams,
|
||||
createInterventionLink,
|
||||
revokeInterventionLink
|
||||
} = useOperator()
|
||||
const { user } = useAuth()
|
||||
|
||||
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 { data: allTeamsData } = await useAsyncData('operator-teams', () => getTeams())
|
||||
const { data: suggestedTeamsData } = await useAsyncData(`op-team-suggestions-${reportId}`, () => getTeamSuggestions(reportId))
|
||||
|
||||
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 allTeams = computed(() => (allTeamsData.value as any)?.teams || [])
|
||||
const suggestedTeams = computed(() => (suggestedTeamsData.value as any)?.suggestions || [])
|
||||
|
||||
const otherTeams = computed(() => {
|
||||
const suggestedIds = new Set(suggestedTeams.value.map((t: any) => Number(t.id)))
|
||||
return allTeams.value.filter((t: any) => !suggestedIds.has(Number(t.id)))
|
||||
})
|
||||
|
||||
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 && allTeams.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',
|
||||
@@ -40,7 +67,7 @@ const statusMeta: Record<string, string> = {
|
||||
IN_PROGRESS: 'In lavorazione',
|
||||
RESOLVED: 'Risolta',
|
||||
REJECTED: 'Respinta',
|
||||
CLOSED: 'Chiusa'
|
||||
CLOSED: 'Conclusa'
|
||||
}
|
||||
|
||||
const statusTransitions: Record<string, string[]> = {
|
||||
@@ -60,7 +87,7 @@ 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' }
|
||||
]
|
||||
|
||||
const selectableStatuses = computed(() => {
|
||||
@@ -70,26 +97,32 @@ const selectableStatuses = computed(() => {
|
||||
})
|
||||
|
||||
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)
|
||||
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[]>([])
|
||||
@@ -98,6 +131,35 @@ 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: ''
|
||||
})
|
||||
|
||||
// === GESTIONE SCROLL SCHERMO CON MODALI ===
|
||||
watch(
|
||||
() => isAssignModalOpen.value || isFlagReportModalOpen.value || isRevokeInterventionModalOpen.value || isFlagMessageModalOpen.value,
|
||||
(isOpen) => {
|
||||
if (import.meta.client) {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
if (import.meta.client) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => report.value?.status, (val) => {
|
||||
if (val) {
|
||||
const allowed = statusTransitions[val] || []
|
||||
@@ -107,8 +169,54 @@ watch(() => report.value?.status, (val) => {
|
||||
}
|
||||
}, { 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,
|
||||
@@ -117,19 +225,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 (isAdmin(user.value?.role)) return
|
||||
if (!canAssignTeam.value) return
|
||||
if (!selectedTeamId.value) return
|
||||
|
||||
isAssigning.value = true
|
||||
clearActionFeedback()
|
||||
try {
|
||||
const res = await assignTeam(reportId, {
|
||||
team_id: selectedTeamId.value
|
||||
@@ -138,30 +249,38 @@ 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 (!interventionLink.value || !navigator?.clipboard) return
|
||||
if (!interventionPublicLink.value || !navigator?.clipboard) return
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(interventionLink.value)
|
||||
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 = ''
|
||||
|
||||
@@ -170,6 +289,7 @@ const handleCreateInterventionLink = async () => {
|
||||
if (res.ok) {
|
||||
interventionLink.value = res.url
|
||||
interventionLinkExpiresAt.value = res.expires_at
|
||||
setPublicInterventionLink(res.url)
|
||||
interventionLinkSuccess.value = 'Link intervento generato.'
|
||||
}
|
||||
} catch (e: any) {
|
||||
@@ -194,6 +314,7 @@ const handleRevokeInterventionLink = async () => {
|
||||
if (!interventionLink.value) return
|
||||
|
||||
isRevokingInterventionLink.value = true
|
||||
clearActionFeedback()
|
||||
interventionLinkError.value = ''
|
||||
interventionLinkSuccess.value = ''
|
||||
|
||||
@@ -202,6 +323,7 @@ const handleRevokeInterventionLink = async () => {
|
||||
if (res.ok) {
|
||||
interventionLink.value = ''
|
||||
interventionLinkExpiresAt.value = ''
|
||||
interventionPublicLink.value = ''
|
||||
interventionLinkSuccess.value = 'Link intervento revocato.'
|
||||
isRevokeInterventionModalOpen.value = false
|
||||
}
|
||||
@@ -214,13 +336,17 @@ const handleRevokeInterventionLink = async () => {
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
@@ -228,7 +354,6 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
|
||||
|
||||
const canFlagMessage = (message: Message) => {
|
||||
if (!user.value) return false
|
||||
if (isAdmin(user.value?.role)) return false
|
||||
|
||||
const isCitizenMessage = message.user_id !== user.value.id && message.user_id === report.value?.user_id
|
||||
const isAlreadyFlagged = flaggedMessageIds.value.includes(message.id)
|
||||
@@ -252,16 +377,44 @@ const executeFlagMessage = async () => {
|
||||
})
|
||||
|
||||
flaggedMessageIds.value.push(messageToFlag.value.id)
|
||||
|
||||
isFlagMessageModalOpen.value = false
|
||||
messageToFlag.value = null
|
||||
} catch (e) {
|
||||
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 {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return '-'
|
||||
return new Date(dateString).toLocaleDateString('it-IT', {
|
||||
@@ -288,14 +441,15 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
<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">
|
||||
← Torna alle assegnazioni
|
||||
<NuxtLink :to="isTakenByCurrentOperator ? '/operator/assigned' : '/operator'" class="btn btn-sm btn-link text-decoration-none ps-0 mb-2">
|
||||
← 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>
|
||||
@@ -308,15 +462,26 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span class="hero-stat-label">Aperta</span>
|
||||
<strong>{{ formatDate(report.created_at) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
@@ -357,6 +522,20 @@ const formattedInterventionLinkExpiry = 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>
|
||||
|
||||
@@ -378,7 +557,13 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
: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>
|
||||
@@ -394,8 +579,8 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
<strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
|
||||
</li>
|
||||
<li>
|
||||
<span>Team disponibili</span>
|
||||
<strong>{{ teams.length }}</strong>
|
||||
<span>Team suggeriti</span>
|
||||
<strong :class="{'text-primary': suggestedTeams.length > 0}">{{ suggestedTeams.length }}</strong>
|
||||
</li>
|
||||
<li>
|
||||
<span>Allegati</span>
|
||||
@@ -409,10 +594,13 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isAdmin(user?.role)" class="card-body pt-0">
|
||||
<button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
|
||||
<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>
|
||||
|
||||
@@ -428,18 +616,18 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
{{ interventionLinkSuccess }}
|
||||
</div>
|
||||
|
||||
<template v-if="interventionLink">
|
||||
<template v-if="interventionPublicLink">
|
||||
<label class="form-label">URL attivo</label>
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control" :value="interventionLink" readonly />
|
||||
<input type="text" class="form-control" :value="interventionPublicLink" readonly />
|
||||
<button type="button" class="btn btn-outline-primary" @click="copyInterventionLink">
|
||||
Copia
|
||||
{{ copyFeedback || 'Copia' }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="small text-muted mb-3">
|
||||
Scade: {{ formattedInterventionLinkExpiry || '-' }}
|
||||
</p>
|
||||
<div class="d-grid gap-2">
|
||||
<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
|
||||
@@ -463,7 +651,7 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
</button>
|
||||
|
||||
<div v-if="!canCreateInterventionLink" class="text-danger small mt-2">
|
||||
È necessaria un'assegnazione in corso per generare o rigenerare questo link.
|
||||
È necessaria una presa in carico e un'assegnazione in corso per generare questo link.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -472,7 +660,13 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
<div class="card-body">
|
||||
<h2 class="h6 mb-3">Aggiorna stato</h2>
|
||||
|
||||
<template v-if="selectableStatuses.length > 0">
|
||||
<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>
|
||||
@@ -523,32 +717,53 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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;">
|
||||
<!-- BACKGROUND MODALE COMUNE -->
|
||||
<div v-if="isAssignModalOpen || isFlagReportModalOpen" class="modal-backdrop fade show d-block"
|
||||
style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
|
||||
|
||||
<!-- MODALE: GESTIONE INTERVENTO -->
|
||||
<div v-if="isAssignModalOpen" class="modal fade show d-block" style="z-index: 1050; overflow-y: auto;"
|
||||
tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Gestione Intervento</h5>
|
||||
<button type="button" class="btn-close" @click="isAssignModalOpen = false"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- FORM AGGIORNATO CON MODAL-BODY E MODAL-FOOTER -->
|
||||
<form @submit.prevent="handleAssignTeam">
|
||||
<div class="mb-3">
|
||||
<div class="modal-body">
|
||||
<div class="mb-0">
|
||||
<label class="form-label">Team incaricato</label>
|
||||
<select v-model.number="selectedTeamId" class="form-select" required>
|
||||
<option :value="null">Seleziona team</option>
|
||||
<option v-for="team in teams" :key="team.id" :value="team.id">
|
||||
{{ team.name }}<template v-if="team.category_name"> · {{ team.category_name }}</template>
|
||||
|
||||
<optgroup v-if="suggestedTeams.length > 0" label="Team Suggeriti">
|
||||
<option v-for="team in suggestedTeams" :key="'sug-' + team.id" :value="Number(team.id)">
|
||||
{{ team.name }}
|
||||
<template v-if="team.is_recommended"> ★</template>
|
||||
<template v-if="team.category_name"> · {{ team.category_name }}</template>
|
||||
<template v-if="team.area_name"> · {{ team.area_name }}</template>
|
||||
</option>
|
||||
</optgroup>
|
||||
|
||||
<optgroup :label="suggestedTeams.length > 0 ? 'Altri Team' : 'Tutti i Team'">
|
||||
<option v-for="team in otherTeams" :key="'oth-' + team.id" :value="Number(team.id)">
|
||||
{{ team.name }}
|
||||
<template v-if="team.category_name"> · {{ team.category_name }}</template>
|
||||
<template v-if="team.area_name"> · {{ team.area_name }}</template>
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<small v-if="teams.length === 0" class="form-text text-danger">
|
||||
<small v-if="allTeams.length === 0" class="form-text text-danger mt-1">
|
||||
Nessun team attivo disponibile.
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end gap-2 mt-4">
|
||||
<button type="button" class="btn btn-outline-secondary" @click="isAssignModalOpen = false">Annulla</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="isAssigning || !selectedTeamId">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-outline-secondary" type="button" @click="isAssignModalOpen = false">Annulla
|
||||
</button>
|
||||
<button :disabled="isAssigning || !selectedTeamId" class="btn btn-primary" type="submit">
|
||||
<span v-if="isAssigning" class="spinner-border spinner-border-sm me-2"></span>
|
||||
Salva Assegnazione
|
||||
</button>
|
||||
@@ -557,6 +772,36 @@ const formattedInterventionLinkExpiry = computed(() =>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODALE: SEGNALA ALLA MODERAZIONE -->
|
||||
<div v-if="isFlagReportModalOpen" class="modal fade show d-block" style="z-index: 1050; overflow-y: auto;"
|
||||
tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Segnala 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 class="mb-0">
|
||||
<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
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
@@ -34,6 +36,19 @@ const isFeedbackOpen = ref(false)
|
||||
const feedbackRating = ref(5)
|
||||
const feedbackComment = ref('')
|
||||
const isSubmittingFeedback = ref(false)
|
||||
const submittedFeedback = ref<{ rating: number; comment?: string } | null>(null)
|
||||
|
||||
// Carica l'eventuale feedback da local storage dopo il mount (per evitare mismatch nel SSR)
|
||||
onMounted(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(`feedback_${reportId}`)
|
||||
if (saved) {
|
||||
submittedFeedback.value = JSON.parse(saved)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Errore nel recupero del feedback da local storage:', error)
|
||||
}
|
||||
})
|
||||
|
||||
const handleSendMessage = async (messageText: string, files: File[]) => {
|
||||
isSubmittingMessage.value = true
|
||||
@@ -51,13 +66,18 @@ const handleSendMessage = async (messageText: string, files: File[]) => {
|
||||
const handleSubmitFeedback = async () => {
|
||||
isSubmittingFeedback.value = true
|
||||
try {
|
||||
await addFeedback(reportId, {
|
||||
const feedbackData = {
|
||||
rating: feedbackRating.value,
|
||||
comment: feedbackComment.value || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
await addFeedback(reportId, feedbackData)
|
||||
|
||||
// Salva in local storage in mancanza di un endpoint dal backend
|
||||
localStorage.setItem(`feedback_${reportId}`, JSON.stringify(feedbackData))
|
||||
submittedFeedback.value = feedbackData
|
||||
|
||||
isFeedbackOpen.value = false
|
||||
feedbackRating.value = 5
|
||||
feedbackComment.value = ''
|
||||
await refreshReport()
|
||||
} catch (error) {
|
||||
console.error('Error submitting feedback:', error)
|
||||
@@ -69,6 +89,12 @@ const handleSubmitFeedback = async () => {
|
||||
const isOwner = computed(() => report.value?.user_id === user.value?.id)
|
||||
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' },
|
||||
@@ -76,7 +102,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 => {
|
||||
@@ -210,7 +236,12 @@ const formatDate = (dateString: string): string => {
|
||||
|
||||
<MessageList :messages="messages"/>
|
||||
|
||||
<MessageComposer @send="handleSendMessage"/>
|
||||
<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>
|
||||
@@ -240,6 +271,30 @@ const formatDate = (dateString: string): string => {
|
||||
<div v-if="canFeedback && isOwner" class="card card-bg border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h2 class="h6 mb-3">Valuta intervento</h2>
|
||||
|
||||
<template v-if="submittedFeedback">
|
||||
<div class="alert alert-success small mb-3">
|
||||
Grazie! Il tuo feedback è stato inviato con successo.
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<span class="d-block text-muted small mb-1">La tua valutazione</span>
|
||||
<div class="d-flex gap-1">
|
||||
<BIIcon
|
||||
v-for="n in 5"
|
||||
:key="n"
|
||||
:name="n <= submittedFeedback.rating ? 'it-star-full' : 'it-star-outline'"
|
||||
size="sm"
|
||||
:color="n <= submittedFeedback.rating ? 'warning' : 'primary'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="submittedFeedback.comment">
|
||||
<span class="d-block text-muted small mb-1">Il tuo commento</span>
|
||||
<p class="mb-0 small text-break">{{ submittedFeedback.comment }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p>
|
||||
<button
|
||||
v-if="!isFeedbackOpen"
|
||||
@@ -285,6 +340,7 @@ const formatDate = (dateString: string): string => {
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+42
-3
@@ -6,10 +6,11 @@ export default defineNuxtConfig({
|
||||
'@nuxt/image',
|
||||
'@nuxt/fonts',
|
||||
'@nuxtjs/sitemap',
|
||||
'@nuxtjs/robots'
|
||||
'@nuxtjs/robots',
|
||||
'@vite-pwa/nuxt'
|
||||
],
|
||||
// TODO: riattivare prima di pubblicare il sito
|
||||
ssr: false,
|
||||
|
||||
ssr: true,
|
||||
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
@@ -39,9 +40,47 @@ export default defineNuxtConfig({
|
||||
|
||||
app: {
|
||||
head: {
|
||||
meta: [
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' },
|
||||
{ name: 'theme-color', content: '#003366' },
|
||||
{ name: 'description', content: 'Visione - Un\'occhio per la sicurezza' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
|
||||
{ name: 'apple-mobile-web-app-title', content: 'Visione' }
|
||||
],
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
pwa: {
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
name: 'Visione - Un\'occhio per la sicurezza',
|
||||
short_name: 'Visione',
|
||||
theme_color: '#003366',
|
||||
background_color: '#003366',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
icons: [
|
||||
{
|
||||
src: '/icon-192.webp',
|
||||
sizes: '192x192',
|
||||
type: 'image/webp',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-512.webp',
|
||||
sizes: '512x512',
|
||||
type: 'image/webp',
|
||||
purpose: 'any'
|
||||
}
|
||||
]
|
||||
},
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,png,svg,ico,webp}']
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"@nuxt/image": "^2.0.0",
|
||||
"@nuxtjs/robots": "6.0.9",
|
||||
"@nuxtjs/sitemap": "8.0.15",
|
||||
"@vite-pwa/nuxt": "1.1.1",
|
||||
"bootstrap-italia": "^2.18.1",
|
||||
"codice-fiscale-js": "^2.3.23",
|
||||
"leaflet": "^1.9.4",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
Reference in New Issue
Block a user