character rule book store

src/pages/rules/ListCharacterRuleBooks.vue

@@ -1,34 +1,23 @@
 <script setup lang="ts">
-import {storeToRefs} from "pinia";
-import {Character, CharacterLabel, useCharactersStore} from "@/characters";
+import {Character, CharacterLabel} from "@/characters";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
-import {findCharacterRuleBookByCharacterId, useRuleBooksStore} from "@/rules";
-import {computedAsync} from "@vueuse/core";
+import {CharacterRuleBook, useCharacterRuleBooksStore} from "@/rules";
 import {routeNames} from "@/routes.ts";
 import {SortableHeader, useSort} from "@/components/table";
 
 type CharacterRuleBookView = {
   character: Character;
   characterName: string;
-  characterId: number;
   ruleBookName: string;
 }
 
-const {characters} = storeToRefs(useCharactersStore());
-const {findById: findRuleBookById} = useRuleBooksStore();
+const characterRuleBooksStore = useCharacterRuleBooksStore();
 
-
-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 ?? ''
-  }
-})), []))
+const { sortedArray, headerProps } = useSort<CharacterRuleBookView>(() => characterRuleBooksStore.characterRuleBooks.map((characterRuleBook: CharacterRuleBook): CharacterRuleBookView => ({
+  character: characterRuleBook.character,
+  characterName: characterRuleBook.character.name,
+  ruleBookName: characterRuleBook.ruleBook.name
+})))
 </script>
 
 <template>
@@ -42,13 +31,13 @@ const { sortedArray, headerProps } = useSort(computedAsync<CharacterRuleBookView
       </tr>
       </thead>
       <tbody>
-      <tr v-for="characterRuleBookView in sortedArray" :key="characterRuleBookView.characterId" >
+      <tr v-for="characterRuleBookView in sortedArray" :key="characterRuleBookView.character.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>
+          <RouterLink class="btn-icon" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: characterRuleBookView.character.characterId } }"><PencilSquareIcon /></RouterLink>
         </td>
       </tr>
       </tbody>