eveal/gemory
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Sirttas
2026-06-09 21:56:12 +02:00
parent b2c97c1327
commit 5ac369a643
1 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/rules/ListCharacterRuleBooks.vue
+26 -8
View File
@@ -4,9 +4,12 @@ import {Character, CharacterLabel, useCharactersStore} from "@/characters";
import {PencilSquareIcon} from "@heroicons/vue/24/outline"; import {PencilSquareIcon} from "@heroicons/vue/24/outline";
import {findCharacterRuleBookByCharacterId, useRuleBooksStore} from "@/rules"; import {findCharacterRuleBookByCharacterId, useRuleBooksStore} from "@/rules";
import {computedAsync} from "@vueuse/core"; import {computedAsync} from "@vueuse/core";
import {routeNames} from "@/routes.ts";
import {SortableHeader, useSort} from "@/components/table";
type CharacterRuleBookView = { type CharacterRuleBookView = {
character: Character; character: Character;
characterName: string;
characterId: number; characterId: number;
ruleBookName: string; ruleBookName: string;
} }
@@ -14,26 +17,41 @@ type CharacterRuleBookView = {
const {characters} = storeToRefs(useCharactersStore()); const {characters} = storeToRefs(useCharactersStore());
const {findById: findRuleBookById} = useRuleBooksStore(); 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 characterRuleBook = await findCharacterRuleBookByCharacterId(character.characterId);
const ruleBook = findRuleBookById(characterRuleBook.ruleBookId); const ruleBook = findRuleBookById(characterRuleBook.ruleBookId);
return { return {
character, character,
characterName: character.name,
characterId: character.characterId, characterId: character.characterId,
ruleBookName: ruleBook?.name ?? '' ruleBookName: ruleBook?.name ?? ''
} }
} })), []))
</script> </script>
<template> <template>
<div class="grid mb-2 mt-4"> <div class="grid mb-2 mt-4">
<div v-for="characterRuleBookView in list" :key="characterRuleBookView.characterId" class="flex items-center mb-2"> <table>
<CharacterLabel class="flex grow" :character="characterRuleBookView.character" /> <thead>
<span class="flex grow me-2">{{characterRuleBookView.name}}</span> <tr>
<RouterLink class="btn-icon ms-2" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: characterRuleBookView.characterId } }"><PencilSquareIcon /></RouterLink> <SortableHeader v-bind="headerProps" sortKey="characterName">Character</SortableHeader>
</div> <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> </div>
</template> </template>