@krowdy-ui/views/es/Profile/Profile.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import PropTypes from 'prop-types';
import { Paper, makeStyles, Typography, Divider, Dot, Avatar, Button } from '@krowdy-ui/core';
import { Grade as GradeIcon, TrendingUp as TrendingUpIcon, Work as WorkIcon, Business as BusinessIcon, Loop as LoopIcon, AttachMoney as AttachMoneyIcon, School as SchoolIcon } from '@material-ui/icons';
import clsx from 'clsx';
import dayjs from 'dayjs';
import 'dayjs/locale/es';
const legendDegree = {
  Doctorado: 4,
  Master: 3,
  Secundaria: 0,
  Técnico: 1,
  Universitario: 2
};

const getEducation = educations => {
  if (!educations.length) return null;
  const parsedEducation = educations.map(education => _extends({}, education, {
    degree: legendDegree[education.degree]
  })).sort((a, b) => {
    const n = b.degree - a.degree;
    if (n !== 0) return n;
    if (!b.endDate) return 1;
    if (!a.endDate) return 1;
    const o = dayjs(b.endDate).diff(dayjs(a.endDate));
    if (o !== 0) return o;
    if (!b.startDate) return 1;
    if (!a.startDate) return 1;
    return dayjs(b.startDate).diff(dayjs(a.startDate));
  });
  return parsedEducation[0];
};

const compare = (a, b) => {
  if (b.workHere || dayjs(a.endDate).isBefore(b.endDate)) return 1;
  return -1;
};

function sufix(number) {
  if (number >= 12) {
    const year = Math.floor(number / 12);
    return `${year} ${year > 1 ? 'años' : 'año'}`;
  }

  return `${number} ${number > 1 ? 'meses' : 'mes'}`;
}

const Rating = ({
  rating
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.first
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "h6"
  }, rating), /*#__PURE__*/React.createElement(GradeIcon, {
    className: classes.rating,
    color: "primary",
    fontSize: "small"
  })), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref = /*#__PURE__*/React.createElement(SchoolIcon, {
  color: "primary",
  fontSize: "small"
});

const Education = ({
  education
}) => {
  const classes = useStyles();
  const interval = education.endDate ? dayjs().diff(dayjs(education.endDate), 'month') : null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, education.career, " | ", education.institutionName), /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, education.endDate ? `Hace ${sufix(interval)}` : 'A la fecha'))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref2 = /*#__PURE__*/React.createElement(TrendingUpIcon, {
  color: "primary",
  fontSize: "small"
});

const Ascent = ({
  count,
  time
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref2), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, count, " Ascenso", count > 1 ? 's' : ''), /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, "En ", sufix(time)))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref3 = /*#__PURE__*/React.createElement(WorkIcon, {
  color: "primary",
  fontSize: "small"
});

const Experience = ({
  experience
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref3), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, "Experiencia"), /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, sufix(experience)))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref4 = /*#__PURE__*/React.createElement(BusinessIcon, {
  color: "primary",
  fontSize: "small"
});

const WorkExperience = ({
  name,
  count
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref4), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, "Trabaja en ", name), /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, "Hace ", sufix(count)))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref5 = /*#__PURE__*/React.createElement(LoopIcon, {
  color: "primary",
  fontSize: "small"
});

const Rotation = ({
  count,
  time
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref5), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, "Rotaci\xF3n"), /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, count, " ve", count > 1 ? 'ces' : 'z', " cada ", sufix(time)))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref6 = /*#__PURE__*/React.createElement(AttachMoneyIcon, {
  color: "primary",
  fontSize: "small"
});

const SalaryText = ({
  salaryText
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref6), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, "Salario"), /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, salaryText))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

var _ref7 = /*#__PURE__*/React.createElement(Dot, {
  color: "primary"
});

var _ref8 = /*#__PURE__*/React.createElement(BusinessIcon, {
  color: "primary",
  fontSize: "small"
});

