More updates on employee card wp

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/AchievementsDashboard/AchievementsDashboard.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Placeholder } from '@microsoft/sp-webpart-base';
+
+export default class AchievementsDashboard extends React.Component<{},{}>{
+  public render(): React.ReactElement<{}>{
+    return (
+      <div className="ms-Grid-row ms-u-fadeIn200"> 
+        <div className="ms-Grid-col ms-u-sm12">
+          <Placeholder
+            icon={ 'ms-Icon--Trophy' }
+            iconText='Achievements Dashboard'
+            description="Ups!... we couldn't find the achievements list on this site, please make sure it was created when the app was installed." 
+          />
+        </div>
+      </div>
+    );
+  }
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/AchievementsDashboard/index.ts

@@ -0,0 +1,2 @@
+import AchievementsDashboard from './AchievementsDashboard';
+export default AchievementsDashboard;

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/Common/IconComponent/IIconComponentProps.ts

@@ -0,0 +1,16 @@
+export interface IIconComponentProps {
+  icon: string;
+  title?: string;
+  description: string;
+  size?: Size;
+}
+
+export enum Size {
+  XXSmall,
+  XSmall,
+  Small,
+  Medium,
+  Large,
+  XLarge,
+  XXLarge
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/Common/IconComponent/IconComponent.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Icon } from 'office-ui-fabric-react';
+import styles from './styles.module.scss';
+import { IIconComponentProps, Size } from './IIconComponentProps';
+
+export default class IconComponent extends React.Component<IIconComponentProps, {}>{
+  constructor(props: IIconComponentProps){
+    super(props);
+  } 
+
+  public static defaultProps: Partial<IIconComponentProps> = {
+    size: Size.Medium
+  };
+
+  private _renderTitle(){
+    if (!this.props.title) {
+      return;
+    }  
+
+    return(
+      <div className={styles.iconTitle} >
+        {this.props.title}
+      </div>
+    );
+  }
+
+  public render(): React.ReactElement<IIconComponentProps>{
+    let iconSize:any = {
+      fontSize: 'xx-large'
+    };
+
+    let fontSize:any = {
+      fontSize: 'small'
+    };
+
+    // switch (this.props.size) {
+    //   case Size.XXSmall:
+    //     iconSize = { fontSize: 'xx-small'};
+    //     fontSize = { fontSize: 'xx-small'};        
+    //     break;        
+    //   case Size.XSmall:
+    //     iconSize = { fontSize: 'x-small'};
+    //     fontSize = { fontSize: 'xx-small'};        
+    //     break;        
+    //   case Size.Small:
+    //     iconSize = { fontSize: 'small'};
+    //     fontSize = { fontSize: 'xx-small'};        
+    //     break;    
+    //   case Size.Medium:
+    //     iconSize = { fontSize: 'medium'};
+    //     fontSize = { fontSize: 'x-small'};        
+    //     break;            
+    //   case Size.Large:
+    //     iconSize = { fontSize: 'large'};
+    //     fontSize = { fontSize: 'small'};        
+    //     break;        
+    //   case Size.XLarge:
+    //     iconSize = { fontSize: 'x-large'};
+    //     fontSize = { fontSize: 'small'};        
+    //     break;        
+    //   case Size.XXLarge:
+    //     iconSize = { fontSize: 'xx-large'};
+    //     fontSize = { fontSize: 'small'};        
+    //     break;        
+    // }
+
+    switch (this.props.size) {
+      case Size.XXSmall:
+        iconSize = { fontSize: '.7em'};
+        fontSize = { fontSize: '.7em'};        
+        break;        
+      case Size.XSmall:
+        iconSize = { fontSize: '.9em'};
+        fontSize = { fontSize: '.8em'};        
+        break;        
+      case Size.Small:
+        iconSize = { fontSize: '1.2em'};
+        fontSize = { fontSize: '.8em'};        
+        break;    
+      case Size.Medium:
+        iconSize = { fontSize: '1.4em'};
+        fontSize = { fontSize: '.9em'};        
+        break;            
+      case Size.Large:
+        iconSize = { fontSize: '2em'};
+        fontSize = { fontSize: '.9em'};        
+        break;        
+      case Size.XLarge:
+        iconSize = { fontSize: '2.4em'};
+        fontSize = { fontSize: '1em'};        
+        break;        
+      case Size.XXLarge:
+        iconSize = { fontSize: '3em'};
+        fontSize = { fontSize: '1em'};        
+        break;        
+    }
+
+    return(
+      <div className="ms-Grid-row">
+        <div className="ms-Grid-col ms-u-sm2" >
+          <Icon iconName={this.props.icon} style={iconSize} />
+        </div>
+        <div className={`ms-Grid-col ms-u-sm10`} style={fontSize}>
+          {this._renderTitle()}
+          <div>
+            {this.props.description}
+          </div>            
+        </div>
+      </div>
+    );
+  }
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/Common/IconComponent/index.ts

@@ -0,0 +1,3 @@
+import IconComponent from './IconComponent';
+export default IconComponent;
+export * from './IIconComponentProps';

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/Common/IconComponent/styles.module.scss

@@ -0,0 +1,3 @@
+.iconTitle{
+  font-weight: bold;
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/Card/Card.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ICardProps } from './ICardProps';
+import CardAchievements from '../CardAchievements';
+import CardInformation from '../CardInformation';
+import CardPerformance from '../CardPerformance';
+
+export default class Card extends React.Component<ICardProps, void>{
+  private componentDidMount(): void{
+    this._getEmployee();
+  }
+
+  private _getEmployee(){
+    // TODO get user from graph
+  }
+
+  private _getEmployeeInformation(){
+    // TODO: get performance from employee
+    return;
+  }
+
+  private _getEmployeePerformance(){
+    // TODO: get performance from employee
+    return  {
+      personalGrowth: 9,
+      professionalGrowth: 7,
+      employeeRelationship: 8,
+    };
+  }
+
+  private _getAchievementsFromEmployee(){
+    //TODO: get employee [this.props.employeeId] achievements from service 
+    return [
+      { id: 1, icon: "PartyLeader", description: "Leader..."},
+      { id: 2, icon: "Emoji", description: "Happy customer..."},
+      { id: 3, icon: "FavoriteStarFill", description: "Congratulations..."},
+    ];
+  }
+
+  public render(): React.ReactElement<ICardProps>{
+    return (
+      <div className="ms-u-fadeIn200"> 
+        <div className="ms-Grid-row">
+          <div className="ms-Grid-col ms-u-sm6 ms-u-md6">
+            <CardInformation userPrincipalName={this.props.userPrincipalName}/>                           
+          </div>
+          <div className="ms-Grid-col ms-u-sm6 ms-u-md6">
+            <CardPerformance personalGrowth={7} professionalGrowth={9} employeeRelationship={5} />
+          </div>
+        </div>
+        <div className="ms-Grid-row">
+          <div className="ms-Grid-col ms-u-sm12">
+            <CardAchievements achievements={this._getAchievementsFromEmployee()}/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/Card/ICardProps.ts

@@ -0,0 +1,3 @@
+export interface ICardProps{
+  userPrincipalName: string; 
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/Card/index.ts

@@ -0,0 +1,2 @@
+import Card from './Card';
+export default Card;

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/Achievement/Achievement.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IAchievementsProps } from './IAchievementProps';
+import IconComponent, { Size } from '../../../Common/IconComponent';
+
+export default class Achievements extends React.Component<IAchievementsProps, {}>{
+  public render(): React.ReactElement<IAchievementsProps> {
+    return(
+      <div key={this.props.id} className="ms-Grid-col ms-u-sm12 ms-u-md4">
+        <IconComponent icon={this.props.icon} title={this.props.title} description={this.props.description} size={Size.XXLarge} />  
+      </div>
+    );
+  }
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/Achievement/IAchievementProps.ts

@@ -0,0 +1,6 @@
+export interface IAchievementsProps{
+    id: number;
+    icon: string;
+    title: string;
+    description: string;    
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/Achievement/index.ts

@@ -0,0 +1,2 @@
+import Achievement from './Achievement';
+export default Achievement;

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/AchievementsContainer/AchievementsContainer.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IAchievementsContainerProps } from './IAchievementsContainerProps';
+import Achievement from '../Achievement';
+
+export default class Achievements extends React.Component<IAchievementsContainerProps, {}>{
+  private _renderAchievements(){
+    var rows = [];
+    this.props.achievements.map(a => {
+      rows.push(
+        <Achievement id={a.id} icon={a.icon} title={a.title} description={a.description} />
+      );
+    });    
+
+    return (
+      <div className="ms-Grid-row">
+        { rows }
+      </div>                  
+    );
+  }
+
+  public render(): React.ReactElement<IAchievementsContainerProps> {
+    return(
+      <div className="ms-u-slideUpIn20">
+          <div className={'ms-font-l'}>
+              <span>Achievements</span>
+          </div> 
+          { this._renderAchievements() }
+      </div>
+    );
+  }
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/AchievementsContainer/IAchievementsContainerProps.ts

@@ -0,0 +1,3 @@
+export interface IAchievementsContainerProps {
+  achievements: any[];
+}

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/AchievementsContainer/index.ts

@@ -0,0 +1,2 @@
+import AchievementsContainer from './AchievementsContainer';
+export default AchievementsContainer;

EmployeeCard-Webpart/src/webparts/employeeCardWebpart/components/EmployeeCards/CardAchievements/index.ts

@@ -0,0 +1,2 @@
+import AchievementsContainer from './AchievementsContainer';
+export default AchievementsContainer;