always show latest journal sheet

src/components/EntryLink.vue

@@ -55,7 +55,7 @@
         @click="showPrevious = !showPrevious"
       >
         <span v-if="showPrevious">Hide scoresheets</span>
-        <span v-else>Show scoresheets</span>
+        <span v-else>Show all scoresheets</span>
       </button>
       <button
         v-if="!entry.didNotSkipAt && !entry.lockedAt"
@@ -74,9 +74,9 @@
       </button>
     </div>
 
-    <div v-if="showPrevious">
+    <div>
       <router-link
-        v-for="scoresheet of markScoresheets"
+        v-for="scoresheet of (showPrevious ? markScoresheets : markScoresheets.slice(0, 1))"
         :key="scoresheet.id"
         class="border-t grid grid-rows-2 grid-cols-[min-content,auto] gap-x-2"
         :class="{
@@ -88,14 +88,18 @@
       >
         <div class="px-2 pt-2">
           Created
-        </div><div class="px-2 pt-2">
+        </div>
+        <div class="px-2 pt-2">
           {{ formatDate(scoresheet.createdAt) }}
         </div>
+
         <div class="px-2">
           Completed
-        </div><div class="px-2">
+        </div>
+        <div class="px-2">
           {{ scoresheet.completedAt ? formatDate(scoresheet.completedAt) : 'No' }}
         </div>
+
         <journal-tally class="col-span-2" :tally="localScoresheets?.[scoresheet.id]?.tally ?? {}" />
       </router-link>
     </div>
@@ -105,7 +109,7 @@
 <script lang="ts" setup>
 import { type ScoresheetBaseFragment, type MarkScoresheetFragment, type Entry, useCreateMarkScoresheetMutation, type AthleteFragment, type TeamFragment, type Category, type JudgeFragment, type JudgeAssignment } from '../graphql/generated'
 import { useRouter } from 'vue-router'
-import { type PropType, toRef, ref, computed } from 'vue'
+import { type PropType, toRef, ref, computed, watch } from 'vue'
 import { formatDate } from '../helpers'
 import { getRopeScoreLocalScoresheet, isRemoteMarkScoresheet } from '../hooks/scoresheet'
 import JournalTally from './JournalTally.vue'
@@ -138,16 +142,20 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits<{
+  loadedLocal: []
+}>()
+
 const entry = toRef(props, 'entry')
 const _scoresheets = toRef(props, 'scoresheets')
-const markScoresheets = computed(() => _scoresheets.value?.filter(scsh => isRemoteMarkScoresheet(scsh)) ?? [])
+const markScoresheets = computed(() => [...(_scoresheets.value?.filter(scsh => isRemoteMarkScoresheet(scsh)) ?? [])].sort((a, b) => b.createdAt - a.createdAt))
 const judge = toRef(props, 'judge')
 const router = useRouter()
 
 const assignments = toRef(props, 'assignments')
 const assignment = computed(() => assignments.value?.find(a => a.competitionEventId === entry.value.competitionEventId && a.category.id === entry.value.category.id))
 
