@processmaker/screen-builder 2.83.2 → 2.83.4

package/src/components/inspector/outbound-config.vue

@@ -1,25 +1,29 @@
 <template>
   <div>
     <div class="d-flex mb-1">
-      <label class="flex-grow-1 m-0">{{ $t('Outbound Configuration') }}</label>
+      <label class="flex-grow-1 m-0">{{ $t("Outbound Configuration") }}</label>
       <button
         type="button"
         class="btn-special-assignment-action btn btn-secondary btn-sm px-2"
         @click="addMapping"
-      >+ {{ $t('Property') }}
+      >
+        + {{ $t("Property") }}
       </button>
     </div>
     <table class="table table-striped table-sm border mb-1">
       <thead>
         <tr>
-          <th scope="col">{{ $t('Type') }}</th>
-          <th scope="col">{{ $t('Key') }}</th>
-          <th scope="col"><div class="float-left">{{ $t('Value') }}</div> <mustache-helper class="float-left ml-2"/>  </th>
+          <th scope="col">{{ $t("Type") }}</th>
+          <th scope="col">{{ $t("Key") }}</th>
+          <th scope="col">
+            <div class="float-left">{{ $t("Value") }}</div>
+            <mustache-helper class="float-left ml-2" />
+          </th>
           <th scope="col">&nbsp;</th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(row,i) in outboundConfig" :key="i">
+        <tr v-for="(row, i) in outboundConfig" :key="i">
           <td class="p-1">
             <multiselect
               v-model="row.type"
@@ -44,10 +48,10 @@
               @open="loadOptions(i)"
             >
               <template slot="noResult">
-                <slot name="noResult">{{ $t('Not found') }}</slot>
+                <slot name="noResult">{{ $t("Not found") }}</slot>
               </template>
               <template slot="noOptions">
-                <slot name="noOptions">{{ $t('Not available') }}</slot>
+                <slot name="noOptions">{{ $t("Not available") }}</slot>
               </template>
             </multiselect>
           </td>
@@ -58,10 +62,14 @@
               :placeholder="$t('New Value')"
               type="text"
               class="form-control"
-            >
+            />
           </td>
           <td class="align-middle text-right p-1">
-            <a href="javascript:void(0)" class="btn btn-sm btn-danger" @click="removeRowIndex(i)">
+            <a
+              class="btn btn-sm btn-danger"
+              href="javascript:void(0)"
+              @click="removeRowIndex(i)"
+            >
               <i class="fa fa-trash-alt" />
             </a>
           </td>
@@ -69,32 +77,61 @@
       </tbody>
     </table>
     <small class="form-text text-muted mb-3">
-      {{ $t('Properties to map from a request variable to a Data Connector property') }}
-      <br>
-      {{ $t('The value can be a string or a mustache expression.') }} {{ $t('For example') }} <span v-pre> {{ var1 }} </span> {{ $t('will use the value stored in variable var1') }}
+      {{
+        $t(
+          "Properties to map from a request variable to a Data Connector property"
+        )
+      }}
+      <br />
+      {{ $t("The value can be a string or a mustache expression.") }}
+      {{ $t("For example") }} <span v-pre> {{ var1 }} </span>
+      {{ $t("will use the value stored in variable var1") }}
     </small>
   </div>
 </template>
 
-
 <script>
+import { findIndex, get, isNil } from "lodash";
+import MustacheHelper from "./mustache-helper.vue";
 
