gems-uff/sapos

View on GitHub
app/assets/javascripts/form_fields/config_values.js

Summary

Maintainability
D
2 days
Test Coverage
function config_form_field_values(form_field, field, options) {
  let r = (Math.random() + 1).toString(36).substring(7);
  let visible = options["visible"] === false ? `style="display:none;"`: "";
  let main_id = `${form_field.baseid}_${field}_main_id_${r}`
  let div_id = `${form_field.baseid}_${field}_div_${r}`
  let add_id = `${form_field.baseid}_${field}_add_${r}`
  let label = options?.label ?? field;
  let title = form_field.i18n(label, "title");
  let add_title = form_field.i18n(label, "add");
  let values = form_field.data[field] || [];

  let elements = [];
  for (let value of values) {
    elements.push(`
      <tbody>
        <tr class="association-record">
          <td>
            <input type="text" value="${value.replace(/"/g, '&quot;')}">
          </td>
          <td class="actions">
            <a class="destroy" href="#">Remove</a>
          </td>
          <td class="item-error form-field-config-error"></td>
        </tr>
      </tbody>
    `)
  }

  return {
    html: `
      <dl id="${main_id}" ${visible}>
        <dt><label>${title}</label></dt>
        <dd>
          <div id="${div_id}">
            <div class="main-error form-field-config-error"></div>
            <table>
              ${elements.join('')}
            </table>
            <div class="footer_wrapper">
              <div class="footer">
                <a id="${add_id}" class="as-js-button as_create_another"
                  style="" data-remote="true"
                  href="#">${add_title}</a>
              </div>
            </div>
          </div>
        </dd>
      </dl>
    `,
    postRender: () => {
      $(`#${div_id} table input`).on('change', function() {
        form_field.data[field] = $(`#${div_id} table input`).map((i, el) => $(el).val()).toArray();
        form_field.save_config();
      })

      $(`#${div_id} table a`).on('click', function() {
        $(this).closest('tbody').remove();
        form_field.data[field] = $(`#${div_id} table input`).map((i, el) => $(el).val()).toArray();
        form_field.save_config();
        return false;
      })

      $(`#${add_id}`).on('click', function() {
        let r = (Math.random() + 1).toString(36).substring(7);
        $(`#${div_id} table`).append(`
          <tbody id="${form_field.baseid}_${field}_${r}">
            <tr class="association-record">
              <td>
                <input type="text">
              </td>
              <td class="actions">
                <a class="destroy" href="#">Remove</a>
              </td>
              <td class="item-error form-field-config-error"></td>
            </tr>
          </tbody>
        `)
        $(`#${form_field.baseid}_${field}_${r} a`).on('click', function() {
          $(this).closest('tbody').remove();
          form_field.data[field] = $(`#${div_id} table input`).map((i, el) => $(el).val()).toArray();
          form_field.save_config();
          return false;
        })
        $(`#${form_field.baseid}_${field}_${r} input`).on('change', function() {
          form_field.data[field] = $(`#${div_id} table input`).map((i, el) => $(el).val()).toArray();
          form_field.save_config();
        })

        form_field.data[field] = $(`#${div_id} table input`).map((i, el) => $(el).val()).toArray();
        form_field.save_config();

        return false;
      })
    },
    validate: () => {
      is_required = options["required"]
      non_blank = options["non_blank"]
      let fielddata = form_field.data[field] || []
      let result = true;
      if (is_required && fielddata.length < 1) {
        let present_error = form_field.i18n_error(field + "_present_error")
        $(`#${div_id} .main-error`).text(present_error)
        $(`#${div_id} .main-error`).show()
        result = false;
      } else {
        $(`#${div_id} .main-error`).hide()
      }
      if (non_blank && fielddata.length > 0) {
        fielddata.forEach((el, i) => {
          let element = $($(`#${div_id} tbody tr`)[i]).find(".item-error");
          if (el.trim() == "") {
            let blank_error = form_field.i18n_error(field + "_blank_error");
            element.text(blank_error)
            element.show()
            result = false;
          } else {
            element.hide()
          }
        })
      }

      return result;
    },
    main_id: main_id,
    refresh: () => {},
  }
}