-const showPrevious = ref(true)
+const showPrevious = ref(false)
 
 const createScoresheetMutation = useCreateMarkScoresheetMutation({
   refetchQueries: ['GroupScoresheets']
@@ -170,6 +178,10 @@ const localScoresheets = computedAsync(async () => Object.fromEntries(
     .map(scsh => [scsh.id, scsh])
 ))
 
+watch(localScoresheets, () => {
+  emit('loadedLocal')
+}, { once: true })
+
 async function createScoresheet () {
   const res = await createScoresheetMutation.mutate({
     entryId: entry.value.id,

src/components/ServoEntryLink.vue

@@ -52,13 +52,13 @@
         @click="showPrevious = !showPrevious"
       >
         <span v-if="showPrevious">Hide scoresheets</span>
-        <span v-else>Show scoresheets</span>
+        <span v-else>Show all scoresheets</span>
       </button>
     </div>
 
-    <div v-if="showPrevious">
+    <div>
       <a
-        v-for="scoresheet of prevScoresheets"
+        v-for="scoresheet of (showPrevious ? prevScoresheets : prevScoresheets.slice(0, 1))"
         :key="scoresheet.id"
         class="block border-t grid grid-rows-2 grid-cols-[min-content,auto] gap-x-2"
         :class="{
@@ -68,8 +68,12 @@
         }"
         @click.prevent="openScoresheet(scoresheet.id)"
       >
-        <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>
+        <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>
@@ -106,6 +110,10 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits<{
+  loadedLocal: []
+}>()
+
 const entry = toRef(props, 'entry')
 const judge = toRef(props, 'judge')
 const competitionId = toRef(props, 'competitionId')
@@ -131,13 +139,17 @@ watch(() => [
   judge.value,
   competitionId.value
 ] as const, async ([newEn, newJu, newCId]) => {
-  prevScoresheets.value = await getServoScoresheetsForEntry({
+  prevScoresheets.value = [...await getServoScoresheetsForEntry({
     competitionId: newCId,
     entryId: newEn.EntryNumber,
     judgeSequence: newJu.JudgeSequence
-  })
+  })].sort((a, b) => b.createdAt - a.createdAt)
 }, { immediate: true })
 
+watch(prevScoresheets, () => {
+  emit('loadedLocal')
+}, { once: true })
+
 const createScoresheetLoading = ref(false)
 async function createScoresheet () {
   if (entry.value.IsScratched || entry.value.IsLocked) return

src/views/ropescore/Group.vue

@@ -58,6 +58,7 @@
       :assignments="judge?.assignments!"
       :group-id="group.id"
       :current-heat="entry.heat === currentHeat"
+      @loaded-local="correctScroll()"
     />
   </div>
 
@@ -70,29 +71,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { apiDomain } from '../../apollo'
 import { useAuth } from '../../hooks/auth'
 import ScoreButton from '../../components/ScoreButton.vue'
 import BatteryStatus from '../../components/BatteryStatus.vue'
 import EntryLink from '../../components/EntryLink.vue'
 import { type MarkScoresheetFragment, type ScoresheetBaseFragment, useGroupScoresheetsQuery } from '../../graphql/generated'
+import { useDebounceFn } from '@vueuse/core'
 
 const auth = useAuth()
 const router = useRouter()
 const route = useRoute()
 
 const { result, loading, error, refetch } = useGroupScoresheetsQuery({ groupId: route.params.id as string }, () => ({ fetchPolicy: 'cache-and-network', pollInterval: 30_000, enabled: auth.isLoggedIn.value }))
 
-watch(result, (newData, oldData) => {
-  if (oldData == null && newData?.group?.currentHeat != null) {
-    scrollToHeat(newData?.group?.currentHeat)
-  }
-}, {
-  flush: 'post'
-})
-
 const group = computed(() => result.value?.group)
 const judge = computed(() => group.value?.deviceJudge)
 const enRes = computed(() => result.value?.group?.entries ?? [])
@@ -110,10 +104,27 @@ const entries = computed(() =>
     : []
 )
 
+watch(result, (newData, oldData) => {
+  if (oldData == null && newData?.group?.currentHeat != null) {
+    scrollToHeat(currentHeat.value)
+  }
+}, {
+  flush: 'post'
+})
+
 function scrollToHeat (heatNumber: number) {
   document.getElementById(`heat-${heatNumber}`)?.scrollIntoView({
     behavior: 'instant',
     block: 'center',
   })
 }
+
+const corrected = ref(false)
+const correctScroll = useDebounceFn(() => {
+  if (corrected.value) return
+  corrected.value = true
+  void nextTick(() => {
+    scrollToHeat(currentHeat.value)
+  })
+}, 100)
 </script>

src/views/servo/Entries.vue

@@ -3,9 +3,9 @@ import { useRouter } from 'vue-router'
 import ScoreButton from '../../components/ScoreButton.vue'
 import ServoEntryLink from '../../components/ServoEntryLink.vue'
 import BatteryStatus from '../../components/BatteryStatus.vue'
-import { useFetch } from '@vueuse/core'
+import { useDebounceFn, useFetch } from '@vueuse/core'
 import { useServoAuth } from '../../hooks/servo-auth'
-import { computed, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { type AssignmentCodeLookupResponse } from '../../hooks/scoresheet'
 import { version } from '../../helpers'
 
@@ -40,14 +40,6 @@ const { data, error, isFetching, execute: refetch } = useFetch(url, {
   }
 }).json<AssignmentCodeLookupResponse>()
 
-watch(data, (newData, oldData) => {
-  if (oldData == null && newData?.Session.CurrentHeatNumber != null) {
-    scrollToHeat(newData.Session.CurrentHeatNumber)
-  }
-}, {
-  flush: 'post'
-})
-
 const currentHeat = computed(() => data.value?.Session.CurrentHeatNumber ?? 1)
 
 const entries = computed(() =>
@@ -60,12 +52,29 @@ const entries = computed(() =>
     : []
 )
 
+watch(data, (newData, oldData) => {
+  if (oldData == null && newData?.Session.CurrentHeatNumber != null) {
+    scrollToHeat(currentHeat.value)
+  }
+}, {
+  flush: 'post'
+})
+
 function scrollToHeat (heatNumber: number) {
   document.getElementById(`heat-${heatNumber}`)?.scrollIntoView({
     behavior: 'instant',
     block: 'center',
   })
 }
+
+const corrected = ref(false)
+const correctScroll = useDebounceFn(() => {
+  if (corrected.value) return
+  corrected.value = true
+  void nextTick(() => {
+    scrollToHeat(currentHeat.value)
+  })
+}, 100)
 </script>
 
 <template>
@@ -125,6 +134,7 @@ function scrollToHeat (heatNumber: number) {
       :competition-id="data.Competition.CompetitionID"
       :station-name="data.StationName"
       :current-heat="currentHeat === entry.HeatNumber"
+      @loaded-local="correctScroll()"
     />
   </div>