web/app/components/marketing/email/MappingConfigurator.vue

<template>
  <div class="box">
    <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)"
          >
            <span class="icon is-small">
              <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 16 }"></SvgIcon>
            </span>
          </button>
        </div>
      </div>

      <div class="columns is-multiline">
        <div class="column is-6">
          <div class="field">
            <label class="label">Alias</label>
            <div class="control">
              <input
                class="input"
                type="text"
                v-model="mapping.alias"
                @input="update"
              />
            </div>
          </div>
        </div>
        <div class="column is-6">
          <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"
              />
            </div>
          </div>
        </div>
        <div class="column is-6">
          <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"
              />
            </div>
          </div>
        </div>
        <div class="column is-6">
          <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"
              />
            </div>
          </div>
        </div>
        <div class="column is-6">
          <div class="field">
            <label class="label">Type</label>
            <div class="control">
              <div class="select is-fullwidth">
                <select
                  v-model="mapping.type"
                  @change="update"
                >
                  <option value="object">Object</option>
                  <option value="list">List</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <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"
                />
                Yes
              </label>
            </div>
          </div>
        </div>
      </div>

      <hr />
      <h6 class="title is-6">Fields</h6>
      <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]"
          />
        </div>
        <div class="control is-expanded">
          <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>
        </div>
      </div>
      <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 }"
      />
      Add Mapping
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps({
  mappings: {
    type: Array,
    default: () => [],
  },
});

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) => ({
    ...m,
    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) => {
    const newFields = m.fields.reduce((obj: any, item: any) => {
      try {
        // Attempt to parse if it's a JSON string for format objects
        obj[item.placeholder] = JSON.parse(item.source);
      } catch (e) {
        obj[item.placeholder] = item.source;
      }
      return obj;
    }, {});
    return { ...m, fields: newFields };
  });
};

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",
    is_trigger_object: false,
    fields: [],
  });
  update();
};

const removeMapping = (index: number) => {
  localMappings.value.splice(index, 1);
  update();
};

const addField = (mapIndex: number) => {
  if (!localMappings.value[mapIndex].fields) {
    localMappings.value[mapIndex].fields = [];
  }
  localMappings.value[mapIndex].fields.push({ placeholder: "", source: "" });
  update();
};

const removeField = (mapIndex: number, fieldIndex: number) => {
  localMappings.value[mapIndex].fields.splice(fieldIndex, 1);
  update();
};

const update = () => {
  emit("update:mappings", reformatMappingsForEmit());
};
</script>

<style scoped>
.box {
  padding: 1.5rem;
}
.border {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
}
</style>