@processmaker/screen-builder 2.67.0 → 2.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.67.0",
+  "version": "2.69.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/inspector/collection-select-list.vue

@@ -32,17 +32,17 @@
     </div>
 
     <div class="mt-3" v-if="fields.length > 1">
-      <label for="pmql">{{ $t("PMQL") }}</label>
-      <mustache-helper />
-      <b-form-textarea
-        id="pmql"
-        rows="4"
-        v-model="pmql"
-        data-cy="inspector-collection-pmql"
-      />
-      <small class="form-text text-muted">{{
-        $t("Add a PMQL query to filter the result list. Use `data` as prefix")
-      }}</small>
+      <pmql-input
+          :search-type="'collections_w_mustaches'"
+          class="mb-1"
+          data-cy="inspector-collection-pmql"
+          :input-label="'PMQL'"
+          v-model="pmql"
+          :condensed="true"
+          :ai-enabled="true"
+          :placeholder="$t('PMQL')">
+        </pmql-input>
+        <small class="form-text text-muted">{{ $t('Advanced data search') }}</small>
     </div>
 
     <div class="mt-3" v-if="fields.length > 1">
@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import { debounce } from "lodash";
 import _ from "lodash";
 import MustacheHelper from "./mustache-helper";
 import ScreenVariableSelector from '../screen-variable-selector.vue';
@@ -109,6 +110,11 @@ export default {
       deep: true
     }
   },
+  created() {
+    this.onDebouncedPmqlChange = debounce((pmql) => {
+      this.onPmqlChange(pmql);
+    }, 1000);
+  },
   computed: {
     options() {
       return Object.fromEntries(CONFIG_FIELDS.map(field => [field, this[field]]));
@@ -151,6 +157,12 @@ export default {
             })
           ];
         });
+    },
+    onNLQConversion(pmql) {
+      this.pmql = pmql;
+    },
+    onPmqlChange(pmql) {
+      this.pmql = pmql;
     }
   },
   mounted() {

package/src/components/inspector/color-select.vue

@@ -4,65 +4,75 @@
       <label>{{ label }}</label>
       <b-button-toolbar>
         <b-button-group size="sm">
-          <b-button size="sm"
-            variant="outline-light"
+          <b-button
             v-for="option in options"
             :key="option.value"
+            size="sm"
+            variant="outline-light"
             class="btn btn-sm mr-1 pr-1 pl-1 pt-0 pb-0 btn-outline-none"
             :class="['bg-' + parsedColor(option.value)]"
             :title="option.content"
           >
-            <i class="fas fa-check"
-              :class="[option.value === value ? 'text-light' : 'text-' + parsedColor(option.value)]"
+            <i
+              class="fas fa-check"
+              :class="[
+                option.value === value
+                  ? 'text-light'
+                  : 'text-' + parsedColor(option.value)
+              ]"
               @click="selectColor(option.value)"
             />
           </b-button>
         </b-button-group>
       </b-button-toolbar>
-      <small @click="checkColor">
-        <i class="fas fa-ban"/>
-        {{ $t('Clear Color Selection') }}
+      <small @click="checkColor()">
+        <i class="fas fa-ban" />
+        {{ $t("Clear Color Selection") }}
       </small>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
-  props: ['label', 'value', 'helper', 'options'],
-  components: {
-  },
+  components: {},
+  props: ["label", "value", "helper", "options"],
   data() {
     return {
-      newColor: '',
+      newColor: ""
     };
   },
   computed: {
     hasColor() {
-      return !!this.value;
-    },
+      return Boolean(this.value);
+    }
   },
   methods: {
+    emitChanges(value) {
+      this.$emit("input", value);
+      this.$emit("update-state");
+    },
     checkColor() {
-      this.hasColor ? this.$emit('input', '') : null;
+      if (this.hasColor) {
+        this.emitChanges("");
+      }
     },
     selectColor(color) {
-      this.$emit('input', color);
+      this.emitChanges(color);
     },
     parsedColor(color) {
-      return color.split('-')[1];
-    },
-  },
+      return color.split("-")[1];
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-  .image-preview {
-    border: 1px solid #ced4da;
-    border-radius: 4px;
-    height: 4em;
-    text-align: center;
-    overflow: hidden;
-  }
+.image-preview {
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  height: 4em;
+  text-align: center;
+  overflow: hidden;
+}
 </style>

package/src/components/inspector/options-list.vue

@@ -230,12 +230,10 @@
         :search-type="'collections'"
         class="mb-1"
         :input-label="'PMQL'"
-        :value="pmqlQuery"
+        v-model="pmqlQuery"
         :condensed="true"
         :ai-enabled="true"
-        :placeholder="$t('PMQL')"
-        @submit="onNLQConversion"
-        @pmqlchange="onDebouncedPmqlChange">
+        :placeholder="$t('PMQL')">
       </pmql-input>
       <small class="form-text text-muted">{{ $t('Advanced data search') }}</small>
     </div>