fix(): nascosta la dropdown degli stati

This commit is contained in:
Flavio Bontà 2025-12-02 22:34:33 +01:00
parent a26e7ca41c
commit b12fda3270
2 changed files with 236 additions and 322 deletions

View File

@ -1,4 +1,4 @@
{
"repoId": "bc5fa7a7-7313-4845-954c-7227b0073b63",
"lastSync": 0
}
}

View File

@ -1,139 +1,108 @@
@let vm = (model$ | async)!;
<div
class="bg-surface-0 dark:bg-surface-950 p-6 md:p-12 lg:p-15 flex flex-col gap-8"
>
<div
class="flex flex-col md:flex-row justify-between items-center md:items-end gap-4 md:gap-6"
>
<div class="bg-surface-0 dark:bg-surface-950 p-6 md:p-12 lg:p-15 flex flex-col gap-8">
<div class="flex flex-col md:flex-row justify-between items-center md:items-end gap-4 md:gap-6">
<div>
<img
src="assets/images/MUSA/logo.png"
alt="logo-consorzio-musa"
class="block mx-auto"
style="height: 50px"
/>
<img src="assets/images/MUSA/logo.png"
alt="logo-consorzio-musa"
class="block mx-auto"
style="height: 50px" />
</div>
<div class="flex-1 flex flex-col text-center md:text-left">
<h1
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.
</h1>
<h2
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
</h2>
</div>
</div>
<p-divider class="w-full my-0!"></p-divider>
<form [formGroup]="cercaStruttureForm" (ngSubmit)="getStrutture()">
<form [formGroup]="cercaStruttureForm"
(ngSubmit)="getStrutture()">
<div class="flex flex-wrap gap-8 md:gap-6 items-start">
<div
class="flex-3 bg-surface-0 dark:bg-surface-950 flex flex-col justify-start items-start gap-8 md:gap-12 w-full"
>
class="flex-3 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 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"
>
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"
>
<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-select
[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"
name="tiplogiaStruttura"
appendTo="body"
formControlName="tipologiaStruttura"
placeholder="Seleziona il tipo struttura"
showClear="true"
optionLabel="descrizione"
optionValue="codice"
ariaLabelledBy="tipoStruttura"
emptyFilterMessage="Nessuna tipologia struttura trovata"
emptyMessage="Nessuna tipologia struttura trovata"
[loading]="vm.tipologieStruttureAreLoading"
[filter]="true"
></p-select>
<p-select [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"
name="tiplogiaStruttura"
appendTo="body"
formControlName="tipologiaStruttura"
placeholder="Seleziona il tipo struttura"
showClear="true"
optionLabel="descrizione"
optionValue="codice"
ariaLabelledBy="tipoStruttura"
emptyFilterMessage="Nessuna tipologia struttura trovata"
emptyMessage="Nessuna tipologia struttura trovata"
[loading]="vm.tipologieStruttureAreLoading"
[filter]="true"></p-select>
</div>
</div>
<div
class="self-stretch flex flex-col md:flex-row justify-start items-start gap-4"
>
<div
class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
>
<div
id="stato"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
>
Stato<small class="text-red-600"
>*
<div class="self-stretch flex flex-col md:flex-row justify-start items-start gap-4">
<div class="flex-1 flex flex-col justify-start items-start gap-2 w-full hidden">
<div id="stato"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
Stato<small class="text-red-600">*
@if (
cercaStruttureForm.controls.stato.errors?.['required'] &&
vm.cercaStruttureFormSubmitted
cercaStruttureForm.controls.stato.errors?.['required'] &&
vm.cercaStruttureFormSubmitted
) {
Stato obbligatorio
Stato obbligatorio
}
</small>
</div>
<p-select
[options]="vm.stati"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
[ngClass]="{
<p-select [options]="vm.stati"
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.stato.errors?.['required'] &&
vm.cercaStruttureFormSubmitted,
}"
name="stato"
appendTo="body"
formControlName="stato"
placeholder="Seleziona lo stato"
showClear="true"
optionLabel="stato"
ariaLabelledBy="stato"
emptyFilterMessage="Nessuno Stato trovato"
emptyMessage="Nessuno Stato trovato"
[loading]="vm.statiAreLoading"
[filter]="true"
>
<ng-template #selectedItem let-selectedOption>
<div class="flex items-center gap-2" *ngIf="selectedOption">
<img
src="./assets/images/flags/{{
name="stato"
appendTo="body"
formControlName="stato"
placeholder="Seleziona lo stato"
showClear="true"
optionLabel="stato"
ariaLabelledBy="stato"
emptyFilterMessage="Nessuno Stato trovato"
emptyMessage="Nessuno Stato trovato"
[loading]="vm.statiAreLoading"
[filter]="true">
<ng-template #selectedItem
let-selectedOption>
<div class="flex items-center gap-2"
*ngIf="selectedOption">
<img src="./assets/images/flags/{{
selectedOption.codiceStato | lowercase
}}.png"
style="width: 18px; vertical-align: middle"
onerror="this.style.display='none'"
/>
style="width: 18px; vertical-align: middle"
onerror="this.style.display='none'" />
<div>{{ selectedOption.stato }}</div>
</div>
</ng-template>
<ng-template let-stato #item>
<ng-template let-stato
#item>
<div class="flex items-center gap-2">
<img
src="./assets/images/flags/{{
<img src="./assets/images/flags/{{
stato.codiceStato | lowercase
}}.png"
style="width: 18px; vertical-align: middle"
onerror="this.style.display='none'"
/>
style="width: 18px; vertical-align: middle"
onerror="this.style.display='none'" />
<div>{{ stato.stato }}</div>
</div>
</ng-template>
@ -231,127 +200,100 @@
</ng-template>
</p-autoComplete> -->
</div>
<div
*ngIf="
<div *ngIf="
cercaStruttureForm.controls.stato.value &&
cercaStruttureForm.controls.stato.value.codiceStato === 'ITA'
"
class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
>
<div
id="regione"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
>
Regione<small class="text-red-600"
>*
class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
<div id="regione"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
Regione<small class="text-red-600">*
@if (
cercaStruttureForm.controls.regione.errors?.[
'required'
] && vm.cercaStruttureFormSubmitted
cercaStruttureForm.controls.regione.errors?.[
'required'
] && vm.cercaStruttureFormSubmitted
) {
Regione obbligatorio
Regione obbligatorio
}
</small>
</div>
<p-select
[options]="vm.regioni"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
[ngClass]="{
<p-select [options]="vm.regioni"
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-dirty ng-invalid':
cercaStruttureForm.controls.regione.errors?.[
'required'
] && vm.cercaStruttureFormSubmitted,
}"
name="regione"
appendTo="body"
formControlName="regione"
placeholder="Seleziona la regione"
showClear="true"
optionLabel="regione"
ariaLabelledBy="regione"
emptyFilterMessage="Nessuna Regione trovata"
emptyMessage="Nessuna Regione trovata"
[loading]="vm.regioniAreLoading"
[filter]="true"
/>
name="regione"
appendTo="body"
formControlName="regione"
placeholder="Seleziona la regione"
showClear="true"
optionLabel="regione"
ariaLabelledBy="regione"
emptyFilterMessage="Nessuna Regione trovata"
emptyMessage="Nessuna Regione trovata"
[loading]="vm.regioniAreLoading"
[filter]="true" />
</div>
<div
*ngIf="cercaStruttureForm.controls.regione.value"
class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
>
<div
id="provincia"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
>
<div *ngIf="cercaStruttureForm.controls.regione.value"
class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
<div id="provincia"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
Provincia
</div>
<p-select
[options]="vm.province"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
name="provincia"
appendTo="body"
formControlName="provincia"
placeholder="Seleziona la provincia"
showClear="true"
optionLabel="provincia"
ariaLabelledBy="provincia"
emptyFilterMessage="Nessuna Provincia trovata"
emptyMessage="Nessuna Provincia trovata"
[loading]="vm.provinceAreLoading"
[filter]="true"
>
<p-select [options]="vm.province"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
name="provincia"
appendTo="body"
formControlName="provincia"
placeholder="Seleziona la provincia"
showClear="true"
optionLabel="provincia"
ariaLabelledBy="provincia"
emptyFilterMessage="Nessuna Provincia trovata"
emptyMessage="Nessuna Provincia trovata"
[loading]="vm.provinceAreLoading"
[filter]="true">
</p-select>
</div>
<div
*ngIf="cercaStruttureForm.controls.provincia.value"
class="flex-1 flex flex-col justify-start items-start gap-2 w-full"
>
<div
id="citta"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight"
>
<div *ngIf="cercaStruttureForm.controls.provincia.value"
class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
<div id="citta"
class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
Città
</div>
<p-select
[options]="vm.citta"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
name="citta"
appendTo="body"
formControlName="citta"
placeholder="Seleziona la città"
showClear="true"
optionLabel="comune"
ariaLabelledBy="citta"
emptyFilterMessage="Nessuna Città trovata"
emptyMessage="Nessuna Città trovata"
[loading]="vm.cittaAreLoading"
[filter]="true"
>
<p-select [options]="vm.citta"
class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
name="citta"
appendTo="body"
formControlName="citta"
placeholder="Seleziona la città"
showClear="true"
optionLabel="comune"
ariaLabelledBy="citta"
emptyFilterMessage="Nessuna Città trovata"
emptyMessage="Nessuna Città trovata"
[loading]="vm.cittaAreLoading"
[filter]="true">
</p-select>
</div>
</div>
</div>
<div
class="self-stretch flex flex-col justify-start items-start gap-6"
>
<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"
>
<div class="self-stretch flex flex-col justify-start items-start gap-6">
<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"
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"
pInputText
aria-labelledby="indirizzo"
placeholder="Inserisci l'indirizzo"
/>
<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"
formControlName="indirizzo"
pInputText
aria-labelledby="indirizzo"
placeholder="Inserisci l'indirizzo" />
</div>
</div>
<!-- <div class="self-stretch flex flex-col md:flex-row justify-end items-center gap-4">
@ -452,140 +394,124 @@
</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"
>
<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
type="submit"
[disabled]="vm.isSearching"
[loading]="vm.isSearching"
icon="pi pi-search"
[label]="
<button pButton
type="submit"
[disabled]="vm.isSearching"
[loading]="vm.isSearching"
icon="pi pi-search"
[label]="
vm.isSearching ? 'Ricerca in corso...' : 'Cerca strutture'
"
severity="primary"
class="w-full md:w-auto"
></button>
severity="primary"
class="w-full md:w-auto"></button>
</div>
</div>
</div>
<div
class="flex-auto lg:flex-2 bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[343px] w-full lg:1/2"
>
<google-map #gmap height="100%" width="100%" [options]="options">
<map-marker
#marker="mapMarker"
*ngFor="let markerOption of markerOptions; let i = index"
[options]="markerOption"
(mapClick)="openInfoWindow(marker, i)"
></map-marker>
class="flex-auto lg:flex-2 bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[343px] w-full lg:1/2">
<google-map #gmap
height="100%"
width="100%"
[options]="options">
<map-marker #marker="mapMarker"
*ngFor="let markerOption of markerOptions; let i = index"
[options]="markerOption"
(mapClick)="openInfoWindow(marker, i)"></map-marker>
<map-info-window></map-info-window>
</google-map>
</div>
</div>
</form>
<p-table
#struttureTable
*ngIf="vm.strutture !== undefined"
[totalRecords]="vm.strutture.length"
dataKey="id"
[loading]="vm.struttureAreLoading"
[value]="vm.strutture"
[columns]="cols"
[showCurrentPageReport]="!vm.struttureAreLoading"
responsiveLayout="scroll"
currentPageReportTemplate="Strutture {first} - {last} di {totalRecords}"
[paginator]="true"
[rows]="10"
[autoLayout]="false"
responsiveLayout="stack"
scrollHeight="400px"
[rowsPerPageOptions]="[10, 50, 100]"
[globalFilterFields]="[
<p-table #struttureTable
*ngIf="vm.strutture !== undefined"
[totalRecords]="vm.strutture.length"
dataKey="id"
[loading]="vm.struttureAreLoading"
[value]="vm.strutture"
[columns]="cols"
[showCurrentPageReport]="!vm.struttureAreLoading"
responsiveLayout="scroll"
currentPageReportTemplate="Strutture {first} - {last} di {totalRecords}"
[paginator]="true"
[rows]="10"
[autoLayout]="false"
responsiveLayout="stack"
scrollHeight="400px"
[rowsPerPageOptions]="[10, 50, 100]"
[globalFilterFields]="[
'struttura.nome',
'struttura.struttureTipiStrutture',
]"
>
]">
<ng-template #caption>
<div class="flex">
<p-iconfield iconPosition="left" class="ml-auto">
<p-iconfield iconPosition="left"
class="ml-auto">
<p-inputicon>
<i class="pi pi-search"></i>
</p-inputicon>
<input
pInputText
type="text"
aria-label="Filtra strutture"
(input)="applyFilterGlobal($event, 'contains')"
placeholder="Filtra strutture"
/>
<input pInputText
type="text"
aria-label="Filtra strutture"
(input)="applyFilterGlobal($event, 'contains')"
placeholder="Filtra strutture" />
</p-iconfield>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<ng-template pTemplate="header"
let-columns>
<tr>
<th
*ngFor="let col of cols"
pResizableColumn
[pSortableColumn]="col.sortField ?? ''"
class="p-table-scrollable-header"
>
<th *ngFor="let col of cols"
pResizableColumn
[pSortableColumn]="col.sortField ?? ''"
class="p-table-scrollable-header">
<div style="display: flex; align-items: center; text-wrap: nowrap">
<div>
{{ col.header }}
<p-sortIcon
*ngIf="col.sortField"
[field]="col.sortField"
></p-sortIcon>
<p-sortIcon *ngIf="col.sortField"
[field]="col.sortField"></p-sortIcon>
</div>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row let-rowIndex="rowIndex">
<ng-template pTemplate="body"
let-row
let-rowIndex="rowIndex">
<tr>
<ng-container *ngFor="let col of cols" [ngSwitch]="col.field">
<ng-container *ngFor="let col of cols"
[ngSwitch]="col.field">
<td *ngSwitchCase="'struttura.struttureTipiStrutture'">
<div>
<ng-container
*ngFor="
<ng-container *ngFor="
let item of row.struttura.struttureTipiStrutture.split(',')
"
>
<span class="font-light">{{ item.trim() }}</span
><br />
">
<span class="font-light">{{ item.trim() }}</span><br />
</ng-container>
</div>
</td>
<td *ngSwitchCase="'struttura.nome'">
<div>
<p-rating
*ngIf="row.struttura.stelline.length"
[(ngModel)]="row.struttura.stelline.length"
[readonly]="true"
/>
<p-rating *ngIf="row.struttura.stelline.length"
[(ngModel)]="row.struttura.stelline.length"
[readonly]="true" />
<p>
<b>{{ row.struttura.nome }}</b>
</p>
</div>
<div *ngIf="row.struttura.sitoWeb" class="mt-4 ont-light">
<a
class="cursor-pointer hover:underline text-primary-700"
(click)="externalLink(row.struttura.sitoWeb)"
>Sito Web</a
>
<div *ngIf="row.struttura.sitoWeb"
class="mt-4 ont-light">
<a class="cursor-pointer hover:underline text-primary-700"
(click)="externalLink(row.struttura.sitoWeb)">Sito Web</a>
</div>
</td>
<td *ngSwitchCase="'indirizzo'">
@ -593,56 +519,46 @@
<p>
{{ row.struttura.indirizzo
}}{{
row.struttura.numeroCivico
? ', ' + row.struttura.numeroCivico
: ''
row.struttura.numeroCivico
? ', ' + row.struttura.numeroCivico
: ''
}}
</p>
<p>
{{ row.struttura.cap }}
{{
row.struttura.codiceLuogo
? row.struttura.codiceLuogo.comune +
' (' +
row.struttura.codiceLuogo.siglaProvincia +
')'
: ''
row.struttura.codiceLuogo
? row.struttura.codiceLuogo.comune +
' (' +
row.struttura.codiceLuogo.siglaProvincia +
')'
: ''
}}
</p>
<div class="text-sm" *ngIf="row.struttura.cupPubblico">
<div class="text-sm"
*ngIf="row.struttura.cupPubblico">
CUP Pubblico:
<a
class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.cupPubblico }}"
>{{ row.struttura.cupPubblico }}</a
>
<a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.cupPubblico }}">{{ row.struttura.cupPubblico }}</a>
</div>
<div *ngIf="row.struttura.cupPrivato" class="text-sm">
<div *ngIf="row.struttura.cupPrivato"
class="text-sm">
CUP Privato:
<a
class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.cupPrivato }}"
>{{ row.struttura.cupPrivato }}</a
>
<a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.cupPrivato }}">{{ row.struttura.cupPrivato }}</a>
</div>
<ng-container
*ngIf="!row.struttura.cupPubblico && !row.struttura.cupPrivato"
>
<div *ngIf="row.struttura.telefono1" class="text-sm">
<ng-container *ngIf="!row.struttura.cupPubblico && !row.struttura.cupPrivato">
<div *ngIf="row.struttura.telefono1"
class="text-sm">
tel:
<a
class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.telefono1 }}"
>{{ row.struttura.telefono1 }}</a
>
<a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.telefono1 }}">{{ row.struttura.telefono1 }}</a>
</div>
<div *ngIf="row.struttura.telefono2" class="text-sm">
<div *ngIf="row.struttura.telefono2"
class="text-sm">
tel:
<a
class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.telefono2 }}"
>{{ row.struttura.telefono2 }}</a
>
<a class="cursor-pointer hover:underline text-primary-700"
href="tel:{{ row.struttura.telefono2 }}">{{ row.struttura.telefono2 }}</a>
</div>
</ng-container>
</span>
@ -650,14 +566,12 @@
<td *ngSwitchCase="'posizione'">
<div class="flex align-items-center">
<p-button
icon="pi pi-map-marker"
label="Apri in Google Maps"
[rounded]="true"
styleClass="hover:underline text-primary-700"
(onClick)="calculateMapsLink(row)"
[text]="true"
/>
<p-button icon="pi pi-map-marker"
label="Apri in Google Maps"
[rounded]="true"
styleClass="hover:underline text-primary-700"
(onClick)="calculateMapsLink(row)"
[text]="true" />
</div>
</td>
</ng-container>