Separate input type for Rating,Scale,Slider (#351)

* Separate input type for Rating,Scale,Slider

* rating, scale, slider add in test cases

* Allow field type change for new types

* Added options to db factory

* Fix linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/components/form-components/AddFormBlock.vue

@@ -5,8 +5,7 @@
         <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
           <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                  stroke-linejoin="round"
-            />
+              stroke-linejoin="round" />
           </svg>
         </button>
         <div class="font-semibold inline ml-2 truncate flex-grow truncate">
@@ -22,13 +21,11 @@
         </p>
         <div class="grid grid-cols-2 gap-2">
           <div v-for="(block, i) in inputBlocks" :key="block.name"
-               class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-               role="button" @click.prevent="addBlock(block.name)"
-          >
+            class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
+            role="button" @click.prevent="addBlock(block.name)">
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2" v-html="block.icon"
-              ></svg>
+                stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
             </div>
             <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
               {{ block.title }}
@@ -42,13 +39,11 @@
         </p>
         <div class="grid grid-cols-2 gap-2">
           <div v-for="(block, i) in layoutBlocks" :key="block.name"
-               class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-               role="button" @click.prevent="addBlock(block.name)"
-          >
+            class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
+            role="button" @click.prevent="addBlock(block.name)">
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2" v-html="block.icon"
-              ></svg>
+                stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
             </div>
             <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
               {{ block.title }}
@@ -69,18 +64,18 @@ export default {
   components: {},
   props: {},
 
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
-    const {content: form} = storeToRefs(workingFormStore)
+    const { content: form } = storeToRefs(workingFormStore)
     return {
       form,
       workingFormStore,
-      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
+      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex)
     }
   },
 
 
