Merge pull request #464 from ErlendHaa/scroll-answers

Fix synchronization of AnswerSummarySideBar when scrolling
equinor · Jul 2, 2021 · 35d860f · 35d860f
2 parents a58f44c + 2703ba9
commit 35d860f
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 57 deletions.
diff --git a/frontend/src/components/QuestionsList.tsx b/frontend/src/components/QuestionsList.tsx
@@ -1,7 +1,10 @@
 import { Organization, Progression, Question, Severity } from '../api/models'
 import QuestionItem from './QuestionItem'
 import { useParticipant } from '../globals/contexts'
-import { useSharedFacilitatorAnswer, findCorrectAnswer } from './helpers'
+import {
+    hasSeverity,
+    hasOrganization
+} from '../utils/QuestionAndAnswerUtils'
 
 type Props = {
     questions: Question[]
@@ -16,37 +19,22 @@ type Props = {
 const QuestionsList = ({ questions, viewProgression, disable, displayActions, onQuestionSummarySelected, severityFilter, organizationFilter }: Props) => {
     const { azureUniqueId: currentUserAzureUniqueId } = useParticipant()
 
-    const answerHasSelectedSeverity = (question: Question, severityFilter: Severity[]) => {
-        if (severityFilter.length === 0) {
-            return true
-        } else {
-            const useSharedAnswer = useSharedFacilitatorAnswer(viewProgression)
-            const answer = findCorrectAnswer(
-                question,
-                viewProgression,
-                useSharedAnswer,
-                currentUserAzureUniqueId
+    const severityFilteredQuestions = severityFilter !== undefined
+        ? questions.filter(q =>
+            hasSeverity(
+                q,
+                severityFilter,
+                currentUserAzureUniqueId,
+                viewProgression
             )
-            const severity = (answer && answer.severity) || Severity.Na
-            return severityFilter.includes(severity)
-        }
-    }
-
-    const questionHasSelectedOrganization = (question: Question, organizationFilter: Organization[]) => {
-        if (organizationFilter.length === 0) {
-            return true
-        } else {
-            return organizationFilter.includes(question.organization)
-        }
-    }
-
-    const severityFilteredQuestions =
-        severityFilter !== undefined ? questions.filter(q => answerHasSelectedSeverity(q, severityFilter)) : questions
-
-    const organizationFilteredQuestions =
-        organizationFilter !== undefined
-            ? severityFilteredQuestions.filter(q => questionHasSelectedOrganization(q, organizationFilter))
-            : severityFilteredQuestions
+        )
+        : questions
+
+    const organizationFilteredQuestions = organizationFilter !== undefined
+        ? severityFilteredQuestions.filter(q =>
+            hasOrganization(q, organizationFilter)
+        )
+        : severityFilteredQuestions
 
     const orderedQuestions = organizationFilteredQuestions.sort((q1, q2) => q1.order - q2.order)
 

diff --git a/frontend/src/utils/QuestionAndAnswerUtils.ts b/frontend/src/utils/QuestionAndAnswerUtils.ts
@@ -1,4 +1,8 @@
-import { Answer, Progression, Question } from '../api/models'
+import { Answer, Organization, Progression, Question, Severity } from '../api/models'
+import {
+    findCorrectAnswer,
+    useSharedFacilitatorAnswer
+} from '../components/helpers'
 
 export const checkIfAnswerFilled = (answer: Answer): boolean => {
     return answer.text !== ''
@@ -11,3 +15,43 @@ export const getFilledUserAnswersForProgression = (questions: Question[], progre
     const participantAnswers = progressionAnswers.filter(a => a.answeredBy?.azureUniqueId === azureUniqueId)
     return participantAnswers.filter(a => checkIfAnswerFilled(a))
 }
+
+export const hasSeverity = (
+    question: Question,
+    severityFilter: Severity[],
+    AzureUniqueId: string,
+    viewProgression: Progression
+) => {
+    if (severityFilter.length === 0) {
+        return true
+    } else {
+        const useSharedAnswer = useSharedFacilitatorAnswer(viewProgression)
+        const answer = findCorrectAnswer(
+            question,
+            viewProgression,
+            useSharedAnswer,
+            AzureUniqueId
+        )
+        const severity = (answer && answer.severity) || Severity.Na
+        return severityFilter.includes(severity)
+    }
+}
+
+export const hasOrganization = (
+    question: Question,
+    organizationFilter: Organization[]
+) => {
+    if (organizationFilter.length === 0) {
+        return true
+    } else {
+        return organizationFilter.includes(question.organization)
+    }
+}
+
+export const toggleFilter = <T,>(value: T, filter: T[]) => {
+    if (filter.includes(value)) {
+        return filter.filter(x => x !== value)
+    } else {
+        return [...filter, value]
+    }
+}
diff --git a/frontend/src/views/Evaluation/FollowUp/FollowUpView.tsx b/frontend/src/views/Evaluation/FollowUp/FollowUpView.tsx
@@ -15,6 +15,11 @@ import QuestionsList from '../../../components/QuestionsList'
 import { useFilter } from '../../../utils/hooks'
 import OrganizationFilter from '../../../components/OrganizationFilter'
 import { getBarrierAnswers, onScroll } from '../../helpers'
+import {
+    hasSeverity,
+    hasOrganization,
+    toggleFilter
+} from '../../../utils/QuestionAndAnswerUtils'
 
 const TOP_POSITION_SCROLL_WINDOW = 200
 
@@ -64,6 +69,40 @@ const FollowUpView = ({ evaluation }: FollowUpViewProps) => {
         }
     }
 
+    const setFirstQuestion = (questions: Question[]) => {
+        if (questions.length == 0) {
+            closeAnswerSummarySidebar()
+        } else if (selectedQuestion) {
+            setSelectedQuestion(questions[0])
+        }
+    }
+
+    const filterAndSortQuestions = (
+        organizations: Organization[],
+        severities: Severity[]
+    ) => {
+        return barrierQuestions.filter(q => hasSeverity(q,
+                severities,
+                participantUniqueId,
+                viewProgression
+            )
+        ).filter(q => hasOrganization(q, organizations)
+        ).sort((q1, q2) => q1.order - q2.order)
+    }
+
+    const onSeverityFilterChange = (sev: Severity) => {
+        const severities = toggleFilter(sev, severityFilter)
+        const questions = filterAndSortQuestions(organizationFilter, severities)
+        setFirstQuestion(questions)
+        onSeverityFilterToggled(sev)
+    }
+
+    const onOrganizationFilterChange = (org: Organization) => {
+        const orgs = toggleFilter(org, organizationFilter)
+        const questions = filterAndSortQuestions(orgs, severityFilter)
+        setFirstQuestion(questions)
+        onOrganizationFilterToggled(org)
+    }
     const barrierAnswers = getBarrierAnswers(barrierQuestions, viewProgression)
 
     return (
@@ -91,14 +130,14 @@ const FollowUpView = ({ evaluation }: FollowUpViewProps) => {
                             </Typography>
                             <OrganizationFilter
                                 organizationFilter={organizationFilter}
-                                onOrganizationFilterToggled={onOrganizationFilterToggled}
+                                onOrganizationFilterToggled={onOrganizationFilterChange}
                                 questions={barrierQuestions}
                             />
                         </Box>
                         <Box>
                             <SeveritySummary
                                 severityCount={countSeverities(barrierAnswers)}
-                                onClick={severity => onSeverityFilterToggled(severity)}
+                                onClick={onSeverityFilterChange}
                                 severityFilter={severityFilter}
                             />
                         </Box>

diff --git a/frontend/src/views/Evaluation/Preparation/PreparationView.tsx b/frontend/src/views/Evaluation/Preparation/PreparationView.tsx
@@ -16,6 +16,11 @@ import OrganizationFilter from '../../../components/OrganizationFilter'
 import { getBarrierAnswers, onScroll } from '../../helpers'
 import SeveritySummary from '../../../components/SeveritySummary'
 import { countSeverities } from '../../../utils/Severity'
+import {
+    hasSeverity,
+    hasOrganization,
+    toggleFilter
+} from '../../../utils/QuestionAndAnswerUtils'
 
 const TOP_POSITION_SCROLL_WINDOW = 200
 
@@ -79,6 +84,41 @@ const PreparationView = ({ evaluation, onNextStepClick, onProgressParticipant }:
         }
     }
 
+    const setFirstQuestion = (questions: Question[]) => {
+        if (questions.length == 0) {
+            closeAnswerSummarySidebar()
+        } else if (selectedQuestion) {
+            setSelectedQuestion(questions[0])
+        }
+    }
+
+    const filterAndSortQuestions = (
+        organizations: Organization[],
+        severities: Severity[]
+    ) => {
+        return barrierQuestions.filter(q => hasSeverity(q,
+                severities,
+                participantUniqueId,
+                viewProgression
+            )
+        ).filter(q => hasOrganization(q, organizations)
+        ).sort((q1, q2) => q1.order - q2.order)
+    }
+
+    const onSeverityFilterChange = (sev: Severity) => {
+        const severities = toggleFilter(sev, severityFilter)
+        const questions = filterAndSortQuestions(organizationFilter, severities)
+        setFirstQuestion(questions)
+        onSeverityFilterToggled(sev)
+    }
+
+    const onOrganizationFilterChange = (org: Organization) => {
+        const orgs = toggleFilter(org, organizationFilter)
+        const questions = filterAndSortQuestions(orgs, severityFilter)
+        setFirstQuestion(questions)
+        onOrganizationFilterToggled(org)
+    }
+
     const barrierAnswers = getBarrierAnswers(barrierQuestions, viewProgression)
 
     return (
@@ -107,15 +147,15 @@ const PreparationView = ({ evaluation, onNextStepClick, onProgressParticipant }:
                             </Typography>
                             <OrganizationFilter
                                 organizationFilter={organizationFilter}
-                                onOrganizationFilterToggled={onOrganizationFilterToggled}
+                                onOrganizationFilterToggled={onOrganizationFilterChange}
                                 questions={barrierQuestions}
                             />
                         </Box>
                         <Box flexDirection="column">
                             <Box>
                                 <SeveritySummary
                                     severityCount={countSeverities(barrierAnswers)}
-                                    onClick={severity => onSeverityFilterToggled(severity)}
+                                    onClick={onSeverityFilterChange}
                                     severityFilter={severityFilter}
                                 />
                             </Box>

diff --git a/frontend/src/views/Evaluation/Workshop/WorkshopView.tsx b/frontend/src/views/Evaluation/Workshop/WorkshopView.tsx
@@ -15,6 +15,11 @@ import OrganizationFilter from '../../../components/OrganizationFilter'
 import { getBarrierAnswers, onScroll } from '../../helpers'
 import SeveritySummary from '../../../components/SeveritySummary'
 import { countSeverities } from '../../../utils/Severity'
+import {
+    hasSeverity,
+    hasOrganization,
+    toggleFilter
+} from '../../../utils/QuestionAndAnswerUtils'
 
 const TOP_POSITION_SCROLL_WINDOW = 150
 
@@ -78,6 +83,41 @@ const WorkshopView = ({ evaluation, onNextStepClick, onProgressParticipant }: Wo
         }
     }
 
+    const setFirstQuestion = (questions: Question[]) => {
+        if (questions.length == 0) {
+            closeAnswerSummarySidebar()
+        } else if (selectedQuestion) {
+            setSelectedQuestion(questions[0])
+        }
+    }
+
+    const filterAndSortQuestions = (
+        organizations: Organization[],
+        severities: Severity[]
+    ) => {
+        return barrierQuestions.filter(q => hasSeverity(q,
+                severities,
+                participantUniqueId,
+                viewProgression
+            )
+        ).filter(q => hasOrganization(q, organizations)
+        ).sort((q1, q2) => q1.order - q2.order)
+    }
+
+    const onSeverityFilterChange = (sev: Severity) => {
+        const severities = toggleFilter(sev, severityFilter)
+        const questions = filterAndSortQuestions(organizationFilter, severities)
+        setFirstQuestion(questions)
+        onSeverityFilterToggled(sev)
+    }
+
+    const onOrganizationFilterChange = (org: Organization) => {
+        const orgs = toggleFilter(org, organizationFilter)
+        const questions = filterAndSortQuestions(orgs, severityFilter)
+        setFirstQuestion(questions)
+        onOrganizationFilterToggled(org)
+    }
+
     const barrierAnswers = getBarrierAnswers(barrierQuestions, viewProgression)
 
     return (
@@ -106,15 +146,15 @@ const WorkshopView = ({ evaluation, onNextStepClick, onProgressParticipant }: Wo
                             </Typography>
                             <OrganizationFilter
                                 organizationFilter={organizationFilter}
-                                onOrganizationFilterToggled={onOrganizationFilterToggled}
+                                onOrganizationFilterToggled={onOrganizationFilterChange}
                                 questions={barrierQuestions}
                             />
                         </Box>
                         <Box flexDirection="column">
                             <Box ml={5}>
                                 <SeveritySummary
                                     severityCount={countSeverities(barrierAnswers)}
-                                    onClick={severity => onSeverityFilterToggled(severity)}
+                                    onClick={onSeverityFilterChange}
                                     severityFilter={severityFilter}
                                 />
                             </Box>