From efd31133cc44393807d1c97c9ef78f632eda453b Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Wed, 19 Feb 2025 12:25:13 +0100
Subject: [PATCH] Enhance default field values and block type configuration

- Refactor field options to use default values from blocks_types.json
- Add default values for various form input types in blocks_types.json
- Improve default field initialization logic in FieldOptions and working_form store
- Add camera switching functionality for mobile devices in CameraUpload component
---
 .../forms/components/CameraUpload.vue         |  73 ++++++++++--
 .../forms/fields/components/FieldOptions.vue  |  61 ++++------
 client/data/blocks_types.json                 | 111 ++++++++++++++----
 client/stores/working_form.js                 |  23 ++--
 4 files changed, 178 insertions(+), 90 deletions(-)

diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
index 2d0b911d..7e981f06 100644
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div class="relative border">
     <video
@@ -44,6 +43,16 @@
             class="w-8 h-8"
           />
         </span>
+        <span
+          v-if="isMobileDevice"
+          class="text-white cursor-pointer"
+          @click="switchCamera"
+        >
+          <Icon
+            name="heroicons:arrow-path"
+            class="w-8 h-8"
+          />
+        </span>
       </div>
     </div>
     <div
@@ -134,7 +143,9 @@ export default {
     isCapturing: false,
     capturedImage: null,
     cameraPermissionStatus: "loading",
-    quaggaInitialized: false
+    quaggaInitialized: false,
+    currentFacingMode: 'user',
+    mediaStream: null
   }),
   computed: {
     videoDisplay() {
@@ -143,6 +154,9 @@ export default {
     canvasDisplay() {
       return !this.isCapturing && this.capturedImage ? "" : "hidden"
     },
+    isMobileDevice() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    }
   },
   mounted() {
     const webcamElement = document.getElementById("webcam")
@@ -152,39 +166,74 @@ export default {
   },
 
   methods: {
+    async cleanupCurrentStream() {
+      if (this.quaggaInitialized) {
+        Quagga.stop()
+        this.quaggaInitialized = false
+      }
+
+      if (this.mediaStream) {
+        this.mediaStream.getTracks().forEach(track => track.stop())
+        this.mediaStream = null
+      }
+
+      if (this.webcam) {
+        this.webcam.stop()
+      }
+
+      const webcamElement = document.getElementById("webcam")
+      if (webcamElement && webcamElement.srcObject) {
+        webcamElement.srcObject = null
+      }
+    },
+
+    async switchCamera() {
+      try {
+        // Stop current camera
+        if (this.quaggaInitialized) {
+          Quagga.stop()
+          this.quaggaInitialized = false
+        }
+        this.webcam.stop()
+
+        // Toggle facing mode considering barcode mode
+        this.currentFacingMode = this.isBarcodeMode ? 'environment' : 
+          (this.currentFacingMode === 'user' ? 'environment' : 'user')
+
+        // Restart camera
+        await this.openCameraUpload()
+      } catch (error) {
+        console.error('Error switching camera:', error)
+        this.cameraPermissionStatus = "unknown"
+      }
+    },
+
     async openCameraUpload() {
       this.isCapturing = true
       this.capturedImage = null
 
       try {
-        // Get video element
         const webcamElement = document.getElementById("webcam")
         const canvasElement = document.getElementById("canvas")
 
-        // iOS specific constraints
         const constraints = {
           audio: false,
           video: {
-            facingMode: this.isBarcodeMode ? 'environment' : 'user',
+            facingMode: this.isBarcodeMode ? 'environment' : this.currentFacingMode,
             width: { ideal: 1280 },
             height: { ideal: 720 }
           }
         }
 
-        // Try getting the stream directly first
         const stream = await navigator.mediaDevices.getUserMedia(constraints)
-        
-        // Attach stream to video element
         webcamElement.srcObject = stream
         
-        // Create webcam instance with the stream
         this.webcam = new Webcam(
           webcamElement,
-          this.isBarcodeMode ? 'environment' : 'user',
+          this.isBarcodeMode ? 'environment' : this.currentFacingMode,
           canvasElement
         )
         
-        // Wait for video to be ready
         await new Promise((resolve) => {
           webcamElement.onloadedmetadata = () => {
             webcamElement.play()
@@ -266,10 +315,8 @@ export default {
         byteArrays.push(byteArray)
       }
 
-      // Create Blob from binary data
       const blob = new Blob(byteArrays, { type: "image/png" })
       const filename = Date.now()
-      // Create a File object from the Blob
       const file = new File([blob], `${filename}.png`, { type: "image/png" })
       this.$emit("uploadImage", file)
     },
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 0cd281d8..836f8083 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -609,6 +609,7 @@ import HiddenRequiredDisabled from './HiddenRequiredDisabled.vue'
 import EditorSectionHeader from '~/components/open/forms/components/form-components/EditorSectionHeader.vue'
 import { format } from 'date-fns'
 import { default as _has } from 'lodash/has'
+import blocksTypes from '~/data/blocks_types.json'
 
 export default {
   name: 'FieldOptions',
@@ -821,57 +822,43 @@ export default {
     },
     setDefaultFieldValues() {
       const defaultFieldValues = {
-        slider: {
-          slider_min_value: 0,
-          slider_max_value: 100,
-          slider_step_value: 1
-        },
-        scale: {
-          scale_min_value: 1,
-          scale_max_value: 5,
-          scale_step_value: 1
-        },
-        rating: {
-          rating_max_value: 5
-        },
         files: {
           max_file_size: Math.min((this.field.max_file_size ?? this.mbLimit), this.mbLimit)
         },
-        text: {
-          multi_lines: false,
-          max_char_limit: 2000
-        },
-        rich_text: {
-          max_char_limit: 2000
-        },
-        email: {
-          max_char_limit: 2000
-        },
-        url: {
-          max_char_limit: 2000
-        },
         date: {
           date_format: this.dateFormatOptions[0].value,
           time_format: this.timeFormatOptions[0].value
-        },
-        matrix: {
-          rows:['Row 1'],
-          columns: [1 ,2 ,3],
-          selection_data:{
-            'Row 1': null
-          }
-        },
-        barcode: {
-          decoders: ['ean_reader', 'upc_reader']
         }
       }
+
+      // Apply type-specific defaults from blocks_types.json if available
+      if (this.field.type in blocksTypes && blocksTypes[this.field.type]?.default_values) {
+        Object.assign(this.field, blocksTypes[this.field.type].default_values)
+      }
+
+      // Apply additional defaults from defaultFieldValues if needed
       if (this.field.type in defaultFieldValues) {
         Object.keys(defaultFieldValues[this.field.type]).forEach(key => {
-          if (!_has(this.field,key)) {
+          if (!_has(this.field, key)) {
             this.field[key] = defaultFieldValues[this.field.type][key]
           }
         })
       }
+
+      // Ensure critical defaults for specific types
+      if (this.field.type === "rating" && !this.field.rating_max_value) {
+        this.field.rating_max_value = 5
+      } else if (this.field.type === "scale" && (!this.field.scale_min_value || !this.field.scale_max_value || !this.field.scale_step_value)) {
+        this.field.scale_min_value = 1
+        this.field.scale_max_value = 5
+        this.field.scale_step_value = 1
+      } else if (this.field.type === "slider" && (!this.field.slider_min_value || !this.field.slider_max_value || !this.field.slider_step_value)) {
+        this.field.slider_min_value = 0
+        this.field.slider_max_value = 50
+        this.field.slider_step_value = 1
+      } else if (["select", "multi_select"].includes(this.field.type) && !this.field[this.field.type]?.options) {
+        this.field[this.field.type] = { options: [] }
+      }
     },
     updateMatrixField(newField) {
       this.field = newField
diff --git a/client/data/blocks_types.json b/client/data/blocks_types.json
index 0cca9180..04bd32ba 100644
--- a/client/data/blocks_types.json
+++ b/client/data/blocks_types.json
@@ -6,7 +6,11 @@
     "default_block_name": "Your name",
     "bg_class": "bg-blue-100",
     "text_class": "text-blue-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "multi_lines": false,
+      "max_char_limit": 2000
+    }
   },
   "rich_text": {
     "name": "rich_text",
@@ -15,7 +19,10 @@
     "default_block_name": "Description",
     "bg_class": "bg-blue-100",
     "text_class": "text-blue-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "max_char_limit": 2000
+    }
   },
   "date": {
     "name": "date",
@@ -24,7 +31,8 @@
     "default_block_name": "Date",
     "bg_class": "bg-green-100",
     "text_class": "text-green-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {}
   },
   "url": {
     "name": "url",
@@ -33,7 +41,10 @@
     "default_block_name": "Link",
     "bg_class": "bg-blue-100",
     "text_class": "text-blue-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "max_char_limit": 2000
+    }
   },
   "phone_number": {
     "name": "phone_number",
@@ -42,7 +53,8 @@
     "default_block_name": "Phone Number",
     "bg_class": "bg-blue-100",
     "text_class": "text-blue-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {}
   },
   "email": {
     "name": "email",
@@ -51,7 +63,10 @@
     "default_block_name": "Email",
     "bg_class": "bg-blue-100",
     "text_class": "text-blue-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "max_char_limit": 2000
+    }
   },
   "checkbox": {
     "name": "checkbox",
@@ -60,7 +75,8 @@
     "default_block_name": "Checkbox",
     "bg_class": "bg-red-100",
     "text_class": "text-red-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {}
   },
   "select": {
     "name": "select",
@@ -69,7 +85,15 @@
     "default_block_name": "Select",
     "bg_class": "bg-red-100",
     "text_class": "text-red-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "select": {
+        "options": [
+          { "name": "Option 1", "id": "Option 1" },
+          { "name": "Option 2", "id": "Option 2" }
+        ]
+      }
+    }
   },
   "multi_select": {
     "name": "multi_select",
@@ -78,16 +102,31 @@
     "default_block_name": "Multi Select",
     "bg_class": "bg-red-100",
     "text_class": "text-red-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "multi_select": {
+        "options": [
+          { "name": "Option 1", "id": "Option 1" },
+          { "name": "Option 2", "id": "Option 2" }
+        ]
+      }
+    }
   },
   "matrix": {
     "name": "matrix",
     "title": "Matrix Input",
     "icon": "i-heroicons-table-cells-20-solid",
     "default_block_name": "Matrix",
-     "bg_class": "bg-red-100",
+    "bg_class": "bg-red-100",
     "text_class": "text-red-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "rows": ["Row 1"],
+      "columns": [1, 2, 3],
+      "selection_data": {
+        "Row 1": null
+      }
+    }
   },
   "number": {
     "name": "number",
@@ -96,16 +135,20 @@
     "default_block_name": "Number",
     "bg_class": "bg-purple-100",
     "text_class": "text-purple-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {}
   },
   "rating": {
     "name": "rating",
     "title": "Rating Input",
     "icon": "i-heroicons-star",
     "default_block_name": "Rating",
-     "bg_class": "bg-purple-100",
+    "bg_class": "bg-purple-100",
     "text_class": "text-purple-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "rating_max_value": 5
+    }
   },
   "scale": {
     "name": "scale",
@@ -114,7 +157,12 @@
     "default_block_name": "Scale",
     "bg_class": "bg-purple-100",
     "text_class": "text-purple-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "scale_min_value": 1,
+      "scale_max_value": 5,
+      "scale_step_value": 1
+    }
   },
   "slider": {
     "name": "slider",
@@ -123,7 +171,12 @@
     "default_block_name": "Slider",
     "bg_class": "bg-purple-100",
     "text_class": "text-purple-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "slider_min_value": 0,
+      "slider_max_value": 50,
+      "slider_step_value": 1
+    }
   },
   "files": {
     "name": "files",
@@ -132,7 +185,8 @@
     "default_block_name": "Files",
     "bg_class": "bg-pink-100",
     "text_class": "text-pink-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {}
   },
   "signature": {
     "name": "signature",
@@ -141,7 +195,8 @@
     "default_block_name": "Signature",
     "bg_class": "bg-pink-100",
     "text_class": "text-pink-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {}
   },
   "barcode": {
     "name": "barcode",
@@ -150,7 +205,10 @@
     "default_block_name": "Scan Barcode",
     "bg_class": "bg-pink-100",
     "text_class": "text-pink-900",
-    "is_input": true
+    "is_input": true,
+    "default_values": {
+      "decoders": ["ean_reader", "ean_8_reader"]
+    }
   },
   "nf-text": {
     "name": "nf-text",
@@ -159,7 +217,8 @@
     "default_block_name": "Text",
     "bg_class": "bg-yellow-100",
     "text_class": "text-yellow-900",
-    "is_input": false
+    "is_input": false,
+    "default_values": {}
   },
   "nf-page-break": {
     "name": "nf-page-break",
@@ -168,7 +227,8 @@
     "default_block_name": "Page Break",
     "bg_class": "bg-gray-100",
     "text_class": "text-gray-900",
-    "is_input": false
+    "is_input": false,
+    "default_values": {}
   },
   "nf-divider": {
     "name": "nf-divider",
@@ -177,7 +237,8 @@
     "default_block_name": "Divider",
     "bg_class": "bg-gray-100",
     "text_class": "text-gray-900",
-    "is_input": false
+    "is_input": false,
+    "default_values": {}
   },
   "nf-image": {
     "name": "nf-image",
@@ -186,7 +247,8 @@
     "default_block_name": "Image",
     "bg_class": "bg-yellow-100",
     "text_class": "text-yellow-900",
-    "is_input": false
+    "is_input": false,
+    "default_values": {}
   },
   "nf-code": {
     "name": "nf-code",
@@ -195,6 +257,7 @@
     "default_block_name": "Code Block",
     "bg_class": "bg-yellow-100",
     "text_class": "text-yellow-900",
-    "is_input": false
+    "is_input": false,
+    "default_values": {}
   }
 }
diff --git a/client/stores/working_form.js b/client/stores/working_form.js
index 59f811a9..143f811b 100644
--- a/client/stores/working_form.js
+++ b/client/stores/working_form.js
@@ -101,23 +101,14 @@ export const useWorkingFormStore = defineStore("working_form", {
       const newBlock = this.prefillDefault(this.blockForm.data())
       newBlock.id = generateUUID()
       newBlock.hidden = false
-      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"
+
+      // Apply default values from blocks_types.json if they exist
+      if (blocksTypes[type]?.default_values) {
+        Object.assign(newBlock, blocksTypes[type].default_values)
+      }
+
+      // Insert in right position
       if (
         (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) &&
         (index === null || index === undefined)