-  data () {
+  data() {
     return {
       blockForm: null,
       inputBlocks: [
@@ -129,6 +124,21 @@ export default {
           title: 'Number Input',
           icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>'
         },
+        {
+          name: 'rating',
+          title: 'Rating Input',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />'
+        },
+        {
+          name: 'scale',
+          title: 'Scale Input',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />'
+        },
+        {
+          name: 'slider',
+          title: 'Slider Input',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />'
+        },
         {
           name: 'files',
           title: 'File Input',
@@ -171,13 +181,16 @@ export default {
   },
 
   computed: {
-    defaultBlockNames () {
+    defaultBlockNames() {
       return {
         text: 'Your name',
         date: 'Date',
         url: 'Link',
         phone_number: 'Phone Number',
         number: 'Number',
+        rating: 'Rating',
+        scale: 'Scale',
+        slider: 'Slider',
         email: 'Email',
         checkbox: 'Checkbox',
         select: 'Select',
@@ -195,21 +208,21 @@ export default {
 
   watch: {},
 
-  mounted () {
+  mounted() {
     this.reset()
   },
 
   methods: {
-    closeSidebar () {
+    closeSidebar() {
       this.workingFormStore.closeAddFieldSidebar()
     },
-    reset () {
+    reset() {
       this.blockForm = useForm({
         type: null,
         name: null
       })
     },
-    addBlock (type) {
+    addBlock(type) {
       this.blockForm.type = type
       this.blockForm.name = this.defaultBlockNames[type]
       const newBlock = this.prefillDefault(this.blockForm.data())
@@ -218,6 +231,19 @@ export default {
       if (['select', 'multi_select'].includes(this.blockForm.type)) {
         newBlock[this.blockForm.type] = { options: [] }
       }
+      if (this.blockForm.type === 'rating') {
+        newBlock.rating_max_value = 5
+      }
+      if (this.blockForm.type === 'scale') {
+        newBlock.scale_min_value = 1
+        newBlock.scale_max_value = 5
+        newBlock.scale_step_value = 1
+      }
+      if (this.blockForm.type === 'slider') {
+        newBlock.slider_min_value = 0
+        newBlock.slider_max_value = 50
+        newBlock.slider_step_value = 1
+      }
       newBlock.help_position = 'below_input'
       if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
         const newFields = clonedeep(this.form.properties)
@@ -232,7 +258,7 @@ export default {
       }
       this.reset()
     },
-    generateUUID () {
+    generateUUID() {
       let d = new Date().getTime()// Timestamp
       let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -247,7 +273,7 @@ export default {
         return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
       })
     },
-    prefillDefault (data) {
+    prefillDefault(data) {
       if (data.type === 'nf-text') {
         data.content = '<p>This is a text block.</p>'
       } else if (data.type === 'nf-page-break') {

client/components/open/forms/components/form-logic-components/ColumnCondition.vue

@@ -1,19 +1,14 @@
-
 <template>
   <div v-if="content" class="flex flex-wrap">
     <div class="w-full font-semibold text-gray-700 dark:text-gray-300 mb-2">
       {{ property.name }}
     </div>
-    <SelectInput v-model="content.operator" class="w-full" :options="operators"
-                 :name="'operator_'+property.id" placeholder="Comparison operator"
-                 @update:model-value="operatorChanged()"
-    />
+    <SelectInput v-model="content.operator" class="w-full" :options="operators" :name="'operator_' + property.id"
+      placeholder="Comparison operator" @update:model-value="operatorChanged()" />
 
     <template v-if="needsInput">
       <component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
-                 :name="'value_'+property.id" placeholder="Filter Value"
-                 @update:model-value="emitInput()"
-      />
+        :name="'value_' + property.id" placeholder="Filter Value" @update:model-value="emitInput()" />
     </template>
   </div>
 </template>
@@ -22,12 +17,12 @@
 import OpenFilters from '../../../../../data/open_filters.json'
 
 export default {
-  components: { },
+  components: {},
   props: {
     modelValue: { required: true }
   },
 
-  data () {
+  data() {
     return {
       content: { ...this.modelValue },
       available_filters: OpenFilters,
@@ -35,6 +30,9 @@ export default {
       inputComponent: {
         text: 'TextInput',
         number: 'TextInput',
+        rating: 'TextInput',
+        scale: 'TextInput',
+        slider: 'TextInput',
         select: 'SelectInput',
         multi_select: 'SelectInput',
         date: 'DateInput',
@@ -49,7 +47,7 @@ export default {
 
   computed: {
     // Return type of input, and props for that input
-    inputComponentData () {
+    inputComponentData() {
       const componentData = {
         component: this.inputComponent[this.property.type],
         name: this.property.id,
@@ -76,7 +74,7 @@ export default {
 
       return componentData
     },
-    operators () {
+    operators() {
       return Object.keys(this.available_filters[this.property.type].comparators).map(key => {
         return {
           value: key,
@@ -84,7 +82,7 @@ export default {
         }
       })
     },
-    needsInput () {
+    needsInput() {
       const operator = this.selectedOperator()
       if (!operator) {
         return false
@@ -114,8 +112,8 @@ export default {
   },
 
   methods: {
-    castContent (content) {
-      if (this.property.type === 'number' && content.value) {
+    castContent(content) {
+      if (['number', 'rating', 'scale', 'slider'].includes(this.property.type) && content.value) {
         content.value = Number(content.value)
       }
 
@@ -126,7 +124,7 @@ export default {
 
       return content
     },
-    operatorChanged () {
+    operatorChanged() {
       if (!this.content.operator) {
         return
       }
@@ -143,13 +141,13 @@ export default {
       }
       this.emitInput()
     },
-    selectedOperator () {
+    selectedOperator() {
       if (!this.content.operator) {
         return null
       }
       return this.available_filters[this.property.type].comparators[this.content.operator]
     },
-    optionFilterNames (key, propertyType) {
+    optionFilterNames(key, propertyType) {
       if (propertyType === 'checkbox') {
         return {
           equals: 'Is checked',
@@ -160,7 +158,7 @@ export default {
         return item.charAt(0).toUpperCase() + item.substring(1)
       }).join(' ')
     },
-    emitInput () {
+    emitInput() {
       this.$emit('update:modelValue', this.castContent(this.content))
     },
     refreshContent() {