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

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import { Button, IconButton, Typography } from '@krowdy-ui/core';
import { Skeleton } from '@material-ui/lab';
import { AvatarUser } from '@krowdy-ui/views';
import { withStyles } from '@krowdy-ui/styles';
import { Assignment as AssignmentIcon, Public as PublicIcon, LinkedIn as LinkedInIcon, Delete as DeleteIcon } from '@material-ui/icons';
import CardExperiencie from './CardExperiencie';
import CardEducation from './CardEducation';
import CardEspecialization from './CardEspecialization';
import CardKnowledge from './CardKnowledge';

var _ref = /*#__PURE__*/React.createElement(Skeleton, {
  width: 50
});

var _ref2 = /*#__PURE__*/React.createElement(Skeleton, {
  width: 68
});

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

var _ref4 = /*#__PURE__*/React.createElement(Skeleton, {
  animation: "wave",
  variant: "text",
  width: 200
});

var _ref5 = /*#__PURE__*/React.createElement(Skeleton, {
  animation: "wave",
  variant: "text",
  width: 200
});

var _ref6 = /*#__PURE__*/React.createElement(Skeleton, {
  animation: "wave",
  height: 64,
  variant: "circle",
  width: 64
});

var _ref7 = /*#__PURE__*/React.createElement(AssignmentIcon, null);

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

var _ref9 = /*#__PURE__*/React.createElement(PublicIcon, {
  fontSize: "small"
});

var _ref10 = /*#__PURE__*/React.createElement(Typography, {
  align: "center",
  color: "secondary",
  variant: "h4"
}, "Experiencia");

var _ref11 = /*#__PURE__*/React.createElement(Typography, {
  align: "center",
  color: "secondary",
  variant: "h4"
}, "Educaci\xF3n");

var _ref12 = /*#__PURE__*/React.createElement(Typography, {
  align: "center",
  color: "secondary",
  variant: "h4"
}, "Especializaci\xF3n");

var _ref13 = /*#__PURE__*/React.createElement(Typography, {
  align: "center",
  color: "secondary",
  variant: "h4"
}, "Conocimientos");

const Profile = ({
  classes,
  candidate,
  onClickDeleteCandidate,
  onClickPreviewCV,
  disableSubHeaderTitle,
  basic,
  status
}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
  className: classes.drawerSubHeaderContent
}, !disableSubHeaderTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
  className: classes.drawerSubHeaderTitle
}, /*#__PURE__*/React.createElement(Typography, {
  variant: "h6"
}, candidate ? candidate.nameTask : _ref), /*#__PURE__*/React.createElement(Typography, {
  variant: "info2"
}, candidate ? status : _ref2)), /*#__PURE__*/React.createElement("div", null, onClickDeleteCandidate ? /*#__PURE__*/React.createElement(IconButton, {
  color: "primary",
  onClick: onClickDeleteCandidate,
  size: "small"
}, _ref3) : null)) : null), /*#__PURE__*/React.createElement("div", {
  className: classes.userHeader
}, /*#__PURE__*/React.createElement("div", {
  className: classes.userHeaderTitles
}, /*#__PURE__*/React.createElement(Typography, {
  className: classes.userName,
  variant: "h4"
}, candidate ? `${candidate.firstName} ${candidate.lastName}` : _ref4), /*#__PURE__*/React.createElement(Typography, null, basic ? null : candidate ? `${candidate.email || ''} ${candidate.email && candidate.phone ? '•' : ''} ${candidate.phone || ''}` : _ref5)), /*#__PURE__*/React.createElement("div", {
  className: classes.userAvatarContent
}, candidate ? /*#__PURE__*/React.createElement(AvatarUser, {
  classes: {
    defaultAvatar: classes.userDefaultAvatar,
    imageDefault: classes.userDefaultAvatar
  },
  user: {
    firstName: candidate.firstName,
    lastName: candidate.lastName,
    photo: candidate.photo
  }
}) : _ref6)), /*#__PURE__*/React.createElement("div", {
  className: classes.actionsContent
}, !basic ? /*#__PURE__*/React.createElement(React.Fragment, null, onClickPreviewCV ? /*#__PURE__*/React.createElement(Button, {
  color: "primary",
  disabled: !(candidate && candidate.curriculum),
  onClick: onClickPreviewCV,
  startIcon: _ref7
}, "Ver CV") : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
  color: "primary",
  component: "a",
  disabled: !(candidate && candidate.linkedin),
  href: candidate && candidate.linkedin ? candidate.linkedin : '#',
  size: "small",
  target: "_blank"
}, _ref8), /*#__PURE__*/React.createElement(IconButton, {
  color: "primary",
  component: "a",
  disabled: !(candidate && candidate.website),
  href: candidate && candidate.website ? candidate.website : '#',
  size: "small",
  target: "_blank"
}, _ref9))) : null), /*#__PURE__*/React.createElement("div", {
  className: classes.userContent
}, candidate ? /*#__PURE__*/React.createElement(React.Fragment, null, candidate.experience && candidate.experience.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref10, candidate.experience.map(({
  area,
  description,
  companyName,
  hierarchy,
  jobPosition,
  endDate,
  location,
  startDate,
  workHere
}, index) => /*#__PURE__*/React.createElement(CardExperiencie, {
  area: area,
  companyName: companyName,
  description: description,
  endDate: endDate,
  hierarchy: hierarchy,
  jobPosition: jobPosition,
  key: `experiencie-${index}`,
  location: location,
  startDate: startDate,
  workHere: workHere
}))) : null, candidate.education && candidate.education.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref11, candidate.education.map(({
  condition = '',
  description = '',
  institutionName,
  career,
  endDate,
  degree,
  startDate,
  studyingHere
}, index) => /*#__PURE__*/React.createElement(CardEducation, {
  career: career,
  condition: condition,
  degree: degree,
  description: description,
  endDate: endDate,
  institutionName: institutionName,
  key: `education-${index}`,
  startDate: startDate,
  studyingHere: studyingHere
}))) : null, candidate.especialization && candidate.especialization.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref12, candidate.especialization.map(({
  especializationName,
  especializationPlace,
  endDate,
  startDate,
  studyingHere,
  description
}, index) => /*#__PURE__*/React.createElement(CardEspecialization, {
  description: description,
  endDate: endDate,
  especializationName: especializationName,
  especializationPlace: especializationPlace,
  key: `especialization-${index}`,
  startDate: startDate,
  studyingHere: studyingHere
}))) : null, candidate.knowledge && candidate.knowledge.length ? /*#__PURE__*/React.createElement(React.Fragment, null, _ref13, candidate.knowledge.map(({
  knowledgeName,
  level
}, index) => /*#__PURE__*/React.createElement(CardKnowledge, {
  key: `knowledge-${index}`,
  knowledgeName: knowledgeName,
  level: level
}))) : null) : null));

