chore: install prettier
This commit is contained in:
Viet An
@@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div v-for="(mapping, mapIndex) in localMappings" :key="mapIndex" class="mb-5 p-4 border">
|
||||
<div
|
||||
v-for="(mapping, mapIndex) in localMappings"
|
||||
:key="mapIndex"
|
||||
class="mb-5 p-4 border"
|
||||
>
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<h5 class="title is-5">Mapping {{ mapIndex + 1 }}: {{ mapping.alias }}</h5>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<button class="button is-danger is-small" @click="removeMapping(mapIndex)">
|
||||
<button
|
||||
class="button is-danger is-small"
|
||||
@click="removeMapping(mapIndex)"
|
||||
>
|
||||
<span class="icon is-small">
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 16 }"></SvgIcon>
|
||||
</span>
|
||||
@@ -19,7 +26,12 @@
|
||||
<div class="field">
|
||||
<label class="label">Alias</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="mapping.alias" @input="update" />
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.alias"
|
||||
@input="update"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,7 +39,13 @@
|
||||
<div class="field">
|
||||
<label class="label">Model</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="mapping.model" @input="update" placeholder="e.g., app.Transaction" />
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.model"
|
||||
@input="update"
|
||||
placeholder="e.g., app.Transaction"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,7 +53,13 @@
|
||||
<div class="field">
|
||||
<label class="label">Lookup Field</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="mapping.lookup_field" @input="update" placeholder="e.g., id" />
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.lookup_field"
|
||||
@input="update"
|
||||
placeholder="e.g., id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,7 +67,13 @@
|
||||
<div class="field">
|
||||
<label class="label">Lookup Value From</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="mapping.lookup_value_from" @input="update" placeholder="e.g., transaction_id or transaction.customer.id" />
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="mapping.lookup_value_from"
|
||||
@input="update"
|
||||
placeholder="e.g., transaction_id or transaction.customer.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,7 +82,10 @@
|
||||
<label class="label">Type</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="mapping.type" @change="update">
|
||||
<select
|
||||
v-model="mapping.type"
|
||||
@change="update"
|
||||
>
|
||||
<option value="object">Object</option>
|
||||
<option value="list">List</option>
|
||||
</select>
|
||||
@@ -60,12 +93,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">Is Trigger Object?</label>
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="mapping.is_trigger_object" @change="update">
|
||||
<label class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="mapping.is_trigger_object"
|
||||
@change="update"
|
||||
/>
|
||||
Yes
|
||||
</label>
|
||||
</div>
|
||||
@@ -73,36 +110,64 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr />
|
||||
<h6 class="title is-6">Fields</h6>
|
||||
<div v-for="(field, fieldIndex) in mapping.fields" :key="fieldIndex" class="field has-addons">
|
||||
<div
|
||||
v-for="(field, fieldIndex) in mapping.fields"
|
||||
:key="fieldIndex"
|
||||
class="field has-addons"
|
||||
>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="field.placeholder" @input="update" placeholder="[placeholder]">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="field.placeholder"
|
||||
@input="update"
|
||||
placeholder="[placeholder]"
|
||||
/>
|
||||
</div>
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" v-model="field.source" @input="update" placeholder="source.field.name">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="field.source"
|
||||
@input="update"
|
||||
placeholder="source.field.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-danger is-light" @click="removeField(mapIndex, fieldIndex as number)">
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary'}"></SvgIcon>
|
||||
<button
|
||||
class="button is-danger is-light"
|
||||
@click="removeField(mapIndex, fieldIndex as number)"
|
||||
>
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary' }"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button is-small is-light" @click="addField(mapIndex)">
|
||||
<button
|
||||
class="button is-small is-light"
|
||||
@click="addField(mapIndex)"
|
||||
>
|
||||
<span class="icon is-small">+</span>
|
||||
<span>Add Field</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary" @click="addMapping">
|
||||
<SvgIcon class="mr-2" v-bind="{ name: 'add4.svg', type: 'white', size: 18 }" />
|
||||
<button
|
||||
class="button is-primary"
|
||||
@click="addMapping"
|
||||
>
|
||||
<SvgIcon
|
||||
class="mr-2"
|
||||
v-bind="{ name: 'add4.svg', type: 'white', size: 18 }"
|
||||
/>
|
||||
Add Mapping
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
mappings: {
|
||||
@@ -111,22 +176,27 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:mappings']);
|
||||
const emit = defineEmits(["update:mappings"]);
|
||||
|
||||
// Use a local ref to manage mappings to handle the object-to-array transformation for fields
|
||||
const localMappings = ref<any[]>([]);
|
||||
|
||||
// Helper to transform fields object to array for v-for
|
||||
const transformMappings = (sourceMappings: any[]) => {
|
||||
return sourceMappings.map(m => ({
|
||||
return sourceMappings.map((m) => ({
|
||||
...m,
|
||||
fields: m.fields ? Object.entries(m.fields).map(([placeholder, source]) => ({ placeholder, source: typeof source === 'object' ? JSON.stringify(source) : source })) : []
|
||||
fields: m.fields
|
||||
? Object.entries(m.fields).map(([placeholder, source]) => ({
|
||||
placeholder,
|
||||
source: typeof source === "object" ? JSON.stringify(source) : source,
|
||||
}))
|
||||
: [],
|
||||
}));
|
||||
};
|
||||
|
||||
// Helper to transform fields array back to object for emission
|
||||
const reformatMappingsForEmit = () => {
|
||||
return localMappings.value.map(m => {
|
||||
return localMappings.value.map((m) => {
|
||||
const newFields = m.fields.reduce((obj: any, item: any) => {
|
||||
try {
|
||||
// Attempt to parse if it's a JSON string for format objects
|
||||
@@ -140,18 +210,21 @@ const reformatMappingsForEmit = () => {
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => props.mappings, (newMappings) => {
|
||||
localMappings.value = transformMappings(newMappings || []);
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
watch(
|
||||
() => props.mappings,
|
||||
(newMappings) => {
|
||||
localMappings.value = transformMappings(newMappings || []);
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const addMapping = () => {
|
||||
localMappings.value.push({
|
||||
alias: '',
|
||||
model: '',
|
||||
lookup_field: 'id',
|
||||
lookup_value_from: '',
|
||||
type: 'object',
|
||||
alias: "",
|
||||
model: "",
|
||||
lookup_field: "id",
|
||||
lookup_value_from: "",
|
||||
type: "object",
|
||||
is_trigger_object: false,
|
||||
fields: [],
|
||||
});
|
||||
@@ -167,7 +240,7 @@ const addField = (mapIndex: number) => {
|
||||
if (!localMappings.value[mapIndex].fields) {
|
||||
localMappings.value[mapIndex].fields = [];
|
||||
}
|
||||
localMappings.value[mapIndex].fields.push({ placeholder: '', source: '' });
|
||||
localMappings.value[mapIndex].fields.push({ placeholder: "", source: "" });
|
||||
update();
|
||||
};
|
||||
|
||||
@@ -177,7 +250,7 @@ const removeField = (mapIndex: number, fieldIndex: number) => {
|
||||
};
|
||||
|
||||
const update = () => {
|
||||
emit('update:mappings', reformatMappingsForEmit());
|
||||
emit("update:mappings", reformatMappingsForEmit());
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user