Rev 3041 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react';
import { useSelector } from 'react-redux';
import Add from '@mui/icons-material/Add';
import { IconButton } from '@mui/material';
import { addEducation, deleteEducation, editEducation } from '@services/profile/education';
import { useResource } from '@hooks';
import Widget from '@components/UI/Widget';
import EducationItem from './education-item';
import EducationModal from './education-modal';
import EmptySection from '@components/UI/EmptySection';
import ConfirmModal from '@components/modals/ConfirmModal';
const EducationsCard = ({ uuid = '', educations = [], edit = false }) => {
const labels = useSelector(({ intl }) => intl.labels);
const { showModal, modalState, onAdd, onEdit, onDelete, resources, clearModal, currentResource } =
useResource({
defaultResources: educations,
addResource: addEducation,
editResource: editEducation,
deleteResource: deleteEducation
});
return (
<>
<Widget>
<Widget.Header
title={labels.education}
renderAction={() => {
if (!edit) return null;
return (
<IconButton onClick={() => showModal('add')}>
<Add />
</IconButton>
);
}}
/>
<Widget.Body>
{resources.length ? (
resources.map((education) => (
<EducationItem
key={education}
education={education}
onEdit={() => showModal('edit', education)}
onDelete={() => showModal('delete', education)}
edit={edit}
/>
))
) : (
<EmptySection align='left' message={labels.datatable_empty} />
)}
</Widget.Body>
</Widget>
<EducationModal
show={modalState === 'add' || modalState === 'edit'}
currentEducation={currentResource}
onClose={clearModal}
onConfirm={(education) => {
console.log(modalState);
if (modalState === 'add') onAdd(uuid, education);
if (modalState === 'edit') onEdit(education);
}}
/>
<ConfirmModal
show={modalState === 'delete'}
title='Eliminar Educación'
message='¿Esta seguro de eliminar esta educación?'
onAccept={onDelete}
onClose={clearModal}
/>
</>
);
};
export default EducationsCard;