Merge pull request #735 from yeatmanlab/enh/public-facing-names

Update dashboard with `publicName` and `studentFacingName`

cypress.config.js

@@ -50,15 +50,15 @@ module.exports = defineConfig({
     testGroupName: 'Cypress Test Group',
     testGroupInitials: 'SATG',
     testAssignmentsList: [
-      'Letter',
-      'Picture-Vocab',
-      'Single Digit Fluency',
-      'Multi Digit Fluency',
-      'Syntax',
-      'Phoneme',
-      'Word',
-      'Sentence',
-      'Morphology',
+      'ROAR - Letter',
+      'ROAR - Picture Vocab',
+      'ROAM - Math Facts Fluency',
+      'ROAM - Calculation Fluency',
+      'ROAR - Syntax',
+      'ROAR - Phoneme',
+      'ROAR - Word',
+      'ROAR - Sentence',
+      'ROAR - Morphology',
     ],
     testPartnerAdministrationName: 'Partner Test Administration',
     testPartnerAdministrationId: 'kKUSypkMc36mPEzleDE6',

cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js

@@ -126,7 +126,7 @@ describe('The partner admin can view progress reports for a given administration
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickProgressButton(roarTestAdministrationId);
-    setFilterByProgressCategory('Word', 'completed');
+    setFilterByProgressCategory('ROAR - Word', 'completed');
     checkTableColumn(['Username'], 'CypressTestStudent0');
   });
 });
@@ -137,7 +137,7 @@ describe('The partner admin can view progress reports for a given administration
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickProgressButton(roarTestAdministrationId);
     setFilterByGrade('1');
-    setFilterByProgressCategory('Word', 'completed');
+    setFilterByProgressCategory('ROAR - Word', 'completed');
     checkTableColumn(['Username'], 'CypressTestStudent0');
   });
 });
@@ -147,7 +147,7 @@ describe('The partner admin can view progress reports for a given administration
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickProgressButton(roarTestAdministrationId);
-    setFilterByProgressCategory('Written-Vocab', 'started');
+    setFilterByProgressCategory('ROAR - Written Vocab', 'started');
     cy.get('.p-datatable-emptymessage').contains('No results found');
     cy.get('.p-datatable-emptymessage').contains('Reset Filters');
   });

cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js

@@ -101,7 +101,7 @@ describe('The partner admin can view score reports for a given administration an
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickScoreButton(roarTestAdministrationId);
-    setFilterByScoreCategory('Word', 'Pink');
+    setFilterByScoreCategory('ROAR - Word', 'Pink');
     checkTableColumn(['Username'], 'CypressTestStudent0');
   });
 });
@@ -113,7 +113,7 @@ describe('The partner admin can view score reports for a given administration fi
     clickScoreButton(roarTestAdministrationId);
     setFilterByGrade('1');
     setFilterBySchool('Cypress Test School');
-    setFilterByProgressCategory('Morphology', 'completed');
+    setFilterByProgressCategory('ROAR - Morphology', 'completed');
     checkTableColumn(['Username'], 'CypressTestStudent0');
   });
 });
@@ -123,7 +123,7 @@ describe('The partner admin can view score reports for a given administration an
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickScoreButton(roarTestAdministrationId);
-    setFilterByScoreCategory('Morphology', 'Assessed');
+    setFilterByScoreCategory('ROAR - Morphology', 'Assessed');
     checkTableColumn(['Username'], 'CypressTestStudent0');
   });
 });
@@ -133,7 +133,7 @@ describe('The partner admin can view score reports for a given administration an
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickScoreButton(roarTestAdministrationId);
-    setFilterByScoreCategory('Written-Vocab', 'Optional');
+    setFilterByScoreCategory('ROAR - Written Vocab', 'Optional');
     cy.get('.p-datatable-emptymessage').contains('No results found');
     cy.get('.p-datatable-emptymessage').contains('Reset Filters');
   });

package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@bdelab/roam-fluency": "1.11.26",
-    "@bdelab/roar-firekit": "^7.1.1",
+    "@bdelab/roar-firekit": "^7.1.2",
     "@bdelab/roar-letter": "1.11.5",
     "@bdelab/roar-multichoice": "^1.11.3",
     "@bdelab/roar-pa": "2.2.4",

