rule book front

src/rules/RuleClauseInput.vue

@@ -1,37 +1,57 @@
 <script setup lang="ts">
 
 import {RuleClauseResponse} from "@/generated/mammon";
-import {computed} from "vue";
-import {isMain, Ledger, LedgerSelect, systemLedger, useLedgersStore} from "@/ledger";
+import {computed, watch} from "vue";
+import {systemLedgerRef} from "@/ledger";
 import {ratesTypes} from "@/rules/rules.ts";
 
-const rule = defineModel<RuleClauseResponse>();
+interface Props {
+  ledgerRefs: string[];
+}
 
-const ledgersStore = useLedgersStore();
-const {findById} = ledgersStore;
-const ledgers = computed<Ledger[]>(() => [systemLedger, ...ledgersStore.ledgers.filter(isMain)]);
+const props = defineProps<Props>()
 
-const ledgerComputed = (key: 'fromLedgerId' | 'toLedgerId') => computed<Ledger>({
-  get: () => rule.value && rule.value[key] ? findById(rule.value[key]) ?? systemLedger : systemLedger,
-  set: value => {
-    if (value) {
-      rule.value = {...rule.value, [key]: value.ledgerId.length ? value.ledgerId : undefined}
-    }
+const rule = defineModel<RuleClauseResponse>({ default: {
+    rate: ratesTypes.None,
+    fromLedgerRef: systemLedgerRef,
+    toLedgerRef: systemLedgerRef,
+  }});
+
+const ledgerRefsWithSystem = computed<string[]>(() => [systemLedgerRef, ...props.ledgerRefs])
+
+watch(ledgerRefsWithSystem, (newVal, oldVal) => {
+  if (newVal.length !== oldVal.length) {
+    return;
+  }
+
+  if (rule.value.fromLedgerRef && rule.value.fromLedgerRef !== systemLedgerRef) {
+    rule.value.fromLedgerRef = newVal[oldVal.findIndex(v => v === rule.value.fromLedgerRef)]
+  }
+  if (rule.value.toLedgerRef && rule.value.toLedgerRef !== systemLedgerRef) {
+    rule.value.toLedgerRef = newVal[oldVal.findIndex(v => v === rule.value.toLedgerRef)]
   }
 })
-
-const fromLedger = ledgerComputed('fromLedgerId')
-const toLedger = ledgerComputed('toLedgerId')
-
 </script>
 
 <template>
   From:
- <LedgerSelect class="me-2 grow" v-model="fromLedger" :ledgers="ledgers" />
+  <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>
   To:
- <LedgerSelect class="me-2 grow" v-model="toLedger" :ledgers="ledgers" />
+  <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>
   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>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.system-ledger {
+  @apply text-emerald-400;
+}
+</style>