cleanup

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}">
-    <option v-for="l in ledgerRefsWithSystem" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l }}</option>
-  </select>
+  <LedgerRefSelect class="me-2 grow" v-model="rule.fromLedgerRef" :ledger-refs="ledgerRefsWithSystem"/>
   To:
-  <select class="me-2 grow" v-model="rule.toLedgerRef" :class="{'system-ledger': rule.toLedgerRef === systemLedgerRef}">
-    <option v-for="l in ledgerRefsWithSystem" :key="l" :value="l" :class="{'system-ledger': l === systemLedgerRef}">{{ l }}</option>
-  </select>
+  <LedgerRefSelect class="me-2 grow" v-model="rule.toLedgerRef" :ledger-refs="ledgerRefsWithSystem"/>
   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>
+</template>