Profile-Image

🔹 Description

Profile Image is component that gives additional information about a person. It has the user’s image, additional information like location, tenureship, and reports to. This component has also a variation where you can upload and crop your image according to your preference.

Image Cropper:

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

npm i empower-profile-image --save

Configuration

import { ProfileImage, ProfileDetails, ImageCropper } from 'empower-profile-image';

..................


const paramImage = {
      size: 'lg',
      url:'',
      placeholder: 'IN',
      element1: 'Firstname Lastname',
      element2: 'Reporting Job',
      element3: 'Reporting Department',
}

const paramDetails = {
      size: 'lg',
      url:'',
      placeholder: 'IN',
      first_name: 'first_name',
      last_name: 'last_name',
      job: 'position title',
      department: 'department name',
      site: 'site',
      employeNumber: 'employeNumber',
      tenure: {
          year:  '2021',
          month: 'Aug'
      },
      reportingTo: {
          url:'',
          placeholder: 'IN',
          first_name: 'Reporting Firstname',
          last_name: 'Reporting Lastname',
          job: 'Reporting Job',
      }
}

   /**
     * 
     * setUploadImage - method that gets the value of the Image cropper component
     */

    const setUploadImage = (value) => {
        console.log('VALUE', value)
    }

......................

  return (
      <div className="App em-profile-image">
        <h3>Profile Image Component</h3>
        <ProfileImage config={paramImage}  />
  
        <h3>Profile Details Component</h3>
        <ProfileDetails config={paramDetails}  />
  
        <h3>Image Cropper Component</h3>
        <ImageCropper 
          uploadAction={(val) => setUploadImage(val)} 
          uploadResult={true}
        />
      </div>
    );

🔹 Properties for ProfileImage

Parameter	Data Type	Constraint	Description
size	String	Required	Sets the size of the image in the component.
url	String	Optional	Sets the link of the image should be used (example: CDN)
placeholder	String	Required	Sets the Initial name of the employee if no URL or image provided in config.
element1	String	Required	Sets the name of employee.
element2	String	Required	Sets the job of employee.
element3	String	Required	Sets the department of employee.

🔹 Properties for ProfileDetails

Parameter	Data Type	Constraint	Description
size	String	Required	Sets the size of the image in the component.
url	String	Optional	Sets the link of the image should be used (example: CDN)
placeholder	String	Required	Sets the Initial name of the employee if no URL or image provided in config.
first_name	String	Required	Sets the first name of employee.
last_name	String	Required	Sets the last name of employee.
job	String	Required	Sets the job or position of employee.
department	String	Required	Sets the department of employee.
site	String	Required	Sets the site of the employee.
employeeNumber	String	Required	Sets the given employee number
tenure	Object	Required	Sets the tenurity of employee. It should consist of: year (String) month (String)
reportingTo	Object	Required	Sets the details of manager/supervisor who employee reports to It should consist of: url (String) placeholder (String) first_name (String) last_name (String) job (String)

🔹 References

Repository Link: https://gitlab.com/empowerteams/empower-profile-image.git

NPM Package: https://www.npmjs.com/package/empower-profile-image

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git