fix autocomplete con workaround

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

@@ -31,23 +31,31 @@
                   optionLabel="descrizione"
                   optionValue="codice"
                   [filter]="true"></p-dropdown>
-
-      <p-autoComplete formControlName="luogo"
+      <!-- {{vm.filteredLuoghiEsteso | json}}
+      {{cercaStruttureForm.controls['luogo'].value | json}} -->
+      <!-- <p-autocomplete [(ngModel)]="modelLuogo"
+                      [ngModelOptions]="{ standalone: true }"
+                      [suggestions]="vm.filteredLuoghiEsteso"
+                      (completeMethod)="fetchLuogo($event, 1)"
+                      optionLabel="tipo" /> -->
+      <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, stato o regione"
                       appendTo="body"
-                      minLength="3"
-                      delay="500"
-                      [forceSelection]="true"
-                      [showClear]="false"
+                      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"
-                      field="luogo">
+                      dataKey="dataKey"
+                      optionLabel="luogo">
         <ng-template let-luogo
-                     pTemplate="item">
+                     #item>
           <div class="flex align-items-center">
             @if (luogo.tipo === 'comune') {
             <fa-icon class="fs-16 mr-3 text-color-secondary"
@@ -136,7 +144,7 @@
   </form>
 
   <div
-       class="bg-surface-50 dark:bg-surface-900 rounded-2xl border-2 border-dashed border-surface-200 dark:border-surface-700 h-[450px]">
+       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%"
@@ -160,6 +168,9 @@
            currentPageReportTemplate="Strutture {first} - {last} di {totalRecords}"
            [paginator]="true"
            [rows]="10"
+           [autoLayout]="false"
+           responsiveLayout="stack"
+           scrollHeight="400px"
            [rowsPerPageOptions]="[10, 50, 100]"
            [globalFilterFields]="['struttura.nome']">
     <ng-template #caption>
@@ -204,7 +215,7 @@
             <p-rating *ngIf="row.struttura.stelline.length"
                       [(ngModel)]="row.struttura.stelline.length"
                       [readonly]="true" />
-            <span class="font-light"> {{ row.struttura.nome }}</span>
+            <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"

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

@@ -66,7 +66,7 @@ export type cercaStruttureFormValue = cercaStruttureForm['value'];
 export interface CercaStruttureComponentState {
   strutture: StrutturePubblicheResDto[];
   tipologieStrutture: TipoStruttura[];
-  filteredLuoghiEsteso: LuogoRes[];
+  filteredLuoghiEsteso: Array<LuogoRes & { dataKey: string }>;
 
   cercaStruttureFormSubmitted: boolean;
   tipologieStruttureAreLoading: boolean;
@@ -125,6 +125,8 @@ export class StrutturePubblicheComponent {
   faHospital = faHospital;
   struttureConCoords: StrutturePubblicheResDto[] = [];
 
+  modelLuogo!: LuogoRes | null;
+
   cols: TableColumn[] = [
     {
       header: 'Strutture',
@@ -185,13 +187,23 @@ export class StrutturePubblicheComponent {
     event: { originalEvent: Event; query: string },
     flagAttivo?: number,
   ) {
+    if (!event.query || event.query.length < 3) {
+      this.state.set({ filteredLuoghiEsteso: [] });
+      return;
+    }
     const fetchCities$ = this.strutturePubblicheService
       .getLuoghiEsteso(event.query, flagAttivo)
       .pipe(
         catchError((err) => {
           return of(null);
         }),
-        map((res) => ({ filteredLuoghiEsteso: res?.rows })),
+        map((res) => ({
+          filteredLuoghiEsteso:
+            res?.rows.map((res) => ({
+              ...res,
+              dataKey: res.tipo + ' → ' + res.luogo,
+            })) ?? [],
+        })),
       );
     this.state.connect(fetchCities$);
   }
@@ -422,4 +434,13 @@ export class StrutturePubblicheComponent {
     url = `${url}&travelmode=${travelMode}`;
     window.open(url, '_blank');
   }
+
+  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);
+    }
+  }
 }