rule book ui

src/pages/rules/EditRuleBook.vue

@@ -3,7 +3,7 @@ import {Character, CharacterLabel, useCharactersStore} from "@/characters";
 import {useRoute} from "vue-router";
 import {ref, watch, watchEffect} from "vue";
 import log from "loglevel";
-import {activityTypes, findByCharacterId, RuleBook, RuleSetInput} from "@/rules";
+import {activityTypes, findByCharacterId, RuleBook, RuleSetInput, setCharacterRuleBook} from "@/rules";
 
 const {findById: findCharacterById} = useCharactersStore();
 const character = ref<Character>();
@@ -18,6 +18,14 @@ watchEffect(async () => {
   }
 });
 
+const save = () => {
+  const characterId = character.value?.characterId;
+
+  if (characterId && ruleBook.value) {
+    setCharacterRuleBook(characterId, ruleBook.value);
+  }
+}
+
 watch(useRoute(), async route => {
   if (route.params.characterId) {
     const id = parseInt(typeof route.params.characterId === 'string' ? route.params.characterId : route.params.characterId[0]);
@@ -35,6 +43,9 @@ watch(useRoute(), async route => {
   <div v-if="character" class="grid mb-2 mt-4">
     <div class="mb-2 border-b-1 flex">
       <CharacterLabel class="flex grow mb-2" :character="character" :size="64" />
+      <div>
+        <button @click="save">Save</button>
+      </div>
     </div>
     <div v-if="ruleBook" class="flex-col">
       <div class="flex-col grow border-b-1" v-for="activityType in activityTypes" :key="activityType">