-import MustacheHelper from './mustache-helper';
 export default {
-  components: { MustacheHelper },
+  components: {
+    MustacheHelper
+  },
   mixins: [],
   props: {
-    value: String,
+    value: String
   },
   data() {
     return {
-      field: '',
+      field: "",
       outboundConfig: [],
-      types: ['PARAM', 'HEADER', 'BODY'],
+      types: ["PARAM", "HEADER", "BODY"],
       apiProperties: [],
-      type: null,
+      type: null
     };
   },
+  watch: {
+    outboundConfig: {
+      deep: true,
+      immediate: true,
+      handler(outboundConfig) {
+        this.setConfig("outboundConfig", outboundConfig);
+      }
+    },
+    value: {
+      immediate: true,
+      handler() {
+        const { outboundConfig } = this.getConfig();
+        if (outboundConfig) {
+          this.outboundConfig.splice(0);
+          outboundConfig.forEach((element) => {
+            this.outboundConfig.push(element);
+          });
+        }
+      }
+    }
+  },
   methods: {
     getConfig() {
       try {
@@ -107,111 +144,94 @@ export default {
       const config = this.getConfig();
       if (JSON.stringify(config[name]) !== JSON.stringify(value)) {
         config[name] = value;
-        this.$emit('input', JSON.stringify(config));
+        this.$emit("input", JSON.stringify(config));
       }
     },
     removeRowIndex(index) {
       this.outboundConfig.splice(index, 1);
     },
     addMapping() {
-      this.outboundConfig.push({type: 'PARAM', key: '', value: ''});
+      this.outboundConfig.push({ type: "PARAM", key: "", value: "" });
     },
 
     loadOptions(index) {
       const config = this.getConfig();
       this.apiProperties = [];
-      if (window._.isNil(config.dataSource) || window._.isNil(config.endpoint)) {
+      if (isNil(config.dataSource) || isNil(config.endpoint)) {
         return;
       }
 
       // Strip GET, POST, etc from endpoint name
-      let endpoint = config.endpoint;
-      const parts = config.endpoint.split(':');
+      let { endpoint } = config;
+      const parts = config.endpoint.split(":");
       if (parts.length > 1) {
         parts.shift();
-        endpoint = parts.join('').trim();
+        endpoint = parts.join("").trim();
       }
 
-
-      window.ProcessMaker.apiClient.get(`/data_sources/${config.dataSource}`)
-        .then(response  =>  {
+      window.ProcessMaker.apiClient
+        .get(`/data_sources/${config.dataSource}`)
+        .then((response) => {
           const rowType = this.outboundConfig[index].type;
-          let endpointData = window._.get(response, `data.endpoints.${endpoint}`, null);
+          const endpointData = get(
+            response,
+            `data.endpoints.${endpoint}`,
+            null
+          );
           if (endpointData === null) {
             return;
           }
 
           this.apiProperties = [];
 
-          if (rowType === 'HEADER') {
-            let headerProps = window._.get(endpointData, 'headers', []);
+          if (rowType === "HEADER") {
+            const headerProps = get(endpointData, "headers", []);
 
             this.apiProperties = headerProps.reduce((acc, header) => {
-              if (window._.findIndex(this.apiProperties, {'key': header.key}) < 0) {
+              if (findIndex(this.apiProperties, { key: header.key }) < 0) {
                 acc.push(header.key);
               }
               return acc;
-            },
-            []);
+            }, []);
           }
 
-          if (rowType === 'PARAM') {
-            let paramProps = window._.get(endpointData, 'params', []);
+          if (rowType === "PARAM") {
+            const paramProps = get(endpointData, "params", []);
             this.apiProperties = paramProps.reduce((acc, param) => {
-              if (window._.findIndex(this.apiProperties, {'key': param.key}) < 0) {
+              if (findIndex(this.apiProperties, { key: param.key }) < 0) {
                 acc.push(param.key);
               }
               return acc;
-            },
-            []);
+            }, []);
 
-            //add url parameters:
-            const matchedParams = (endpointData.url || '').matchAll(/\{\{(.+?)\}\}/gm);
+            // add url parameters:
+            const matchedParams = (endpointData.url || "").matchAll(
+              /\{\{(.+?)}}/gm
+            );
             for (const match of matchedParams) {
               const urlParam = match[1];
               // Add url param if it is not defined withing the connector's param list
-              if (this.apiProperties.every(item => item !== urlParam)) {
+              if (this.apiProperties.every((item) => item !== urlParam)) {
                 this.apiProperties.push(urlParam);
               }
             }
           }
 
-          if (rowType === 'BODY') {
-            const matchedParams = (endpointData.body || '').matchAll(/\{\{(.+?)\}\}/gm);
+          if (rowType === "BODY") {
+            const matchedParams = (endpointData.body || "").matchAll(
+              /\{\{(.+?)}}/gm
+            );
             for (const match of matchedParams) {
               const urlParam = match[1];
               // Add url param if it is not defined withing the connector's param list
-              if (this.apiProperties.every(item => item !== urlParam)) {
+              if (this.apiProperties.every((item) => item !== urlParam)) {
                 this.apiProperties.push(urlParam);
               }
             }
           }
-
         });
-    },
-
-  },
-  watch: {
-    outboundConfig: {
-      deep: true,
-      immediate: true,
-      handler(outboundConfig) {
-        this.setConfig('outboundConfig', outboundConfig);
-      },
-    },
-    value: {
-      immediate: true,
-      handler() {
-        const outboundConfig = this.getConfig().outboundConfig;
-        if (outboundConfig) {
-          this.outboundConfig.splice(0);
-          outboundConfig.forEach(element => {
-            this.outboundConfig.push(element);
-          });
-        }
-      },
-    },
-  },
+    }
+  }
 };
 </script>
 

package/src/components/inspector/screen-selector.vue

@@ -3,7 +3,6 @@
     <label class="typo__label">{{ label }}</label>
     <multiselect
       :value="selectedOption"
-      @input="change"
       :placeholder="placeholder"
       :options="options"
       :multiple="multiple"
@@ -12,76 +11,94 @@
       :searchable="true"
       :internal-search="false"
       label="title"
+      @input="change"
       @search-change="loadOptions"
       @open="loadOptions()"
     >
       <template slot="noResult">
-        <slot name="noResult">{{ $t('Not found') }}</slot>
+        <slot name="noResult">{{ $t("Not found") }}</slot>
       </template>
       <template slot="noOptions">
-        <slot name="noOptions">{{ $t('No Data Available') }}</slot>
+        <slot name="noOptions">{{ $t("No Data Available") }}</slot>
       </template>
     </multiselect>
-    <div class="screen-link mt-2" v-if="value">
+    <div v-if="value" class="screen-link mt-2">
       <a :href="`/designer/screen-builder/${value}/edit`" target="_blank">
-        {{ $t('Open Screen') }}
-        <i class="ml-1 fas fa-external-link-alt"/>
+        {{ $t("Open Screen") }}
+        <i class="ml-1 fas fa-external-link-alt" />
       </a>
     </div>
   </div>
 </template>
 
 <script>
-import { get } from 'lodash';
-import { multiselectApi } from '@/mixins';
-import { formTypes } from '@/global-properties';
+import { get } from "lodash";
+import { multiselectApi } from "@/mixins";
+import { formTypes } from "@/global-properties";
 
-const globalObject = typeof window === 'undefined'
-  ? global
-  : window;
+const globalObject = typeof window === "undefined" ? global : window;
 
 export default {
   mixins: [multiselectApi],
   props: {
     api: {
       type: String,
-      default: 'screens',
+      default: "screens"
     },
     builder: {
       type: Object,
-      required: true,
+      required: true
     },
     screenType: {
       type: String,
-      default: formTypes.form,
+      default: formTypes.form
     },
     validateNested: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
+  },
+  mounted() {
+    this.$root.$on("remove-nested", (nestedScreenId) => {
+      if (this.value === nestedScreenId) {
+        this.$emit("input", null);
+      }
+    });
+
+    let pmql = '(type = "FORM" or type = "DISPLAY")';
+    if (this.screenType === formTypes.display) {
+      pmql = '(type = "DISPLAY")';
+    }
+    if (this.builder.screen) {
+      pmql += ` and id != ${this.builder.screen.id}`;
+    }
+    this.pmql = pmql;
+    this.fields = "screens.id,title";
   },
   methods: {
     isNavButton(item) {
-      return item.config && item.component === 'FormButton' && item.config.event === 'pageNavigate';
+      return (
+        item.config &&
+        item.component === "FormButton" &&
+        item.config.event === "pageNavigate"
+      );
     },
     containsNavbutton(config) {
-      config.forEach(item => {
-
-        //If the element has containers
+      config.forEach((item) => {
+        // If the element has containers
         if (Array.isArray(item)) {
           this.containsNavbutton(item);
         }
 
-        //If the element has items
+        // If the element has items
         if (item.items) {
           this.containsNavbutton(item.items);
         }
 
-        //hidden buttons
+        // hidden buttons
         if (this.isNavButton(item)) {
           this.nav = true;
         }
-
       });
     },
 
@@ -91,32 +108,18 @@ export default {
         this.nav = false;
         this.containsNavbutton(value.config);
         if (this.nav) {
-          globalObject.ProcessMaker.alert(this.$t('The nested form contains navigation buttons'), 'warning');
+          globalObject.ProcessMaker.alert(
+            this.$t("The nested form contains navigation buttons"),
+            "warning"
+          );
           return false;
         }
       }
       const id = this.storeId ? get(value, this.trackBy) : value;
       // Make sure to load latest config from screen and nested screens
       this.$dataProvider.flushScreenCache();
-      this.$emit('input', id);
-    },
-  },
-  mounted() {
-    this.$root.$on('remove-nested', (nestedScreenId) => {
-      if (this.value === nestedScreenId) {
-        this.$emit('input', null);
-      }
-    });
-
-    let pmql = '(type = "FORM" or type = "DISPLAY")';
-    if (this.screenType === formTypes.display) {
-      pmql = '(type = "DISPLAY")';
+      this.$emit("input", id);
     }
-    if (this.builder.screen) {
-      pmql += ' and id != ' + this.builder.screen.id;
-    }
-    this.pmql = pmql;
-    this.fields = 'screens.id,title';
-  },
+  }
 };
 </script>

package/src/components/inspector/select-data-type-mask.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import FormMultiselect from './form-multiselect';
+import FormMultiselect from './form-multiselect.vue';
 import maskConfig from '../../form-input-mask-config';
 
 export default {

package/src/components/inspector/tooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="buttonType !== 'submit'">
     <label class="typo__label">{{ label }}</label>
-    <br >
+    <br />
     <label class="typo__label">{{ $t("Position") }}</label>
     <multiselect
       v-model="position"
@@ -34,123 +34,125 @@
 </template>
 
 <script>
-import _ from 'lodash';
+import _ from "lodash";
+import { FormTextArea } from "@processmaker/vue-form-elements";
 
 export default {
+  components: { FormTextArea },
   inheritAttrs: false,
-  props: ['label', 'value', 'helper'],
+  props: ["label", "value", "helper"],
   data() {
     return {
       options: [
         {
-          value: 'top',
-          content: this.$t('Top'),
+          value: "top",
+          content: this.$t("Top")
         },
         {
-          value: 'topleft',
-          content: this.$t('Top Left'),
+          value: "topleft",
+          content: this.$t("Top Left")
         },
         {
-          value: 'topright',
-          content: this.$t('Top Right'),
+          value: "topright",
+          content: this.$t("Top Right")
         },
         {
-          value: 'right',
-          content: this.$t('Right'),
+          value: "right",
+          content: this.$t("Right")
         },
         {
-          value: 'righttop',
-          content: this.$t('Right Top'),
+          value: "righttop",
+          content: this.$t("Right Top")
         },
         {
-          value: 'rightbottom',
-          content: this.$t('Right Bottom'),
+          value: "rightbottom",
+          content: this.$t("Right Bottom")
         },
         {
-          value: 'bottom',
-          content: this.$t('Bottom'),
+          value: "bottom",
+          content: this.$t("Bottom")
         },
         {
-          value: 'bottomleft',
-          content: this.$t('Bottom Left'),
+          value: "bottomleft",
+          content: this.$t("Bottom Left")
         },
         {
-          value: 'bottomright',
-          content: this.$t('Bottom Right'),
+          value: "bottomright",
+          content: this.$t("Bottom Right")
         },
         {
-          value: 'left',
-          content: this.$t('Left'),
+          value: "left",
+          content: this.$t("Left")
         },
         {
-          value: 'lefttop',
-          content: this.$t('Left Top'),
+          value: "lefttop",
+          content: this.$t("Left Top")
         },
         {
-          value: 'leftbottom',
-          content: this.$t('Left Bottom'),
-        },
+          value: "leftbottom",
+          content: this.$t("Left Bottom")
+        }
       ],
       optionsVariant: [
         {
-          value: 'primary',
-          content: this.$t('Primary'),
+          value: "primary",
+          content: this.$t("Primary")
         },
         {
-          value: 'secondary',
-          content: this.$t('Secondary'),
+          value: "secondary",
+          content: this.$t("Secondary")
         },
         {
-          value: 'success',
-          content: this.$t('Success'),
+          value: "success",
+          content: this.$t("Success")
         },
         {
-          value: 'danger',
-          content: this.$t('Danger'),
+          value: "danger",
+          content: this.$t("Danger")
         },
         {
-          value: 'warning',
-          content: this.$t('Warning'),
+          value: "warning",
+          content: this.$t("Warning")
         },
         {
-          value: 'info',
-          content: this.$t('Info'),
+          value: "info",
+          content: this.$t("Info")
         },
         {
-          value: 'light',
-          content: this.$t('Light'),
+          value: "light",
+          content: this.$t("Light")
         },
         {
-          value: 'dark',
-          content: this.$t('Dark'),
-        },
+          value: "dark",
+          content: this.$t("Dark")
+        }
       ],
-      position: 'top',
-      content: '',
-      variant: '',
+      position: "top",
+      content: "",
+      variant: ""
     };
   },
   computed: {
     buttonType() {
-      return _.get(this.$attrs, 'selectedControl.config.event');
-    },
+      return _.get(this.$attrs, "selectedControl.config.event");
+    }
   },
   watch: {
     value: {
       handler() {
         if (this.value) {
-          this.position = this.value.position || '';
-          this.content = this.value.content || '';
-          this.variant = this.value.variant || '';
+          this.position = this.value.position || "";
+          this.content = this.value.content || "";
+          this.variant = this.value.variant || "";
         } else {
           this.value = {
-            position: '',
-            content: '',
-            variant: '',
+            position: "",
+            content: "",
+            variant: ""
           };
         }
       },
-      immediate: true,
+      immediate: true
     },
     position() {
       this.value.position = this.position;
@@ -160,7 +162,7 @@ export default {
     },
     variant() {
       this.value.variant = this.variant;
-    },
+    }
   },
   methods: {
     getLabelFromValuePosition(value) {
@@ -174,7 +176,7 @@ export default {
         (option) => option.value == value
       );
       return selectedOption ? selectedOption.content : null;
-    },
-  },
+    }
+  }
 };
 </script>