maiora/Browser-Strutture-Musa
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css e accessibilità

Browse Source
This commit is contained in:
Flavio Bontà 2025-11-14 10:31:47 +01:00
parent 94eee4a484
commit 03d7642922
5 changed files with 211 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/fn/strutture-pubbliche/strutture-pubbliche-controller-find-many-strutture.ts
View File

@ -24,12 +24,12 @@ export interface StrutturePubblicheControllerFindManyStrutture$Params {
/** /**
* Luogo calcola distanza da * Luogo calcola distanza da
*/ */
luogo?: string | null; luogo: string;
/** /**
* Tipo luogo calcola distanza da * Tipo luogo calcola distanza da
*/ */
'luogo.tipo'?: string | null; 'luogo.tipo': string;
/** /**
* Tipo della struttura * Tipo della struttura
@ -40,7 +40,7 @@ export interface StrutturePubblicheControllerFindManyStrutture$Params {
export function strutturePubblicheControllerFindManyStrutture( export function strutturePubblicheControllerFindManyStrutture(
http: HttpClient, http: HttpClient,
rootUrl: string, rootUrl: string,
params?: StrutturePubblicheControllerFindManyStrutture$Params, params: StrutturePubblicheControllerFindManyStrutture$Params,
context?: HttpContext, context?: HttpContext,
): Observable<StrictHttpResponse<Array<StrutturePubblicheResDto>>> { ): Observable<StrictHttpResponse<Array<StrutturePubblicheResDto>>> {
const rb = new RequestBuilder( const rb = new RequestBuilder(

4
src/api/services/strutture-pubbliche-api-client.ts
View File

@ -39,7 +39,7 @@ export class StrutturePubblicheApiClient extends BaseService {
* This method doesn't expect any request body. * This method doesn't expect any request body.
*/ */
strutturePubblicheControllerFindManyStrutture$Response( strutturePubblicheControllerFindManyStrutture$Response(
params?: StrutturePubblicheControllerFindManyStrutture$Params, params: StrutturePubblicheControllerFindManyStrutture$Params,
context?: HttpContext, context?: HttpContext,
): Observable<StrictHttpResponse<Array<StrutturePubblicheResDto>>> { ): Observable<StrictHttpResponse<Array<StrutturePubblicheResDto>>> {
return strutturePubblicheControllerFindManyStrutture( return strutturePubblicheControllerFindManyStrutture(
@ -61,7 +61,7 @@ export class StrutturePubblicheApiClient extends BaseService {
* This method doesn't expect any request body. * This method doesn't expect any request body.
*/ */
strutturePubblicheControllerFindManyStrutture( strutturePubblicheControllerFindManyStrutture(
params?: StrutturePubblicheControllerFindManyStrutture$Params, params: StrutturePubblicheControllerFindManyStrutture$Params,
context?: HttpContext, context?: HttpContext,
): Observable<Array<StrutturePubblicheResDto>> { ): Observable<Array<StrutturePubblicheResDto>> {
return this.strutturePubblicheControllerFindManyStrutture$Response( return this.strutturePubblicheControllerFindManyStrutture$Response(

111
src/app/modules/public/strutture-pubbliche/strutture-pubbliche.component.html
View File

@ -3,26 +3,38 @@
<div class="flex flex-col md:flex-row justify-between items-center md:items-end gap-4 md:gap-6"> <div class="flex flex-col md:flex-row justify-between items-center md:items-end gap-4 md:gap-6">
<div> <div>
<img src="assets/images/MUSA/logo.png" <img src="assets/images/MUSA/logo.png"
alt="poseidon-layout" alt="logo-consorzio-musa"
class="block mx-auto" class="block mx-auto"
style="height: 50px" /> style="height: 50px" />
</div> </div>
<div class="flex-1 flex flex-col text-center md:text-left"> <div class="flex-1 flex flex-col text-center md:text-left">
<div class="text-surface-900 dark:text-surface-0 text-2xl font-semibold leading-tight"> <h1 class="text-surface-900 dark:text-surface-0 text-2xl font-semibold leading-tight">
Consorzio Mu.Sa. Consorzio Mu.Sa.
</div> </h1>
<div class="text-surface-500 dark:text-surface-200 text-xl font-normal leading-tight"> <h2 class="text-surface-500 dark:text-surface-200 text-xl font-normal leading-tight">
Cerca strutture convenzionate Cerca strutture convenzionate
</div> </h2>
</div> </div>
</div> </div>
<p-divider class="w-full my-0!"></p-divider> <p-divider class="w-full my-0!"></p-divider>
<form [formGroup]="cercaStruttureForm" <form [formGroup]="cercaStruttureForm"
(ngSubmit)="getStrutture()"> (ngSubmit)="getStrutture()">
<div class="flex flex-wrap gap-4 items-center"> <div class="flex flex-wrap gap-8 md:gap-12 items-start">
<div
class="flex-1 bg-surface-0 dark:bg-surface-950 flex flex-col justify-start items-start gap-8 md:gap-12 w-full">
<div class="self-stretch flex flex-col justify-start items-start gap-6">
<div class="self-stretch flex flex-col justify-start items-start gap-6">
<div
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-lg md:text-xl font-semibold leading-tight">
Strutture Convenzionate</div>
<div class="self-stretch flex flex-col justify-start items-start gap-4">
<div class="self-stretch flex flex-col justify-start items-start gap-2">
<div id="tipoStruttura"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
Tipologia struttura</div>
<p-dropdown [options]="vm.tipologieStrutture" <p-dropdown [options]="vm.tipologieStrutture"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0 lg:w-72" class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
name="tiplogiaStruttura" name="tiplogiaStruttura"
appendTo="body" appendTo="body"
formControlName="tipologiaStruttura" formControlName="tipologiaStruttura"
@ -30,29 +42,45 @@
showClear="true" showClear="true"
optionLabel="descrizione" optionLabel="descrizione"
optionValue="codice" optionValue="codice"
ariaLabelledBy="tipoStruttura"
[filter]="true"></p-dropdown> [filter]="true"></p-dropdown>
<!-- {{vm.filteredLuoghiEsteso | json}} </div>
{{cercaStruttureForm.controls['luogo'].value | json}} --> </div>
<!-- <p-autocomplete [(ngModel)]="modelLuogo"
[ngModelOptions]="{ standalone: true }" <div class="self-stretch flex flex-col md:flex-row justify-start items-start gap-4">
[suggestions]="vm.filteredLuoghiEsteso" <div class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
(completeMethod)="fetchLuogo($event, 1)" <div id="luogoAutocomplete"
optionLabel="tipo" /> --> class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
<p-autoComplete #acSt formControlName="luogo" Luogo<small class="text-red-600">*
@if (
cercaStruttureForm.controls.luogo.errors?.['required'] &&
vm.cercaStruttureFormSubmitted
) {
Luogo obbligatorio
}
</small></div>
<p-autoComplete #acSt
formControlName="luogo"
[suggestions]="vm.filteredLuoghiEsteso" [suggestions]="vm.filteredLuoghiEsteso"
(completeMethod)="fetchLuogo($event, 1)" (completeMethod)="fetchLuogo($event, 1)"
(onSelect)="state.set({ filteredLuoghiEsteso: [] })" (onSelect)="state.set({ filteredLuoghiEsteso: [] })"
(onHide)="checkLuogo()" (onHide)="checkLuogo()"
styleClass="w-full" styleClass="w-full"
inputStyleClass="w-full" inputStyleClass="w-full"
placeholder="Cerca per città, provincia, stato o regione" placeholder="Cerca per città, provincia o regione"
appendTo="body" appendTo="body"
minLength="1" minLength="1"
[delay]="500" [delay]="500"
emptyMessage="Nessun luogo trovato" emptyMessage="Nessun luogo trovato"
[showClear]="true" [showClear]="true"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0 lg:w-72" class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
[ngClass]="{
'ng-invalid ng-dirty':
cercaStruttureForm.controls.luogo.errors?.['required'] &&
vm.cercaStruttureFormSubmitted
}"
dataKey="dataKey" dataKey="dataKey"
ariaLabelledBy="luogoAutocomplete"
optionLabel="luogo"> optionLabel="luogo">
<ng-template let-luogo <ng-template let-luogo
#item> #item>
@ -119,32 +147,42 @@
</div> </div>
</ng-template> </ng-template>
</p-autoComplete> </p-autoComplete>
</div>
<div class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
<div id="indirizzo"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
Indirizzo</div>
<input type="text" <input type="text"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0 lg:w-72" class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0 "
formControlName="indirizzo" formControlName="indirizzo"
pInputText pInputText
aria-labelledby="indirizzo"
placeholder="Inserisci l'indirizzo" /> placeholder="Inserisci l'indirizzo" />
</div>
</div>
</div>
<div class="self-stretch flex flex-col md:flex-row justify-end items-center gap-4">
<button pButton
severity="secondary"
class="w-full md:w-auto"
(click)="cercaStruttureForm.reset()"
[outlined]="true">
<span pButtonLabel>Annulla filtri</span>
</button>
<button pButton <button pButton
type="submit" type="submit"
[disabled]="vm.isSearching" [disabled]="vm.isSearching"
[loading]="vm.isSearching" [loading]="vm.isSearching"
icon="pi pi-search" icon="pi pi-search"
[label]="vm.isSearching ? 'Ricerca in corso...' : 'Cerca'" [label]="vm.isSearching ? 'Ricerca in corso...' : 'Cerca strutture'"
severity="primary" severity="primary"
class="shrink-0"></button> class="shrink-0"></button>
</div> </div>
@if ( </div>
cercaStruttureForm.errors?.['atLeastOneRequired'] && </div>
vm.cercaStruttureFormSubmitted
) {
<small class="text-red-600">Seleziona almeno un filtro.</small>
}
</form>
<div <div
class="bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[400px]"> class="flex-auto lg:flex-1 bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[350px] w-full lg:1/2">
<google-map #gmap <google-map #gmap
height="100%" height="100%"
width="100%" width="100%"
@ -156,8 +194,11 @@
<map-info-window></map-info-window> <map-info-window></map-info-window>
</google-map> </google-map>
</div> </div>
</div>
</form>
<p-table #struttureTable <p-table #struttureTable
*ngIf="vm.strutture !== undefined"
[totalRecords]="vm.strutture.length" [totalRecords]="vm.strutture.length"
dataKey="id" dataKey="id"
[loading]="vm.struttureAreLoading" [loading]="vm.struttureAreLoading"
@ -182,6 +223,7 @@
</p-inputicon> </p-inputicon>
<input pInputText <input pInputText
type="text" type="text"
aria-label="Filtra strutture"
(input)="applyFilterGlobal($event, 'contains')" (input)="applyFilterGlobal($event, 'contains')"
placeholder="Filtra strutture" /> placeholder="Filtra strutture" />
</p-iconfield> </p-iconfield>
@ -218,7 +260,7 @@
<span class="font-light"> <b>{{ row.struttura.nome }}</b></span> <span class="font-light"> <b>{{ row.struttura.nome }}</b></span>
<div *ngIf="row.struttura.sitoWeb" <div *ngIf="row.struttura.sitoWeb"
class="mt-4 ont-light"> class="mt-4 ont-light">
<a class="cursor-pointer hover:underline text-primary-600" <a class="cursor-pointer hover:underline text-primary-700"
(click)="externalLink(row.struttura.sitoWeb)">Sito Web</a> (click)="externalLink(row.struttura.sitoWeb)">Sito Web</a>
</div> </div>
</td> </td>
@ -235,26 +277,26 @@
<div class="text-sm" <div class="text-sm"
*ngIf="row.struttura.cupPubblico"> *ngIf="row.struttura.cupPubblico">
CUP Pubblico: CUP Pubblico:
<a class="cursor-pointer hover:underline text-primary-600" <a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.cupPubblico }}">{{ row.struttura.cupPubblico }}</a> href="tel:{{ row.struttura.cupPubblico }}">{{ row.struttura.cupPubblico }}</a>
</div> </div>
<div *ngIf="row.struttura.cupPrivato" <div *ngIf="row.struttura.cupPrivato"
class="text-sm"> class="text-sm">
CUP Privato: CUP Privato:
<a class="cursor-pointer hover:underline text-primary-600" <a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.cupPrivato }}">{{ row.struttura.cupPrivato }}</a> href="tel:{{ row.struttura.cupPrivato }}">{{ row.struttura.cupPrivato }}</a>
</div> </div>
<ng-container *ngIf="!row.struttura.cupPubblico && !row.struttura.cupPrivato"> <ng-container *ngIf="!row.struttura.cupPubblico && !row.struttura.cupPrivato">
<div *ngIf="row.struttura.telefono1" <div *ngIf="row.struttura.telefono1"
class="text-sm"> class="text-sm">
tel: tel:
<a class="cursor-pointer hover:underline text-primary-600" <a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.telefono1 }}">{{ row.struttura.telefono1 }}</a> href="tel:{{ row.struttura.telefono1 }}">{{ row.struttura.telefono1 }}</a>
</div> </div>
<div *ngIf="row.struttura.telefono2" <div *ngIf="row.struttura.telefono2"
class="text-sm"> class="text-sm">
tel: tel:
<a class="cursor-pointer hover:underline text-primary-600" <a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.telefono2 }}">{{ row.struttura.telefono2 }}</a> href="tel:{{ row.struttura.telefono2 }}">{{ row.struttura.telefono2 }}</a>
</div> </div>
</ng-container> </ng-container>
@ -266,6 +308,7 @@
<p-button icon="pi pi-map-marker" <p-button icon="pi pi-map-marker"
label="Apri in Google Maps" label="Apri in Google Maps"
[rounded]="true" [rounded]="true"
styleClass="hover:underline text-primary-700"
(onClick)="calculateMapsLink(row)" (onClick)="calculateMapsLink(row)"
[text]="true" /> [text]="true" />
</div> </div>

38
src/app/modules/public/strutture-pubbliche/strutture-pubbliche.component.ts
View File

@ -5,6 +5,7 @@ import {
FormGroup, FormGroup,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
Validators,
} from '@angular/forms'; } from '@angular/forms';
import { import {
GoogleMap, GoogleMap,
@ -46,19 +47,17 @@ import {
tap, tap,
} from 'rxjs'; } from 'rxjs';
import { StrutturePubblicheControllerFindManyStrutture$Params } from '../../../../api/fn/strutture-pubbliche/strutture-pubbliche-controller-find-many-strutture'; import { StrutturePubblicheControllerFindManyStrutture$Params } from '../../../../api/fn/strutture-pubbliche/strutture-pubbliche-controller-find-many-strutture';
import { atLeastOneFilterRequired } from '../../main/strutture/strutture.component';
import { TableColumn } from '../../shared'; import { TableColumn } from '../../shared';
import { StrutturePubblicheService } from './strutture-pubbliche.service'; import { StrutturePubblicheService } from './strutture-pubbliche.service';
const cercaStruttureFormGroupFunc = () => { const cercaStruttureFormGroupFunc = () => {
return new FormGroup( return new FormGroup({
{
tipologiaStruttura: new FormControl<string | null>(null), tipologiaStruttura: new FormControl<string | null>(null),
luogo: new FormControl<LuogoRes | null>(null), luogo: new FormControl<LuogoRes | null>(null, {
validators: [Validators.required],
}),
indirizzo: new FormControl<string | null>(null), indirizzo: new FormControl<string | null>(null),
}, });
[atLeastOneFilterRequired],
);
}; };
export type cercaStruttureForm = ReturnType<typeof cercaStruttureFormGroupFunc>; export type cercaStruttureForm = ReturnType<typeof cercaStruttureFormGroupFunc>;
export type cercaStruttureFormValue = cercaStruttureForm['value']; export type cercaStruttureFormValue = cercaStruttureForm['value'];
@ -151,7 +150,7 @@ export class StrutturePubblicheComponent {
) { ) {
this.model$ = this.state.select(); this.model$ = this.state.select();
this.state.set({ this.state.set({
strutture: [], strutture: undefined,
tipologieStrutture: [], tipologieStrutture: [],
filteredLuoghiEsteso: [], filteredLuoghiEsteso: [],
@ -222,28 +221,27 @@ export class StrutturePubblicheComponent {
const params: StrutturePubblicheControllerFindManyStrutture$Params = { const params: StrutturePubblicheControllerFindManyStrutture$Params = {
indirizzo: _form.indirizzo, indirizzo: _form.indirizzo,
tipoStruttura: _form.tipologiaStruttura, tipoStruttura: _form.tipologiaStruttura,
luogo: _form.luogo?.luogo, luogo: _form.luogo!.luogo!,
'luogo.tipo': _form.luogo?.tipo, 'luogo.tipo': _form.luogo!.tipo!,
}; };
this.calcolaIndirizzoDa = _form.indirizzo; this.calcolaIndirizzoDa = _form.indirizzo;
const strutture$ = this.strutturePubblicheService.getStrutture(params).pipe( const strutture$ = this.strutturePubblicheService.getStrutture(params).pipe(
catchError(() => { catchError((err) => {
this.messageService.add({ this.messageService.add({
severity: 'error', severity: 'error',
life: 5000, life: 5000,
summary: 'Attenzione!', summary: 'Attenzione!',
detail: detail:
'Impossibile recuperare la lista delle strutture in questo momento, riprova più tardi', err.status === 400
? 'Il luogo è obbligatorio'
: 'Impossibile recuperare la lista delle strutture in questo momento, riprova più tardi',
}); });
return of([] as StrutturePubblicheResDto[]); return of([] as StrutturePubblicheResDto[]);
}), }),
tap((res) => { tap((res) => {
this.cercaStruttureForm.enable(); this.cercaStruttureForm.enable();
if (!res) return; if (!res) return;
this.state.set(() => ({
cercaStruttureFormSubmitted: false,
}));
this.gMapMarkers(res, false); this.gMapMarkers(res, false);
}), }),
map((res) => ({ strutture: res })), map((res) => ({ strutture: res })),
@ -290,6 +288,9 @@ export class StrutturePubblicheComponent {
} }
</p> </p>
</div> </div>
<div class="mt-2">
<a class="hover:underline text-primary-700" target="_blank" href="${this.calculateMapsLink(info, false)}"><i class="pi pi-map-marker"></i>Apri su Google Maps</a>
</div>
</div> </div>
`; `;
this.infoWindow.infoWindow?.setContent(contentString); this.infoWindow.infoWindow?.setContent(contentString);
@ -398,7 +399,7 @@ export class StrutturePubblicheComponent {
); );
} }
calculateMapsLink(struttura: StrutturePubblicheResDto): void { calculateMapsLink(struttura: StrutturePubblicheResDto, open = true): string {
// https://www.google.com/maps/dir/?api=1&origin=45.476333943968626,9.17169124076061&destination=45.4692422,9.16562&travelmode=driving // https://www.google.com/maps/dir/?api=1&origin=45.476333943968626,9.17169124076061&destination=45.4692422,9.16562&travelmode=driving
// https://www.google.com/maps/dir/?api=1&destination=45.4692422,9.16562&travelmode=driving // https://www.google.com/maps/dir/?api=1&destination=45.4692422,9.16562&travelmode=driving
@ -436,13 +437,14 @@ export class StrutturePubblicheComponent {
} }
url = `${url}&travelmode=${travelMode}`; url = `${url}&travelmode=${travelMode}`;
window.open(url, '_blank');
if (open) window.open(url, '_blank');
return url;
} }
checkLuogo() { checkLuogo() {
//Hack: rimosso dall'autocomplete forceSelection perchè non funzionava come previsto, selezionando ad esempio "Milano" (comune), selezionava "Milano" (comune). //Hack: rimosso dall'autocomplete forceSelection perchè non funzionava come previsto, selezionando ad esempio "Milano" (comune), selezionava "Milano" (comune).
const luogo = this.cercaStruttureForm.controls['luogo'].value; const luogo = this.cercaStruttureForm.controls['luogo'].value;
console.log('luogo', luogo);
if (typeof luogo === 'string') { if (typeof luogo === 'string') {
this.cercaStruttureForm.controls['luogo'].setValue(null); this.cercaStruttureForm.controls['luogo'].setValue(null);
} }