feat(fe-piattaforma): fe updates 07142022

teamdigitale · Jul 14, 2022 · 6af2bad · 6af2bad
1 parent e55de5e
commit 6af2bad
Show file tree

Hide file tree

Showing 52 changed files with 1,151 additions and 671 deletions.
diff --git a/fe-piattaforma/src/components/AccordionRow/accordionRow.tsx b/fe-piattaforma/src/components/AccordionRow/accordionRow.tsx
@@ -75,14 +75,14 @@ const AccordionRow: React.FC<AccordionRowI> = ({
         </Button>
       </div>
       <div>
-        {innerInfo?.['default_SCD'] && innerInfo?.['default_RFD'] ? (
+        {innerInfo?.['defaultSCD'] && innerInfo?.['defaultRFD'] ? (
           <div className='d-flex flex-row justify-content-center'>
             <div className='d-flex flex-row mr-2'>
-              {innerInfo['default_SCD']}{' '}
+              {innerInfo['defaultSCD']}{' '}
               <span className='ml-2'>Default SCD</span>
             </div>
             <div className='d-flex flex-row ml-2'>
-              {innerInfo['default_RFD']}{' '}
+              {innerInfo['defaultRFD']}{' '}
               <span className='ml-2'>Default RFD</span>
             </div>
           </div>
@@ -101,7 +101,7 @@ const AccordionRow: React.FC<AccordionRowI> = ({
         >
           <div className='d-flex flex-column pl-4'>
             {Object.keys(innerInfo)
-              .filter((el) => el !== 'default_SCD' && el !== 'default_RFD')
+              .filter((el) => el !== 'defaultSCD' && el !== 'defaultRFD')
               .map((x, index) => (
                 <div className='info-row' key={index}>
                   <span className='text-uppercase font-weight-semibold info-title'>

diff --git a/fe-piattaforma/src/components/CardProfile/cardProfile.tsx b/fe-piattaforma/src/components/CardProfile/cardProfile.tsx
@@ -19,9 +19,7 @@ interface CardProfileI extends CardProps {
 }
 
 const CardProfile: React.FC<CardProfileI> = (props) => {
-  const {
-    className, activeProfile, user = {}, profile = {}
-  } = props;
+  const { className, activeProfile, user = {}, profile = {} } = props;
 
   const device = useAppSelector(selectDevice);
 

diff --git a/fe-piattaforma/src/components/DetailLayout/detailLayout.tsx b/fe-piattaforma/src/components/DetailLayout/detailLayout.tsx
@@ -27,14 +27,14 @@ interface DetailLayoutI {
     title: string;
     status: string;
     upperTitle: {
-      icon: string | any;
+      icon: string;
       text: string;
     };
     subTitle?: string;
     headingRole?: boolean;
     iconAvatar?: boolean;
-    name?: string;
-    surname?: string;
+    name?: string | undefined;
+    surname?: string | undefined;
   };
   itemsList?: ItemsListI | null | undefined;
   showItemsList?: boolean;

diff --git a/fe-piattaforma/src/components/DropdownFilter/dropdownFilter.scss b/fe-piattaforma/src/components/DropdownFilter/dropdownFilter.scss
@@ -15,6 +15,12 @@
     }
   }
 
+  &__larger {
+    .popover.show {
+      width: 250px;
+    }
+  }
+
   &__search-tooltip {
     max-height: 45px;
   }

diff --git a/fe-piattaforma/src/components/DropdownFilter/dropdownFilter.tsx b/fe-piattaforma/src/components/DropdownFilter/dropdownFilter.tsx
@@ -33,14 +33,30 @@ const DropdownFilter: React.FC<DropdownFilterI> = (props) => {
     values = [],
     className,
     id,
-    handleOnSearch,
+    // handleOnSearch,
     valueSearch,
   } = props;
   const [open, setOpen] = useState(false);
   const [checkedOptions, setCheckedOptions] = useState<FilterI[]>(values);
   const idListOptions = `filter-options-list-${id}`;
   const popoverRef = useRef(null);
   const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState<string | undefined>('');
+  const [filteredOptions, setFilteredOptions] = useState<FilterI[] | undefined>(
+    options
+  );
+
+  useEffect(() => {
+    if (searchValue) {
+      const newOptions: FilterI[] =
+        options?.filter((opt) =>
+          opt.label.toLowerCase().includes(searchValue)
+        ) || [];
+      setFilteredOptions(newOptions);
+    } else if (searchValue === '' || !open) {
+      setFilteredOptions(options);
+    }
+  }, [options, searchValue, open]);
 
   const manageKeyEvent = (e: KeyboardEvent) => {
     switch (e.key) {
@@ -191,100 +207,114 @@ const DropdownFilter: React.FC<DropdownFilterI> = (props) => {
         isOpen={open}
         placement='bottom'
         target={popoverRef}
-        className='dropdown-filter-container__popover'
+        className={clsx(
+          'dropdown-filter-container__popover',
+          options && options?.length > 5 && 'dropdown-filter-container__larger'
+        )}
         toogle={() => setOpen(!open)}
         id={`popover-filter-options-${id}`}
         aria-describedby={`descrizione-popover-dropdown-${id}`}
         role='combobox'
         aria-owns={idListOptions}
       >
-        {options?.length && options?.length > 5 ? (
-          <div className='border-bottom d-flex flex-row'>
-            <Icon
-              color='primary'
-              icon='it-search'
-              size=''
-              aria-label='Cerca tra le opzioni del filtro'
-            />
-            <fieldset>
-              <legend className='dropdown-filter-container__search-tooltip'>
-                <Input
-                  id={`search-input-dropdown-${id}`}
-                  label={`search-input-dropdown-${id}`}
-                  aria-controls={idListOptions}
-                  aria-autocomplete='both'
-                  field=''
-                  bsSize='sm'
-                  placeholder='Cerca'
-                  className='shadow-none border-bottom-0'
-                  onInputChange={handleOnSearch}
-                  value={
-                    valueSearch && typeof valueSearch === 'string'
-                      ? valueSearch
-                      : ''
-                  }
-                />
-              </legend>
-            </fieldset>
-          </div>
-        ) : null}
         <ClickOutside callback={() => setOpen(false)}>
-          <Form>
-            <span id='descrizione-lista' className='sr-only'>
-              {'Il filtro presenta ' + (options?.length || 0) + ' opzioni'}
-            </span>
-            {(options || []).length === 0 ? (
-              <p>Non ci sono opzioni per questo filtro</p>
-            ) : (
-              <ul
-                id={idListOptions}
-                tabIndex={0}
-                role='listbox'
-                aria-label='filter-options-list'
-                aria-multiselectable='true'
-                className='dropdown-filter-container__list'
-                aria-describedby='descrizione-lista'
-              >
-                {(options || []).map((opt, index) => (
-                  <li
-                    key={`option-${index}`}
-                    id={`group-checkbox-${id}-${index}`}
-                    role='option'
-                    aria-selected='false'
-                    tabIndex={-1}
-                    aria-label={opt.label}
-                  >
-                    <FormGroup check className='form-check-group shadow-none'>
-                      <Input
-                        id={`input-checkbox-${id}-${index}`}
-                        field=''
-                        label={opt.label}
-                        type='checkbox'
-                        checked={
-                          !!checkedOptions.filter((f) => f.value === opt.value)
-                            .length
-                        }
-                        withLabel={false}
-                        onInputChange={(checked) => {
-                          handleOnChange(opt, checked);
-                        }}
-                        className='dropdown-filter-container__input'
+          <>
+            {options?.length && options?.length > 4 ? (
+              <div className='border-bottom d-flex flex-row'>
+                <Icon
+                  color='primary'
+                  icon='it-search'
+                  size=''
+                  aria-label='Cerca tra le opzioni del filtro'
+                  className='align-self-center'
+                />
+                <fieldset>
+                  <legend className='dropdown-filter-container__search-tooltip'>
+                    <Input
+                      id={`search-input-dropdown-${id}`}
+                      label={`search-input-dropdown-${id}`}
+                      aria-controls={idListOptions}
+                      aria-autocomplete='both'
+                      field=''
+                      bsSize='sm'
+                      placeholder='Cerca'
+                      className='shadow-none border-bottom-0'
+                      onInputChange={(value: formFieldI['value']) =>
+                        setSearchValue(value?.toString())
+                      }
+                      value={
+                        valueSearch && typeof valueSearch === 'string'
+                          ? valueSearch
+                          : ''
+                      }
+                    />
+                  </legend>
+                </fieldset>
+              </div>
+            ) : null}
+            <Form>
+              <span id='descrizione-lista' className='sr-only'>
+                {'Il filtro presenta ' + (options?.length || 0) + ' opzioni'}
+              </span>
+              {(filteredOptions || []).length === 0 ? (
+                <p>Non ci sono opzioni per questo filtro</p>
+              ) : (
+                <ul
+                  id={idListOptions}
+                  tabIndex={0}
+                  role='listbox'
+                  aria-label='filter-options-list'
+                  aria-multiselectable='true'
+                  className='dropdown-filter-container__list'
+                  aria-describedby='descrizione-lista'
+                >
+                  {(filteredOptions || []).map((opt, index) =>
+                    index < 4 ? (
+                      <li
+                        key={`option-${index}`}
+                        id={`group-checkbox-${id}-${index}`}
+                        role='option'
+                        aria-selected='false'
                         tabIndex={-1}
-                        aria-labelledby={`input-checkbox-${id}-${index}Description`}
-                      />
-                      <Label
-                        id={`input-checkbox-${id}-${index}Description`}
-                        check
-                        className='primary-color-b1 text-break'
+                        aria-label={opt.label}
                       >
-                        {opt.label}
-                      </Label>
-                    </FormGroup>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </Form>
+                        <FormGroup
+                          check
+                          className='form-check-group shadow-none'
+                        >
+                          <Input
+                            id={`input-checkbox-${id}-${index}`}
+                            field=''
+                            label={opt.label}
+                            type='checkbox'
+                            checked={
+                              !!checkedOptions.filter(
+                                (f) => f.value === opt.value
+                              ).length
+                            }
+                            withLabel={false}
+                            onInputChange={(checked) => {
+                              handleOnChange(opt, checked);
+                            }}
+                            className='dropdown-filter-container__input'
+                            tabIndex={-1}
+                            aria-labelledby={`input-checkbox-${id}-${index}Description`}
+                          />
+                          <Label
+                            id={`input-checkbox-${id}-${index}Description`}
+                            check
+                            className='primary-color-b1 text-break'
+                          >
+                            {opt.label}
+                          </Label>
+                        </FormGroup>
+                      </li>
+                    ) : null
+                  )}
+                </ul>
+              )}
+            </Form>
+          </>
         </ClickOutside>
       </Popover>
     </div>

diff --git a/fe-piattaforma/src/components/Header/header.tsx b/fe-piattaforma/src/components/Header/header.tsx
@@ -2,7 +2,8 @@ import React, { memo } from 'react';
 import { useAppSelector } from '../../redux/hooks';
 import {
   selectUserNotification,
-  selectUser, UserStateI,
+  selectUser,
+  UserStateI,
 } from '../../redux/features/user/userSlice';
 import { useDispatch } from 'react-redux';
 import { selectDevice } from '../../redux/features/app/appSlice';

diff --git a/fe-piattaforma/src/components/Header/view/headerDesktop.tsx b/fe-piattaforma/src/components/Header/view/headerDesktop.tsx
@@ -116,7 +116,9 @@ const HeaderDesktop: React.FC<HeaderI> = ({
                   'justify-content-between'
                 )}
                 role='menuitem'
-                onClick={() => dispatch(openModal({ id: 'switchProfileModal' }))}
+                onClick={() =>
+                  dispatch(openModal({ id: 'switchProfileModal' }))
+                }
               >
                 Cambia ruolo
               </Button>