rework store usage

src/pages/rules/EditCharacterRuleBook.vue

@@ -8,19 +8,16 @@ import {
   useCharacterRuleBooksStore,
   useRuleBooksStore
 } from "@/rules";
-import {storeToRefs} from "pinia";
 import {isMain, Ledger, LedgerSelect, systemLedger, useLedgersStore} from "@/ledger";
 
 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());
+const characterRuleBooksStore = useCharacterRuleBooksStore();
+const charactersStore = useCharactersStore();
+const ledgersStore = useLedgersStore();
 
-const ledgersToUse = computed(() => [systemLedger, ...ledgers.value.filter(isMain)]);
+const ledgersToUse = computed(() => [systemLedger, ...ledgersStore.ledgers.filter(isMain)]);
 
 const character = ref<Character>();
 const ruleBook = ref<RuleBook>();
@@ -31,9 +28,9 @@ watchEffect(async () => {
   const characterId = character.value?.characterId;
 
   if (characterId) {
-    const characterRuleBook = findByCharacterId(characterId);
+    const characterRuleBook = characterRuleBooksStore.findByCharacterId(characterId);
 
-    ruleBook.value = findRuleBookById(characterRuleBook?.ruleBook.ruleBookId ?? '');
+    ruleBook.value = ruleBookStore.findById(characterRuleBook?.ruleBook.ruleBookId ?? '');
     bindings.value = Object.fromEntries(
       Object.entries(characterRuleBook?.bindings ?? {})
         .map(([key, id]) => [key, ledgersToUse.value.find(l => l.ledgerId === id) ?? systemLedger])
@@ -46,7 +43,7 @@ const save = () => {
   const ruleBookId = ruleBook.value?.ruleBookId;
 
   if (characterId && ruleBookId) {
-    setForCharacter(characterId, {
+    characterRuleBooksStore.setForCharacter(characterId, {
       ruleBookId,
       bindings: Object.fromEntries(
         Object.entries(bindings.value)
@@ -60,7 +57,7 @@ watch(useRoute(), async route => {
   if (route.params.characterId) {
     const id = parseInt(typeof route.params.characterId === 'string' ? route.params.characterId : route.params.characterId[0]);
 
-    character.value = await findCharacterById(id);
+    character.value = await charactersStore.findById(id);
     log.info('Loaded character:', character.value);
   } else {
     character.value = undefined;
@@ -80,7 +77,7 @@ watch(useRoute(), async route => {
     <div class="flex-col border-b-1">
       Rule Book:
       <select class="me-2 mb-2 w-50" v-model="ruleBook">
-        <option v-for="rb in ruleBooks" :key="rb.ruleBookId" :value="rb">{{ rb.name }}</option>
+        <option v-for="rb in ruleBookStore.ruleBooks" :key="rb.ruleBookId" :value="rb">{{ rb.name }}</option>
       </select>
     </div>
     <div class="flex-col border-b-1">

src/pages/rules/EditRuleBook.vue

@@ -14,12 +14,12 @@ const usedForAcquisitions = ref<boolean>(false);
 const ledgerRefs = ref<string[]>([]);
 const script = ref<string>('');
 
-const {findById, create, update, refresh} = useRuleBooksStore();
+const ruleBooksStore = useRuleBooksStore();
 const router = useRouter();
 
 const save = async () => {
   if (!ruleBookId.value) {
-    const created = await create({
+    const created = await ruleBooksStore.create({
       name: name.value,
       usedForAcquisitions: usedForAcquisitions.value,
       ledgerRefs: ledgerRefs.value,
@@ -28,7 +28,7 @@ const save = async () => {
     await router.push({ name: routeNames.editRuleBook, params: {ruleBookId: created.ruleBookId}})
 
   } else {
-    await update(ruleBookId.value, {
+    await ruleBooksStore.update(ruleBookId.value, {
       name: name.value,
       usedForAcquisitions: usedForAcquisitions.value,
       ledgerRefs: ledgerRefs.value,
@@ -57,13 +57,13 @@ const removeLedgerRef = (index: number) => {
 
 watch(useRoute(), async route => {
   if (route.params.ruleBookId) {
-    const promise = refresh(); // FIXME don't call refresh
+    const promise = ruleBooksStore.refresh(); // FIXME don't call refresh
 
     const id = typeof route.params.ruleBookId === 'string' ? route.params.ruleBookId : route.params.ruleBookId[0];
 
     await promise;
 
-    const ruleBook = findById(id);
+    const ruleBook = ruleBooksStore.findById(id);
 
     ruleBookId.value = id;
     name.value = ruleBook?.name ?? '';

src/pages/rules/ListRuleBooks.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import {storeToRefs} from "pinia";
 import {DocumentDuplicateIcon, PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {confirm} from "@/confirm";
 import {RuleBook, useRuleBooksStore} from "@/rules";
 import {routeNames} from "@/routes";
 
 const ruleBooksStore = useRuleBooksStore();
-const {ruleBooks} = storeToRefs(ruleBooksStore);
 
 const duplicate = async (ruleBook: RuleBook) => {
   if (await confirm({title: "Duplicate Rule Book", message: `Duplicate ${ruleBook.name}?`, confirmLabel: "Duplicate"})) {
@@ -27,7 +25,7 @@ const remove = async (ruleBook: RuleBook) => {
     <div class="flex justify-end border-b-1">
       <RouterLink class="button mb-2 ms-2" :to="{ name: routeNames.newRuleBook}">New Rule Book</RouterLink>
     </div>
-    <div v-for="ruleBook in ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
+    <div v-for="ruleBook in ruleBooksStore.ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
       <span class="flex grow me-2">{{ruleBook.name}}</span>
       <RouterLink class="btn-icon me-1" :to="{ name: routeNames.editRuleBook, params: { ruleBookId: ruleBook.ruleBookId } }"><PencilSquareIcon /></RouterLink>
       <button class="btn-icon me-1" @click="duplicate(ruleBook)"><DocumentDuplicateIcon /></button>