Merge pull request #19347 from jmchilton/decompose_repeat

Rework some form components for reuse.
This commit is contained in:
David López
2025-03-14 09:45:10 +01:00
committed by GitHub
3 changed files with 85 additions and 47 deletions
@@ -0,0 +1,68 @@
<script setup lang="ts">
import { faCaretDown, faCaretUp, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { BButton, BButtonGroup } from "bootstrap-vue";
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>
<span v-b-tooltip.hover.bottom title="move up">
<BButton
:id="upButtonId"
v-b-tooltip.hover.bottom
:disabled="index == 0"
role="button"
variant="link"
size="sm"
class="ml-0"
@click="() => emit('swap-up')">
<FontAwesomeIcon :icon="faCaretUp" />
</BButton>
</span>
<span v-b-tooltip.hover.bottom title="move down">
<BButton
:id="downButtonId"
:disabled="index >= numElements - 1"
title="move down"
role="button"
variant="link"
size="sm"
class="ml-0"
@click="() => emit('swap-down')">
<FontAwesomeIcon :icon="faCaretDown" />
</BButton>
</span>
</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="faTrashAlt" />
</BButton>
</span>
</span>
</template>
+14 -45
View File
@@ -1,6 +1,5 @@
<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 +8,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"));
@@ -67,9 +67,6 @@ const emit = defineEmits<{
(e: "swap", a: number, b: number): void;
}>();
// @ts-ignore: bad library types
library.add(faPlus, faTrashAlt, faCaretUp, faCaretDown);
function onInsert() {
emit("insert");
}
@@ -127,45 +124,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
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
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>
@@ -175,7 +144,7 @@ const { keyObject } = useKeyedObjects();
<span v-b-tooltip.hover :title="buttonTooltip">
<b-button v-if="!props.sustainRepeats" :disabled="maxRepeats" @click="onInsert">
<FontAwesomeIcon icon="plus" class="mr-1" />
<FontAwesomeIcon :icon="faPlus" class="mr-1" />
<span data-description="repeat insert">Insert {{ props.input.title || "Repeat" }}</span>
</b-button>
</span>
+3 -2
View File
@@ -139,8 +139,9 @@ class TestToolForm(SeleniumTestCase, UsesHistoryItemAssertions):
assert_input_order(["Text B", "Text C", "Text A"])
self.components.tool_form.repeat_move_up(parameter="the_repeat_1").wait_for_and_click()
assert_input_order(["Text C", "Text B", "Text A"])
self.components.tool_form.repeat_move_up(parameter="the_repeat_0").wait_for_and_click()
assert_input_order(["Text C", "Text B", "Text A"])
# no longer clickable, don't need to check the no-op here anymore.
# self.components.tool_form.repeat_move_up(parameter="the_repeat_0").wait_for_and_click()
# assert_input_order(["Text C", "Text B", "Text A"])
self.tool_form_execute()
self.history_panel_wait_for_hid_ok(1)