Conversor de ServerValue - Activepieces

by Daniel Gualberto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-header bg-primary text-white">
          <h4 class="mb-0">Conversor de <em>ServerValue</em> - Activepieces</h4>
        </div>
        <div class="card-body">
          <div class="input-group mb-3">
            <label class="input-group-text" for="typeSelect"
              >Selecione o tipo de valor:</label
            >
            <select class="form-select" id="typeSelect">
              <option value="value">value</option>
              <option value="array_value">array_value</option>
              <option value="report_value">report_value</option>
              <option value="date_value">date_value</option>
              <option value="float_value">float_value</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="inputTextarea" class="form-label fw-bold"
              >Cole o JSON aqui:</label
            >
            <textarea
              class="form-control"
              id="inputTextarea"
              rows="6"
              placeholder='Cole aqui o JSON com a estrutura {"displayText":"...", "serverValue":"...", "logoUrl":"..."}'
            ></textarea>
          </div>

          <div class="d-grid gap-2">
            <button class="btn btn-primary" id="convertButton" type="button">
              <i class="bi bi-arrow-repeat"></i> Converter
            </button>
          </div>

          <div class="mt-4" id="resultSection"...

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const typeSelect = document.getElementById('typeSelect');
  const inputTextarea = document.getElementById('inputTextarea');
  const convertButton = document.getElementById('convertButton');
  const resultSection = document.getElementById('resultSection');
  const resultOutput = document.getElementById('resultOutput');
  const copyButton = document.getElementById('copyButton');

  // Inicializar toasts
  const successToast = new bootstrap.Toast(
    document.getElementById('successToast'),
  );
  const errorToast = new bootstrap.Toast(document.getElementById('errorToast'));
  const warningToast = new bootstrap.Toast(
    document.getElementById('warningToast'),
  );

  // Funções auxiliares para mostrar toasts
  function showSuccess(message) {
    document.getElementById('successMessage').textContent = message;
    successToast.show();
  }

  function showError(message) {
    document.getElementById('errorMessage').textContent = message;
    errorToast.show();
  }

  function showWarning(message) {
    document.getElementById('warningMessage').textContent = message;
    warningToast.show();
  }

  convertButton.addEventListener('click', function () {
    const selectedType = typeSelect.value;
    const inputText = inputTextarea.value.trim();

    if (!inputText) {
      showWarning('Por favor, cole o JSON no textarea primeiro!');
      return;
    }

    try {
      // Regex para capturar todos os serverValues
      const serverValueRegex = /"serverValue"\s*:\s*"({{[^}]+}})"/g;
      const matches = [...inputText.matchAll(serverValueRegex)];

      if (matches.length === 0) {
        showWarning('Nenhum serverValue encontrado no texto!');
        return;
      }

      const convertedValues = matches.map((match) => {
        const originalValue = match[1];
        const convertedValue = replaceLastValue(originalValue, selectedType);
        return...