46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {Character, CharacterLabel} from "@/characters";
|
|
import {PencilSquareIcon} from "@heroicons/vue/24/outline";
|
|
import {CharacterRuleBook, useCharacterRuleBooksStore} from "@/rules";
|
|
import {routeNames} from "@/routes.ts";
|
|
import {SortableHeader, useSort} from "@/components/table";
|
|
|
|
type CharacterRuleBookView = {
|
|
character: Character;
|
|
characterName: string;
|
|
ruleBookName: string;
|
|
}
|
|
|
|
const characterRuleBooksStore = useCharacterRuleBooksStore();
|
|
|
|
const { sortedArray, headerProps } = useSort<CharacterRuleBookView>(() => characterRuleBooksStore.characterRuleBooks.map((characterRuleBook: CharacterRuleBook): CharacterRuleBookView => ({
|
|
character: characterRuleBook.character,
|
|
characterName: characterRuleBook.character.name,
|
|
ruleBookName: characterRuleBook.ruleBook.name
|
|
})))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid mb-2 mt-4">
|
|
<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.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.character.characterId } }"><PencilSquareIcon /></RouterLink>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template> |