feat(fe-piattaforma): updates 20240415

fe-piattaforma/public/assets/indirizzi/province.json

@@ -14,6 +14,11 @@
     "sigla": "AN",
     "regione": "Marche"
   },
+  {
+    "nome": "Aosta",
+    "sigla": "AO",
+    "regione": "Aosta"
+  },
   {
     "nome": "Arezzo",
     "sigla": "AR",
@@ -99,11 +104,6 @@
     "sigla": "CB",
     "regione": "Molise"
   },
-  {
-    "nome": "Carbonia-Iglesias",
-    "sigla": "CI",
-    "regione": "Sardegna"
-  },
   {
     "nome": "Caserta",
     "sigla": "CE",
@@ -269,11 +269,6 @@
     "sigla": "MT",
     "regione": "Basilicata"
   },
-  {
-    "nome": "Medio Campidano",
-    "sigla": "VS",
-    "regione": "Sardegna"
-  },
   {
     "nome": "Messina",
     "sigla": "ME",
@@ -309,16 +304,6 @@
     "sigla": "NU",
     "regione": "Sardegna"
   },
-  {
-    "nome": "Ogliastra",
-    "sigla": "OG",
-    "regione": "Sardegna"
-  },
-  {
-    "nome": "Olbia-Tempio",
-    "sigla": "OT",
-    "regione": "Sardegna"
-  },
   {
     "nome": "Oristano",
     "sigla": "OR",
@@ -459,6 +444,11 @@
     "sigla": "SO",
     "regione": "Lombardia"
   },
+  {
+    "nome": "Sud Sardegna",
+    "sigla": "SU",
+    "regione": "Sardegna"
+  },
   {
     "nome": "Taranto",
     "sigla": "TA",
@@ -504,11 +494,6 @@
     "sigla": "UD",
     "regione": "Friuli-Venezia Giulia"
   },
