pretyness

src/ledger/LedgerSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {Ledger, useLedgersStore} from "@/ledger/ledger.ts";
+import {Ledger, systemLedger, useLedgersStore} from "@/ledger/ledger.ts";
 import {storeToRefs} from "pinia";
 import {computed} from "vue";
 
@@ -12,11 +12,24 @@ const ledger = defineModel<Ledger>();
 const {ledgers: allLedgers} = storeToRefs(useLedgersStore());
 
 const ledgersToUse = computed(() => props.ledgers || allLedgers);
+const legerId = computed({
+  get: () => ledger.value?.ledgerId,
+  set: value => ledger.value = ledgersToUse.value[ledgersToUse.value.findIndex(x => x.value === value)]
+})
 
 </script>
 
 <template>
-  <select v-model="ledger">
-    <option v-for="ledger in ledgersToUse" :key="ledger.ledgerId" :value="ledger">{{ ledger.name }}</option>
+  <select v-model="legerId" :class="{'system-ledger': ledger === systemLedger}">
+    <option v-for="ledger in ledgersToUse" :key="ledger.ledgerId" :value="ledger.ledgerId" :class="{'system-ledger': ledger === systemLedger}">{{ ledger.name }}</option>
   </select>
-</template>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.system-ledger {
+  @apply text-emerald-400;
+}
+
+</style>

src/ledger/ledger.ts

@@ -20,6 +20,14 @@ export type MainLedger = MainLedgerResponse & {type: MainLedgerResponseTypeEnum}
 export type CombinedLedger = CombinedLedgerResponse & {type: CombinedLedgerResponseTypeEnum}
 export type Ledger = MainLedger | CombinedLedger;
 
+export const systemLedger = {
+    type: LedgerTypes.Main,
+    ledgerId: "",
+    name: "Eve Economy",
+    balance: 0,
+    _system: true
+} as MainLedger;
+
 export const isMain = (ledger: Ledger): ledger is MainLedger => {
     return ledger.type === LedgerTypes.Main;
 }