From e4a3b0d82af74a936b1f24c08850d52cc36a70e0 Mon Sep 17 00:00:00 2001
From: "R.Lakshmi Prasoon Kumar" <99813258+20481A05K0@users.noreply.github.com>
Date: Sun, 17 Mar 2024 21:16:06 +0530
Subject: [PATCH] Update DefaultBuilder.vue

---
 src/components/DefaultBuilder.vue | 166 +++++++++++++-----------------
 1 file changed, 69 insertions(+), 97 deletions(-)

diff --git a/src/components/DefaultBuilder.vue b/src/components/DefaultBuilder.vue
index 6ab9f58..411a1cd 100644
--- a/src/components/DefaultBuilder.vue
+++ b/src/components/DefaultBuilder.vue
@@ -1,105 +1,77 @@
 <template>
-<div class="vrb-container">
-  <div>
-  <select v-if="filter.rules.length > 1" class="vrb-select" :value="filter.all" data-test="allSelector" @change="changeGroupType(filter.id, JSON.parse($event.target.value))">
-    <option :value="true">All of these rules are true</option>
-    <option :value="false">Any of these rules are true</option>
-  </select>
-  </div>
-  <div v-for="(rule, i) of filter.rules" :key="i" class="vrb-row">
-    <Builder
-      v-if="typeof rule.all !== 'undefined'"
-      :fields="fields"
-      :filter="rule"
-      :parent="filter"
-      class="vrb-nested"
-    />
-    <div v-else class="vrb-row">
-      <button class="vrb-btn vrb-btn__remove" v-if="filter.rules.length > 1 || filter.id !== 'root'" data-test="removeRule" @click="removeRule(filter.id, rule.id)">x</button>
-      <select :value="rule.field" @change="setField(rule.id, getField(value($event)))" data-test="fieldSelector" class="vrb-select">
-        <option :value="null">Field</option>
-        <option v-for="(field, j) of fields" :key="j" :value="field.name">
-          {{field.label}}
-        </option>
-      </select>
-      <select :value="rule.operation" v-if="rule.field && operationsForField(rule.field)" data-test="operationSelector" @change="setOperation(rule.id, value($event))" class="vrb-select">
-        <option :value="null">Operation</option>
-        <option v-for="({label, value}) of operationsForField(rule.field)" :value="value" :key="value">
-          {{label}}
-        </option>
+  <div class="vrb-container">
+    <div>
+      <select v-if="filter.rules.length > 1" class="vrb-select" :value="filter.all" data-test="allSelector" @change="changeGroupType(filter.id, JSON.parse($event.target.value))">
+        <option :value="true">All of these rules are true</option>
+        <option :value="false">Any of these rules are true</option>
       </select>
-      <template v-if="rule.operation && !unary(rule.field, rule.operation)">
-      <component
-        data-test="valueSetter"
-        v-if="componentForRule(rule)"
-        :is="componentForRule(rule)"
-        class="vrb-custom"
-        :value="rule.value"
-        :rule="rule"
-        @change="setValue(rule.id, $event)"></component>
-        <input 
-          data-test="valueSetter" 
-          class="vrb-input" 
-          v-else
-          :value="rule.value"
-          :rule="rule"
-          @change="setValue(rule.id, $event.target.value)"
-        />
+    </div>
+    <div v-for="(rule, i) in filter.rules" :key="i" class="vrb-row">
+      <Builder
+        v-if="typeof rule.all !== 'undefined'"
+        :fields="fields"
+        :filter="rule"
+        :parent="filter"
+        class="vrb-nested"
+      />
+      <div v-else class="vrb-row">
+        <button class="vrb-btn vrb-btn__remove" v-if="filter.rules.length > 1 || filter.id !== 'root'" data-test="removeRule" @click="removeRule(filter.id, rule.id)">x</button>
+        <select :value="rule.field" @change="setField(rule.id, getField(value($event)))" data-test="fieldSelector" class="vrb-select">
+          <option :value="null">Field</option>
+          <option v-for="(field, j) of fields" :key="j" :value="field.name">
+            {{ field.label }}
+          </option>
+        </select>
+        <select :value="rule.operation" v-if="rule.field && operationsForField(rule.field)" data-test="operationSelector" @change="setOperation(rule.id, value($event))" class="vrb-select">
+          <option :value="null">Operation</option>
+          <option v-for="({ label, value }) of operationsForField(rule.field)" :value="value" :key="value">
+            {{ label }}
+          </option>
+        </select>
+        <template v-if="rule.operation && !unary(rule.field, rule.operation)">
+          <component
+            data-test="valueSetter"
+            v-if="componentForRule(rule)"
+            :is="componentForRule(rule)"
+            class="vrb-custom"
+            :value="rule.value"
+            :rule="rule"
+            @change="setValue(rule.id, $event)"
+          ></component>
+          <input
+            data-test="valueSetter"
+            class="vrb-input"
+            v-else
+            :value="rule.value"
+            :rule="rule"
+            @change="setValue(rule.id, $event.target.value)"
+          />
         </template>
