rule book ui

src/ledger/CreateLedgerModal.vue

@@ -6,6 +6,7 @@ import {isCombined, Ledger, LedgerType, LedgerTypes, useLedgersStore} from "./le
 import {Modal} from "@/components";
 import LedgerLabel from "./LedgerLabel.vue";
 import {PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
+import LedgerSelect from "@/ledger/LedgerSelect.vue";
 
 interface Props {
   ledgerId?: string;
@@ -119,9 +120,7 @@ defineExpose({ open });
           </div>
         </div>
         <div v-if="availableLedgers.length" class="flex">
-          <select v-model="selectedLedger" class="grow">
-            <option v-for="ledger in availableLedgers" :key="ledger.ledgerId" :value="ledger">{{ ledger.name }}</option>
-          </select>
+          <LedgerSelect v-model="selectedLedger" class="grow" :ledgers="availableLedgers" />
           <div class="flex justify-end me-4 ms-2">
             <button class="btn-icon" @click="addMember"><PlusIcon /></button>
           </div>

src/ledger/LedgerSelect.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {Ledger, useLedgersStore} from "@/ledger/ledger.ts";
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+
+interface Props {
+  ledgers?: Ledger[];
+}
+
+const props = defineProps<Props>()
+const ledger = defineModel<Ledger>();
+const {ledgers: allLedgers} = storeToRefs(useLedgersStore());
+
+const ledgersToUse = computed(() => props.ledgers || allLedgers);
+
+</script>
+
+<template>
+  <select v-model="ledger">
+    <option v-for="ledger in ledgersToUse" :key="ledger.ledgerId" :value="ledger">{{ ledger.name }}</option>
+  </select>
+</template>

src/ledger/index.ts

@@ -1,4 +1,5 @@
 export * from './ledger';
 
 export {default as LedgerLabel} from './LedgerLabel.vue';
+export {default as LedgerSelect} from './LedgerSelect.vue';
 export {default as CreateLedgerModal} from './CreateLedgerModal.vue';