text area

src/pages/rules/EditCharacterRuleBook.vue

@@ -88,7 +88,7 @@ watch(useRoute(), async route => {
       <div class="flex flex-wrap items-center mb-2 mt-2">
         <div class="me-2" v-for="ref in ledgerRefs" :ref="ref">
           <span class="me-1">{{ref}}:</span>
-          <LedgerSelect :ledgers="ledgersToUse" :modelValue="bindings[ref] ?? systemLedger" @update:modelValue="value => bindings[ref] = value" />
+          <LedgerSelect :ledgers="ledgersToUse" :modelValue="bindings[ref] ?? systemLedger" @update:modelValue="value => { if (value) bindings[ref] = value }" />
         </div>
       </div>
     </div>

src/pages/rules/EditRuleBook.vue

@@ -3,15 +3,16 @@ import {useRoute, useRouter} from "vue-router";
 import {ref, watch} from "vue";
 import {useDebounceFn} from "@vueuse/core";
 import log from "loglevel";
-import {activityTypes, RuleInput, Rules, useRuleBooksStore} from "@/rules";
+import {useRuleBooksStore} from "@/rules";
 import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {routeNames} from "@/routes";
-import {Dropdown} from "@/components";
+import {SliderCheckbox} from "@/components";
 
 const ruleBookId = ref<string>();
 const name = ref<string>('');
+const usedForAcquisitions = ref<boolean>(false);
 const ledgerRefs = ref<string[]>([]);
-const rules = ref<Rules>({});
+const script = ref<string>('');
 
 const {findById, create, update, refresh} = useRuleBooksStore();
 const router = useRouter();
@@ -20,16 +21,18 @@ const save = async () => {
   if (!ruleBookId.value) {
     const created = await create({
       name: name.value,
+      usedForAcquisitions: usedForAcquisitions.value,
       ledgerRefs: ledgerRefs.value,
-      rules: rules.value
+      script: script.value
     })
     await router.push({ name: routeNames.editRuleBook, params: {ruleBookId: created.ruleBookId}})
 
   } else {
     await update(ruleBookId.value, {
       name: name.value,
+      usedForAcquisitions: usedForAcquisitions.value,
       ledgerRefs: ledgerRefs.value,
-      rules: rules.value
+      script: script.value
     })
   }
 }
@@ -57,14 +60,16 @@ watch(useRoute(), async route => {
 
     ruleBookId.value = id;
     name.value = ruleBook?.name ?? '';
-    ledgerRefs.value = [...ruleBook?.ledgerRefs];
-    rules.value = {...ruleBook?.rules}; // TODO fully clone rules
+    usedForAcquisitions.value = ruleBook?.usedForAcquisitions ?? false;
+    ledgerRefs.value = [...(ruleBook?.ledgerRefs ?? [])];
+    script.value = ruleBook?.script ?? '';
     log.info('Loaded rule book:', ruleBook);
   } else {
     ruleBookId.value = undefined;
     name.value = '';
+    usedForAcquisitions.value = false;
     ledgerRefs.value = [];
-    rules.value = {};
+    script.value = '';
     log.info('No rule book to load');
   }
 }, { immediate: true })
@@ -76,12 +81,16 @@ watch(useRoute(), async route => {
       <div class="flex grow border-b-1">
         Name:
         <input class="mb-2 ms-2" type="text" v-model="name" />
+        <label class="flex items-center ms-2 mb-2">
+          <SliderCheckbox class="me-2" v-model="usedForAcquisitions"  />
+          Used for acquisitions
+        </label>
       </div>
       <div class="border-b-1">
         Ledgers References:
-        <div class="flex flex-wrap items-center">
+        <div class="flex flex-wrap items-center mt-2">
           <div class="flex items-center mb-2" v-for="(ledgerRef, index) in ledgerRefs" :key="index">
-            <input class="me-1" type="text" :value="ledgerRefs[index]" @input="updateLedgerRef(index, ($event.target as HTMLInputElement).value)" />
+            <input class="me-1" type="text" :value="ledgerRef" @input="updateLedgerRef(index, ($event.target as HTMLInputElement).value)" />
             <button class="btn-icon me-2" @click="removeLedgerRef(index)"><TrashIcon /></button>
           </div>
           <div class="flex items-center mb-2">
@@ -89,14 +98,10 @@ watch(useRoute(), async route => {
           </div>
         </div>
       </div>
-      <div class="flex flex-col grow border-b-1" v-for="activityType in activityTypes" :key="activityType.key">
-        <Dropdown :inline="true" :autoClose="false" class="rule-dropdown">
-          <template #button>
-            <span>{{ activityType.name }}</span>
-          </template>
-          <RuleInput :ledgerRefs="ledgerRefs" :activityType="activityType.key" v-model="rules[activityType.key]" />
-        </Dropdown>
-
+      <div class="flex flex-col grow border-b-1">
+        Script:
+        <textarea class="script-editor mt-2 mb-2" spellcheck="false" v-model="script" rows="20"
+                  placeholder="// activity, transaction, ledgers are available — branch on activity.type"></textarea>
       </div>
     </div>
     <div class="mt-2 justify-end flex">
@@ -110,11 +115,8 @@ watch(useRoute(), async route => {
 <style scoped>
 @reference "@/style.css";
 
-.rule-dropdown :deep(>button) {
-  @apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;
-}
-
-.rule-dropdown.dropdown-open :deep(>button) {
-  @apply bg-slate-800 rounded-b-none;
+.script-editor {
+  @apply bg-slate-900 text-slate-100 font-mono text-sm p-2 rounded w-full resize-y;
+  tab-size: 2;
 }
 </style>