Radio "toolbox" - Elements

Elements tools

Elements are displayed information necessary for some given steps, there is no general way of working except that it has to be connected with the step it is called from and thus with Radiobuttons component.

Set element display

To set element display, the element has to be set in several parts of the code.

In the following example, we will follow:

• Element: EmptyLocations
• displayed:
  • through step: ScanLocationForm Step
  • when: emptyButton is clicked

Element example

"Common/Locations/Elements/EmptyLocations.tsx

import { PageTableContentWrapper, ContentSpin, RadioSimpleTable } from '@components';
import { useHandlingUnits, useLocationIds } from '@helpers';
import useTranslation from 'next-translate/useTranslation';
import { useEffect, useState } from 'react';

export interface IEmptyLocationsProps {
    withAvailableHU?: boolean;
}

export const EmptyLocations = ({ withAvailableHU }: IEmptyLocationsProps) => {
    const { t } = useTranslation();

    const [displayedLocations, setDisplayedLocations] = useState<Array<any>>();
    const [nbMaxLocations, setNbMaxLocations] = useState<number>(3);
    const {
        isLoading: emptyLocLoading,
        data: emptyLocData,
        error
    } = useLocationIds({ autocountHandlingUnit: 0 }, 1, 100, null);
    const {
        isLoading: availableHULoading,
        data: availableHUData,
        error: availableHUError
    } = useHandlingUnits(
        { autocountHandlingUnitContent: 0, location_Category: 20710 },
        1,
        100,
        null
    );

    useEffect(() => {
        function compare(a: any, b: any) {
            if (a.locationName < b.locationName) {
                return -1;
            }
            if (a.locationName > b.locationName) {
                return 1;
            }
            return 0;
        }
        if (emptyLocData) {
            const locData: Array<any> = [];
            emptyLocData?.locations?.results.slice(0, nbMaxLocations).forEach((e: any) => {
                locData.push({
                    locationId: e.id,
                    locationName: e.name,
                    type: e.category === 20700 ? 'Picking' : 'Stock',
                    withHU: false
                });
            });
            if (withAvailableHU) {
                availableHUData?.handlingUnits?.results
                    .slice(0, nbMaxLocations)
                    .forEach((e: any) => {
                        locData.push({
                            locationId: e.locationId,
                            locationName: e.location.name,
                            type: e.location.category === 20700 ? 'Picking' : 'Stock',
                            withHU: true
                        });
                    });
            }
            locData.sort(compare);
            setDisplayedLocations(locData);
        }
    }, [emptyLocData]);

    const columns = [
        {
            title: t('common:locations-empty_abbr'),
            dataIndex: 'locationName',
            key: 'location'
        },
        {
            title: t('common:type'),
            dataIndex: 'type',
            key: 'type'
        }
    ];

    return (
        <PageTableContentWrapper>
            {emptyLocData && !emptyLocLoading && !availableHULoading ? (
                <RadioSimpleTable columns={columns} displayedLocations={displayedLocations} />
            ) : (
                <ContentSpin />
            )}
        </PageTableContentWrapper>
    );
};

In the workflow

1. Declare useState to trigger element display:

pages/pallet-movement.tsx - useState

const [showEmptyLocations, setShowEmptyLocations] = useState < boolean > false;

2. Call element:

pages/pallet-movement.tsx - element call

return (
   {
   showEmptyLocations &&
   palletMvt[`step${workflow.expectedSteps[0]}`].data.handlingUnit
      .handlingUnitContent ? (
      <EmptyLocations />
   ) : (
      <></>
   );
   }
   [...]
)

3. Set step to establish relationship with element:

pages/pallet-movement.tsx - step setting

    <ScanLocationForm
      [...]
      buttons={{
        submitButton: true,
        backButton: true,
        emptyButton: true,
      }}
      showEmptyLocations={{ showEmptyLocations, setShowEmptyLocations }}
    ></ScanLocationForm>

In the step

1. Declare props:

Common/Locations/Forms/ScanLocationForm.tsx - Declare props

export interface IScanLocationProps {
  showEmptyLocations?: any;
}
export const ScanLocationForm = ({
   [...]
   showEmptyLocations,
   buttons
}: IScanLocationProps) => {}

2. Pass useState as props to the RadioButtons component:

Common/Locations/Forms/ScanLocationForm.tsx - pass useState

<RadioButtons
  input={{
    ...buttons,
    headerContent: headerContent?.headerContent,
    showSimilarLocations: showSimilarLocations?.showSimilarLocations,
    showEmptyLocations: showEmptyLocations?.showEmptyLocations,
  }}
  output={{
    setHeaderContent: headerContent?.setHeaderContent,
    setShowSimilarLocations: showSimilarLocations?.setShowSimilarLocations,
    setShowEmptyLocations: showEmptyLocations?.setShowEmptyLocations,
    onBack,
  }}
></RadioButtons>

info

Remember to reset value when step is finished:

showSimilarLocations?.setShowSimilarLocations(false);