build version 400

resources/assets/js/components/custom-fields/DateField.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <base-date-picker
+      v-model="date"
+      :calendar-button="true"
+      :invalid="isInvalid"
+      :placeholder="placeholder"
+      calendar-button-icon="calendar"
+      @input="onDateChanged"
+    />
+    <span v-if="isInvalid" class="text-sm text-danger">
+      {{ $t('validation.required') }}
+    </span>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+const { required, requiredIf } = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      date: null,
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    date: {
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.date.$error && !this.$v.date.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+    field: {
+      handler: 'handleData',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.date =
+      this.field && this.field.defaultAnswer
+        ? this.field.defaultAnswer
+        : new Date()
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    handleData() {
+      this.date =
+        this.field && this.field.defaultAnswer
+          ? this.field.defaultAnswer
+          : new Date()
+      this.placeholder =
+        this.field && this.field.placeholder ? this.field.placeholder : ''
+    },
+    onDateChanged(date) {
+      this.$v.date.$touch()
+      this.$emit('update', {
+        field: this.field,
+        value: moment(date).format('YYYY-MM-DD'),
+      })
+    },
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/DateTimeField.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <base-date-picker
+      v-model="dateTime"
+      :invalid="isInvalid"
+      :enable-time="true"
+      :placeholder="placeholder"
+      @input="onChanged"
+    />
+    <span v-if="isInvalid" class="text-sm text-danger">
+      {{ $t('validation.required') }}
+    </span>
+  </div>
+</template>
+<script>
+const { required, requiredIf } = require('vuelidate/lib/validators')
+import moment from 'moment'
+
+export default {
+  props: {
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      dateTime: null,
+      placeholder: '',
+      defaultValue: null,
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    dateTime: {
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.dateTime.$error && !this.$v.dateTime.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.dateTime =
+      this.field && this.field.defaultAnswer
+        ? moment(this.field.defaultAnswer).format('YYYY-MM-DD H:m')
+        : moment().format('YYYY-MM-DD H:m')
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    onChanged() {
+      this.$v.dateTime.$touch()
+      this.$emit('update', { field: this.field, value: this.dateTime })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/DropdownField.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <sw-select
+      v-model="selectedValue"
+      :options="options"
+      :searchable="true"
+      :show-labels="false"
+      :allow-empty="true"
+      :invalid="isInvalid"
+      :placeholder="placeholder"
+      :tabindex="tabindex"
+      @select="onSelectedValueChanged"
+    />
+    <span v-if="isInvalid" class="text-sm text-danger">
+      {{ $t('validation.required') }}
+    </span>
+  </div>
+</template>
+<script>
+const { required, requiredIf } = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    field: {
+      type: Object,
+      default: null,
+      require: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedValue: null,
+      options: [],
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    selectedValue: {
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.selectedValue.$error && !this.$v.selectedValue.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.options = this.field && this.field.options ? this.field.options : []
+    this.selectedValue = this.field && this.field.defaultAnswer
+    this.placeholder = this.field && this.field.placeholder
+  },
+  methods: {
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    onSelectedValueChanged(data) {
+      this.$v.selectedValue.$touch()
+      this.$emit('update', { field: this.field, value: data })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/InputField.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <sw-input
+      :type="type"
+      :invalid="isInvalid"
+      :placeholder="placeholder"
+      v-model="inputValue"
+      :tabindex="tabindex"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <span v-if="isInvalid" class="text-sm text-danger">
+      {{ $t('validation.required') }}
+    </span>
+  </div>
+</template>
+<script>
+const {
+  required,
+  minLength,
+  numeric,
+  minValue,
+  maxLength,
+  requiredIf,
+} = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      required: false,
+    },
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      inputValue: null,
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    inputValue: {
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.inputValue.$error && !this.$v.inputValue.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    field: {
+      handler: 'handleData',
+      deep: true,
+    },
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.inputValue = this.field && this.field.defaultAnswer
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    handleData() {
+      this.inputValue = this.field && this.field.defaultAnswer
+      this.placeholder =
+        this.field && this.field.placeholder ? this.field.placeholder : ''
+    },
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    handleInput() {
+      this.$emit('update', { field: this.field, value: this.inputValue })
+      this.$v.inputValue.$touch()
+    },
+    handleChange() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/NumberField.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <sw-input
+      :invalid="$v.inputValue.$error || isInvalid"
+      :placeholder="placeholder"
+      :tabindex="tabindex"
+      v-model="inputValue"
+      type="number"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <div v-if="$v.inputValue.$error || isInvalid">
+      <span v-if="isInvalid" class="text-sm text-danger">
+        {{ $t('validation.required') }}
+      </span>
+      <span
+        v-if="!isInvalid && $v.inputValue.numeric"
+        class="text-sm text-danger"
+      >
+        {{ $t('validation.required') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+const { required, numeric, requiredIf } = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      required: false,
+    },
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      inputValue: null,
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    inputValue: {
+      required: requiredIf('isRequired'),
+      numeric,
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.inputValue.$error && !this.$v.inputValue.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    field: {
+      handler: 'handleData',
+      deep: true,
+    },
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.inputValue = this.field && this.field.defaultAnswer
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    handleData() {
+      this.inputValue = this.field && this.field.defaultAnswer
+      this.placeholder =
+        this.field && this.field.placeholder ? this.field.placeholder : ''
+    },
+    handleInput() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+    handleChange() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/PhoneField.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <sw-input
+      :invalid="$v.inputValue.$error || isInvalid"
+      :placeholder="placeholder"
+      :tabindex="tabindex"
+      v-model="inputValue"
+      type="text"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <div v-if="$v.inputValue.$error || isInvalid">
+      <span
+        v-if="!isInvalid && !$v.inputValue.phone"
+        class="text-sm text-danger"
+      >
+        {{ $t('validation.invalid_phone') }}
+      </span>
+      <span v-if="isInvalid" class="text-sm text-danger">
+        {{ $t('validation.required') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+const {
+  required,
+  minLength,
+  numeric,
+  minValue,
+  maxLength,
+  requiredIf,
+} = require('vuelidate/lib/validators')
+const isPhone = (value) => /^\+?[0-9]+$/.test(value)
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      required: false,
+    },
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      inputValue: null,
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    inputValue: {
+      phone: isPhone,
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.inputValue.$error && !this.$v.inputValue.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.inputValue = this.field && this.field.defaultAnswer
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    handleInput() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+    handleChange() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/SwitchField.vue

@@ -0,0 +1,37 @@
+<template>
+  <sw-switch
+    v-model="switchData"
+    class="btn-switch"
+    @change="onChange"
+    style="margin-top: -15px"
+  />
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      required: false,
+    },
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      switchData: false,
+    }
+  },
+  mounted() {
+    this.switchData = this.field && this.field.defaultAnswer ? true : false
+  },
+  methods: {
+    onChange() {
+      this.$emit('update', { field: this.field, value: this.switchData })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/TextAreaField.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <sw-textarea
+      v-model="text"
+      :invalid="isInvalid"
+      :placeholder="placeholder"
+      :tabindex="tabindex"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <span v-if="isInvalid" class="text-sm text-danger">
+      {{ $t('validation.required') }}
+    </span>
+  </div>
+</template>
+<script>
+const {
+  required,
+  minLength,
+  numeric,
+  minValue,
+  maxLength,
+  requiredIf,
+} = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      text: null,
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    text: {
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.text.$error && !this.$v.text.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.text = this.field && this.field.defaultAnswer
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    handleInput() {
+      this.$v.text.$touch()
+      this.$emit('update', { field: this.field, value: this.text })
+    },
+    handleChange() {
+      this.$v.text.$touch()
+      this.$emit('update', { field: this.field, value: this.text })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/TimeField.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <base-time-picker
+      v-model="time"
+      :set-value="defaultValue"
+      :invalid="$v.time.$error"
+      :placeholder="placeholder"
+      :tabindex="tabindex"
+      hide-clear-button
+      @input="onTimeSelect"
+    />
+    <div v-if="$v.time.$error">
+      <span v-if="!$v.time.required" class="text-sm text-danger">
+        {{ $t('validation.required') }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+const { required, requiredIf } = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      time: null,
+      defaultValue: '00:00:00',
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    time: {
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.inputValue.$error && !this.$v.inputValue.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    field: {
+      handler: 'handleData',
+      deep: true,
+    },
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+    this.handleData()
+  },
+  methods: {
+    handleData() {
+      this.defaultValue =
+        this.field && this.field.defaultAnswer
+          ? this.field.defaultAnswer
+          : '00-00-00'
+      this.time =
+        this.field && this.field.defaultAnswer
+          ? this.field.defaultAnswer
+          : '00-00-00'
+    },
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    onTimeSelect() {
+      this.$v.time.$touch()
+      this.$emit('update', { field: this.field, value: this.time })
+    },
+  },
+}
+</script>

resources/assets/js/components/custom-fields/UrlField.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <sw-input
+      :invalid="$v.inputValue.$error || isInvalid"
+      :placeholder="placeholder"
+      :tabindex="tabindex"
+      v-model="inputValue"
+      type="url"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <div v-if="$v.inputValue.$error || isInvalid">
+      <span v-if="!$v.inputValue.url" class="text-sm text-danger">
+        {{ $t('validation.invalid_url') }}
+      </span>
+      <span v-if="isInvalid" class="text-sm text-danger">
+        {{ $t('validation.required') }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+const { required, url, requiredIf } = require('vuelidate/lib/validators')
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      required: false,
+    },
+    field: {
+      type: Object,
+      default: null,
+      required: true,
+    },
+    invalidFields: {
+      type: Array,
+      default: () => [],
+    },
+    tabindex: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      inputValue: null,
+      placeholder: '',
+      invalidFieldIds: [],
+    }
+  },
+  validations: {
+    inputValue: {
+      url,
+      required: requiredIf('isRequired'),
+    },
+  },
+  computed: {
+    isRequired() {
+      if (this.field && this.field.is_required) {
+        return true
+      }
+      return false
+    },
+    isInvalid() {
+      if (
+        this.invalidFieldIds.indexOf(this.field.cfid) >= 0 ||
+        (this.$v.inputValue.$error && !this.$v.inputValue.required)
+      ) {
+        return true
+      }
+      return false
+    },
+  },
+  watch: {
+    invalidFields: {
+      handler: 'setInvalidFieldIds',
+      deep: true,
+    },
+  },
+  mounted() {
+    this.inputValue = this.field && this.field.defaultAnswer
+    this.placeholder =
+      this.field && this.field.placeholder ? this.field.placeholder : ''
+  },
+  methods: {
+    setInvalidFieldIds() {
+      this.invalidFieldIds = this.invalidFields.map((field) => field.id)
+    },
+    handleInput() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+    handleChange() {
+      this.$v.inputValue.$touch()
+      this.$emit('update', { field: this.field, value: this.inputValue })
+    },
+  },
+}
+</script>