Add context to schema view to ensure unique ids

This commit is contained in:
Elias Meire 2024-11-08 10:51:06 +01:00
parent 0db658c6d0
commit 7a23d9c98b
No known key found for this signature in database
4 changed files with 21 additions and 17 deletions

View file

@ -155,6 +155,7 @@ async function onDrop(expression: string, event: MouseEvent) {
:mapping-enabled="!isReadOnly"
:connection-type="NodeConnectionType.Main"
pane-type="input"
context="modal"
/>
</div>

View file

@ -34,6 +34,7 @@ type Props = {
paneType: 'input' | 'output';
connectionType?: NodeConnectionType;
search?: string;
context?: 'ndv' | 'modal';
};
type SchemaNode = {
@ -58,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
connectionType: NodeConnectionType.Main,
search: '',
mappingEnabled: false,
context: 'ndv',
});
const draggingPath = ref<string>('');
@ -381,7 +383,7 @@ watch(
:level="0"
:parent="null"
:pane-type="paneType"
:sub-key="snakeCase(currentNode.node.name)"
:sub-key="`${props.context}_${snakeCase(currentNode.node.name)}`"
:mapping-enabled="mappingEnabled"
:dragging-path="draggingPath"
:distance-from-active="currentNode.depth"
@ -427,7 +429,7 @@ watch(
:level="0"
:parent="null"
:pane-type="paneType"
:sub-key="`output_${nodeSchema.type}-0-0`"
:sub-key="`${props.context}_output_${nodeSchema.type}-0-0`"
:mapping-enabled="mappingEnabled"
:dragging-path="draggingPath"
:node="node"

View file

@ -5,6 +5,7 @@ import { checkExhaustive } from '@/utils/typeGuards';
import { shorten } from '@/utils/typesUtils';
import { getMappedExpression } from '@/utils/mappingUtils';
import TextWithHighlights from './TextWithHighlights.vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
type Props = {
schema: Schema;
@ -95,7 +96,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
:data-depth="level"
data-target="mappable"
>
<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
<FontAwesomeIcon :icon="getIconBySchemaType(schema.type)" size="sm" />
<TextWithHighlights
v-if="isSchemaParentTypeArray"
:content="props.parent?.key"
@ -120,12 +121,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked />
<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
<font-awesome-icon icon="angle-right" />
<FontAwesomeIcon icon="angle-right" />
</label>
<div v-if="isSchemaValueArray" :class="$style.sub">
<div :class="$style.innerSub">
<run-data-schema-item
<RunDataSchemaItem
v-for="s in schemaArray"
:key="s.key ?? s.type"
:schema="s"

View file

@ -702,13 +702,13 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
</div>
<input
checked=""
id="set_1-hobbies"
id="ndv_set_1-hobbies"
inert=""
type="checkbox"
/>
<label
class="toggle"
for="set_1-hobbies"
for="ndv_set_1-hobbies"
>
<svg
aria-hidden="true"
@ -1138,13 +1138,13 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
</div>
<input
checked=""
id="set_2-hobbies"
id="ndv_set_2-hobbies"
inert=""
type="checkbox"
/>
<label
class="toggle"
for="set_2-hobbies"
for="ndv_set_2-hobbies"
>
<svg
aria-hidden="true"
@ -1575,13 +1575,13 @@ exports[`RunDataSchema.vue > renders schema in output pane 1`] = `
</div>
<input
checked=""
id="output_object-0-0-hobbies"
id="ndv_output_object-0-0-hobbies"
inert=""
type="checkbox"
/>
<label
class="toggle"
for="output_object-0-0-hobbies"
for="ndv_output_object-0-0-hobbies"
>
<svg
aria-hidden="true"
@ -1967,13 +1967,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div>
<input
checked=""
id="set_1-hello world"
id="ndv_set_1-hello world"
inert=""
type="checkbox"
/>
<label
class="toggle"
for="set_1-hello world"
for="ndv_set_1-hello world"
>
<svg
aria-hidden="true"
@ -2060,13 +2060,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div>
<input
checked=""
id="set_1-hello world-0"
id="ndv_set_1-hello world-0"
inert=""
type="checkbox"
/>
<label
class="toggle"
for="set_1-hello world-0"
for="ndv_set_1-hello world-0"
>
<svg
aria-hidden="true"
@ -2144,13 +2144,13 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
</div>
<input
checked=""
id="set_1-hello world-0-test"
id="ndv_set_1-hello world-0-test"
inert=""
type="checkbox"
/>
<label
class="toggle"
for="set_1-hello world-0-test"
for="ndv_set_1-hello world-0-test"
>
<svg
aria-hidden="true"