GitLab

Feito componente de GenericList que componentiza toda a tela de config Aplicado tal componente em todas as paginas e mockado algumas informações

Guia de como utilizar o componente de GenericList:

Props do componente: columns: Define as colunas que serão exibidas, o rótulo, a chave de acesso e o tipo (se é um campo de texto ou imagem). getItems: Função que busca os itens da lista. AddModal, EditModal e DeleteModal: Componentes que representam as modais para adicionar, editar e excluir, respectivamente. Lógica:

Carregamento dos itens:

Ao carregar o componente, ele busca os itens usando a função getItems e armazena no estado originalList. Também mantém a filteredList separada para filtrar sem alterar a lista original.

Pesquisa:

A pesquisa ocorre em todas as propriedades do item, conforme especificado nos columns.

Modal:

As modais de adicionar, editar e deletar são exibidas com base no estado, e ao fechá-las, os itens são recarregados.

Responsividade:

O tamanho das colunas é controlado pela propriedade width no objeto columns, garantindo que o layout se ajuste com base no número de colunas.

Como usar: Quando você for utilizar o componente, basta passar os parâmetros necessários. Exemplo de como usá-lo:

<GenericList columns={[ { label: 'Imagem', key: 'image', type: 'image', width: 'w-1/4' }, { label: 'Descrição', key: 'name', type: 'text', width: 'w-1/4' }, { label: 'Qnt. lotes', key: 'quantity', type: 'text', width: 'w-1/4' } ]} getItems={fetchItems} // Função que busca os itens AddModal={AddItemModal} EditModal={EditItemModal} DeleteModal={DeleteItemModal} />