Highlight the selected worklog in the list

components/applications/worklog-tracker/WlWorklogList.vue

@@ -2,25 +2,32 @@
   <template v-if="props.items.length > 0">
     <p class="text-right">{{ totalDuration }}</p>
     <ul>
-      <WlWorklogListItem v-for="item in props.items" :key="item.id" :item="item" @click="listeners.click(item)"/>
+      <WlWorklogListItem
+          v-for="(item, index) in props.items"
+          :key="item.id"
+          :item="item"
+          :selected="props.selectedIndex === index"
+          @click="listeners.click(index)"
+      />
     </ul>
   </template>
   <p v-else>No worklogs found.</p>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed } from 'vue'
 
 import WlWorklogListItem from '~/components/applications/worklog-tracker/WlWorklogListItem.vue'
 import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
 import { useWorklogDurationFormat } from '~/composables/server/worklog-tracker/useWorklogDurationFormat'
 
 type Props = {
-  items: WorklogItem[]
+  items: WorklogItem[];
+  selectedIndex: number;
 }
 
 type Emits = {
-  (e: 'select', item: WorklogItem): void
+  (e: 'select', index: number): void
 }
 
 const props = defineProps<Props>()
@@ -30,8 +37,8 @@ const totalDurationSeconds = computed(() => props.items.reduce((acc, item) => ac
 const totalDuration = useWorklogDurationFormat(totalDurationSeconds)
 
 const listeners = {
-  click(item: WorklogItem): void {
-    emits('select', item)
+  click (index: number): void {
+    emits('select', index)
   }
 }
 </script>

components/applications/worklog-tracker/WlWorklogListItem.vue

@@ -1,6 +1,7 @@
 <template>
   <li
       class="flex cursor-pointer border-x border-t first:rounded-t last:rounded-b last:border-b"
+      :class="classes"
       @click="listeners.click"
   >
     <span class="w-40 border-r p-3">{{ props.item.ticket }}</span>
@@ -17,7 +18,8 @@ import type { WorklogItem } from '~/composables/server/worklog-tracker/types/wor
 import { useWorklogDurationFormat } from '~/composables/server/worklog-tracker/useWorklogDurationFormat'
 
 type Props = {
-  item: WorklogItem
+  item: WorklogItem;
+  selected: boolean;
 }
 
 type Emits = {
@@ -39,10 +41,13 @@ const formattedDates = computed(() => ({
     hour12: false,
   })
 }))
+const classes = computed(() => ({
+  'bg-slate-100 dark:bg-slate-700': props.selected
+}))
 const duration = useWorklogDurationFormat(props.item.durationSeconds)
 
 const listeners = {
-  click(): void {
+  click (): void {
     emit('click')
   }
 }

components/applications/worklog-tracker/WlWorklogTracker.vue

@@ -14,7 +14,7 @@
         @remove="listeners.remove"
         @close="listeners.close"
     />
-    <WlWorklogList :items="worklogList.value" @select="listeners.select"/>
+    <WlWorklogList :selected-index="selectedIndex" :items="worklogList.value" @select="listeners.select"/>
   </template>
   <WlWorklogAuthForm v-else @login="listeners.login"/>
 </template>
@@ -47,12 +47,13 @@ onMounted(() => methods.loadWorklogs())
 const item = ref(new WorklogItem())
 const isEditing = ref(false)
 const date = ref(worklogToday.get())
+const selectedIndex = ref(-1)
 
 const listeners = {
-  updateDate(): void {
+  updateDate (): void {
     methods.loadWorklogs()
   },
-  async save(newItem: WorklogItem): Promise<void> {
+  async save (newItem: WorklogItem): Promise<void> {
     newItem.startTime.setFullYear(date.value.getFullYear(), date.value.getMonth(), date.value.getDate())
     newItem.endTime.setFullYear(date.value.getFullYear(), date.value.getMonth(), date.value.getDate())
 
@@ -66,35 +67,37 @@ const listeners = {
 
     listeners.close()
   },
-  async remove(): Promise<void> {
+  async remove (): Promise<void> {
     await worklogStorage.remove(item.value)
     worklogList.remove(item.value)
 
     listeners.close()
   },
-  close(): void {
+  close (): void {
     item.value = new WorklogItem()
+    selectedIndex.value = -1
     isEditing.value = false
 
     if (worklogList.value.length > 0) {
       item.value.startTime = worklogList.value[0].endTime
     }
   },
-  select(selectedItem: WorklogItem): void {
-    item.value = selectedItem
+  select (index: number): void {
+    item.value = worklogList.value[index]
+    selectedIndex.value = index
     isEditing.value = true
   },
-  async login(email: string, password: string): Promise<void> {
+  async login (email: string, password: string): Promise<void> {
     await worklogAuth.login(email, password)
     await methods.loadWorklogs()
   },
-  logout(): void {
+  logout (): void {
     worklogAuth.logout()
   }
 }
 
 const methods = {
-  async loadWorklogs(): Promise<void> {
+  async loadWorklogs (): Promise<void> {
     const items = await worklogStorage.load(date.value)
     worklogList.load(items)