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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _core = require("@krowdy-ui/core");

var _icons = require("@material-ui/icons");

var _clsx = _interopRequireDefault(require("clsx"));

var _dayjs = _interopRequireDefault(require("dayjs"));

require("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 (0, _extends2["default"])({}, 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 = (0, _dayjs["default"])(b.endDate).diff((0, _dayjs["default"])(a.endDate));
    if (o !== 0) return o;
    if (!b.startDate) return 1;
    if (!a.startDate) return 1;
    return (0, _dayjs["default"])(b.startDate).diff((0, _dayjs["default"])(a.startDate));
  });
  return parsedEducation[0];
};

var compare = function compare(a, b) {
  if (b.workHere || (0, _dayjs["default"])(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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.first
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    variant: "h6"
  }, rating), /*#__PURE__*/_react["default"].createElement(_icons.Grade, {
    className: classes.rating,
    color: "primary",
    fontSize: "small"
  })), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref3 = /*#__PURE__*/_react["default"].createElement(_icons.School, {
  color: "primary",
  fontSize: "small"
});

var Education = function Education(_ref2) {
  var education = _ref2.education;
  var classes = useStyles();
  var interval = education.endDate ? (0, _dayjs["default"])().diff((0, _dayjs["default"])(education.endDate), 'month') : null;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, _ref3), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, education.career, " | ", education.institutionName), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, education.endDate ? "Hace ".concat(sufix(interval)) : 'A la fecha'))), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref5 = /*#__PURE__*/_react["default"].createElement(_icons.TrendingUp, {
  color: "primary",
  fontSize: "small"
});

var Ascent = function Ascent(_ref4) {
  var count = _ref4.count,
      time = _ref4.time;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, _ref5), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, count, " Ascenso", count > 1 ? 's' : ''), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, "En ", sufix(time)))), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref7 = /*#__PURE__*/_react["default"].createElement(_icons.Work, {
  color: "primary",
  fontSize: "small"
});

var Experience = function Experience(_ref6) {
  var experience = _ref6.experience;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, _ref7), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, "Experiencia"), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, sufix(experience)))), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref9 = /*#__PURE__*/_react["default"].createElement(_icons.Business, {
  color: "primary",
  fontSize: "small"
});

var WorkExperience = function WorkExperience(_ref8) {
  var name = _ref8.name,
      count = _ref8.count;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, _ref9), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, "Trabaja en ", name), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, "Hace ", sufix(count)))), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref11 = /*#__PURE__*/_react["default"].createElement(_icons.Loop, {
  color: "primary",
  fontSize: "small"
});

var Rotation = function Rotation(_ref10) {
  var count = _ref10.count,
      time = _ref10.time;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, _ref11), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, "Rotaci\xF3n"), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, count, " ve", count > 1 ? 'ces' : 'z', " cada ", sufix(time)))), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref13 = /*#__PURE__*/_react["default"].createElement(_icons.AttachMoney, {
  color: "primary",
  fontSize: "small"
});

var SalaryText = function SalaryText(_ref12) {
  var salaryText = _ref12.salaryText;
  var classes = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, _ref13), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, "Salario"), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, salaryText))), /*#__PURE__*/_react["default"].createElement(_core.Divider, {
    className: classes.divider
  }));
};

var _ref15 = /*#__PURE__*/_react["default"].createElement(_core.Dot, {
  color: "primary"
});

var _ref16 = /*#__PURE__*/_react["default"].createElement(_icons.Business, {
  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 ? (0, _dayjs["default"])(endDate).month() : (0, _dayjs["default"])().diff((0, _dayjs["default"])(startDate), 'month');
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.experience, workHere ? classes.left : classes.experienceLeft)
  }, workHere ? _ref15 : null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
    className: classes.small,
    src: imgUrl,
    variant: "rounded"
  }, companyName ? companyName.charAt(0) : _ref16), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.title,
    variant: "body1"
  }, companyName), startDate ? /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.subtitle,
    variant: "body1"
  }, sufix(interval), " \u2022 ", (0, _dayjs["default"])(startDate).format('MMM YYYY'), " - ", endDate ? (0, _dayjs["default"])(endDate).format('MMM YYYY') : 'Actualidad') : null))), /*#__PURE__*/_react["default"].createElement(_core.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["default"].createElement(_core.Paper, {
    className: classes.container,
    variant: "outlined"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.contentTitle
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.name,
    variant: "h6"
  }, name), action), rating ? /*#__PURE__*/_react["default"].createElement(Rating, {
    rating: rating
  }) : null, education ? /*#__PURE__*/_react["default"].createElement(Education, {
    education: education
  }) : null, ascent ? /*#__PURE__*/_react["default"].createElement(Ascent, {
    count: ascent.count,
    time: ascent.time
  }) : null, rotation ? /*#__PURE__*/_react["default"].createElement(Rotation, {
    count: rotation.count,
    time: rotation.time
  }) : null, experience ? /*#__PURE__*/_react["default"].createElement(Experience, {
    experience: experience
  }) : null, workExperience ? /*#__PURE__*/_react["default"].createElement(WorkExperience, {
    count: workExperience.count,
    name: workExperience.name
  }) : null, salaryText ? /*#__PURE__*/_react["default"].createElement(SalaryText, {
    salaryText: salaryText
  }) : null, parsedExperiences ? (difference > 0 ? parsedExperiences.slice(0, slice) : parsedExperiences).map(function (company, index) {
    return /*#__PURE__*/_react["default"].createElement(Company, {
      company: company,
      key: index
    });
  }) : null, difference > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.difference
  }, /*#__PURE__*/_react["default"].createElement(_core.Button, {
    color: "inherit",
    onClick: onCV
  }, "+ ", difference, " experiencia", difference > 1 ? 's' : '')) : null);
};

var useStyles = (0, _core.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["default"].node,
  ascent: _propTypes["default"].shape({
    count: _propTypes["default"].number,
    time: _propTypes["default"].number
  }),
  experience: _propTypes["default"].number,
  name: _propTypes["default"].string.isRequired,
  rating: _propTypes["default"].number,
  rotation: _propTypes["default"].shape({
    count: _propTypes["default"].number,
    time: _propTypes["default"].number
  }),
  salaryText: _propTypes["default"].string,
  workExperience: _propTypes["default"].shape({
    count: _propTypes["default"].number,
    name: _propTypes["default"].string
  })
} : void 0;
var _default = Profile;
exports["default"] = _default;