rule book ui

src/pages/market/TypeInfo.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ClipboardButton } from '@/components';
-import { MarketType, MarketTypeInput, getMarketType, useApraisalStore } from "@/market";
-import { AcquisitionResultTable, BuyModal, useAcquiredTypesStore } from '@/market/acquisition';
-import { TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
-import { BookmarkIcon, BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
-import { computedAsync } from '@vueuse/core/index.cjs';
+import {ClipboardButton} from '@/components';
+import {getMarketType, MarketType, MarketTypeInput, useApraisalStore} from "@/market";
+import {AcquisitionResultTable, BuyModal, useAcquiredTypesStore} from '@/market/acquisition';
+import {createResult, TrackingResultTable, useMarketTrackingStore} from '@/market/tracking';
+import {BookmarkIcon, BookmarkSlashIcon, ShoppingCartIcon} from '@heroicons/vue/24/outline';
 import log from "loglevel";
-import { computed, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import {computed, ref, watch} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import {computedAsync} from "@vueuse/core";
 
 const buyModal = ref<typeof BuyModal>();
 
@@ -115,6 +115,7 @@ watch(useRoute(), async route => {
 
 <style scoped>
 @reference "tailwindcss";
+
 img.type-image {
     width: 64px;
     height: 64px;

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">