Fix logic bugs

app/Service/Forms/FormLogicConditionChecker.php

@@ -83,6 +83,10 @@ class FormLogicConditionChecker
     private function checkListContains ($condition, $fieldValue): bool {
         if (is_null($fieldValue)) return false;
 
+        if (!is_array($fieldValue)) {
+            return $this->checkEquals($condition, $fieldValue);
+        }
+
         if (is_array($condition['value'])) {
             return count(array_intersect($condition['value'], $fieldValue)) === count($condition['value']);
         } else {

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

@@ -1,6 +1,6 @@
 
 <template>
-  <div v-if="isMounted" class="flex flex-wrap">
+  <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>
@@ -9,7 +9,7 @@
                  @update:model-value="operatorChanged()"
     />
 
-    <template v-if="hasInput">
+    <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()"
@@ -24,14 +24,13 @@ import OpenFilters from '../../../../../data/open_filters.json'
 export default {
   components: { },
   props: {
-    value: { required: true }
+    modelValue: { required: true }
   },
 
   data () {
     return {
-      content: { ...this.value },
+      content: { ...this.modelValue },
       available_filters: OpenFilters,
-      isMounted: false,
       hasInput: false,
       inputComponent: {
         text: 'TextInput',
@@ -84,22 +83,45 @@ export default {
           name: this.optionFilterNames(key, this.property.type)
         }
       })
-    }
+    },
+    needsInput () {
+      const operator = this.selectedOperator()
+      if (!operator) {
+        return false
+      }
+      const operatorFormat = operator.format
+      if (!operatorFormat) return true
+
+      if (operator.expected_type === 'boolean' && operatorFormat.type === 'enum' && operatorFormat.values.length === 1) {
+        return false
+      } else if (operator.expected_type === 'object' && operatorFormat.type === 'empty' && operatorFormat.values === '{}') {
+        return false
+      }
+
+      return true
+    },
   },
 
-  mounted () {
-    if (!this.content.operator) {
-      this.content.operator = this.operators[0].value
-      this.operatorChanged()
-    } else {
-      this.hasInput = this.needsInput()
+  watch: {
+    modelValue() {
+      if (this.modelValue) {
+        console.log(this.modelValue)
+        this.content = {
+          operator: this.operators[0].value,
+          ...this.modelValue,
+          property_meta: {
+            id: this.property.id,
+            type: this.property.type
+          }
+        }
+      }
+    },
+    'content.operator': function (val) {
+      if (val) {
+        console.log(val,'operatorChanged')
+        this.operatorChanged()
+      }
     }
-
-    this.content.property_meta = {
-      id: this.property.id,
-      type: this.property.type
-    }
-    this.isMounted = true
   },
 
   methods: {
@@ -122,7 +144,6 @@ export default {
 
       const operator = this.selectedOperator()
       const operatorFormat = operator.format
-      this.hasInput = this.needsInput()
 
       if (operator.expected_type === 'boolean' && operatorFormat.type === 'enum' && operatorFormat.values.length === 1) {
         this.content.value = operator.format.values[0]
@@ -133,22 +154,6 @@ export default {
       }
       this.emitInput()
     },
-    needsInput () {
-      const operator = this.selectedOperator()
-      if (!operator) {
-        return false
-      }
-      const operatorFormat = operator.format
-      if (!operatorFormat) return true
-
-      if (operator.expected_type === 'boolean' && operatorFormat.type === 'enum' && operatorFormat.values.length === 1) {
-        return false
-      } else if (operator.expected_type === 'object' && operatorFormat.type === 'empty' && operatorFormat.values === '{}') {
-        return false
-      }
-
-      return true
-    },
     selectedOperator () {
       if (!this.content.operator) {
         return null

client/components/pages/forms/show/ExtraMenu.vue

@@ -5,7 +5,7 @@
     </div>
     <dropdown v-else class="inline">
       <template #trigger="{toggle}">
-        <v-button color="white" class="mr-2" @click="toggle">
+        <v-button color="white" @click="toggle">
           <svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none"
                xmlns="http://www.w3.org/2000/svg"
           >

client/pages/forms/[slug]/show.vue

@@ -20,7 +20,7 @@
                 {{ form.title }}
               </h2>
               <div class="flex">
-                <extra-menu :form="form"/>
+                <extra-menu class="mr-2" :form="form"/>
 
                 <v-button v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" target="_blank"
                           :href="form.share_url" color="white"

client/pages/home.vue

@@ -21,12 +21,12 @@
       </div>
     </div>
     <div class="flex bg-white">
-      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl">
         <div class="mt-8 pb-0">
-          <text-input v-if="forms.length > 0" class="mb-6" v-model="search" name="search" label="Search a form"
+          <text-input v-if="forms.length > 0" class="mb-6 px-4" v-model="search" name="search" label="Search a form"
                       placeholder="Name of form to search"
           />
-          <div v-if="allTags.length > 0" class="mb-4">
+          <div v-if="allTags.length > 0" class="mb-4 px-6">
             <div v-for="tag in allTags" :key="tag"
                  :class="[
                    'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset cursor-pointer mr-2',