rulebook name

src/pages/rules/EditCharacterRuleBook.vue

@@ -15,7 +15,7 @@ import {isMain, Ledger, LedgerSelect, systemLedger, useLedgersStore} from "@/led
 type Bindings = { [key: string]: Ledger; };
 
 const ruleBookStore = useRuleBooksStore();
-const {findById: findCharacterRuleBookById} = ruleBookStore;
+const {findById: findRuleBookById} = ruleBookStore;
 const {ruleBooks} = storeToRefs(ruleBookStore);
 const {findById: findCharacterById} = useCharactersStore();
 const {ledgers} = storeToRefs(useLedgersStore());
@@ -33,7 +33,7 @@ watchEffect(async () => {
   if (characterId) {
     const characterRuleBook = await findCharacterRuleBookByCharacterId(characterId);
 
-    ruleBook.value = findCharacterRuleBookById(characterRuleBook.ruleBookId);
+    ruleBook.value = findRuleBookById(characterRuleBook.ruleBookId);
     bindings.value = Object.fromEntries(
       Object.entries(characterRuleBook.bindings)
         .map(([key, id]) => [key, ledgersToUse.value.find(l => l.ledgerId === id) ?? systemLedger])

src/pages/rules/ListCharacterRuleBooks.vue

@@ -1,18 +1,39 @@
 <script setup lang="ts">
 import {storeToRefs} from "pinia";
-import {CharacterLabel, useCharactersStore} from "@/characters";
+import {Character, CharacterLabel, useCharactersStore} from "@/characters";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
-import {routeNames} from "@/routes";
+import {findCharacterRuleBookByCharacterId, useRuleBooksStore} from "@/rules";
+import {computedAsync} from "@vueuse/core";
+
+type CharacterRuleBookView = {
+  character: Character;
+  characterId: number;
+  ruleBookName: string;
+}
 
 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 characterRuleBook = await findCharacterRuleBookByCharacterId(character.characterId);
+  const ruleBook = findRuleBookById(characterRuleBook.ruleBookId);
+
+  return {
+    character,
+    characterId: character.characterId,
+    ruleBookName: ruleBook?.name ?? ''
+  }
+}
 </script>
 
 <template>
   <div class="grid mb-2 mt-4">
-    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
-      <CharacterLabel class="flex grow" :character="character" />
-      <RouterLink class="btn-icon ms-2" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: character.characterId } }"><PencilSquareIcon /></RouterLink>
+    <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>
   </div>
 </template>