character rule book store

src/pages/rules/EditCharacterRuleBook.vue

@@ -4,9 +4,8 @@ import {useRoute} from "vue-router";
 import {computed, ref, watch, watchEffect} from "vue";
 import log from "loglevel";
 import {
-  findCharacterRuleBookByCharacterId,
   RuleBook,
-  setCharacterRuleBookForCharacter,
+  useCharacterRuleBooksStore,
   useRuleBooksStore
 } from "@/rules";
 import {storeToRefs} from "pinia";
@@ -17,6 +16,7 @@ type Bindings = { [key: string]: Ledger; };
 const ruleBookStore = useRuleBooksStore();
 const {findById: findRuleBookById} = ruleBookStore;
 const {ruleBooks} = storeToRefs(ruleBookStore);
+const {findByCharacterId, setForCharacter} = useCharacterRuleBooksStore();
 const {findById: findCharacterById} = useCharactersStore();
 const {ledgers} = storeToRefs(useLedgersStore());
 
@@ -31,11 +31,11 @@ watchEffect(async () => {
   const characterId = character.value?.characterId;
 
   if (characterId) {
-    const characterRuleBook = await findCharacterRuleBookByCharacterId(characterId);
+    const characterRuleBook = findByCharacterId(characterId);
 
-    ruleBook.value = findRuleBookById(characterRuleBook.ruleBookId);
+    ruleBook.value = findRuleBookById(characterRuleBook?.ruleBook.ruleBookId ?? '');
     bindings.value = Object.fromEntries(
-      Object.entries(characterRuleBook.bindings)
+      Object.entries(characterRuleBook?.bindings ?? {})
         .map(([key, id]) => [key, ledgersToUse.value.find(l => l.ledgerId === id) ?? systemLedger])
     );
   }
@@ -46,7 +46,7 @@ const save = () => {
   const ruleBookId = ruleBook.value?.ruleBookId;
 
   if (characterId && ruleBookId) {
-    setCharacterRuleBookForCharacter(characterId, {
+    setForCharacter(characterId, {
       ruleBookId,
       bindings: Object.fromEntries(
         Object.entries(bindings.value)

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>