Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

🔹 Description

Description

...

🔹System Dependencies

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 Added

Image Cropper:

...

🔹System Dependencies

🔹 Installation

The package can be installed via npm empower-profile-image:

Code Block
npm install <package>i empower-profile-image --save

🔹 Component Variation Title (ex. Alert with Dropdown)

Image Here

Configuration

Code Block
Insert Code Configuration Here

🔹 Component Variation Title 2 (ex. Alert with Batch Message)

Configuration

Code Block
Insert Code Configuration Here

...

Configuration

Code Block
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

showsize

BooleanString

Required

Sets the visibility size of the image in the component.

classurl

String

Optional

Custom class for the alert component

…..

….

….

🔹 References

Repository Link: insert repo link

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://bitbucket.org/empowerteams/empower-profile-image/src/master/

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

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

...