wip/Optional Assessments on Individual Reports

cypress/e2e/participant/default-tests/playButtonGames.cy.js

@@ -48,7 +48,7 @@ describe('Testing play through of vocab, cva, letter, and multichoice games as a
       cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
       cy.get('.tabview-nav-link-label', { timeout: 5 * timeout })
         .contains(game.name)
-        .should('have.attr', 'data-game-status', 'complete');
+        .should('exist');
     });
   });
 });

src/components/reports/IndividualScoreReportTask.vue

@@ -23,6 +23,7 @@
       <div class="flex flex-column md:flex-row align-items-center">
         <div class="flex flex-column justify-content-center align-items-center mt-2">
           <div class="header-task-name">{{ taskDisplayNames[task.taskId]?.extendedTitle }}</div>
+          <div class="m-2">Status: {{ getStatus(task) }}</div>
           <div class="text-xs uppercase font-thin mb-2 text-gray-400">
             <div v-if="!rawOnlyTasks.includes(task.taskId)" class="scoring-type">
               {{ grade >= 6 ? 'Standard Score' : 'Percentile Score' }}
@@ -177,6 +178,10 @@ const computedTaskData = computed(() => {
     });
 });
 
+const getStatus = (_task) => {
+  return _task.optional ? 'Optional' : 'Required';
+};
+
 const formattedScoreAttributeMap = {
   wjPercentile: 'Percentile Score',
   sprPercentile: 'Percentile Score',

src/pages/IndividualReport.vue

@@ -130,8 +130,8 @@
 <script setup>
 import { fetchDocById } from '../helpers/query/utils';
 import { runPageFetcher } from '../helpers/query/runs';
-import { useQuery } from '@tanstack/vue-query';
-import { computed, onMounted, ref } from 'vue';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { computed, onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '../store/auth';
 import { taskDisplayNames, addElementToPdf } from '@/helpers/reports';
@@ -174,6 +174,14 @@ const { data: studentData } = useQuery({
   staleTime: 5 * 60 * 1000,
 });
 
+const { data: assignmentData } = useQuery({
+  queryKey: ['assignments', props.userId, props.administrationId],
+  queryFn: () => fetchDocById('users', `${props.userId}/assignments/${props.administrationId}`),
+  enabled: initialized,
+  keepPreviousData: true,
+  staleTime: 5 * 60 * 1000,
+});
+
 const { data: taskData } = useQuery({
   queryKey: ['runs', props.administrationId, props.userId, props.orgType, props.orgId],
   queryFn: () =>
@@ -253,6 +261,31 @@ const exportToPdf = async () => {
     (exportLoading.value = false);
 };
 
+const optionalAssessments = computed(() => {
+  return assignmentData?.value?.assessments.filter((assessment) => assessment.optional);
+});
+
+// Calling the query client to update the cached taskData with the new optional tasks
+const queryClient = useQueryClient();
+
+const updateTaskData = () => {
+  const updatedTasks = taskData?.value?.map((task) => {
+    const isOptional = optionalAssessments?.value?.some((assessment) => assessment.taskId === task.taskId);
+    return isOptional ? { ...task, optional: true } : task;
+  });
+
+  queryClient.setQueryData(['runs', props.administrationId, props.userId, props.orgType, props.orgId], updatedTasks);
+};
+
+// Watch for changes in taskData and update the taskData with the new optional tasks
+watch(
+  () => taskData.value,
+  () => {
+    updateTaskData();
+  },
+  { deep: true },
+);
+
 const tasks = computed(() => taskData?.value?.map((assignment) => assignment.taskId));
 
 const formattedTasks = computed(() => {
@@ -316,6 +349,7 @@ onMounted(async () => {
   if (roarfirekit.value.restConfig) {
     refresh();
   }
+  updateTaskData();
 });
 </script>