-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
30 changed files
with
1,069 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
client/src/components/Workflow/Editor/Forms/FormColumnDefinition.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
<script setup lang="ts"> | ||
import { type SampleSheetColumnDefinition, type SampleSheetColumnDefinitionType } from "@/api"; | ||
import FormColumnDefinitionType from "./FormColumnDefinitionType.vue"; | ||
import FormElement from "@/components/Form/FormElement.vue"; | ||
interface Props { | ||
value: SampleSheetColumnDefinition; | ||
index: number; | ||
prefix: string; // prefix for ID objects | ||
} | ||
const props = defineProps<Props>(); | ||
const emit = defineEmits(["onChange"]); | ||
function stateCopy(): SampleSheetColumnDefinition { | ||
return JSON.parse(JSON.stringify(props.value)); | ||
} | ||
function onName(name: string) { | ||
const state = stateCopy(); | ||
state.name = name; | ||
emit("onChange", state, props.index); | ||
} | ||
function onType(newType: SampleSheetColumnDefinitionType) { | ||
const state = stateCopy(); | ||
state.type = newType; | ||
emit("onChange", state, props.index); | ||
} | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<FormElement | ||
:id="prefix + '_name'" | ||
:value="value.name" | ||
title="Name" | ||
type="text" | ||
help="Provide a short, unique name to describe this column." | ||
@input="onName" /> | ||
<FormColumnDefinitionType :value="value.type" :prefix="prefix" @onChange="onType" /> | ||
<FormElement | ||
:id="prefix + '_description'" | ||
:value="value.description" | ||
title="Description" | ||
type="text" | ||
help="Provide a longer description to help people running this workflow under what is expected to be entered in this column." | ||
@input="onName" /> | ||
TODO: There are more fields to enter here including restrictions and validations that vary based on the type | ||
chosen. There will be a lot of overlap with the same validation options for workflow parameters so it might be | ||
best to wait until those components can be developed in parallel. | ||
</div> | ||
</template> |
148 changes: 148 additions & 0 deletions
148
client/src/components/Workflow/Editor/Forms/FormColumnDefinitions.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,148 @@ | ||
<script setup lang="ts"> | ||
import { library } from "@fortawesome/fontawesome-svg-core"; | ||
import { faCaretDown, faCaretUp, faPlus, faTrashAlt } from "@fortawesome/free-solid-svg-icons"; | ||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; | ||
import { BLink } from "bootstrap-vue"; | ||
import { computed } from "vue"; | ||
import { type SampleSheetColumnDefinition, type SampleSheetColumnDefinitions } from "@/api"; | ||
import localize from "@/utils/localization"; | ||
import FormColumnDefinition from "./FormColumnDefinition.vue"; | ||
import FormCard from "@/components/Form/FormCard.vue"; | ||
library.add(faPlus, faTrashAlt, faCaretUp, faCaretDown); | ||
interface Props { | ||
value: SampleSheetColumnDefinitions; | ||
} | ||
const props = defineProps<Props>(); | ||
function addColumn() { | ||
const state = stateCopy(); | ||
state.push({ type: "int", name: "column" }); | ||
emit("onChange", state); | ||
} | ||
function stateCopy(): SampleSheetColumnDefinition[] { | ||
return JSON.parse(JSON.stringify(props.value || [])); | ||
} | ||
function onRemove(index: number) { | ||
const state = stateCopy(); | ||
state.splice(index, 1); | ||
emit("onChange", state); | ||
} | ||
function titleForColumnDefinition(index: number) { | ||
return `Column ${index + 1}`; | ||
} | ||
function getPrefix(index: number) { | ||
const name = `column_definition_${index}`; | ||
return name; | ||
} | ||
function getButtonId(index: number, direction: "up" | "down") { | ||
const prefix = getPrefix(index); | ||
return `${prefix}_${direction}`; | ||
} | ||
function swap(index: number, swapWith: number, direction: "up" | "down") { | ||
// the FormRepeat version does cool highlighting - probably worth implementing | ||
// on next pass | ||
const state = stateCopy(); | ||
if (swapWith >= 0 && swapWith < state.length && index >= 0 && index < state.length) { | ||
const wasSwapped = state[swapWith] as SampleSheetColumnDefinition; | ||
state[swapWith] = state[index] as SampleSheetColumnDefinition; | ||
state[index] = wasSwapped; | ||
} | ||
emit("onChange", state); | ||
} | ||
function onChildUpdate(childState: SampleSheetColumnDefinition, index: number) { | ||
const state = stateCopy(); | ||
state[index] = childState; | ||
emit("onChange", state); | ||
} | ||
const deleteTooltip = computed(() => { | ||
return localize(`Click to delete column definition`); | ||
}); | ||
const emit = defineEmits(["onChange"]); | ||
</script> | ||
|
||
<template> | ||
<div class="ui-form-element section-row"> | ||
<div class="ui-form-title"> | ||
<span class="ui-form-title-text">Column definitions</span> | ||
</div> | ||
<FormCard | ||
v-for="(columnDefinition, index) in value" | ||
v-bind:key="index" | ||
data-description="column definition block" | ||
class="card" | ||
:title="titleForColumnDefinition(index)"> | ||
<template v-slot:operations> | ||
<!-- code modelled after FormRepeat --> | ||
<span class="float-right"> | ||
<b-button-group> | ||
<b-button | ||
:id="getButtonId(index, 'up')" | ||
v-b-tooltip.hover.bottom | ||
title="move up" | ||
role="button" | ||
variant="link" | ||
size="sm" | ||
class="ml-0" | ||
@click="() => swap(index, index - 1, 'up')"> | ||
<FontAwesomeIcon icon="caret-up" /> | ||
</b-button> | ||
<b-button | ||
:id="getButtonId(index, 'down')" | ||
v-b-tooltip.hover.bottom | ||
title="move down" | ||
role="button" | ||
variant="link" | ||
size="sm" | ||
class="ml-0" | ||
@click="() => swap(index, index + 1, 'down')"> | ||
<FontAwesomeIcon icon="caret-down" /> | ||
</b-button> | ||
</b-button-group> | ||
|
||
<span v-b-tooltip.hover.bottom :title="deleteTooltip"> | ||
<b-button | ||
title="delete" | ||
role="button" | ||
variant="link" | ||
size="sm" | ||
class="ml-0" | ||
@click="() => onRemove(index)"> | ||
<FontAwesomeIcon icon="trash-alt" /> | ||
</b-button> | ||
</span> | ||
</span> | ||
</template> | ||
<template v-slot:body> | ||
<FormColumnDefinition | ||
:index="index" | ||
:value="columnDefinition" | ||
:prefix="getPrefix(index)" | ||
@onChange="onChildUpdate" /> | ||
</template> | ||
</FormCard> | ||
<BLink @click="addColumn">Add column.</BLink> | ||
</div> | ||
</template> | ||
|
||
<style lang="scss" scoped> | ||
@import "../../../Form/_form-elements.scss"; | ||
.column-definition-list { | ||
padding: 0px; | ||
list-style-type: none; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.