src/App.vue

@@ -77,6 +77,7 @@ onBeforeMount(async () => {
       const userClaims = await fetchDocById('userClaims', authStore.uid);
       authStore.userData = userData;
       authStore.userClaims = userClaims;
+      authStore.updateTasksDictionary();
     }
   });
   isAuthStoreReady.value = true;

src/components/CardAdministration.vue

@@ -33,7 +33,7 @@
       <div class="card-admin-assessments">
         <span class="mr-1"><strong>Assessments</strong>:</span>
         <span v-for="assessmentId in assessmentIds" :key="assessmentId" class="card-inline-list-item">
-          <span>{{ taskDisplayNames[assessmentId]?.name ?? assessmentId }}</span>
+          <span>{{ tasksDictionary[assessmentId]?.publicName ?? assessmentId }}</span>
           <span
             v-if="showParams"
             v-tooltip.top="'Click to view params'"
@@ -166,7 +166,7 @@ import { setBarChartData, setBarChartOptions } from '@/helpers/plotting';
 const router = useRouter();
 
 const authStore = useAuthStore();
-const { roarfirekit, administrationQueryKeyIndex, uid } = storeToRefs(authStore);
+const { roarfirekit, administrationQueryKeyIndex, uid, tasksDictionary } = storeToRefs(authStore);
 
 const props = defineProps({
   id: { type: String, required: true },

src/components/reports/DistributionChartFacet.vue

@@ -18,7 +18,11 @@
 <script setup>
 import { onMounted, ref, watch, computed } from 'vue';
 import embed from 'vega-embed';
-import { taskDisplayNames } from '@/helpers/reports';
+import { useAuthStore } from '@/store/auth';
+import { storeToRefs } from 'pinia';
+
+const authStore = useAuthStore();
+const { tasksDictionary } = storeToRefs(authStore);
 
 const props = defineProps({
   initialized: {
@@ -109,7 +113,7 @@ const distributionChartFacet = (taskId) => {
   return {
     background: null,
     title: {
-      text: `ROAR-${taskDisplayNames[taskId].name}`,
+      text: `${tasksDictionary.value[taskId]?.publicName ?? taskId}`,
       subtitle: `${scoreMode.value.name} Distribution By ${props.facetMode.name}`,
       anchor: 'middle',
       fontSize: 18,

src/components/reports/DistributionChartOverview.vue

@@ -5,7 +5,11 @@
 <script setup>
 import { computed, onMounted } from 'vue';
 import embed from 'vega-embed';
-import { taskDisplayNames } from '@/helpers/reports';
+import { useAuthStore } from '@/store/auth';
+import { storeToRefs } from 'pinia';
+
+const authStore = useAuthStore();
+const { tasksDictionary } = storeToRefs(authStore);
 
 const props = defineProps({
   initialized: {
@@ -70,7 +74,7 @@ const overviewDistributionChart = (taskId) => {
     spacing: 10,
     background: null,
     title: {
-      text: `ROAR-${taskDisplayNames[taskId].name}`,
+      text: `${tasksDictionary.value[taskId].publicName ?? taskId}`,
       subtitle: `Count by Support Level`,
       anchor: 'middle',
       fontSize: 20,

src/components/reports/DistributionChartSupport.vue

@@ -16,7 +16,11 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue';
 import embed from 'vega-embed';
-import { taskDisplayNames } from '@/helpers/reports';
+import { useAuthStore } from '@/store/auth';
+import { storeToRefs } from 'pinia';
+
+const authStore = useAuthStore();
+const { tasksDictionary } = storeToRefs(authStore);
 
 const returnGradeCount = computed(() => {
   const gradeCount = [];
@@ -129,7 +133,7 @@ const distributionBySupport = computed(() => {
     width: 350,
     background: null,
     title: {
-      text: `ROAR-${taskDisplayNames[props.taskId].name}`,
+      text: `${tasksDictionary.value[props.taskId].publicName ?? props.taskId}`,
       subtitle: `Support Level Distribution By ${props.facetMode.name}`,
       anchor: 'middle',
       fontSize: 18,

src/components/reports/IndividualScoreReportTask.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-column align-items-center justify-content-center mb-1 p-1 score-card">
       <div class="flex flex-column md:flex-row align-items-center justify-content-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="header-task-name">{{ tasksDictionary[task.taskId]?.publicName ?? task.taskId }}</div>
           <div class="text-xs uppercase font-thin text-gray-400">
             {{ task[task.scoreToDisplay].name }}
           </div>
@@ -39,15 +39,15 @@
       <div v-if="rawOnlyTasks.includes(task.taskId)" class="score-description px-4 py-2">
         {{ studentFirstName }} achieved a composite score of
         <strong>{{ task.rawScore.value }}</strong>
-        in {{ taskDisplayNames[task.taskId]?.extendedName }}. {{ extendedDescriptions[task.taskId] }}
+        in {{ tasksDictionary[task.taskId]?.technicalName }}. {{ extendedDescriptions[task.taskId] }}
       </div>
       <div v-else-if="grade >= 6" class="px-4 py-2 score-description">
         {{ studentFirstName }} scored a standard score of <strong>{{ Math.round(task.standardScore.value) }}</strong
         >, which indicates they
         <strong>{{
           getSupportLevelLanguage(grade, task?.percentileScore.value, task?.rawScore.value, task.taskId)
         }}</strong>
-        {{ taskDisplayNames[task.taskId]?.extendedName }}. {{ extendedDescriptions[task.taskId] }}
+        {{ tasksDictionary[task.taskId]?.technicalName }}. {{ extendedDescriptions[task.taskId] }}
       </div>
 
       <div v-else class="px-4 py-2 score-description">
@@ -57,7 +57,7 @@
         <strong>{{
           getSupportLevelLanguage(grade, task.percentileScore.value, task.rawScore.value, task.taskId)
         }}</strong>
-        {{ taskDisplayNames[task.taskId]?.extendedName }}. {{ extendedDescriptions[task.taskId] }}
+        {{ tasksDictionary[task.taskId]?.technicalName }}. {{ extendedDescriptions[task.taskId] }}
       </div>
       <div v-if="!rawOnlyTasks.includes(task.taskId)">
         <PvAccordion class="my-2 w-full" :active-index="expanded ? 0 : null">
@@ -111,6 +111,11 @@ import {
   getRawScoreRange,
   getScoreKeys,
 } from '@/helpers/reports';
+import { useAuthStore } from '@/store/auth';
+import { storeToRefs } from 'pinia';
+
+const authStore = useAuthStore();
+const { tasksDictionary } = storeToRefs(authStore);
 
 const props = defineProps({
   studentData: {

src/components/reports/SubscoreTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2 class="header-text">ROAR-{{ _toUpper(taskName) }} SCORE TABLE</h2>
+  <h2 class="header-text">{{ _toUpper(taskName) }} SCORE TABLE</h2>
   <RoarDataTable
     :columns="columns"
     :data="computedTableData"

src/components/reports/tasks/TaskReport.vue

@@ -53,7 +53,7 @@
     <SubscoreTable
       v-if="taskId === 'letter'"
       task-id="letter"
-      :task-name="taskDisplayNames['letter'].name"
+      :task-name="tasksDictionary['letter'].publicName"
       :administration-id="administrationId"
       :org-type="orgType"
       :org-id="orgId"
@@ -64,7 +64,7 @@
     <SubscoreTable
       v-if="taskId === 'pa'"
       task-id="pa"
-      :task-name="taskDisplayNames['pa'].name"
+      :task-name="tasksDictionary['pa'].publicName"
       :administration-id="administrationId"
       :org-type="orgType"
       :org-id="orgId"
@@ -79,9 +79,14 @@ import DistributionChartFacet from '@/components/reports/DistributionChartFacet.
 import DistributionChartSupport from '@/components/reports/DistributionChartSupport.vue';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import { taskDisplayNames, tasksToDisplayGraphs, taskInfoById } from '@/helpers/reports.js';
+import { tasksToDisplayGraphs, taskInfoById } from '@/helpers/reports.js';
 import SubscoreTable from '@/components/reports/SubscoreTable.vue';
 import { ref, computed } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import { storeToRefs } from 'pinia';
+
+const authStore = useAuthStore();
+const { tasksDictionary } = storeToRefs(authStore);
 
 // eslint-disable-next-line no-unused-vars
 const props = defineProps({