const Company = ({
  company
}) => {
  const {
    imgUrl,
    companyName,
    workHere,
    startDate,
    endDate
  } = company;
  const classes = useStyles();
  const interval = endDate ? dayjs(endDate).month() : dayjs().diff(dayjs(startDate), 'month');
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.experience, workHere ? classes.left : classes.experienceLeft)
  }, workHere ? _ref7 : null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement(Avatar, {
    className: classes.small,
    src: imgUrl,
    variant: "rounded"
  }, companyName ? companyName.charAt(0) : _ref8), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
    className: classes.title,
    variant: "body1"
  }, companyName), startDate ? /*#__PURE__*/React.createElement(Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, sufix(interval), " \u2022 ", dayjs(startDate).format('MMM YYYY'), " - ", endDate ? dayjs(endDate).format('MMM YYYY') : 'Actualidad') : null))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

const Profile = ({
  name,
  rating,
  ascent,
  experience,
  workExperience,
  rotation,
  salaryText,
  action,
  experiences = [],
  educations = [],
  onCV,
  slice = 2
}) => {
  const classes = useStyles();
  const parsedExperiences = experiences.filter(({
    jobPosition
  }) => jobPosition).sort(compare);
  const difference = experiences.length - slice;
  const education = getEducation(educations);
  return /*#__PURE__*/React.createElement(Paper, {
    className: classes.container,
    variant: "outlined"
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.contentTitle
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.name,
    variant: "h6"
  }, name), action), rating ? /*#__PURE__*/React.createElement(Rating, {
    rating: rating
  }) : null, education ? /*#__PURE__*/React.createElement(Education, {
    education: education
  }) : null, ascent ? /*#__PURE__*/React.createElement(Ascent, {
    count: ascent.count,
    time: ascent.time
  }) : null, rotation ? /*#__PURE__*/React.createElement(Rotation, {
    count: rotation.count,
    time: rotation.time
  }) : null, experience ? /*#__PURE__*/React.createElement(Experience, {
    experience: experience
  }) : null, workExperience ? /*#__PURE__*/React.createElement(WorkExperience, {
    count: workExperience.count,
    name: workExperience.name
  }) : null, salaryText ? /*#__PURE__*/React.createElement(SalaryText, {
    salaryText: salaryText
  }) : null, parsedExperiences ? (difference > 0 ? parsedExperiences.slice(0, slice) : parsedExperiences).map((company, index) => /*#__PURE__*/React.createElement(Company, {
    company: company,
    key: index
  })) : null, difference > 0 ? /*#__PURE__*/React.createElement("div", {
    className: classes.difference
  }, /*#__PURE__*/React.createElement(Button, {
    color: "inherit",
    onClick: onCV
  }, "+ ", difference, " experiencia", difference > 1 ? 's' : '')) : null);
};

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    overflow: 'hidden',
    padding: theme.spacing(1),
    width: '100%'
  },
  contentTitle: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    width: '100%'
  },
  difference: {
    color: theme.palette.grey[600],
    display: 'flex',
    flexDirection: 'row-reverse'
  },
  divider: {
    backgroundColor: theme.palette.secondary[10],
    marginLeft: -theme.spacing(1),
    marginRight: -theme.spacing(1)
  },
  experience: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row'
  },
  experienceLeft: {
    marginLeft: theme.spacing(2.5)
  },
  first: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
    marginBottom: theme.spacing(2),
    marginTop: theme.spacing(0.5)
  },
  icon: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(2)
  },
  left: {
    marginLeft: theme.spacing(1.5)
  },
  name: {
    color: theme.palette.secondary[600]
  },
  rating: {
    marginLeft: theme.spacing(1)
  },
  row: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
    marginBottom: theme.spacing(0.5),
    marginTop: theme.spacing(0.5)
  },
  small: {
    height: theme.spacing(3),
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: theme.spacing(3)
  },
  subtitle: {
    color: theme.palette.grey[600]
  },
  title: {
    color: theme.palette.grey[800]
  }
}), {
  name: 'Profile'
});
process.env.NODE_ENV !== "production" ? Profile.propTypes = {
  action: PropTypes.node,
  ascent: PropTypes.shape({
    count: PropTypes.number,
    time: PropTypes.number
  }),
  experience: PropTypes.number,
  name: PropTypes.string.isRequired,
  rating: PropTypes.number,
  rotation: PropTypes.shape({
    count: PropTypes.number,
    time: PropTypes.number
  }),
  salaryText: PropTypes.string,
  workExperience: PropTypes.shape({
    count: PropTypes.number,
    name: PropTypes.string
  })
} : void 0;
export default Profile;