Sirttas
34 lines
1020 B
Vue
34 lines
1020 B
Vue
<script setup lang="ts">
|
|
|
|
import {EditLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
|
|
import {storeToRefs} from "pinia";
|
|
import {nextTick, ref} from "vue";
|
|
import {PencilSquareIcon} from "@heroicons/vue/24/outline";
|
|
import {formatIsk} from "@/formaters.ts";
|
|
|
|
const {ledgers} = storeToRefs(useLedgersStore());
|
|
|
|
const editModal = ref<typeof EditLedgerModal>();
|
|
const editingLedgerId = ref("");
|
|
|
|
const openEdit = async (ledgerId: string) => {
|
|
editingLedgerId.value = ledgerId;
|
|
await nextTick();
|
|
editModal.value?.open();
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-4">
|
|
<div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
|
|
<LedgerLabel :ledger="ledger" />
|
|
<div class="flex grow">
|
|
<span class="ms-2">{{ formatIsk(ledger.balance) }}</span>
|
|
</div>
|
|
<button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
|
|
</div>
|
|
</div>
|
|
<EditLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
|
|
</template>
|