show journal sheet info

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@apollo/client": "^3.11.8",
     "@ropescore/components": "^1.9.1",
-    "@ropescore/rulesets": "^0.13.0",
+    "@ropescore/rulesets": "^0.13.3",
     "@sentry/vue": "^8.36.0",
     "@vue/apollo-composable": "^4.2.1",
     "@vue/tsconfig": "^0.5.1",

src/components/EntryLink.vue

@@ -88,6 +88,7 @@
       >
         <div>Created</div><div>{{ formatDate(scoresheet.createdAt) }}</div>
         <div>Completed</div><div>{{ scoresheet.completedAt ? formatDate(scoresheet.completedAt) : 'No' }}</div>
+        <journal-tally class="col-span-2" :tally="scoresheet.tally" />
       </router-link>
     </div>
   </div>
@@ -99,6 +100,7 @@ import { useRouter } from 'vue-router'
 import { type PropType, toRef, ref, computed } from 'vue'
 import { formatDate } from '../helpers'
 import { isRemoteMarkScoresheet } from '../hooks/scoresheet'
+import JournalTally from './JournalTally.vue'
 
 const props = defineProps({
   entry: {
@@ -146,7 +148,7 @@ const color = computed(() => {
   if (props.entry.didNotSkipAt) return 'gray'
   if (
     props.entry.lockedAt ||
-    markScoresheets.value.every(scsh => !(scsh as MarkScoresheetFragment).completedAt)
+    (markScoresheets.value.length > 0 && markScoresheets.value.every(scsh => !(scsh as MarkScoresheetFragment).completedAt))
   ) return 'indigo'
   return 'green'
 })

src/components/JournalTally.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ScoreTally } from '@ropescore/rulesets'
+import type { PropType } from 'vue'
+
+defineProps({
+  tally: {
+    type: Object as PropType<ScoreTally>,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <div class="journal-container flex flex-wrap flex-row w-full">
+    <div v-for="v, k of tally" :key="k" class="even-odd p-4 flex-1">
+      <span>{{ k }}:</span>
+      <br>
+      {{ v }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.journal-container .even-odd:nth-child(even) {
+  background-color: #00000022;
+}
+</style>

src/components/ModelCard.vue

@@ -9,7 +9,7 @@
       {{ rulesetList }}
     </p>
 
-    <template v-if="model.localAlternativeCompetitionEvents">
+    <template v-if="Array.isArray(model.localAlternativeCompetitionEvents)">
       <select
         v-model="competitionEventLookupCode"
         class="p-2 mt-4 rounded"
@@ -93,10 +93,10 @@ function getPlainOptions (options: Record<string, any>) {
 const rulesetList = computed(() => Array.isArray(props.model.rulesId) ? props.model.rulesId.join(', ') : props.model.rulesId)
 
 onMounted(() => {
-  if (props.model.localAlternativeCompetitionEvents) {
+  if (Array.isArray(props.model.localAlternativeCompetitionEvents)) {
     competitionEventLookupCode.value = props.model.localAlternativeCompetitionEvents[0][1]
-  } else if (props.model.localCompetitionEvent) {
-    competitionEventLookupCode.value = props.model.localCompetitionEvent
+  } else {
+    competitionEventLookupCode.value = props.model.localAlternativeCompetitionEvents
   }
 })
 </script>

src/components/ServoEntryLink.vue

@@ -59,16 +59,17 @@
       <a
         v-for="scoresheet of prevScoresheets"
         :key="scoresheet.id"
-        class="p-2 border-t grid grid-rows-2 grid-cols-[min-content,auto] gap-x-2"
+        class="block border-t grid grid-rows-2 grid-cols-[min-content,auto] gap-x-2"
         :class="{
           'hover:bg-green-600': color === 'green',
           'hover:bg-indigo-600': color === 'indigo',
           'hover:bg-gray-600': color === 'gray'
         }"
         @click.prevent="openScoresheet(scoresheet.id)"
       >
-        <div>Created</div><div>{{ formatDate(scoresheet.createdAt) }}</div>
-        <div>Completed</div><div>{{ scoresheet.completedAt ? formatDate(scoresheet.completedAt) : 'No' }}</div>
+        <div class="px-2 pt-2">Created</div><div class="px-2 pt-2">{{ formatDate(scoresheet.createdAt) }}</div>
+        <div class="px-2">Completed</div><div class="px-2">{{ scoresheet.completedAt ? formatDate(scoresheet.completedAt) : 'No' }}</div>
+        <journal-tally class="col-span-2" :tally="scoresheet.tally" />
       </a>
     </div>
   </div>
@@ -79,6 +80,7 @@ import { useRouter } from 'vue-router'
 import { type PropType, toRef, computed, ref, watch } from 'vue'
 import { formatList, formatDate } from '../helpers'
 import { type ServoJudge, type ServoEntry, createServoScoresheet, getServoScoresheetsForEntry, type ServoIntermediateScoresheet } from '../hooks/scoresheet'
+import JournalTally from './JournalTally.vue'
 
 const props = defineProps({
   entry: {