Add regex matching filters to open_filters.json (#722)

* Add regex matching filters to open_filters.json - Introduce new regex-based filters: matches_regex and does_not_match_regex - Add support for string-based regex matching in both API and client filter configurations - Update filter schemas to include new regex filter options with expected string type * Add barcode comparators and regex filters to open_filters.json and validatePropertiesLogic.js - Introduce new barcode comparators: equals, does_not_equal, contains, does_not_contain, starts_with, ends_with, is_empty, is_not_empty, matches_regex, does_not_match_regex, content_length_equals, content_length_does_not_equal, content_length_greater_than, content_length_greater_than_or_equal_to, content_length_less_than, content_length_less_than_or_equal_to. - Add regex matching filters: matches_regex and does_not_match_regex to open_filters.json. - Remove console log statements from validatePropertiesLogic.js and FormPropertyLogicRule.js for cleaner code. This update enhances the filtering capabilities and improves the validation logic by removing unnecessary debug outputs. * Refactor Vue Components for Improved Readability and Consistency - Update CameraUpload.vue to enhance formatting and maintain consistent indentation for better readability. - Modify OpenFormField.vue to improve tooltip component formatting, ensuring consistent styling across the application. - Refactor FormSecurityAccess.vue to enhance the layout of the conditional rendering for captcha providers. - Adjust RegisterForm.vue to improve the formatting of the terms and conditions section, ensuring consistent indentation and readability. These changes aim to enhance code maintainability and visual consistency across the components, contributing to a cleaner codebase. --------- Co-authored-by: Julien Nahum <julien@nahum.net>
2025-03-15 11:25:42 +05:30 · 2025-03-15 11:25:42 +05:30 · 37a10cbdfa
parent e100b32929
commit 37a10cbdfa
9 changed files with 287 additions and 34 deletions
--- a/api/resources/data/open_filters.json
+++ b/api/resources/data/open_filters.json
@ -54,6 +54,18 @@
      },
      "content_length_less_than_or_equal_to": {
        "expected_type": "number"
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
      }
    }
  },
@ -112,6 +124,18 @@
      },
      "content_length_less_than_or_equal_to": {
        "expected_type": "number"
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
      }
    }
  },
@ -170,6 +194,18 @@
      },
      "content_length_less_than_or_equal_to": {
        "expected_type": "number"
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
      }
    }
  },
@ -621,6 +657,18 @@
          ]
        }
      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
      "past_week": {
        "expected_type": "object",
        "format": {
@ -686,5 +734,75 @@
        }
      }
    }
