1
resposta

No checkbox de selecionar todos, como posso não selecionar os desabilitados?

No checkbox de selecionar todos, como posso selecionar todos sem que selecione os que ja foram escolhidos e desabilitados? Mesmo que no tsx desse hook eu tenho o disable, o checked ainda marca quando seleciono todos

type UseApiIntegrations = {
  picsTotalAssociated: number[] | undefined;
};

type SelectedPicsSummary = {
  allSelected: boolean;
  count: number;
  picsAvailable: Pic[];
};

type ApiIntegrationsState = {
  integration: IntegrationUserAccountType[];
};

  const {
    integration,
  } = useSelector<ApplicationState, ApiIntegrationsState>(state => ({
    integration: state.apiIntegration.integration,
  }));

  const [integrationPic, setIntegrationPic] = useState<IntegrationPic[]>([]);

  const [selectedPicsSummary, setSelectedPicsSummary] = useState<
    SelectedPicsSummary
  >({
    allSelected: false,
    count: 0,
    picsAvailable: [],
  });


  const picsIntegradas = useMemo(() => {
    return integration.map(item =>
      item.integrationUserAccountPics.map(pics => pics.pic.picId),
    );
  }, [integration]);


      const organizationsIntegrated = organizations.map(org => {
        const organizationsPics = connectedPics.filter(
          pic => pic.organization?.organizationId === org.organizationId,
        );
        return {
          ...org,
          integrationPic: organizationsPics,
        };
      });
      setIntegrationOrganization(organizationsIntegrated);
    }
  }, [integration, organizations, picsAvailable]);

  useEffect(() => {
    const selectedPics = filterPics.filter(item => item.listSelected);
    setSelectedPicsSummary({
      allSelected:
        selectedPics.length > 0 && selectedPics.length === filterPics.length,
      count: selectedPics.length,
      picsAvailable,
    });
  }, [filterPics, picsAvailable]);

  const handlePicSelectionToggle = useCallback(
    (pic: Pic): void => {
      dispatch(setListSelected(pic.picId, !pic.listSelected));
    },
    [dispatch],
  );

  const handleAllPicsSelectionToggle = useCallback(() => {
    const finalSelected = selectedPicsSummary.count === 0;

    dispatch(
      setItemsSelected(
        // eslint-disable-next-line no-shadow
        filterPics.map(item => item.picId),
        finalSelected,
      ),
    );
  }, [dispatch, filterPics, selectedPicsSummary.count]);

  const handleOrganizationSelectionChange = useCallback(
    (id: number): void => {
      setSelectedOrganizationId(id);
      dispatch(getEnabledPics(id));
      dispatch(resetSelection());
      const allIntegrationPics = [...integrationPics];
      allIntegrationPics.map(item => picsConnectedId.includes(item.pic.picId));
      setIntegrationPics(allIntegrationPics);
    },
    [dispatch, integrationPics, picsConnectedId],
  );

  // TODO Onde seleciona a pic para integrar com a organização
  const submitPostEnabledPics = useCallback((): void => {
    if (selectedOrganizationId) {
      dispatch(
        postEnabledPics(
          selectedOrganizationId,
          picsAvailable.filter(pic => pic.listSelected).map(item => item.picId),
        ),
      );
    }
    dispatch(resetSelection());
  }, [selectedOrganizationId, dispatch, picsAvailable]);

  return {
    handleAllPicsSelectionToggle,
    handlePicSelectionToggle,
    organizationsList: filterOrganizations,
    picsAllSelected: selectedPicsSummary.allSelected,
    picsSelected: selectedPicsSummary.count,

    picsTotalAssociated: picsIntegradas.find(item => item),

  };
};
1 resposta

Oi Guilherme, tudo bem?

Com base no código que você mandou, acredito que a seguinte solução possa te ajudar.

Para evitar selecionar os itens desabilitados ao marcar a opção "Selecionar Todos" em um checkbox, você pode modificar a função handleAllPicsSelectionToggle da seguinte maneira:

const handleAllPicsSelectionToggle = useCallback(() => {
  const finalSelected = selectedPicsSummary.count === 0;

  dispatch(
    setItemsSelected(
      filterPics
        .filter(item => !item.disabled) // Filtra apenas os itens não desabilitados
        .map(item => item.picId),
      finalSelected,
    ),
  );
}, [dispatch, filterPics, selectedPicsSummary.count]);

Ao adicionar o filtro filterPics.filter(item => !item.disabled), apenas os itens não desabilitados serão selecionados ou desselecionados quando a opção "Selecionar Todos" for marcada. Isso garante que os itens desabilitados não sejam afetados pela seleção em massa.

Essa pode ser apenas uma ideia de como você pode fazer, sinta-se livre para fazer modificações.

Um abraço e bons estudos.