Decompose FormRepeat for reuse.

client/src/components/Form/FormListElementOperations.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretUp, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BButtonGroup } from "bootstrap-vue";
+
+// @ts-ignore: bad library types
+library.add(faTrashAlt, faCaretUp, faCaretDown);
+
+interface Props {
+    index: number;
+    numElements: number;
+    upButtonId: string;
+    downButtonId: string;
+    canDelete: boolean;
+    deleteTooltip: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "delete"): void;
+    (e: "swap-up"): void;
+    (e: "swap-down"): void;
+}>();
+</script>
+
+<template>
+    <span class="float-right">
+        <BButtonGroup>
+            <BButton
+                :id="upButtonId"
+                v-b-tooltip.hover.bottom
+                :disabled="index == 0"
+                title="move up"
+                role="button"
+                variant="link"
+                size="sm"
+                class="ml-0"
+                @click="() => emit('swap-up')">
+                <FontAwesomeIcon icon="caret-up" />
+            </BButton>
+            <BButton
+                :id="downButtonId"
+                v-b-tooltip.hover.bottom
+                :disabled="index >= numElements - 1"
+                title="move down"
+                role="button"
+                variant="link"
+                size="sm"
+                class="ml-0"
+                @click="() => emit('swap-down')">
+                <FontAwesomeIcon icon="caret-down" />
+            </BButton>
+        </BButtonGroup>
+
+        <span v-b-tooltip.hover.bottom :title="deleteTooltip">
+            <BButton
+                :disabled="!canDelete"
+                title="delete"
+                role="button"
+                variant="link"
+                size="sm"
+                class="ml-0"
+                @click="() => emit('delete')">
+                <FontAwesomeIcon icon="trash-alt" />
+            </BButton>
+        </span>
+    </span>
+</template>

client/src/components/Form/FormRepeat.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp, faPlus, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { defineAsyncComponent, nextTick, type PropType } from "vue";
 import { computed } from "vue";
@@ -9,6 +9,7 @@ import { useKeyedObjects } from "@/composables/keyedObjects";
 import localize from "@/utils/localization";
 
 import FormCard from "./FormCard.vue";
+import FormListElementOperations from "./FormListElementOperations.vue";
 
 const FormNode = defineAsyncComponent(() => import("./FormInputs.vue"));
 
@@ -68,7 +69,7 @@ const emit = defineEmits<{
 }>();
 
 // @ts-ignore: bad library types
-library.add(faPlus, faTrashAlt, faCaretUp, faCaretDown);
+library.add(faPlus);
 
 function onInsert() {
     emit("insert");
@@ -127,47 +128,17 @@ const { keyObject } = useKeyedObjects();
             class="card"
             :title="getTitle(cacheId)">
             <template v-slot:operations>
-                <span v-if="!props.sustainRepeats" class="float-right">
-                    <b-button-group>
-                        <b-button
-                            :id="getButtonId(cacheId, 'up')"
-                            v-b-tooltip.hover.bottom
-                            :disabled="cacheId == 0"
-                            title="move up"
-                            role="button"
-                            variant="link"
-                            size="sm"
-                            class="ml-0"
-                            @click="() => swap(cacheId, cacheId - 1, 'up')">
-                            <FontAwesomeIcon icon="caret-up" />
-                        </b-button>
-                        <b-button
-                            :id="getButtonId(cacheId, 'down')"
-                            v-b-tooltip.hover.bottom
-                            :disabled="cacheId >= props.input.cache?.length - 1"
-                            title="move down"
-                            role="button"
-                            variant="link"
-                            size="sm"
-                            class="ml-0"
-                            @click="() => swap(cacheId, cacheId + 1, 'down')">
-                            <FontAwesomeIcon icon="caret-down" />
-                        </b-button>
-                    </b-button-group>
-
-                    <span v-b-tooltip.hover.bottom :title="deleteTooltip">
-                        <b-button
-                            :disabled="!minRepeats"
-                            title="delete"
-                            role="button"
-                            variant="link"
-                            size="sm"
-                            class="ml-0"
-                            @click="() => onDelete(cacheId)">
-                            <FontAwesomeIcon icon="trash-alt" />
-                        </b-button>
-                    </span>
-                </span>
+                <FormListElementOperations
+                    v-if="!props.sustainRepeats"
+                    :index="cacheId"
+                    :num-elements="props.input.cache?.length || 0"
+                    :up-button-id="getButtonId(cacheId, 'up')"
+                    :down-button-id="getButtonId(cacheId, 'down')"
+                    :delete-tooltip="deleteTooltip"
+                    :can-delete="minRepeats"
+                    @swap-up="() => swap(cacheId, cacheId - 1, 'up')"
+                    @swap-down="() => swap(cacheId, cacheId + 1, 'down')"
+                    @delete="() => onDelete(cacheId)" />
             </template>
 
             <template v-slot:body>