-      <div v-if="rule.field && isFilterable(rule.field)" data-test="fieldFilter" class="vrb-row">
-        <span v-if="rule.filter.rules.length === 0" @click="addRule(rule.filter.id)" class="vrb-filter-further">
-          + Filter Further
-        </span>
-        <Builder class="vrb-nested"
-          v-else
-          :fields="getField(rule.field).fields"
-          :filter="rule.filter"
-          :parent="rule"
-        />
+        <div v-if="rule.field && isFilterable(rule.field)" data-test="fieldFilter" class="vrb-row">
+          <span v-if="rule.filter.rules.length === 0" @click="addRule(rule.filter.id)" class="vrb-filter-further">
+            + Filter Further
+          </span>
+          <Builder class="vrb-nested"
+            v-else
+            :fields="getField(rule.field).fields"
+            :filter="rule.filter"
+            :parent="rule"
+          />
+        </div>
       </div>
     </div>
+    <button class="vrb-btn" data-test="addRule" @click="addRule(filter.id)">Add Rule</button>
+    <button class="vrb-btn" data-test="addGroup" @click="addGroup(filter.id)">Add Group</button>
+    <button class="vrb-btn vrb-btn__remove-group" v-if="filter.id !== 'root' && !subfilter" @click="removeRule(filter.id)" data-test="removeGroup">Remove Group</button>
   </div>
-  <button class="vrb-btn" data-test="addRule" @click="addRule(filter.id)">Add Rule</button>
-  <button class="vrb-btn" data-test="addGroup" @click="addGroup(filter.id)">Add Group</button>
-  <button class="vrb-btn vrb-btn__remove-group" v-if="filter.id !== 'root' && !subfilter" @click="removeRule(filter.id)" data-test="removeGroup">Remove Group</button>
-</div>
 </template>
-<script>
-const DefaultBuilder = {
-  name: "DefaultBuilder",
-  props: [
-    "filter",
-    "fields",
-    "subfilter",
-    "componentForRule",
-    "operationsForField",
-    "getField"
-  ],
-  inject: [
-    "addRule",
-    "removeRule",
-    "addGroup",
-    "changeGroupType",
-    "setField",
-    "setOperation",
-    "setValue"
-  ],
-  created() {
-    const Builder = require("./Builder");
-    this.$options.components.Builder = Builder.default || Builder;
-  },
-  methods: {
-    unary (field, operation) {
-      return this.operationsForField(field).find(x => x.value === operation).unary
-    },
-    value(e) {
-      return e.target.value;
-    },
-    isFilterable(field) {
-      return this.getField(field).filterable;
-    }
-  }
-};
 
-export default DefaultBuilder;
-</script>
+<script setup>
+import { defineComponent, inject, ref } from 'vue';
+
+const Builder = ref(null);
+
+export default defineComponent({
+  props: {
+    filter: Object,
+    fields: Array,