@krowdy-ui/views/esm/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';
var legendDegree = {
  Doctorado: 4,
  Master: 3,
  Secundaria: 0,
  Técnico: 1,
  Universitario: 2
};

var getEducation = function getEducation(educations) {
  if (!educations.length) return null;
  var parsedEducation = educations.map(function (education) {
    return _extends({}, education, {
      degree: legendDegree[education.degree]
    });
  }).sort(function (a, b) {
    var n = b.degree - a.degree;
    if (n !== 0) return n;
    if (!b.endDate) return 1;
    if (!a.endDate) return 1;
    var 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];
};

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

function sufix(number) {
  if (number >= 12) {
    var year = Math.floor(number / 12);
    return "".concat(year, " ").concat(year > 1 ? 'años' : 'año');
  }

  return "".concat(number, " ").concat(number > 1 ? 'meses' : 'mes');
}

var Rating = function Rating(_ref) {
  var rating = _ref.rating;
  var 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 _ref3 = /*#__PURE__*/React.createElement(SchoolIcon, {
  color: "primary",
  fontSize: "small"
});

var Education = function Education(_ref2) {
  var education = _ref2.education;
  var classes = useStyles();
  var 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
  }, _ref3), /*#__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 ".concat(sufix(interval)) : 'A la fecha'))), /*#__PURE__*/React.createElement(Divider, {
    className: classes.divider
  }));
};

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

var Ascent = function Ascent(_ref4) {
  var count = _ref4.count,
      time = _ref4.time;
  var 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"
  }, 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 _ref7 = /*#__PURE__*/React.createElement(WorkIcon, {
  color: "primary",
  fontSize: "small"
});

var Experience = function Experience(_ref6) {
  var experience = _ref6.experience;
  var classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref7), /*#__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 _ref9 = /*#__PURE__*/React.createElement(BusinessIcon, {
  color: "primary",
  fontSize: "small"
});

var WorkExperience = function WorkExperience(_ref8) {
  var name = _ref8.name,
      count = _ref8.count;
  var classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref9), /*#__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 _ref11 = /*#__PURE__*/React.createElement(LoopIcon, {
  color: "primary",
  fontSize: "small"
});

var Rotation = function Rotation(_ref10) {
  var count = _ref10.count,
      time = _ref10.time;
  var classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref11), /*#__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 _ref13 = /*#__PURE__*/React.createElement(AttachMoneyIcon, {
  color: "primary",
  fontSize: "small"
});

var SalaryText = function SalaryText(_ref12) {
  var salaryText = _ref12.salaryText;
  var classes = useStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.icon
  }, _ref13), /*#__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 _ref15 = /*#__PURE__*/React.createElement(Dot, {
  color: "primary"
});

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

var Company = function Company(_ref14) {
  var company = _ref14.company;
  var imgUrl = company.imgUrl,
      companyName = company.companyName,
      workHere = company.workHere,
      startDate = company.startDate,
      endDate = company.endDate;
  var classes = useStyles();
  var 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 ? _ref15 : null, /*#__PURE__*/React.createElement("div", {
    className: classes.row
  }, /*#__PURE__*/React.createElement(Avatar, {
    className: classes.small,
    src: imgUrl,
    variant: "rounded"
  }, companyName ? companyName.charAt(0) : _ref16), /*#__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
  }));
};

var Profile = function Profile(_ref17) {
  var name = _ref17.name,
      rating = _ref17.rating,
      ascent = _ref17.ascent,
      experience = _ref17.experience,
      workExperience = _ref17.workExperience,
      rotation = _ref17.rotation,
      salaryText = _ref17.salaryText,
      action = _ref17.action,
      _ref17$experiences = _ref17.experiences,
      experiences = _ref17$experiences === void 0 ? [] : _ref17$experiences,
      _ref17$educations = _ref17.educations,
      educations = _ref17$educations === void 0 ? [] : _ref17$educations,
      onCV = _ref17.onCV,
      _ref17$slice = _ref17.slice,
      slice = _ref17$slice === void 0 ? 2 : _ref17$slice;
  var classes = useStyles();
  var parsedExperiences = experiences.filter(function (_ref18) {
    var jobPosition = _ref18.jobPosition;
    return jobPosition;
  }).sort(compare);
  var difference = experiences.length - slice;
  var 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(function (company, index) {
    return /*#__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);
};

var useStyles = makeStyles(function (theme) {
  return {
    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;