SignupFormBuilder.vue

<template>
  <div>
    <div class="ui top attached tabular menu">
      <button
        :class="[{active: !isPreviewing}, 'item']"
        @click.stop.prevent="isPreviewing = false"
      >
        <translate translate-context="Content/*/Button.Label/Verb">
          Edit form
        </translate>
      </button>
      <button
        :class="[{active: isPreviewing}, 'item']"
        @click.stop.prevent="isPreviewing = true"
      >
        <translate translate-context="*/Form/Menu.item">
          Preview form
        </translate>
      </button>
    </div>
    <div
      v-if="isPreviewing"
      class="ui bottom attached segment"
    >
      <signup-form
        :customization="local"
        :signup-approval-enabled="signupApprovalEnabled"
        :fetch-description-html="true"
      />
      <div class="ui clearing hidden divider" />
    </div>
    <div
      v-else
      class="ui bottom attached segment"
    >
      <div class="field">
        <label for="help-text">
          <translate translate-context="*/*/Label">Help text</translate>
        </label>
        <p>
          <translate translate-context="*/*/Help">
            An optional text to be displayed at the start of the sign-up form.
          </translate>
        </p>
        <content-form
          field-id="help-text"
          :permissive="true"
          :value="(local.help_text || {}).text"
          @input="update('help_text.text', $event)"
        />
      </div>
      <div class="field">
        <label>
          <translate translate-context="*/*/Label">Additional fields</translate>
        </label>
        <p>
          <translate translate-context="*/*/Help">
            Additional form fields to be displayed in the form. Only shown if manual sign-up validation is enabled.
          </translate>
        </p>
        <table v-if="local.fields.length > 0">
          <thead>
            <tr>
              <th>
                <translate translate-context="*/*/Form-builder,Help">
                  Field label
                </translate>
              </th>
              <th>
                <translate translate-context="*/*/Form-builder,Help">
                  Field type
                </translate>
              </th>
              <th>
                <translate translate-context="*/*/Form-builder,Help">
                  Required
                </translate>
              </th>
              <th><span class="visually-hidden"><translate translate-context="*/*/Form-builder,Help">Actions</translate></span></th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(field, idx) in local.fields"
              :key="idx"
            >
              <td>
                <input
                  v-model="field.label"
                  type="text"
                  required
                >
              </td>
              <td>
                <select v-model="field.input_type">
                  <option value="short_text">
                    <translate translate-context="*/*/Form-builder">
                      Short text
                    </translate>
                  </option>
                  <option value="long_text">
                    <translate translate-context="*/*/Form-builder">
                      Long text
                    </translate>
                  </option>
                </select>
              </td>
              <td>
                <select v-model="field.required">
                  <option :value="true">
                    <translate translate-context="*/*/*">
                      Yes
                    </translate>
                  </option>
                  <option :value="false">
                    <translate translate-context="*/*/*">
                      No
                    </translate>
                  </option>
                </select>
              </td>
              <td>
                <i
                  :disabled="idx === 0"
                  role="button"
                  :title="labels.up"
                  :class="['up', 'arrow', {disabled: idx === 0}, 'icon']"
                  @click="move(idx, -1)"
                />
                <i
                  :disabled="idx >= local.fields.length - 1"
                  role="button"
                  :title="labels.down"
                  :class="['down', 'arrow', {disabled: idx >= local.fields.length - 1}, 'icon']"
                  @click="move(idx, 1)"
                />
                <i
                  role="button"
                  :title="labels.delete"
                  class="x icon"
                  @click="remove(idx)"
                />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="ui hidden divider" />
        <button
          v-if="local.fields.length < maxFields"
          class="ui basic button"
          @click.stop.prevent="addField"
        >
          <translate translate-context="*/*/Form-builder">
            Add a new field
          </translate>
        </button>
      </div>
    </div>
    <div class="ui hidden divider" />
  </div>
</template>

<script>
import lodash from '@/lodash'

import SignupForm from '@/components/auth/SignupForm.vue'

function arrayMove (arr, oldIndex, newIndex) {
  if (newIndex >= arr.length) {
    let k = newIndex - arr.length + 1
    while (k--) {
      arr.push(undefined)
    }
  }
  arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0])
  return arr
};

// v-model with objects is complex, cf
// https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components
export default {
  components: {
    SignupForm
  },
  props: {
    value: { type: Object, required: true },
    signupApprovalEnabled: { type: Boolean }
  },
  data () {
    return {
      maxFields: 10,
      isPreviewing: false
    }
  },
  computed: {
    labels () {
      return {
        delete: this.$pgettext('*/*/*', 'Delete'),
        up: this.$pgettext('*/*/*', 'Move up'),
        down: this.$pgettext('*/*/*', 'Move down')
      }
    },
    local () {
      return (this.value && this.value.fields) ? this.value : { help_text: { text: null, content_type: 'text/markdown' }, fields: [] }
    }
  },
  created () {
    this.$emit('input', this.local)
  },
  methods: {
    addField () {
      const newValue = lodash.tap(lodash.cloneDeep(this.local), v => v.fields.push({
        label: this.$pgettext('*/*/Form-builder', 'Additional field') + ' ' + (this.local.fields.length + 1),
        required: true,
        input_type: 'short_text'
      }))
      this.$emit('input', newValue)
    },
    remove (idx) {
      this.$emit('input', lodash.tap(lodash.cloneDeep(this.local), v => v.fields.splice(idx, 1)))
    },
    move (idx, incr) {
      if (idx === 0 && incr < 0) {
        return
      }
      if (idx + incr >= this.local.fields.length) {
        return
      }
      const newFields = arrayMove(lodash.cloneDeep(this.local).fields, idx, idx + incr)
      this.update('fields', newFields)
    },
    update (key, value) {
      if (key === 'help_text.text') {
        key = 'help_text'
        if (!value || value.length === 0) {
          value = null
        } else {
          value = {
            text: value,
            content_type: 'text/markdown'
          }
        }
      }
      this.$emit('input', lodash.tap(lodash.cloneDeep(this.local), v => lodash.set(v, key, value)))
    }
  }
}
</script>