From 03db636d51a2e2c060533180c8c830eedde46f5c Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Fri, 23 Feb 2024 15:58:49 +0200
Subject: [PATCH] add number field type

---
 app/javascript/application.scss               |  8 +-
 app/javascript/submission_form/area.vue       |  4 +-
 app/javascript/submission_form/form.vue       | 30 ++++++-
 app/javascript/submission_form/i18n.js        | 12 +++
 .../submission_form/number_step.vue           | 79 +++++++++++++++++++
 .../template_builder/field_type.vue           |  8 +-
 app/javascript/template_builder/fields.vue    |  2 +-
 app/javascript/template_builder/i18n.js       |  1 +
 lib/submitters/normalize_values.rb            |  2 +
 lib/submitters/submit_values.rb               |  2 +
 10 files changed, 138 insertions(+), 10 deletions(-)
 create mode 100644 app/javascript/submission_form/number_step.vue

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index 9a220258..991fc9cd 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -75,16 +75,16 @@ button[disabled] .enabled {
   @apply select base-input w-full font-normal;
 }
 
-.tooltip-bottom-start:before {
-  transform: translateX(-30%);
+.tooltip-bottom-end:before {
+  transform: translateX(-95%);
   top: var(--tooltip-offset);
   left: 100%;
   right: auto;
   bottom: auto;
 }
 
-.tooltip-bottom-start:after {
-  transform: translateX(-75%);
+.tooltip-bottom-end:after {
+  transform: translateX(-25%);
   border-color: transparent transparent var(--tooltip-color) transparent;
   top: var(--tooltip-tail-offset);
   left: 50%;
diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 54fbb618..c27f0d80 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -173,7 +173,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -240,6 +240,7 @@ export default {
         signature: this.t('signature'),
         initials: this.t('initials'),
         date: this.t('date'),
+        number: this.t('number'),
         image: this.t('image'),
         file: this.t('file'),
         select: this.t('select'),
@@ -260,6 +261,7 @@ export default {
         text: IconTextSize,
         signature: IconWritingSign,
         date: IconCalendarEvent,
+        number: IconSquareNumber1,
         image: IconPhoto,
         initials: IconLetterCaseUpper,
         file: IconPaperclip,
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index fe147e16..4d03e100 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -72,6 +72,14 @@
               @focus="scrollIntoField(currentField)"
             />
           </div>
+          <NumberStep
+            v-else-if="currentField.type === 'number'"
+            :key="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
+            :field="currentField"
+            @focus="scrollIntoField(currentField)"
+          />
           <DateStep
             v-else-if="currentField.type === 'date'"
             :key="currentField.uuid"
@@ -396,12 +404,31 @@ import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
 import TextStep from './text_step'
+import NumberStep from './number_step'
 import DateStep from './date_step'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
 import i18n from './i18n'
 
+const isEmpty = (obj) => {
+  if (obj == null) return true
+
+  if (Array.isArray(obj) || typeof obj === 'string') {
+    return obj.length === 0
+  }
+
+  if (typeof obj === 'object') {
+    return Object.keys(obj).length === 0
+  }
+
+  if (obj === false) {
+    return true
+  }
+
+  return false
+}
+
 export default {
   name: 'SubmissionForm',
   components: {
@@ -416,6 +443,7 @@ export default {
     DateStep,
     IconArrowsDiagonal,
     TextStep,
+    NumberStep,
     PhoneStep,
     PaymentStep,
     IconArrowsDiagonalMinimize2,
@@ -797,7 +825,7 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && (this.submittedValues[fields[0].uuid] === true ? false : !this.submittedValues[fields[0].uuid]?.length)
+          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && isEmpty(this.submittedValues[fields[0].uuid])
         })
 
         const formData = new FormData(this.$refs.form)
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index a46c7e2b..972ba930 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -3,6 +3,7 @@ const en = {
   signature: 'Signature',
   initials: 'Initials',
   date: 'Date',
+  number: 'Number',
   image: 'Image',
   take_photo: 'Take photo',
   file: 'File',
@@ -68,6 +69,7 @@ const es = {
   signature: 'Firma',
   initials: 'Iniciales',
   date: 'Fecha',
+  number: 'Número',
   image: 'Imagen',
   file: 'Archivo',
   select: 'Seleccionar',
@@ -131,6 +133,7 @@ const it = {
   signature: 'Firma',
   initials: 'Iniziali',
   date: 'Data',
+  number: 'Numero',
   image: 'Immagine',
   file: 'File',
   select: 'Seleziona',
@@ -194,6 +197,7 @@ const de = {
   signature: 'Unterschrift',
   initials: 'Initialen',
   date: 'Datum',
+  number: 'Nummer',
   image: 'Bild',
   file: 'Datei',
   select: 'Auswählen',
@@ -257,6 +261,7 @@ const fr = {
   signature: 'Signature',
   initials: 'Initiales',
   date: 'Date',
+  number: 'Numéro',
   image: 'Image',
   file: 'Fichier',
   select: 'Choisir',
@@ -320,6 +325,7 @@ const pl = {
   signature: 'Podpis',
   initials: 'Inicjały',
   date: 'Data',
+  number: 'Numer',
   image: 'Obraz',
   file: 'Plik',
   select: 'Wybierz',
@@ -383,6 +389,7 @@ const uk = {
   signature: 'Підпис',
   initials: 'Ініціали',
   date: 'Дата',
+  number: 'Число',
   image: 'Зображення',
   file: 'Файл',
   select: 'Вибрати',
@@ -446,6 +453,7 @@ const cs = {
   signature: 'Podpis',
   initials: 'Iniciály',
   date: 'Datum',
+  number: 'Číslo',
   image: 'Obrázek',
   file: 'Soubor',
   select: 'Vybrat',
@@ -509,6 +517,7 @@ const pt = {
   signature: 'Assinatura',
   initials: 'Iniciais',
   date: 'Data',
+  number: 'Número',
   image: 'Imagem',
   file: 'Arquivo',
   select: 'Selecionar',
@@ -572,6 +581,7 @@ const he = {
   signature: 'חתימה',
   initials: 'ראשי תיקיות',
   date: 'תאריך',
+  number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
   select: 'בחר',
@@ -636,6 +646,7 @@ const nl = {
   signature: 'Handtekening',
   initials: 'Initialen',
   date: 'Datum',
+  number: 'Nummer',
   image: 'Afbeelding',
   take_photo: 'Maak een foto',
   file: 'Bestand',
@@ -699,6 +710,7 @@ const ar = {
   signature: 'توقيع',
   initials: 'الاختصارات',
   date: 'تاريخ',
+  number: 'رقم',
   image: 'صورة',
   take_photo: 'التقاط صورة',
   file: 'ملف',
diff --git a/app/javascript/submission_form/number_step.vue b/app/javascript/submission_form/number_step.vue
new file mode 100644
index 00000000..9b8ae752
--- /dev/null
+++ b/app/javascript/submission_form/number_step.vue
@@ -0,0 +1,79 @@
+<template>
+  <label
+    v-if="showFieldNames && field.name"
+    :for="field.uuid"
+    dir="auto"
+    class="label text-2xl"
+    :class="{ 'mb-2': !field.description }"
+  ><template v-if="field.title"><span v-html="field.title" /></template>
+    <template v-else>{{ field.name }}</template>
+    <template v-if="!field.required">({{ t('optional') }})</template>
+  </label>
+  <div
+    v-else
+    class="py-1"
+  />
+  <div
+    v-if="field.description"
+    class="mb-3 px-1 text-lg"
+    v-html="field.description"
+  />
+  <AppearsOn :field="field" />
+  <div class="items-center flex">
+    <input
+      type="hidden"
+      name="cast_number"
+      value="true"
+    >
+    <input
+      :id="field.uuid"
+      v-model="number"
+      type="number"
+      class="base-input !text-2xl w-full"
+      step="any"
+      :required="field.required"
+      :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
+      :name="`values[${field.uuid}]`"
+      @focus="$emit('focus')"
+    >
+  </div>
+</template>
+
+<script>
+import AppearsOn from './appears_on'
+
+export default {
+  name: 'TextStep',
+  components: {
+    AppearsOn
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  computed: {
+    number: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  }
+}
+</script>
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 207f556f..58edd755 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -94,6 +94,7 @@ export default {
         signature: this.t('signature'),
         initials: this.t('initials'),
         date: this.t('date'),
+        number: this.t('number'),
         image: this.t('image'),
         file: this.t('file'),
         select: this.t('select'),
@@ -112,12 +113,13 @@ export default {
         signature: IconWritingSign,
         initials: IconLetterCaseUpper,
         date: IconCalendarEvent,
+        number: IconSquareNumber1,
         image: IconPhoto,
-        file: IconPaperclip,
         checkbox: IconCheckbox,
+        multiple: IconChecks,
+        file: IconPaperclip,
         radio: IconCircleDot,
         select: IconSelect,
-        multiple: IconChecks,
         cells: IconColumns3,
         stamp: IconRubberStamp,
         payment: IconCreditCard,
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 79ad3bff..9224e485 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -93,7 +93,7 @@
       <div
         v-else-if="type == 'phone' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
         class="tooltip tooltip-bottom flex"
-        :class="{'tooltip-bottom-start': !withPayment, 'tooltip-bottom': withPayment }"
+        :class="{'tooltip-bottom-end': withPayment, 'tooltip-bottom': !withPayment }"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
       >
         <a
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index 05e42d32..48b772c2 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -54,6 +54,7 @@ const en = {
   add: 'Add',
   or_add_field_without_drawing: 'Or add field without drawing',
   text: 'Text',
+  number: 'Number',
   signature: 'Signature',
   initials: 'Initials',
   date: 'Date',
diff --git a/lib/submitters/normalize_values.rb b/lib/submitters/normalize_values.rb
index 5c471109..da7153df 100644
--- a/lib/submitters/normalize_values.rb
+++ b/lib/submitters/normalize_values.rb
@@ -51,6 +51,8 @@ module Submitters
     def normalize_value(field, value)
       if field['type'] == 'text' && value.present?
         value.to_s
+      elsif field['type'] == 'number' && value.present?
+        (value.to_f % 1).zero? ? value.to_i : value.to_f
       elsif field['type'] == 'date' && value.present?
         if value.is_a?(Integer)
           Time.zone.at(value.to_s.first(10).to_i).to_date
diff --git a/lib/submitters/submit_values.rb b/lib/submitters/submit_values.rb
index d54aebf6..cce31f29 100644
--- a/lib/submitters/submit_values.rb
+++ b/lib/submitters/submit_values.rb
@@ -54,6 +54,8 @@ module Submitters
       params.fetch(:values, {}).to_unsafe_h.transform_values do |v|
         if params[:cast_boolean] == 'true'
           v == 'true'
+        elsif params[:cast_number] == 'true'
+          (v.to_f % 1).zero? ? v.to_i : v.to_f
         elsif params[:normalize_phone] == 'true'
           v.to_s.gsub(/[^0-9+]/, '')
         else