rework store usage

src/confirm/ConfirmModal.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import {computed} from "vue";
-import {storeToRefs} from "pinia";
 import {Modal} from "@/components";
 import {useConfirmStore} from "./useConfirm";
 
 const confirmStore = useConfirmStore();
-const {open, options} = storeToRefs(confirmStore);
-const {accept, cancel} = confirmStore;
 
 const modalOpen = computed({
-  get: () => open.value,
+  get: () => confirmStore.open,
   set: value => {
     if (!value) {
-      cancel();
+      confirmStore.cancel();
     }
   },
 });
@@ -21,12 +18,12 @@ const modalOpen = computed({
 <template>
   <Modal v-model:open="modalOpen">
     <div class="bg-slate-800 rounded pb-4 w-96">
-      <span class="m-2">{{ options.title ?? "Confirm" }}</span>
+      <span class="m-2">{{ confirmStore.options.title ?? "Confirm" }}</span>
       <hr />
-      <div class="m-4">{{ options.message }}</div>
+      <div class="m-4">{{ confirmStore.options.message }}</div>
       <div class="flex justify-end">
-        <button class="me-2" @click="cancel">{{ options.cancelLabel ?? "Cancel" }}</button>
+        <button class="me-2" @click="confirmStore.cancel">{{ confirmStore.options.cancelLabel ?? "Cancel" }}</button>
-        <button class="confirm me-4" :class="options.danger ? 'danger' : ''" @click="accept">{{ options.confirmLabel ?? "Confirm" }}</button>
+        <button class="confirm me-4" :class="confirmStore.options.danger ? 'danger' : ''" @click="confirmStore.accept">{{ confirmStore.options.confirmLabel ?? "Confirm" }}</button>
       </div>
     </div>
   </Modal>

src/ledger/EditLedgerModal.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 
 import {computed, ref} from "vue";
-import {storeToRefs} from "pinia";
 import {isCombined, Ledger, LedgerType, LedgerTypes, useLedgersStore} from "./ledger";
 import {Modal} from "@/components";
 import LedgerLabel from "./LedgerLabel.vue";
@@ -15,8 +14,6 @@ interface Props {
 const props = defineProps<Props>();
 
 const ledgersStore = useLedgersStore();
-const {ledgers} = storeToRefs(ledgersStore);
-const {findById, findAllById, createMain, createCombined, updateMain, updateCombined} = ledgersStore;
 
 const modalOpen = ref<boolean>(false);
 
@@ -24,7 +21,7 @@ const type = ref<LedgerType>(LedgerTypes.Main);
 const name = ref("");
 const members = ref<Ledger[]>([]);
 const selectedLedger = ref<Ledger>();
-const availableLedgers = computed(() => ledgers.value
+const availableLedgers = computed(() => ledgersStore.ledgers
     .filter(l => l.ledgerId !== props.ledgerId)
     .filter(l => !members.value.includes(l)));
 
@@ -37,12 +34,12 @@ const addMember = () => {
 }
 
 const open = () => {
-  const ledger = isCreating.value ? undefined : findById(props.ledgerId);
+  const ledger = isCreating.value ? undefined : ledgersStore.findById(props.ledgerId);
 
   if (ledger) {
     type.value = ledger.type;
     name.value = ledger.name;
-    members.value = isCombined(ledger) ? findAllById(ledger.memberLedgerIds) : [];
+    members.value = isCombined(ledger) ? ledgersStore.findAllById(ledger.memberLedgerIds) : [];
   } else {
     type.value = LedgerTypes.Main;
     name.value = "";
@@ -62,17 +59,17 @@ const title = computed(() => {
 
 const create = () => {
   if (type.value === LedgerTypes.Main) {
-    createMain({name: name.value})
+    ledgersStore.createMain({name: name.value})
   } else {
-    createCombined({name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+    ledgersStore.createCombined({name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
   }
 }
 
 const update = () => {
   if (type.value === LedgerTypes.Main) {
-    updateMain(props.ledgerId, {name: name.value})
+    ledgersStore.updateMain(props.ledgerId, {name: name.value})
   } else {
-    updateCombined(props.ledgerId, {name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+    ledgersStore.updateCombined(props.ledgerId, {name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
   }
 }
 

src/ledger/LedgerSelect.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {Ledger, systemLedger, useLedgersStore} from "@/ledger/ledger.ts";
-import {storeToRefs} from "pinia";
 import {computed} from "vue";
 
 interface Props {
@@ -9,9 +8,9 @@ interface Props {
 
 const props = defineProps<Props>()
 const ledger = defineModel<Ledger>();
-const {ledgers: allLedgers} = storeToRefs(useLedgersStore());
+const ledgersStore = useLedgersStore();
 
-const ledgersToUse = computed(() => props.ledgers || allLedgers);
+const ledgersToUse = computed(() => props.ledgers || ledgersStore.ledgers);
 const ledgerId = computed({
   get: () => ledger.value?.ledgerId,
   set: value => ledger.value = ledgersToUse.value.find(l => l.ledgerId === value)

src/ledger/ledger.ts

@@ -80,9 +80,9 @@ export const findAllTransactionInLeger = (ledger: Ledger | string): Promise<Tran
 export const getLedgerBalance = (ledger: Ledger | string): Promise<BalanceResponse> => ledgerApi.findBalanceByLedgerId(getLedgerId(ledger)).then(response => response.data)
 
 export const useLedgerParam = () => {
-    const {findById} = useLedgersStore();
+    const ledgersStore = useLedgersStore();
     const ledgerId = useRouteParams<string, string>('ledgerId', '', { transform: v => typeof v === 'string' ? v : v[0]});
-    const ledger = computed(() => findById(ledgerId.value))
+    const ledger = computed(() => ledgersStore.findById(ledgerId.value))
 
     return {ledgerId, ledger};
 }

src/market/tax/TaxInput.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import {storeToRefs} from "pinia";
 import {useMarketTaxStore} from "./tax";
 
-const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
+const marketTaxStore = useMarketTaxStore();
 
 </script>
 
 <template>
     <div class="end">
         <span>Broker Fee: </span>
-        <input type="number" min="1" max="3" step="0.01" v-model="brokerFee" />
+        <input type="number" min="1" max="3" step="0.01" v-model="marketTaxStore.brokerFee" />
     </div>
     <div class="end">
         <span>SCC: </span>
-        <input type="number" min="3.6" max="8" step="0.01" v-model="scc" >
+        <input type="number" min="3.6" max="8" step="0.01" v-model="marketTaxStore.scc" >
     </div>
 </template>
 

src/pages/Characters.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 
 import {mammonAddCharacterUrl} from "@/mammon";
-import {storeToRefs} from "pinia";
 import {CharacterLabel, useCharactersStore} from "@/characters";
 import {ArrowPathIcon} from '@heroicons/vue/24/outline';
 
 const charactersStore = useCharactersStore()
-const {characters} = storeToRefs(charactersStore);
-const {reloadActivities} = charactersStore;
 
 const addCharacter = () => {
     window.location.replace(mammonAddCharacterUrl);
@@ -19,9 +16,9 @@ const addCharacter = () => {
       <div class="mb-4 border-b-1 flex justify-end">
         <button class="mb-2" @click="addCharacter">Add chacarcter</button>
       </div>
-      <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
+      <div v-for="character in charactersStore.characters" :key="character.characterId" class="flex items-center mb-2">
         <CharacterLabel class="grow" :character="character" />
-        <button class="btn-icon" @click="reloadActivities(character.characterId)"><ArrowPathIcon /></button>
+        <button class="btn-icon" @click="charactersStore.reloadActivities(character.characterId)"><ArrowPathIcon /></button>
       </div>
     </div>
 </template>

src/pages/Ledgers.vue

@@ -4,14 +4,14 @@ import {EditLedgerModal, useLedgersStore} from "@/ledger";
 import {ref} from "vue";
 import {activityApi, processingApi} from "@/mammon";
 
-const {refresh} = useLedgersStore();
+const ledgersStore = useLedgersStore();
 
 const editLedgerModal = ref<typeof EditLedgerModal>();
 
 const processActivities = async () => {
   await activityApi.fetchAllNewActivities();
   await processingApi.processNewActivities();
-  await refresh();
+  await ledgersStore.refresh();
 }
 </script>
 

src/pages/ledger/ListLedgerTransactions.vue

@@ -11,7 +11,7 @@ import {CharacterLabel, useCharactersStore} from "@/characters";
 import {formatEveDate} from "@/formaters.ts";
 
 const {ledgerId} = useLedgerParam();
-const {findById} = useCharactersStore();
+const charactersStore = useCharactersStore();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
   if (ledgerId.value) {
@@ -21,7 +21,7 @@ const transactions = computedAsync<TransactionResponse[]>(async () => {
 }, []);
 
 const { sortedArray, headerProps } = useSort(computedAsync(() => Promise.all(transactions.value.map(async transaction => {
-  const character = await findById(transaction.characterId);
+  const character = await charactersStore.findById(transaction.characterId);
   return {
     character,
     characterName: character?.name ?? "",

src/pages/ledger/ListLedgers.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 
 import {EditLedgerModal, Ledger, LedgerLabel, useLedgersStore} from "@/ledger";
-import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
 import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
-const {ledgers} = storeToRefs(useLedgersStore());
+const ledgersStore = useLedgersStore();
 
-const { sortedArray, headerProps } = useSort<Ledger>(ledgers);
+const { sortedArray, headerProps } = useSort<Ledger>(() => ledgersStore.ledgers);
 
 const editModal = ref<typeof EditLedgerModal>();
 const editingLedgerId = ref("");

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 characterRuleBooksStore = useCharacterRuleBooksStore();
-const {ruleBooks} = storeToRefs(ruleBookStore);
+const charactersStore = useCharactersStore();
-const {findByCharacterId, setForCharacter} = useCharacterRuleBooksStore();
+const ledgersStore = useLedgersStore();
-const {findById: findCharacterById} = useCharactersStore();
-const {ledgers} = storeToRefs(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>

src/transaction/TransferList.vue

@@ -14,7 +14,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const {findById} = useLedgersStore();
+const ledgersStore = useLedgersStore();
 
 const sortedArray = computedAsync(async () => {
   if (!props.transfers) {
@@ -22,8 +22,8 @@ const sortedArray = computedAsync(async () => {
   }
 
   return (await Promise.all(props.transfers.map(async (transfer: TransferWithValue, index) => {
-    const fromLedger = findById(transfer.fromLedgerId) ?? systemLedger
+    const fromLedger = ledgersStore.findById(transfer.fromLedgerId) ?? systemLedger
-    const toLedger = findById(transfer.toLedgerId) ?? systemLedger
+    const toLedger = ledgersStore.findById(transfer.toLedgerId) ?? systemLedger
 
     const item = transfer.marketTypeId ? await getMarketType(transfer.marketTypeId) : undefined;