sortable

src/ledger/LedgerSelect.vue

@@ -12,16 +12,16 @@ const ledger = defineModel<Ledger>();
 const {ledgers: allLedgers} = storeToRefs(useLedgersStore());
 
 const ledgersToUse = computed(() => props.ledgers || allLedgers);
-const legerId = computed({
+const ledgerId = computed({
   get: () => ledger.value?.ledgerId,
-  set: value => ledger.value = ledgersToUse.value[ledgersToUse.value.findIndex(x => x.value === value)]
+  set: value => ledger.value = ledgersToUse.value.find(l => l.ledgerId === value)
 })
 
 </script>
 
 <template>
-  <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 v-model="ledgerId" :class="{'system-ledger': ledger === systemLedger}">
+    <option v-for="l in ledgersToUse" :key="l.ledgerId" :value="l.ledgerId" :class="{'system-ledger': l === systemLedger}">{{ l.name }}</option>
   </select>
 </template>
 
@@ -31,5 +31,4 @@ const legerId = computed({
 .system-ledger {
   @apply text-emerald-400;
 }
-
 </style>

src/rules/RuleInput.vue

@@ -34,8 +34,4 @@ const toLedger = ledgerComputed('toLedgerId')
   <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>
-
-</style>
+</template>

src/rules/RuleSetInput.vue

@@ -2,8 +2,9 @@
 
 import {RuleResponse, RuleResponseRateEnum, RuleSetResponse} from "@/generated/mammon";
 import RuleInput from "@/rules/RuleInput.vue";
-import {computed} from "vue";
-import {PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
+import {computed, useTemplateRef} from "vue";
+import {Bars4Icon, PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
+import {useSortable} from "@vueuse/integrations/useSortable";
 
 const ruleSet = defineModel<RuleSetResponse>();
 const rules = computed<RuleResponse[]>({
@@ -25,16 +26,40 @@ const setRule = (index: number, rule?: RuleResponse) => {
 const removeRule = (index: number) => {
   rules.value = rules.value.toSpliced(index, 1)
 }
+
+const sortableContainer = useTemplateRef('sortable-container')
+useSortable(sortableContainer, rules, { handle: '.sortable-handle'});
 </script>
 
 <template>
 <div class="flex-col">
-  <div class="flex items-end gap-2 mt-2" v-for="(rule, index) in rules" :key="index">
-    <RuleInput :modelValue="rule" @update:modelValue="v => setRule(index, v)" />
-    <button class="btn-icon" @click="removeRule(index)"><TrashIcon /></button>
+  <div ref="sortable-container" class="flex-col">
+    <div class="flex items-end gap-2 mt-2" v-for="(rule, index) in rules" :key="index">
+      <span class="sortable-handle flex">
+        <Bars4Icon class="w-6"/>
+      </span>
+      <RuleInput :modelValue="rule" @update:modelValue="v => setRule(index, v)" />
+      <button class="btn-icon" @click="removeRule(index)"><TrashIcon /></button>
+    </div>
   </div>
   <div class="flex justify-end mb-2 mt-2">
     <button class="btn-icon" @click="addRule"><PlusIcon /></button>
   </div>
 </div>
 </template>
+
+<style scoped>
+
+.sortable-handle {
+  @apply cursor-grab;
+}
+
+.sortable-chosen {
+  @apply cursor-grabbing;
+}
+
+.sortable-chosen .sortable-handle {
+  @apply cursor-grabbing;
+}
+
+</style>