fix css e accessibilità, luogo required

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

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

src/api/services/strutture-pubbliche-api-client.ts

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

src/app/modules/public/strutture-pubbliche/strutture-pubbliche.component.html

@@ -3,161 +3,202 @@
   <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="poseidon-layout"
+           alt="logo-consorzio-musa"
            class="block mx-auto"
            style="height: 50px" />
     </div>
     <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.
-      </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
-      </div>
+      </h2>
     </div>
   </div>
 
   <p-divider class="w-full my-0!"></p-divider>
   <form [formGroup]="cercaStruttureForm"
         (ngSubmit)="getStrutture()">
-    <div class="flex flex-wrap gap-4 items-center">
+    <div class="flex flex-wrap gap-8 md:gap-12 items-start">
-      <p-dropdown [options]="vm.tipologieStrutture"
+      <div
-                  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-1 bg-surface-0 dark:bg-surface-950 flex flex-col justify-start items-start gap-8 md:gap-12 w-full">
-                  name="tiplogiaStruttura"
+        <div class="self-stretch flex flex-col justify-start items-start gap-6">
-                  appendTo="body"
+          <div class="self-stretch flex flex-col justify-start items-start gap-6">
-                  formControlName="tipologiaStruttura"
+            <div
-                  placeholder="Seleziona il tipo struttura"
+                 class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-lg md:text-xl font-semibold leading-tight">
-                  showClear="true"
+              Strutture Convenzionate</div>
-                  optionLabel="descrizione"
+            <div class="self-stretch flex flex-col justify-start items-start gap-4">
-                  optionValue="codice"
+              <div class="self-stretch flex flex-col justify-start items-start gap-2">
-                  [filter]="true"></p-dropdown>
+                <div id="tipoStruttura"
-      <!-- {{vm.filteredLuoghiEsteso | json}}
+                     class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
-      {{cercaStruttureForm.controls['luogo'].value | json}} -->
+                  Tipologia struttura</div>
-      <!-- <p-autocomplete [(ngModel)]="modelLuogo"
+                <p-dropdown [options]="vm.tipologieStrutture"
-                      [ngModelOptions]="{ standalone: true }"
+                            class="flex-auto lg:flex-1 lg:mt-0 w-full mr-0 lg:mr-1 text-surface-900 dark:text-surface-0"
-                      [suggestions]="vm.filteredLuoghiEsteso"
+                            name="tiplogiaStruttura"
-                      (completeMethod)="fetchLuogo($event, 1)"
+                            appendTo="body"
-                      optionLabel="tipo" /> -->
+                            formControlName="tipologiaStruttura"
-      <p-autoComplete #acSt formControlName="luogo"
+                            placeholder="Seleziona il tipo struttura"
-                      [suggestions]="vm.filteredLuoghiEsteso"
+                            showClear="true"
-                      (completeMethod)="fetchLuogo($event, 1)"
+                            optionLabel="descrizione"
-                      (onSelect)="state.set({ filteredLuoghiEsteso: [] })"
+                            optionValue="codice"
-                      (onHide)="checkLuogo()"
+                            ariaLabelledBy="tipoStruttura"
-                      styleClass="w-full"
+                            [filter]="true"></p-dropdown>
-                      inputStyleClass="w-full"
+              </div>
-                      placeholder="Cerca per città, provincia, stato o regione"
-                      appendTo="body"
-                      minLength="1"
-                      [delay]="500"
-                      emptyMessage="Nessun luogo trovato"
-                      [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"
-                      dataKey="dataKey"
-                      optionLabel="luogo">
-        <ng-template let-luogo
-                     #item>
-          <div class="flex align-items-center">
-            @if (luogo.tipo === 'comune') {
-            <fa-icon class="fs-16 mr-3 text-color-secondary"
-                     [icon]="faCity"></fa-icon>
-            <div class="flex flex-col">
-              <span>{{ luogo.comune
-                }}{{
-                luogo.codiceStato === 'ITA'
-                ? ' (' + luogo.siglaProvincia + ')'
-                : ''
-                }}</span>
-              <small class="text-sm text-color-secondary">
-                {{
-                luogo.codiceStato === 'ITA'
-                ? 'Comune'
-                : ('Stato estero' | titlecase)
-                }}{{
-                luogo.codiceStato === 'ITA'
-                ? ': Italia → ' +
-                luogo.regione +
-                ' → ' +
-                luogo.provincia +
-                ' → ' +
-                luogo.comune
-                : ''
-                }}</small>
             </div>
-            } @else if (luogo.tipo === 'stato') {
+
-            <fa-icon class="fs-16 mr-3 text-color-secondary"
+            <div class="self-stretch flex flex-col md:flex-row justify-start items-start gap-4">
-                     [icon]="faGlobeEurope"></fa-icon>
+              <div class="flex-1 flex flex-col justify-start items-start gap-2 w-full">
-            <div class="flex flex-col">
+                <div id="luogoAutocomplete"
-              <span>{{ luogo.stato }}</span>
+                     class="self-stretch justify-start text-surface-900 dark:text-surface-0 text-base font-normal leading-tight">
-              <small class="text-sm text-color-secondary">
+                  Luogo<small class="text-red-600">*
-                {{
+                    @if (
-                luogo.codiceStato === 'ITA'
+                    cercaStruttureForm.controls.luogo.errors?.['required'] &&
-                ? ('Stato' | titlecase)
+                    vm.cercaStruttureFormSubmitted
-                : ('Stato estero' | titlecase)
+                    ) {
-                }}</small>
+                    Luogo obbligatorio
+                    }
+                  </small></div>
+                <p-autoComplete #acSt
+                                formControlName="luogo"
+                                [suggestions]="vm.filteredLuoghiEsteso"
+                                (completeMethod)="fetchLuogo($event, 1)"
+                                (onSelect)="state.set({ filteredLuoghiEsteso: [] })"
+                                (onHide)="checkLuogo()"
+                                styleClass="w-full"
+                                inputStyleClass="w-full"
+                                placeholder="Cerca per città, provincia o regione"
+                                appendTo="body"
+                                minLength="1"
+                                [delay]="500"
+                                emptyMessage="Nessun luogo trovato"
+                                [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"
+                                [ngClass]="{
+                                            'ng-invalid ng-dirty':
+                                              cercaStruttureForm.controls.luogo.errors?.['required'] &&
+                                                      vm.cercaStruttureFormSubmitted
+                                          }"
+                                dataKey="dataKey"
+                                ariaLabelledBy="luogoAutocomplete"
+                                optionLabel="luogo">
+                  <ng-template let-luogo
+                               #item>
+                    <div class="flex align-items-center">
+                      @if (luogo.tipo === 'comune') {
+                      <fa-icon class="fs-16 mr-3 text-color-secondary"
+                               [icon]="faCity"></fa-icon>
+                      <div class="flex flex-col">
+                        <span>{{ luogo.comune
+                          }}{{
+                          luogo.codiceStato === 'ITA'
+                          ? ' (' + luogo.siglaProvincia + ')'
+                          : ''
+                          }}</span>
+                        <small class="text-sm text-color-secondary">
+                          {{
+                          luogo.codiceStato === 'ITA'
+                          ? 'Comune'
+                          : ('Stato estero' | titlecase)
+                          }}{{
+                          luogo.codiceStato === 'ITA'
+                          ? ': Italia → ' +
+                          luogo.regione +
+                          ' → ' +
+                          luogo.provincia +
+                          ' → ' +
+                          luogo.comune
+                          : ''
+                          }}</small>
+                      </div>
+                      } @else if (luogo.tipo === 'stato') {
+                      <fa-icon class="fs-16 mr-3 text-color-secondary"
+                               [icon]="faGlobeEurope"></fa-icon>
+                      <div class="flex flex-col">
+                        <span>{{ luogo.stato }}</span>
+                        <small class="text-sm text-color-secondary">
+                          {{
+                          luogo.codiceStato === 'ITA'
+                          ? ('Stato' | titlecase)
+                          : ('Stato estero' | titlecase)
+                          }}</small>
+                      </div>
+                      } @else if (luogo.tipo === 'regione') {
+                      <fa-icon class="fs-16 mr-3 text-color-secondary"
+                               [icon]="faMapLocationDot"></fa-icon>
+                      <div class="flex flex-col">
+                        <span>{{ luogo.regione }}</span>
+                        <small class="text-sm text-color-secondary">
+                          Regione
+                          {{ ': Italia → ' + luogo.regione }}</small>
+                      </div>
+                      } @else if (luogo.tipo === 'provincia') {
+                      <fa-icon class="fs-16 mr-3 text-color-secondary"
+                               [icon]="faMapLocationDot"></fa-icon>
+                      <div class="flex flex-col">
+                        <span>{{ luogo.provincia }}</span>
+                        <small class="text-sm text-color-secondary">
+                          Provincia
+                          {{
+                          ': Italia → ' + luogo.regione + ' → ' + luogo.provincia
+                          }}</small>
+                      </div>
+                      }
+                    </div>
+                  </ng-template>
+                </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"
+                       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>
-            } @else if (luogo.tipo === 'regione') {
-            <fa-icon class="fs-16 mr-3 text-color-secondary"
-                     [icon]="faMapLocationDot"></fa-icon>
-            <div class="flex flex-col">
-              <span>{{ luogo.regione }}</span>
-              <small class="text-sm text-color-secondary">
-                Regione
-                {{ ': Italia → ' + luogo.regione }}</small>
-            </div>
-            } @else if (luogo.tipo === 'provincia') {
-            <fa-icon class="fs-16 mr-3 text-color-secondary"
-                     [icon]="faMapLocationDot"></fa-icon>
-            <div class="flex flex-col">
-              <span>{{ luogo.provincia }}</span>
-              <small class="text-sm text-color-secondary">
-                Provincia
-                {{
-                ': Italia → ' + luogo.regione + ' → ' + luogo.provincia
-                }}</small>
-            </div>
-            }
           </div>
-        </ng-template>
-      </p-autoComplete>
 
-      <input type="text"
+          <div class="self-stretch flex flex-col md:flex-row justify-end items-center gap-4">
-             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"
+            <button pButton
-             formControlName="indirizzo"
+                    severity="secondary"
-             pInputText
+                    class="w-full md:w-auto"
-             placeholder="Inserisci l'indirizzo" />
+                    (click)="cercaStruttureForm.reset()"
-
+                    [outlined]="true">
-      <button pButton
+              <span pButtonLabel>Annulla filtri</span>
-              type="submit"
+            </button>
-              [disabled]="vm.isSearching"
+            <button pButton
-              [loading]="vm.isSearching"
+                    type="submit"
-              icon="pi pi-search"
+                    [disabled]="vm.isSearching"
-              [label]="vm.isSearching ? 'Ricerca in corso...' : 'Cerca'"
+                    [loading]="vm.isSearching"
-              severity="primary"
+                    icon="pi pi-search"
-              class="shrink-0"></button>
+                    [label]="vm.isSearching ? 'Ricerca in corso...' : 'Cerca strutture'"
+                    severity="primary"
+                    class="shrink-0"></button>
+          </div>
+        </div>
+      </div>
+      <div
+           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
+                    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>
-    @if (
-    cercaStruttureForm.errors?.['atLeastOneRequired'] &&
-    vm.cercaStruttureFormSubmitted
-    ) {
-    <small class="text-red-600">Seleziona almeno un filtro.</small>
-    }
   </form>
 
-  <div
-       class="bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[400px]">
-    <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>
-
   <p-table #struttureTable
+           *ngIf="vm.strutture !== undefined"
            [totalRecords]="vm.strutture.length"
            dataKey="id"
            [loading]="vm.struttureAreLoading"
@@ -182,6 +223,7 @@
           </p-inputicon>
           <input pInputText
                  type="text"
+                 aria-label="Filtra strutture"
                  (input)="applyFilterGlobal($event, 'contains')"
                  placeholder="Filtra strutture" />
         </p-iconfield>
@@ -218,7 +260,7 @@
             <span class="font-light"> <b>{{ row.struttura.nome }}</b></span>
             <div *ngIf="row.struttura.sitoWeb"
                  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>
             </div>
           </td>
@@ -235,26 +277,26 @@
               <div class="text-sm"
                    *ngIf="row.struttura.cupPubblico">
                 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>
               </div>
               <div *ngIf="row.struttura.cupPrivato"
                    class="text-sm">
                 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>
               </div>
               <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-600"
+                  <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">
                   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>
                 </div>
               </ng-container>
@@ -266,6 +308,7 @@
               <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>

src/app/modules/public/strutture-pubbliche/strutture-pubbliche.component.ts

@@ -5,6 +5,7 @@ import {
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
+  Validators,
 } from '@angular/forms';
 import {
   GoogleMap,
@@ -46,19 +47,17 @@ import {
   tap,
 } from 'rxjs';
 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 { StrutturePubblicheService } from './strutture-pubbliche.service';
 
 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 cercaStruttureFormValue = cercaStruttureForm['value'];
@@ -151,7 +150,7 @@ export class StrutturePubblicheComponent {
   ) {
     this.model$ = this.state.select();
     this.state.set({
-      strutture: [],
+      strutture: undefined,
       tipologieStrutture: [],
       filteredLuoghiEsteso: [],
 
@@ -222,28 +221,27 @@ export class StrutturePubblicheComponent {
     const params: StrutturePubblicheControllerFindManyStrutture$Params = {
       indirizzo: _form.indirizzo,
       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;
 
     const strutture$ = this.strutturePubblicheService.getStrutture(params).pipe(
-      catchError(() => {
+      catchError((err) => {
         this.messageService.add({
           severity: 'error',
           life: 5000,
           summary: 'Attenzione!',
           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[]);
       }),
       tap((res) => {
         this.cercaStruttureForm.enable();
         if (!res) return;
-        this.state.set(() => ({
-          cercaStruttureFormSubmitted: false,
-        }));
         this.gMapMarkers(res, false);
       }),
       map((res) => ({ strutture: res })),
@@ -290,6 +288,9 @@ export class StrutturePubblicheComponent {
                   }
                   </p>
                 </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>
               `;
       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&destination=45.4692422,9.16562&travelmode=driving
 
@@ -436,13 +437,14 @@ export class StrutturePubblicheComponent {
     }
 
     url = `${url}&travelmode=${travelMode}`;
-    window.open(url, '_blank');
+
+    if (open) window.open(url, '_blank');
+    return url;
   }
 
   checkLuogo() {
     //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;
-    console.log('luogo', luogo);
     if (typeof luogo === 'string') {
       this.cercaStruttureForm.controls['luogo'].setValue(null);
     }