+  },
+  "barcode": {
+    "comparators": {
+      "equals": {
+        "expected_type": "string"
+      },
+      "does_not_equal": {
+        "expected_type": "string"
+      },
+      "contains": {
+        "expected_type": "string"
+      },
+      "does_not_contain": {
+        "expected_type": "string"
+      },
+      "starts_with": {
+        "expected_type": "string"
+      },
+      "ends_with": {
+        "expected_type": "string"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
  }
 }
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@ -1,5 +1,8 @@
 <template>
-  <div class="relative overflow-hidden" :class="[theme.fileInput.borderRadius]">
+  <div
+    class="relative overflow-hidden"
+    :class="[theme.fileInput.borderRadius]"
+  >
    <video
      id="webcam"
      autoplay
@ -29,19 +32,22 @@
      class="absolute inset-0 pointer-events-none"
    >
      <!-- Semi-transparent overlay -->
-      <div class="absolute inset-0 bg-black/30"></div>
+      <div class="absolute inset-0 bg-black/30" />
      
      <!-- Scanning area (transparent window) -->
-      <div class="absolute inset-0 flex items-center justify-center" style="padding-bottom: 60px;">
+      <div
+        class="absolute inset-0 flex items-center justify-center"
+        style="padding-bottom: 60px;"
+      >
        <div class="relative w-4/5 h-3/5">
          <!-- Transparent window -->
-          <div class="absolute inset-0 bg-transparent border-0"></div>
+          <div class="absolute inset-0 bg-transparent border-0" />
          
          <!-- Corner indicators -->
-          <div class="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-white"></div>
-          <div class="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-white"></div>
-          <div class="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-white"></div>
-          <div class="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-white"></div>
+          <div class="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-white" />
+          <div class="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-white" />
+          <div class="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-white" />
+          <div class="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-white" />
        </div>
      </div>
    </div>
@ -257,7 +263,7 @@ export default {
        }

        // Create constraints based on device capabilities
-        let constraints = {
+        const constraints = {
          audio: false,
          video: {
            width: { ideal: 1280 },
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@ -124,7 +124,6 @@
 </template>

 <script>
-import clonedeep from 'clone-deep'
 import draggable from 'vuedraggable'
 import OpenFormButton from './OpenFormButton.vue'
 import CaptchaInput from '~/components/forms/components/CaptchaInput.vue'
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@ -29,7 +29,11 @@
            role="button"
            @click.prevent="openAddFieldSidebar"
          >
-            <UTooltip text="Add new field" :popper="{ placement: 'right' }" class="z-[100]">
+            <UTooltip
+              text="Add new field"
+              :popper="{ placement: 'right' }"
+              class="z-[100]"
+            >
              <Icon
                name="i-heroicons-plus-circle-20-solid"
                class="w-5 h-5 !text-gray-500 dark:!text-gray-500 hover:!text-blue-500 dark:hover:!text-blue-500"
@ -41,7 +45,11 @@
            role="button"
            @click.prevent="editFieldOptions"
          >
-            <UTooltip text="Edit field settings" :popper="{ placement: 'right' }" class="z-[100]">
+            <UTooltip
+              text="Edit field settings"
+              :popper="{ placement: 'right' }"
+              class="z-[100]"
+            >
              <Icon
                name="heroicons:cog-8-tooth-20-solid"
                class="w-5 h-5 !text-gray-500 dark:!text-gray-500 hover:!text-blue-500 dark:hover:!text-blue-500"
@ -53,7 +61,11 @@
            role="button"
            @click.prevent="removeField"
          >
-            <UTooltip text="Delete field" :popper="{ placement: 'right' }" class="z-[100]">
+            <UTooltip
+              text="Delete field"
+              :popper="{ placement: 'right' }"
+              class="z-[100]"
+            >
              <Icon
                name="heroicons:trash-20-solid"
                class="w-5 h-5 !text-red-500 dark:!text-red-500 hover:!text-red-600 dark:hover:!text-red-600"
--- a/client/components/open/forms/components/form-components/FormSecurityAccess.vue
+++ b/client/components/open/forms/components/form-components/FormSecurityAccess.vue
@ -72,7 +72,10 @@
    <p class="text-gray-500 text-sm">
      Protect your form, and your sensitive files.
    </p>
-    <div v-if="hasCaptchaProviders" class="flex items-start gap-6 flex-wrap">
+    <div
+      v-if="hasCaptchaProviders"
+      class="flex items-start gap-6 flex-wrap"
+    >
      <ToggleSwitchInput
        name="use_captcha"
        :form="form"
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/client/components/pages/auth/components/RegisterForm.vue
@ -74,23 +74,23 @@
      >
        <template #label>
          <label for="agree_terms">
-          I agree with the
-          <NuxtLink
-            :to="{ name: 'terms-conditions' }"
-            target="_blank"
-            class="underline"
-          >
-            Terms and conditions
-          </NuxtLink>
-          and
-          <NuxtLink
-            :to="{ name: 'privacy-policy' }"
-            target="_blank"
-            class="underline"
-          >
-            Privacy policy
-          </NuxtLink>
-          of the website and I accept them.
+            I agree with the
+            <NuxtLink
+              :to="{ name: 'terms-conditions' }"
+              target="_blank"
+              class="underline"
+            >
+              Terms and conditions
+            </NuxtLink>
+            and
+            <NuxtLink
+              :to="{ name: 'privacy-policy' }"
+              target="_blank"
+              class="underline"
+            >
+              Privacy policy
+            </NuxtLink>
+            of the website and I accept them.
          </label>
        </template>
      </checkbox-input>
--- a/client/composables/forms/validatePropertiesLogic.js
+++ b/client/composables/forms/validatePropertiesLogic.js
@ -3,8 +3,6 @@ import FormPropertyLogicRule from "~/lib/forms/FormPropertyLogicRule.js"
 export const validatePropertiesLogic = (properties) => {
  properties.forEach((field) => {
    const isValid = new FormPropertyLogicRule(field).isValid()
-    console.log('field', field)
-    console.log('isValid', isValid, field.name)
    if (!isValid) {
      field.logic = {
        conditions: null,
--- a/client/data/open_filters.json
+++ b/client/data/open_filters.json
@ -54,6 +54,18 @@
      },
      "content_length_less_than_or_equal_to": {
        "expected_type": "number"
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
      }
    }
  },
@ -112,6 +124,18 @@
      },
      "content_length_less_than_or_equal_to": {
        "expected_type": "number"
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
      }
    }
  },
@ -170,6 +194,18 @@
      },
      "content_length_less_than_or_equal_to": {
        "expected_type": "number"
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
      }
    }
  },
@ -621,6 +657,18 @@
          ]
        }
      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
      "past_week": {
        "expected_type": "object",
        "format": {
@ -686,5 +734,75 @@
        }
      }
    }
+  },
+  "barcode": {
+    "comparators": {
+      "equals": {
+        "expected_type": "string"
+      },
+      "does_not_equal": {
+        "expected_type": "string"
+      },
+      "contains": {
+        "expected_type": "string"
+      },
+      "does_not_contain": {
+        "expected_type": "string"
+      },
+      "starts_with": {
+        "expected_type": "string"
+      },
+      "ends_with": {
+        "expected_type": "string"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "matches_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "does_not_match_regex": {
+        "expected_type": "string",
+        "format": {
+          "type": "regex"
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
  }
 }
--- a/client/lib/forms/FormPropertyLogicRule.js
+++ b/client/lib/forms/FormPropertyLogicRule.js
@ -22,7 +22,6 @@ class FormPropertyLogicRule {

  isValid() {
    if (this.logic && this.logic["conditions"]) {
-      console.log('logic', this.logic)
      this.checkConditions(this.logic["conditions"])
      this.checkActions(
        this.logic && this.logic["actions"] ? this.logic["actions"] : null,