fix

src/pages/rules/ListCharacterRuleBooks.vue

@@ -4,9 +4,12 @@ import {Character, CharacterLabel, useCharactersStore} from "@/characters";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {findCharacterRuleBookByCharacterId, useRuleBooksStore} from "@/rules";
 import {computedAsync} from "@vueuse/core";
+import {routeNames} from "@/routes.ts";
+import {SortableHeader, useSort} from "@/components/table";
 
 type CharacterRuleBookView = {
   character: Character;
+  characterName: string;
   characterId: number;
   ruleBookName: string;
 }
@@ -14,26 +17,41 @@ type CharacterRuleBookView = {
 const {characters} = storeToRefs(useCharactersStore());
 const {findById: findRuleBookById} = useRuleBooksStore();
 
-const list = computedAsync<CharacterRuleBookView>(async () => await Promise.all(characters.value.map(createCharacterRuleBookView)), [])
 
-const createCharacterRuleBookView = async (character: Character): Promise<CharacterRuleBookView> => {
+const { sortedArray, headerProps } = useSort(computedAsync<CharacterRuleBookView[]>(async () => await Promise.all(characters.value.map(async (character: Character): Promise<CharacterRuleBookView> => {
   const characterRuleBook = await findCharacterRuleBookByCharacterId(character.characterId);
   const ruleBook = findRuleBookById(characterRuleBook.ruleBookId);
 
   return {
     character,
+    characterName: character.name,
     characterId: character.characterId,
     ruleBookName: ruleBook?.name ?? ''
   }
-}
+})), []))
 </script>
 
 <template>
   <div class="grid mb-2 mt-4">
-    <div v-for="characterRuleBookView in list" :key="characterRuleBookView.characterId" class="flex items-center mb-2">
-      <CharacterLabel class="flex grow" :character="characterRuleBookView.character" />
-      <span class="flex grow me-2">{{characterRuleBookView.name}}</span>
-      <RouterLink class="btn-icon ms-2" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: characterRuleBookView.characterId } }"><PencilSquareIcon /></RouterLink>
-    </div>
+    <table>
+      <thead>
+      <tr>
+        <SortableHeader v-bind="headerProps" sortKey="characterName">Character</SortableHeader>
+        <SortableHeader v-bind="headerProps" sortKey="ruleBookName">Rule Book</SortableHeader>
+        <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="characterRuleBookView in sortedArray" :key="characterRuleBookView.characterId" >
+        <td>
+          <CharacterLabel :character="characterRuleBookView.character" />
+        </td>
+        <td>{{characterRuleBookView.ruleBookName}}</td>
+        <td class="text-right">
+          <RouterLink class="btn-icon" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: characterRuleBookView.characterId } }"><PencilSquareIcon /></RouterLink>
+        </td>
+      </tr>
+      </tbody>
+    </table>
   </div>
 </template>