process.env.NODE_ENV !== "production" ? Profile.propTypes = {
  basic: PropTypes.bool,
  candidate: PropTypes.object,
  classes: PropTypes.shape({
    actionsContent: PropTypes.string,
    drawerHeaderContent: PropTypes.string,
    drawerSubHeaderContent: PropTypes.string,
    drawerSubHeaderTitle: PropTypes.string,
    leaveContent: PropTypes.string,
    leaveContentTitle: PropTypes.string,
    userAvatarContent: PropTypes.string,
    userContent: PropTypes.string,
    userDefaultAvatar: PropTypes.string,
    userHeader: PropTypes.string,
    userHeaderTitles: PropTypes.string,
    userName: PropTypes.string
  }),
  disableSubHeaderTitle: PropTypes.bool,
  onClickDeleteCandidate: PropTypes.func,
  onClickPreviewCV: PropTypes.func,
  status: PropTypes.string
} : void 0;

const styles = ({
  palette,
  spacing,
  shadows
}) => ({
  actionsContent: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: spacing(1.5)
  },
  drawerHeaderContent: {
    alignItems: 'center',
    backgroundColor: palette.secondary[10],
    boxShadow: shadows[1],
    // `inset 0px -1px 0px ${palette.getContrastText('#E8E8E8')}`,
    display: 'flex',
    justifyContent: 'space-between',
    padding: spacing(0.5, 1.5)
  },
  drawerSubHeaderContent: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    padding: spacing(0.5, 1.5)
  },
  drawerSubHeaderTitle: {
    '& > p': {
      marginLeft: spacing(1.5)
    },
    display: 'flex'
  },
  leaveContent: {
    maxWidth: 330,
    padding: spacing(2.5)
  },
  leaveContentTitle: {
    alignItems: 'center',
    display: 'flex',
    marginBottom: spacing(1)
  },
  userAvatarContent: {
    bottom: 0,
    display: 'flex',
    left: '50%',
    position: 'absolute',
    transform: 'translate(-50%, 50%)'
  },
  userContent: {
    overflow: 'auto',
    padding: spacing(0, 1.5, 1.5, 1.5)
  },
  userDefaultAvatar: {
    borderColor: 'white',
    color: palette.grey[600],
    height: 64,
    width: 64
  },
  userHeader: {
    backgroundColor: palette.secondary[600],
    display: 'flex',
    height: 110,
    justifyContent: 'center',
    position: 'relative'
  },
  userHeaderTitles: {
    color: 'white',
    textAlign: 'center'
  },
  userName: {
    marginTop: 20
  }
});

export default withStyles(styles, {
  name: 'ProfileCandidate'
})(Profile);