rule book dup/delete

src/pages/rules/ListRuleBooks.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts">
 import {storeToRefs} from "pinia";
-import {PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
-import {useRuleBooksStore} from "@/rules";
+import {DocumentDuplicateIcon, PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
+import {confirm} from "@/confirm";
+import {RuleBook, useRuleBooksStore} from "@/rules";
 import {routeNames} from "@/routes";
 
-const {ruleBooks} = storeToRefs(useRuleBooksStore());
+const ruleBooksStore = useRuleBooksStore();
+const {ruleBooks} = storeToRefs(ruleBooksStore);
+
+const duplicate = async (ruleBook: RuleBook) => {
+  if (await confirm({title: "Duplicate Rule Book", message: `Duplicate ${ruleBook.name}?`, confirmLabel: "Duplicate"})) {
+    await ruleBooksStore.duplicate(ruleBook);
+  }
+};
+
+const remove = async (ruleBook: RuleBook) => {
+  if (await confirm({title: "Delete Rule Book", message: `Delete ${ruleBook.name}?`, confirmLabel: "Delete", danger: true})) {
+    await ruleBooksStore.remove(ruleBook.ruleBookId);
+  }
+};
 
 </script>
 
@@ -16,7 +30,8 @@ const {ruleBooks} = storeToRefs(useRuleBooksStore());
     <div v-for="ruleBook in ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
       <span class="flex grow me-2">{{ruleBook.name}}</span>
       <RouterLink class="btn-icon me-1" :to="{ name: routeNames.editRuleBook, params: { ruleBookId: ruleBook.ruleBookId } }"><PencilSquareIcon /></RouterLink>
-      <button class="btn-icon"><TrashIcon /></button>
+      <button class="btn-icon me-1" @click="duplicate(ruleBook)"><DocumentDuplicateIcon /></button>
+      <button class="btn-icon text-amber-700 hover:text-amber-600" @click="remove(ruleBook)"><TrashIcon /></button>
     </div>
   </div>
 </template>