cleanup

src/rules/LedgerRefSelect.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import {systemLedger, systemLedgerRef} from "@/ledger";
+
+interface Props {
+  ledgerRefs: string[];
+}
+
+defineProps<Props>()
+
+const ledgerRef = defineModel<string>();
+</script>
+
+<template>
+  <select v-model="ledgerRef" :class="{'system-ledger': ledgerRef === systemLedgerRef}">
+    <option v-for="l in ledgerRefs" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l === systemLedgerRef ? systemLedger.name : l }}</option>
+  </select>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+.system-ledger {
+  @apply text-emerald-400;
+}
+</style>

src/rules/RuleClauseInput.vue

@@ -4,6 +4,7 @@ import {RuleClauseResponse} from "@/generated/mammon";
 import {computed, watch} from "vue";
 import {systemLedgerRef} from "@/ledger";
 import {ratesTypes} from "@/rules/rules.ts";
+import LedgerRefSelect from "./LedgerRefSelect.vue";
 
 interface Props {
   ledgerRefs: string[];
@@ -35,23 +36,11 @@ watch(ledgerRefsWithSystem, (newVal, oldVal) => {
 
 <template>
   From:
-  <select class="me-2 grow" v-model="rule.fromLedgerRef" :class="{'system-ledger': rule.fromLedgerRef === systemLedgerRef}">
+  <LedgerRefSelect class="me-2 grow" v-model="rule.fromLedgerRef" :ledger-refs="ledgerRefsWithSystem"/>
-    <option v-for="l in ledgerRefsWithSystem" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l }}</option>
-  </select>
   To:
-  <select class="me-2 grow" v-model="rule.toLedgerRef" :class="{'system-ledger': rule.toLedgerRef === systemLedgerRef}">
+  <LedgerRefSelect class="me-2 grow" v-model="rule.toLedgerRef" :ledger-refs="ledgerRefsWithSystem"/>
-    <option v-for="l in ledgerRefsWithSystem" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l }}</option>
-  </select>
   At:
   <select class="me-2 grow" v-model="rule.rate">
     <option v-for="rateType in ratesTypes" :key="rateType.key" :value="rateType.key">{{ rateType.name }}</option>
   </select>
 </template>
-
-<style scoped>
-@reference "@/style.css";
-
-.system-ledger {
-  @apply text-emerald-400;
-}
-</style>