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" :mapping-enabled="!isReadOnly"
:connection-type="NodeConnectionType.Main" :connection-type="NodeConnectionType.Main"
pane-type="input" pane-type="input"
context="modal"
/> />
</div> </div>

View file

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

View file

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

View file

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