feat:(monitoraggio-caricamenti): modifiche grafiche filtri ricerca av…

…anzata 20241018
teamdigitale · Oct 18, 2024 · bff80aa · bff80aa
1 parent 11b8681
commit bff80aa
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 31 deletions.
diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.scss
@@ -67,8 +67,9 @@
 
     .chip {
         border: 1px solid #dfe4f2 !important;
-        .icon{
-            fill:#5C6F81;
+
+        .icon {
+            fill: #5C6F81;
         }
     }
 }
@@ -140,26 +141,28 @@ input#dateInputDataFine {
 .chipRemove .clickable-area {
     pointer-events: auto;
     cursor: pointer !important;
-    :hover{
+
+    :hover {
         background-color: transparent !important;
     }
-    
+
 }
 
-.chip:hover:not(.chip-disabled){
+.chip:hover:not(.chip-disabled) {
     fill: #06c !important;
     background-color: #fcfdff;
 }
 
-.chip-label{
+.chip-label {
     color: #5C6F81;
 }
 
-.chip:hover:not(.chip-disabled) .chip-label{
+.chip:hover:not(.chip-disabled) .chip-label {
     color: #5C6F81;
 }
 
-.chip:hover:not(.chip-disabled) button .icon, .chip:hover:not(.chip-disabled)>.icon{
+.chip:hover:not(.chip-disabled) button .icon,
+.chip:hover:not(.chip-disabled)>.icon {
     fill: #5C6F81
 }
 
@@ -168,9 +171,58 @@ input#dateInputDataFine {
     &__single-value {
         color: #0066CC !important;
         font-weight: 600 !important;
-    
+
         &--is-disabled {
-          color: #0066CC !important;
+            color: #0066CC !important;
         }
-      }
+    }
+}
+
+.customArrowSelect {
+    position: relative;
+    /* Per consentire al ::after di posizionarsi rispetto al contenitore */
+}
+
+.customArrowSelect::after {
+    content: '';
+    background-image: url('../../../../public/assets/img/it-expand-primary.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    width: 30px;
+    /* Regola la dimensione secondo necessità */
+    height: 30px;
+    /* Regola la dimensione secondo necessità */
+    position: absolute;
+    right: 10px;
+    /* Regola la distanza dal bordo destro */
+    top: 50%;
+    transform: translateY(-50%);
+    /* Per centrare verticalmente */
+    pointer-events: none;
+    fill: #0066CC;
+}
+
+.collapse-header {
+    display: inline !important;
+
+    button::before {
+        line-height: 2rem !important;
+    }
+}
+
+.collapse-body{
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);
+}
+
+// .collapsed::before{
+//     line-height: 2rem !important;
+// }
+
+.custom-accordion {
+    span {
+        font-size: 24px;
+        font-weight: 600px;
+    }
+
 }
diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoring.tsx
@@ -179,7 +179,7 @@ const Monitoring: React.FC<MonitoringI> = ({
       <Accordion title={'Ricerca avanzata'} className="custom-accordion" opened={true}>
         <MonitoringSearchFilters onSearch={fetchData} formValues={formValues} setFormValues={setFormValuesFunction}/>
       </Accordion>
-      <div style={{ margin: '50px' }} />
+      <div style={{ margin: '50px'}} />
 
       <span className="results"><b>Risultati</b> ({numeroRisultati})</span>
 

diff --git a/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx b/fe-piattaforma/src/pages/administrator/MonitoraggioCaricamenti/monitoringSearchFilters.tsx
@@ -255,7 +255,7 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
       <div
         className={clsx(
           {
-            'd-flex flex-row': isSearchable
+            'd-flex flex-row': !isSearchable
           },
           'col-12 col-lg-6',
           'form-group',
@@ -286,8 +286,10 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
           // color='primary'
           className={clsx(
             {
-              'col-11 pl-0 ': isSearchable,
-              'deleteArrowInSelect': isDisabled || isSearchable
+              'col-12 pl-0 ': isSearchable,
+              'col-12 pl-0  ': !isSearchable,
+              'deleteArrowInSelect': isDisabled || isSearchable || !isSearchable,
+              'customArrowSelect': !isSearchable && !isDisabled
             }
           )}
           classNamePrefix={clsx(
@@ -300,21 +302,6 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
           {...(isSearchable && { menuIsOpen: enteInputValue.length > 3 })}
           onInputChange={(value) => setEnteInputValue(value)}
         />
-        {isSearchable &&
-          <div style={{
-            backgroundColor: (formValues?.intervento?.value != '' || formValues?.programma?.value != '' || formValues?.progetto?.value != '') ? '#e6e9f2' : 'transparent',
-            height: '45px',
-          }}>
-            <Icon
-              color='primary'
-              icon='it-search'
-              size=''
-              id='search-icon'
-              aria-label='Cerca'
-              aria-hidden
-            />
-          </div>
-        }
       </div>
     )
   };
@@ -349,7 +336,9 @@ const MonitoringSearchFilters: React.FC<MonitoringSearchFilterI> = ({ formValues
   return (
     <Form id='form-categories' className='mt-3 pb-5'>
       <Form.Row className='justify-content-between px-0 px-lg-5 mx-2'>
-        {renderSelect('ente', 'Ente', multiOptions, true, handleSelectChange, "Inizia a scrivere il nome dell'ente...", formValues?.intervento?.value != '' || formValues?.programma?.value != '' || formValues?.progetto?.value != '')}
+        {renderSelect('ente', 'Ente', multiOptions, true, handleSelectChange,
+           "Inizia a scrivere il nome dell'ente...",
+            formValues?.intervento?.value != '' || formValues?.programma?.value != '' || formValues?.progetto?.value != '')}
         {renderSelect('intervento', 'Intervento', [
           { value: 'rfd', label: 'RFD' },
           { value: 'scd', label: 'SCD' },