Merge pull request #102 from Ed-Fi-Exchange-OSS/multiple_domain_filters

Multiple domain filters

src/API/DatabaseMigrations/scripts/views/vw_StaffObjectiveRatings.sql

@@ -1,17 +1,11 @@
 CREATE OR ALTER VIEW [edfi].[vw_StaffObjectiveRatings] AS
-with evaluationRatings as (
-    select staff.StaffUSI,
-         eorr.EvaluationObjectiveTitle as Category
-         , eorr.Rating
-         , eorr.EvaluationDate
-         , Row_number() over (partition by eorr.PersonId, eorr.EvaluationObjectiveTitle order by eorr.EvaluationDate desc, eorr.CreateDate desc) as "Number"
-    from tpdm.EvaluationElementRatingResult eorr
-    join edfi.Staff as staff on staff.PersonId = eorr.PersonId
-)
+Select 
+	staff.StaffUSI
+    , eorr.EvaluationObjectiveTitle as Category
+    , Avg(eorr.Rating) as Rating
+    , Max(eorr.EvaluationDate) as EvaluationDate
+	From tpdm.EvaluationElementRatingResult eorr
+	Join edfi.Staff as staff on staff.PersonId = eorr.PersonId
+	Group by staff.StaffUSI, eorr.EvaluationObjectiveTitle
 
-select s.StaffUSI
-     , ratings.Category
-     , ratings.Rating
-
-from edfi.Staff as s
-join evaluationRatings as ratings on ratings.StaffUSI = s.StaffUSI and ratings.Number = 1
+GO

src/API/LeadershipProfileAPI/ClientApp/src/components/DirectoryComponents/DirectoryFilters.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Form,
   FormGroup,
@@ -51,6 +51,8 @@ const CreateDirectoryFilters = (props) => {
     const { setNewPill, removePill, pillTypes, getTypeAction } = UsePills();
     const [filterState, sendFilter] = useFilterContext();
 
+    const [category, setCategory] = useState({label:'', name:''});
+
     function CheckSelectedItem(target, elements, setter, type) {
       setCheckValueForElement(elements, setter, target.value, target.checked);
       setCheckedFilterAsPill(type, target);
@@ -86,15 +88,13 @@ const CreateDirectoryFilters = (props) => {
         Institutions: {
           Values: filterState.institutions,
         },
-        Ratings: {
-          Category: filterState.category,
-          Score: filterState.score,
-        },
+        Ratings: filterState.scores,
         YearsOfPriorExperienceRanges: {
           Values: selectedTenureRanges,
         },
       };
 
+      console.log(filters);
       props.directoryFilteredSearchCallback(filters);
     }
 
@@ -183,6 +183,9 @@ const CreateDirectoryFilters = (props) => {
           pill.value,
           false
         );
+        if(pill.filter === pillTypes.Rating){
+
+        }
       }
 
       sendFilter(getTypeAction(pill.filter, false), pill);
