Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

🔹 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

  • No labels