-  {
-    "nome": "Valle d'Aosta/Vallée d'Aoste",
-    "sigla": "AO",
-    "regione": "Valle d'Aosta/Vallée d'Aoste"
-  },
   {
     "nome": "Varese",
     "sigla": "VA",

fe-piattaforma/src/components/AdministrativeArea/Entities/Headquarters/AccordionAddressList/AccordionAddress/AccordionAddress.tsx

@@ -142,7 +142,7 @@ const AccordionAddress: React.FC<AccordionAddressI> = ({
             detailAccordion && 'accordion-container__header-acc',
             'mr-auto'
           )}
-        >{`Indirizzo ${index}`}</span>
+        >{`Indirizzo ${index} *`}</span>
         {canBeDeleted && !isReadOnly && (
           <Button
             onClick={(e) => {

fe-piattaforma/src/components/AdministrativeArea/Entities/Headquarters/ManageHeadquarter/manageHeadquarter.tsx

@@ -108,6 +108,8 @@ const ManageHeadquarter: React.FC<ManageHeadquarterI> = ({
   const dispatch = useDispatch();
   // const modalId = useAppSelector(selectModalId);
   const open = useAppSelector(selectModalState);
+  const MIN_ADDRESSES_REQUIRED =
+    'Per creare una sede itinerante, compila le informazioni relative ad almeno due indirizzi.';
 
   useEffect(() => {
     if (creation && open) {
@@ -287,6 +289,11 @@ const ManageHeadquarter: React.FC<ManageHeadquarterI> = ({
               onChange={(e) => setMovingHeadquarter(e.target.checked)}
             />
           </div>
+          <div>
+            {movingHeadquarter && (
+              <span className='d-block no-wrap'>{MIN_ADDRESSES_REQUIRED}</span>
+            )}
+          </div>
         </Form.Row>
       </Form>
 

fe-piattaforma/src/components/CitizenRegistration/DescriptionForAddingCitizen.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+export const DescriptionForAddingCitizen = () => {
+  return (
+    <>
+      Inserisci il <strong>codice fiscale</strong> del cittadino e verifica che
+      sia già registrato sulla piattaforma.
+      <br />
+      Se non è presente, compila la sua scheda.
+    </>
+  );
+};

fe-piattaforma/src/components/Form/form.scss

@@ -106,6 +106,7 @@ input > span {
 .bootstrap-select {
   &__menu {
     margin-top: 0 !important;
+    z-index: 1050 !important;
   }
 
   &-value {
@@ -243,6 +244,10 @@ input > span {
   background-color: color('progress-bar-line');
 }
 
+.form-check [type="radio"]:disabled:not(:checked) + label::before{
+  border-color: #BFC2C9;
+}
+
 .form-check [type='radio']:disabled:checked + label::after {
   border-color: #d1d6db;
   background-color: #d1d6db;
@@ -252,6 +257,10 @@ input > span {
   background-color: #e6e9f2;
 }
 
+.form-check [type=checkbox]:disabled:checked + label::after {
+  background-color: #b7b8bb;
+}
+
 .toggles label input[type='checkbox']:checked + .lever:after {
   background-color: color('progress-bar-line');
 }

fe-piattaforma/src/components/Form/select.tsx

@@ -28,6 +28,7 @@ export interface SelectI
   isDisabled?: boolean;
   position?: 'top' | 'bottom' | 'auto';
   shortDropdownMenu?: boolean;
+  responsive?:boolean;
 }
 
 const Select: React.FC<SelectI> = (props) => {
@@ -46,9 +47,11 @@ const Select: React.FC<SelectI> = (props) => {
     position = 'auto',
     shortDropdownMenu = false,
     placeholder = 'Seleziona',
+    onMenuScrollToBottom
   } = props;
   const [selectedOption, setSelectedOption] = useState<OptionType>();
 
+
   useEffect(() => {
     if (
       onInputChange &&
@@ -61,6 +64,7 @@ const Select: React.FC<SelectI> = (props) => {
   }, [selectedOption]);
 
   useEffect(() => {
+
     if (options.length) {
       const newSelectedOption = options.find(
         (opt) =>
@@ -129,6 +133,7 @@ const Select: React.FC<SelectI> = (props) => {
         options={options}
         value={selectedOption}
         menuPlacement={position}
+        onMenuScrollToBottom={onMenuScrollToBottom}
         color='primary'
         className={clsx(
           (value && !isDisabled ? 'border-select-value' : '') ||

fe-piattaforma/src/components/General/AddressForm/AddressForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Form from '../../Form/form';
 import Input from '../../Form/input';
 import axios from 'axios';
@@ -51,69 +51,82 @@ const AddressForm: React.FC<AddressFormI> = ({
   const [cities, setCities] = useState<City[]>([]);
   const [CAPS, setCAPS] = useState<string[]>([]);
 
+  const initValues = useCallback(() => {
+    axios('/assets/indirizzi/province.json')
+      .then((response) => {
+        const provs = [...response.data];
+        setProvinces(
+          provs.map((province) => ({
+            name: province.nome,
+            state: province.regione,
+          }))
+        );
+        if (province && state) {
+          axios(`/assets/indirizzi/comuni/${state.toLowerCase()}.json`)
+            .then((response) => {
+              const cits = [...response.data];
+              const filteredCities = cits.filter(
+                (city) =>
+                  city.provincia.nome.toLowerCase() === province.toLowerCase()
+              );
+              setCities(
+                filteredCities.map((city) => ({
+                  name: city.nome,
+                  province: city.provincia.nome,
+                  cap: city.cap,
+                }))
+              );
+              const currentCity = filteredCities.find((c) => c.nome === city);
+              if (currentCity) {
+                setCAPS([...currentCity.cap]);
+              }
+            })
+            .catch((error) => {
+              console.error('Failed to fetch cities', error);
+            });
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to fetch provinces', error);
+      });
+  }, [city, province, state]);
+
   useEffect(() => {
     initValues();
-  }, [province, city]);
-
-  const initValues = async () => {
-    const provs = [...(await axios('/assets/indirizzi/province.json')).data];
-    if (province && state) {
-      const cits = [
-        ...(await axios(`/assets/indirizzi/comuni/${state.toLowerCase()}.json`))
-          .data,
-      ];
-
-      setCities(
-        cits
-          .filter(
-            (city: any) =>
-              city.provincia.nome.toLowerCase() === province.toLowerCase()
-          )
-          .map((city: any) => ({
+  }, [province, city, initValues]);
+
+  const onSelectProvince = (value: string) => {
+    console.log(value, 'il value di select');
+    value = setProvinceAndRegion(value);
+    const [selectedProvince, selectedRegion] = value.split('/');
+    const selectedState = selectedRegion.replace(/\s+/g, '-').toLowerCase();
+    onAddressChange(address, selectedProvince, selectedState, city, CAP);
+
+    axios(`/assets/indirizzi/comuni/${selectedState}.json`)
+      .then((response) => {
+        const citiesData = response.data.filter(
+          (city: any) =>
+            city.provincia.nome.toLowerCase() === selectedProvince.toLowerCase()
+        );
+        setCities(
+          citiesData.map((city: any) => ({
             name: city.nome,
             province: city.provincia.nome,
             cap: city.cap,
           }))
-      );
-
-      if (city) {
-        setCAPS([...cits.find((c) => c.nome === city).cap]);
-      }
-    }
-
-    setProvinces(
-      provs.map((province: any) => ({
-        name: province.nome,
-        state: province.regione,
-      }))
-    );
+        );
+      })
+      .catch((error) => {
+        console.error('Failed to fetch cities for selected province', error);
+      });
   };
 
-  const onSelectProvince = async (value: string) => {
-    onAddressChange(
-      address,
-      value.split('/')[0],
-      value.split('/')[1],
-      city,
-      CAP
-    );
-    const res = await axios(
-      `/assets/indirizzi/comuni/${value.split('/')[1]}.json`
-    );
-    setCities(
-      res.data
-        .filter(
-          (city: any) =>
-            city.provincia.nome.toLowerCase() ===
-            value.split('/')[0].toLowerCase()
-        )
-        .map((city: any) => ({
-          name: city.nome,
-          province: city.provincia.nome,
-          cap: city.cap,
-        }))
-    );
-  };
+  const setProvinceAndRegion = useCallback((value: string): string => {
+    if (value.includes('Bolzano')) {
+      return 'Bolzano/Trentino-Alto Adige';
+    }
+    return value;
+  }, []);
 
   const onSelectCity = (value: string) => {
     const selected = cities.find(
@@ -128,7 +141,6 @@ const AddressForm: React.FC<AddressFormI> = ({
         selected.name,
         selected.cap.length === 1 ? selected.cap[0] : ''
       );
-
       setCAPS([...selected.cap]);
     }
   };