@@ -213,24 +216,19 @@ const CreateDirectoryFilters = (props) => {
     function onClickCategory(e) {
       // Clear filter/pill if default Category selected
       if (e.currentTarget.value === "") {
-        var ratingPill = filterState.pills.find(
-          (value) => value.filter === pillTypes.Rating
-        );
-        sendFilter(FilterActions.removeRating, ratingPill);
+        setCategory({label:'', category:''});
         return;
       }
-      sendFilter(FilterActions.setRatingCategory, {
-        text: e.currentTarget.innerText,
-        value: e.currentTarget.value,
-      });
+
+      setCategory({label: e.currentTarget.innerText, category: e.currentTarget.value});
     }
 
     function onClickScore(e) {
       let target = e.target;
       let pill = setNewPill(
         pillTypes.Rating,
-        `${filterState.categoryLabel} : ${target.innerText}`,
-        target.value
+        `${category.label} : ${target.innerText}`,
+        {category: category.category, score: target.value }
       );
       sendFilter(FilterActions.setRatingScore, pill);
     }
@@ -276,13 +274,13 @@ const CreateDirectoryFilters = (props) => {
     return (
       <div className="d-flex flex-column container-fluid" >
           <div className="row filters-form-container">
-            <div class="col-sm-12 col-md-6 col-lg-3">
+            <div className="col-sm-12 col-md-6 col-lg-3">
               <Searching
                 onSearchValueChange={NameSearch_OnChange}
                 value={nameSearch}
               />
             </div>
-            <div class="col-sm-12 col-md-6 col-lg-2">
+            <div className="col-sm-12 col-md-6 col-lg-2">
               <FormGroup>
                 <UncontrolledDropdown>
                   <DropdownToggle
@@ -323,7 +321,7 @@ const CreateDirectoryFilters = (props) => {
               </FormGroup>
             </div>
 
-            <div class="col-sm-6 col-md-5 col-lg-3">
+            <div className="col-sm-6 col-md-5 col-lg-3">
               <FormGroup>
                 <UncontrolledDropdown>
                   <DropdownToggle
@@ -363,7 +361,7 @@ const CreateDirectoryFilters = (props) => {
                 </UncontrolledDropdown>
               </FormGroup>
             </div>
-            <div class="col-sm-6 col-md-7 col-lg-4">
+            <div className="col-sm-6 col-md-7 col-lg-4">
               <FormGroup>
                 <UncontrolledDropdown>
                   <DropdownToggle
@@ -408,7 +406,7 @@ const CreateDirectoryFilters = (props) => {
                 </UncontrolledDropdown>
               </FormGroup>
             </div>
-            <div class="col-sm-6 col-md-5 col-lg-2">
+            <div className="col-sm-6 col-md-5 col-lg-2">
               <FormGroup>
                 <UncontrolledDropdown>
                   <DropdownToggle
@@ -448,7 +446,7 @@ const CreateDirectoryFilters = (props) => {
                 </UncontrolledDropdown>
               </FormGroup>
             </div>
-            <div class="col-sm-6 col-md-7 col-lg-3">
+            <div className="col-sm-6 col-md-7 col-lg-3">
               <FormGroup>
                 <UncontrolledDropdown>
                   <DropdownToggle
@@ -488,14 +486,14 @@ const CreateDirectoryFilters = (props) => {
                 </UncontrolledDropdown>
               </FormGroup>
             </div>
-            <div class="col-sm-6 col-md-7 col-lg-4">
+            <div className="col-sm-6 col-md-7 col-lg-4">
               <FormGroup>
                 <UncontrolledDropdown setActiveFromChild>
                   <DropdownToggle
                     className="form-group-filter-with-label btn-dropdown"
                     caret
                   >
-                    {filterState.categoryLabel || "Performance Domain"}
+                    {category.label || "Performance Domain"}
                   </DropdownToggle>
                   <DropdownMenu modifiers={modifiers} persist={false}>
                     <DropdownItem divider />
@@ -517,13 +515,13 @@ const CreateDirectoryFilters = (props) => {
                 </UncontrolledDropdown>
               </FormGroup>
             </div>
-            <div class="col-sm-6 col-md-5 col-lg-3">
+            <div className="col-sm-6 col-md-5 col-lg-3">
               <FormGroup>
                 <UncontrolledDropdown>
                   <DropdownToggle
                     className="form-group-filter-with-label btn-dropdown"
                     caret
-                    disabled={filterState.category == ""}
+                    disabled={category.label === ""}
                   >
                     Score
                   </DropdownToggle>

src/API/LeadershipProfileAPI/ClientApp/src/components/IdentifyLeaders/LeadersFilters/LeadersFilters.js

@@ -276,7 +276,7 @@ class LeadersFilters extends Component {
                 <Row className="">
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.roles.includes(1) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('roles', 1)}
                     active={this.state.roles.includes(1)}
                     className="mx-1"
@@ -285,7 +285,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.roles.includes(2) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('roles', 2)}
                     active={this.state.roles.includes(2)}
                     className="mx-1"
@@ -294,7 +294,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.roles.includes(3) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('roles', 3)}
                     active={this.state.roles.includes(3)}
                     className="mx-1"
@@ -303,7 +303,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.roles.includes(4) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('roles', 4)}
                     active={this.state.roles.includes(4)}
                     className="mx-1 mt-1"
@@ -321,7 +321,7 @@ class LeadersFilters extends Component {
                 <Row className="">
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.schoolLevels.includes(1) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('schoolLevels', 1)}
                     active={this.state.schoolLevels.includes(1)}
                     className="mx-1"
@@ -330,7 +330,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.schoolLevels.includes(2) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('schoolLevels', 2)}
                     active={this.state.schoolLevels.includes(2)}
                     className="mx-1"
@@ -339,7 +339,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.schoolLevels.includes(3) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('schoolLevels', 3)}
                     active={this.state.schoolLevels.includes(3)}
                     className="mx-1"
@@ -357,7 +357,7 @@ class LeadersFilters extends Component {
                 <Row className="">
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.highestDegrees.includes(1) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('highestDegrees', 1)}
                     active={this.state.highestDegrees.includes(1)}
                     className="mx-1"
@@ -366,7 +366,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.highestDegrees.includes(2) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('highestDegrees', 2)}
                     active={this.state.highestDegrees.includes(2)}
                     className="mx-1"
@@ -375,7 +375,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.highestDegrees.includes(3) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('highestDegrees', 3)}
                     active={this.state.highestDegrees.includes(3)}
                     className="mx-1 mt-1"
@@ -393,7 +393,7 @@ class LeadersFilters extends Component {
                 <Row className="">
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.hasCertification.includes(1) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('hasCertification', 1)}
                     active={this.state.hasCertification.includes(1)}
                     className="mx-1"
@@ -402,7 +402,7 @@ class LeadersFilters extends Component {
                   </Button>
                   <Button
                     size="sm"
-                    color="primary"
+                    color={this.state.hasCertification.includes(2) ? "primary" : "secondary"}
                     onClick={() => this.onCheckboxBtnClick('hasCertification', 2)}
                     active={this.state.hasCertification.includes(2)}
                     className="mx-1"

src/API/LeadershipProfileAPI/ClientApp/src/components/ProfessionalDevelopmentComponents/ProfessionalDevelopmentTable.js

@@ -3,7 +3,7 @@ import { CardTitle, Collapse, Table } from 'reactstrap';
 import { ChartIcon, DownPointingIcon } from '../Icons';
 import { formatDate } from '../../utils/date';
 
-const professionalDevelopmentCategories = { 'professionalDevelopmentTitle': 'Course name', 'attendanceDate': 'Date', 'location': 'Location', 'alignmentToLeadership': 'Categories' };
+const professionalDevelopmentCategories = { 'professionalDevelopmentTitle': 'Course name', 'attendanceDate': 'Date', 'alignmentToLeadership': 'Category' };
 
 const ProfessionalDevelopmentTable = (props) => {
     const { title, data } = props;

src/API/LeadershipProfileAPI/ClientApp/src/components/ProfileComponents/Profile.js

@@ -14,7 +14,8 @@ const Profile = () => {
     const id = window.location.href.slice(window.location.href.lastIndexOf('/')+1);
     const { data, losMapping } = UseProfile(id);
 
-    const prositionHistory = data.positionHistory
+    const lastPositionEntry = data.positionHistory?.[0];
+    const reducedPositionHistory = data.positionHistory
         ?.toSorted((a,b) => a.startDate.localeCompare(b.startDate))
         .reduce((acc, cur) => {
             const prev = acc[acc.length -1];
@@ -26,12 +27,27 @@ const Profile = () => {
             return acc;
         }, []).reverse();
 
+    data.yearsInLastRole = yearsInLastRole();
+
     var losMappingResult = null;
 
     if (data.performanceMeasures != undefined) {
         losMappingResult = losMapping(data.performanceMeasures); 
     }
 
+    function yearsInLastRole() {
+        const year0 = (new Date(0)).getFullYear();
+        const lastPositionFirstDate = reducedPositionHistory && new Date(reducedPositionHistory?.[0]?.startDate);
+        const lastPositionEntryDate = lastPositionEntry && new Date(Date.parse(lastPositionEntry?.startDate));
+        const yearEndDate = lastPositionEntryDate && new Date(lastPositionEntryDate.getFullYear() + (lastPositionEntryDate.getMonth() >= 6 ? 1 : 0), 6, 1);
+        const lastUpdate = lastPositionEntry?.endDate ??
+            (yearEndDate < new Date()
+                ? yearEndDate
+                : new Date());
+        const yearsInLastRole = lastPositionFirstDate && (new Date(lastUpdate - lastPositionFirstDate).getFullYear() - year0);
+        return yearsInLastRole;
+    }
+
     return (
         <div className="d-flex flex-column container">
             <ProfileBreadcrumbMenu data={data} />
@@ -47,7 +63,7 @@ const Profile = () => {
 
             {activeComponent === "general" && data !== {} ? (
                 <div>
-                    <PositionHistoryTable title='Position History' data={prositionHistory} />
+                    <PositionHistoryTable title='Position History' data={reducedPositionHistory} />
                     <CertificationsTable title='Certifications' data={data.certificates} />
                     <ProfessionalDevelopmentTable title='Professional Development and Learning Experiences' data={data.professionalDevelopment}/>
                 </div>

src/API/LeadershipProfileAPI/ClientApp/src/components/ProfileComponents/ProfileInfo.js

@@ -32,7 +32,7 @@ const ProfileInfo = (props) => {
                                 <td className="profile-info-icon"><EducationIconNavy /> </td>
                                 <td className="profile-info-text">{data.school}</td>
                                 <td className="profile-info-icon"><CalendarIcon /></td>
-                                <td className="profile-info-text">Last start date: {formatDate(data.startDate)}</td>        
+                                <td className="profile-info-text">Years in role: {data.yearsInLastRole}</td>        
                                 <td className="profile-info-icon"><MailIcon /></td>
                                 <td className="profile-info-text"><a href={ "mailto:" + data.email}>{data.email}</a></td>
                             </tr>

src/API/LeadershipProfileAPI/ClientApp/src/context/filters/Reducer.js

@@ -98,29 +98,18 @@ const Reducer = (state, action) => {
                 pills: state.pills.filter(value => value !== action.payload)
             }
         }
-        case setRatingCategory: {
-            return {
-                ...state,
-                categoryLabel: action.payload.text,
-                category: action.payload.value
-            }
-        }
         case setRatingScore: {
             let newFilterPill = action.payload;
             return {
                 ...state,
-                score: newFilterPill.value,
-                pills: state.pills.some(pill => pill.filter === newFilterPill.filter)
-                    ? state.pills.map(prevPill => (prevPill.filter === newFilterPill.filter) ? newFilterPill : prevPill)            
-                    : [...state.pills, newFilterPill]
+                scores: [...state.scores.filter(s => s.category !== newFilterPill.value.category), { category: newFilterPill.value.category, score: newFilterPill.value.score}],
+                pills: [...state.pills.filter(pill => pill.filter !== newFilterPill.filter || pill.value?.category !== newFilterPill.value.category), newFilterPill]
             }
         }
         case removeRating: {
             return {
                 ...state,
-                score: 0,
-                category: '',
-                categoryLabel: '',
+                scores: state.scores.filter(s => s.category !== action.payload.value.category),
                 pills: state.pills.filter(value => value !== action.payload)
             }
         }