jfu-1.0.x-dev/templates/json-form-component-widget.html.twig

<div class="jfu-container--item">
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>

  <div class="jfu-modal">
    <!-- The call to action text -->
    <span {{ attributes.addClass('form-item__label', field_required_class) }}>{{ field_label }}</span>
    <!-- Table components -->
    <div class="display-component">
      <template v-for="(component, index) in jfu['{{ field_name }}']">
        <component v-bind:is="'display-' + component.type" v-bind:index="index" v-bind:field_name="'{{ field_name }}'" v-bind:o_data="component" v-bind:cardinality="cardinality['{{ field_name }}']" v-bind:is_load="jfuComponents['{{ field_name }}'][component.type] ? true : false" v-bind:options="options"></component>
      </template>
    </div>

    <!-- The modal button -->
    <div class="modal__button" v-show="showButtonAddComponent['{{ field_name }}']">
      <span class="link-to link-to-action" v-on:click="loadModal($event)" target_field_name="{{ field_name }}">{{ ' Add component'|t }}</span>
    </div>

    <!-- The modal dialog -->
    <div class="modal__dialog" v-bind:class="'{{ 'current--modal-' ~ field_name }}' == currentModal ? 'active' : ''">
      <div class="modal__content">
        <span class="modal__close" v-on:click="closeModal($event)"></span>
        <div class="modal__body">
          <h3 v-show="selectedComponent == ''" class="modal__header">{{ 'Choose component'|t }}</h3>
          <div class="modal__header" v-show="jfuComponents['{{ field_name }}'] == ''">
            <p>{{ "You don't have any selected components for this field."|t }}</p>
            <p>{{ "Choose the components you want to use."|t }}</p>
          </div>
          <div v-show="selectedComponent == ''" class="jfu-component--wrapper">
            <template v-for="component in jfuComponents['{{ field_name }}']">
              <div v-bind:class="'jfu-component-' + component.type + ' jfu-component--item'">
                <input type="radio" v-bind:id="'jfu-component-' + component.type + '-' + jfuOrder" v-bind:value="component.type" v-model="selectedComponent" v-on:click="loadFormComponent($event, component.type)">
                <label v-text="component.label" v-bind:for="'jfu-component-' + component.type + '-' + jfuOrder"></label>
              </div>
            </template>
          </div>
          <div class="link-to link-to-back" v-show="selectedComponent != ''" v-on:click="clearSelectedComponent"><span class="link-to-back--icon"></span>{{ 'Change for another component'|t }}</div>
          <template v-for="(component, key) in jfuComponents['{{ field_name }}']">
            <div v-show="component.type == selectedComponent" v-bind:class="'jfu-form-component jfu-form-component-' + component.type">
              <h3>{{ 'Add component'|t }} <span v-text="component.label"></span></h3>
              <component v-bind:is="'form-' + component.type" v-bind:key="key" v-bind:o_json="component" v-bind:edit_index="editIndex" v-bind:field_name="'{{ field_name }}'" v-bind:options="options" v-bind:components="jfuComponents['{{ field_name }}']"></component>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- The overlay for the modal -->
    <div class="modal__overlay"></div>
  </div>

  {{ attach_library('jfu/jfu_css') }}
</div>