@processmaker/screen-builder 2.99.3 → 3.0.0

package/src/components/inspector/collection-data-source.vue

@@ -0,0 +1,200 @@
+<template>
+    <div>
+      <div>
+        <label for="collectionsource">{{ $t("Source of Record List") }}</label>
+        <b-form-select
+          id="collectionsource"
+          v-model="sourceOptions"
+          :options="sourceDisplayOptions"
+          data-cy="inspector-collection-data-source"
+          @change="displayOptionChange"
+        />
+        <small class="mt-3 form-text text-muted">{{
+        $t("A record list can display the data of a defined variable or a collection")
+      }}</small>
+      </div>
+      <div class="mt-2" v-if="sourceOptions === 'Collection'">
+
+         <CollectionRecordsList 
+         v-model="collectionFields"
+         :record-pmql="pmql"
+         @change="collectionChanged"/>
+
+         <pmql-input
+        v-model="pmql"
+        :search-type="'collections_w_mustaches'"
+        class="mt-3 mb-1"
+        data-cy="inspector-collection-pmql"
+        :input-label="'PMQL'"
+        :condensed="true"
+        :ai-enabled="true"
+        :placeholder="$t('PMQL')"
+      >
+      </pmql-input>
+      <small class="mt-3 form-text text-muted">{{
+        $t("Leave this field empty to show all the records of the collection")
+      }}</small>
+        <label class="mt-3" id="data-selection">{{ $t("Data Selection") }}</label>
+
+        <b-form-select
+          id="data-selection"
+          v-model="dataSelectionOptions"
+          :options="dataSelectionDisplayOptions"
+          data-cy="inspector-collection-data-selection"
+        />
+        <small class="mt-3 form-text text-muted">{{
+        $t("The user can select specific data to be stored into a variable")
+      }}</small>
+
+        <div class="mt-3" v-if="dataSelectionOptions === 'single-field'">
+          <label id="single-columns">{{ $t('Column') }}</label>
+          <b-form-select
+          id="single-columns"
+          v-model="singleField"
+          :options="singleFieldOptions"
+          data-cy="inspector-collection-single-field"
+        >
+        <option disabled value="">{{ $t("Select a column") }}</option>
+          </b-form-select>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+
+  import CollectionRecordsList from "./collection-records-list.vue"
+  import { cloneDeep } from "lodash";
+
+  const CONFIG_FIELDS = [
+    "collectionFields",
+    "collectionFieldsColumns",
+    "pmql",
+    "sourceOptions",
+    "variableStore",
+    "dataSelectionOptions",
+    "singleField"
+
+  ];
+  export default {
+    components: {
+      CollectionRecordsList
+    },
+    props: ["value", "screenType"],
+    data() {
+      return {
+        fields: [],
+        sourceOptions: "Variable",
+        submitCollectionCheck: true,
+        sourceDisplayOptions: [],
+        collectionFields: [],
+        collectionFieldsColumns: [],
+        variableStore: null,
+        pmql: null,
+        sourceDisplayOptions: [
+        {
+          text: this.$t('Variable'),
+          value: 'Variable',
+        },
+        {
+          text: this.$t('Collection'),
+          value: 'Collection',
+        },
+      ],
+      dataSelectionDisplayOptions: [
+        {
+          text: this.$t('Do not allow selection'),
+          value: 'no-selection',
+        },
+        {
+          text: this.$t('Single field of record'),
+          value: 'single-field',
+        },
+        {
+          text: this.$t('Single record'),
+          value: 'single-record',
+        },
+        {
+          text: this.$t('Multiple records'),
+          value: 'multiple-records',
+        },
+      ],
+      dataSelectionOptions: "no-selection", 
+      collectionColumns: [],
+      singleFieldOptions: [],
+      singleField: null
+      };
+    },
+    methods: {
+      displayOptionChange() {
+        this.collectionFields = [];
+        this.collectionFieldsColumns = [];
+        this.pmql = null;
+        this.$root.$emit("collection-changed", true);
+      },
+      collectionChanged(data) {
+        if (Array.isArray(data)) {
+            const [firstItem] = data;
+            const collectionId = firstItem?.collection_id;
+            if(collectionId !== this.collectionFields.collectionId) {
+              this.$root.$emit("collection-changed", true);
+            }
+        }
+      },
+      getCollectionColumns(records) {
+        const [firstRecord] = records?.dataRecordList || [];
+
+        if (firstRecord?.data) {
+          const dataObject = firstRecord.data;
+
+          for (const [key, value] of Object.entries(dataObject)) {
+            this.singleFieldOptions.push({ text: key, value: key });
+          }
+        }
+      },
+    },
+    computed: {
+      options() {
+        return Object.fromEntries(
+          CONFIG_FIELDS.map((field) => [field, this[field]])
+        );
+      }
+    },
+    watch: {
+      value: {
+        handler(value) {
+          if (!value) {
+            return;
+          }
+          CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+        },
+        immediate: true
+      },
+      sourceOptions: {
+        handler(changeOption) {
+           this.$root.$emit("record-list-option", changeOption);
+        }
+      },
+      collectionFields: {
+        handler(collectionFieldsData) {
+           this.getCollectionColumns(collectionFieldsData);
+           this.$root.$emit("record-list-collection", collectionFieldsData);
+        },
+        deep: true
+      },
+      pmql: {
+        handler(newPmql) {
+            this.$root.$emit("change-pmql", newPmql);
+        }
+      },
+      submitCollectionCheck(newValue) {
+        this.submitCollectionCheck = newValue;
+      },
+      options: {
+        handler() {
+          this.$emit("input", this.options);
+        },
+        deep: true
+      },
+    },
+  };
+  </script>

package/src/components/inspector/collection-display-mode.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div>
+      <label for="collectionmode">{{ $t("Mode") }}</label>
+      <b-form-select
+        id="collectionmode"
+        v-model="modeId"
+        :options="displayOptions"
+        data-cy="inspector-collection"
+      />
+    </div>
+    <div class="mt-2" v-if="modeId !== 'View'">
+      <b-form-checkbox v-model="submitCollectionCheck">
+      {{  $t("Update collection on submit") }}
+      </b-form-checkbox>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenVariableSelector from "../screen-variable-selector.vue";
+
+const CONFIG_FIELDS = ["modeId", "submitCollectionCheck"];
+export default {
+  components: {
+    ScreenVariableSelector
+  },
+  props: ["value", "screenType"],
+  data() {
+    return {
+      fields: [],
+      modeId: null,
+      submitCollectionCheck: true,
+      displayOptions: []
+    };
+  },
+  mounted() {
+    this.getFields();
+  },
+  computed: {
+    options() {
+      return Object.fromEntries(
+        CONFIG_FIELDS.map((field) => [field, this[field]])
+      );
+    }
+  },
+  watch: {
+    value: {
+      handler(value) {
+        if (!value) {
+          return;
+        }
+        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+      },
+      immediate: true
+    },
+    modeId: {
+      handler() {
+        this.getFields();
+      }
+    },
+    submitCollectionCheck(newValue) {
+      this.submitCollectionCheck = newValue;
+    },
+    screenType: {
+      handler() {
+        this.getFields();
+      },
+      immediate: true
+    },
+    options: {
+      handler() {
+        this.$emit("input", this.options);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getFields() {
+      this.displayOptions = [
+        { value: "Edit", text: "Edit" },
+        { value: "View", text: "View" }
+      ];
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div>
+      <label for="collection">{{ $t("Collection") }}</label>
+      <b-form-select
+        id="collection"
+        v-model="collectionId"
+        :options="collections"
+        data-cy="inspector-collection"
+      />
+    </div>
+    <div v-if="collectionId > 0" class="screen-link mt-2">
+      <a 
+        :href="`/designer/screen-builder/${
+          screenMode === 'display' ? idCollectionScreenView : idCollectionScreenEdit
+          }/edit`" 
+          target="_blank">
+        {{ $t(screenMode === 'display' ? "Open View Screen" : "Open Edit Screen") }}
+        <i class="ml-1 fas fa-external-link-alt" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash";
+import MustacheHelper from "./mustache-helper.vue";
+import ScreenVariableSelector from "../screen-variable-selector.vue";
+
+const CONFIG_FIELDS = [
+  "collectionId",
+  "pmql",
+  "dataRecordList"
+];
+
+export default {
+  components: {
+    MustacheHelper,
+    ScreenVariableSelector
+  },
+  props: ["value"],
+  data() {
+    return {
+      collections: [],
+      fields: [],
+      collectionId: null,
+      pmql: "",
+      unique: false,
+      dataRecordList: [],
+      idCollectionScreenView: null,
+      idCollectionScreenEdit: null,
+      screenMode: null
+    };
+  },
+  computed: {
+    options() {
+      return Object.fromEntries(
+        CONFIG_FIELDS.map((field) => [field, this[field]])
+      );
+    }
+  },
+  watch: {
+    value: {
+      handler(value) {
+        if (!value) {
+          return;
+        }
+        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+      },
+      immediate: true
+    },
+    collectionId: {
+      handler() {
+        this.getFields();
+      }
+    },
+    options: {
+      handler() {
+        this.$emit("input", this.options);
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.onDebouncedPmqlChange = debounce((pmql) => {
+      this.onPmqlChange(pmql);
+    }, 1000);
+  },
+  mounted() {
+    this.$root.$on("change-pmql", (val) => {
+      this.pmql = val;
+    });
+    this.getCollections();
+    if (this.collectionId) {
+      this.getFields();
+    }
+    this.$root.$on("collection-screen-mode", (mode) => {
+      this.screenMode = mode;
+    });
+  },
+  methods: {
+    onCollectionChange() {
+      this.$dataProvider
+        .getCollectionRecordsList(this.collectionId)
+        .then((response) => {
+          this.dataRecordList = response.data;
+        });
+      this.$emit('change', this.dataRecordList);
+    },
+    getCollections() {
+      this.$dataProvider.getCollections().then((response) => {
+        const [firstItem = {}] = response.data.data || [];
+        this.idCollectionScreenView = firstItem.read_screen_id;
+        this.idCollectionScreenEdit = firstItem.create_screen_id;
+        this.collections = [
+          { value: null, text: this.$t("Select a collection") },
+          ...response.data.data.map((collection) => {
+            return {
+              text: collection.name,
+              value: collection.id
+            };
+          })
+        ];
+      });
+    },
+    getFields() {
+      if (!this.collectionId) {
+        return;
+      }
+
+      this.$dataProvider
+        .getCollectionFields(this.collectionId)
+        .then((response) => {
+          this.fields = [
+            { value: null, text: this.$t("Select a field") },
+            { value: "id", text: this.$t("Collection Record ID") },
+            ...response.data.data.map((field) => {
+              return {
+                text: field.label,
+                value: field.field
+              };
+            })
+          ];
+
+          this.onCollectionChange();
+        });
+    },
+    onNLQConversion(pmql) {
+      this.pmql = pmql;
+    },
+    onPmqlChange(pmql) {
+      this.pmql = pmql;
+    }
+  }
+};
+</script>

package/src/components/inspector/column-setup.vue

@@ -17,7 +17,7 @@
         <div v-else class="card-header">
           {{ $t('Edit Column') }}
         </div>
-        <div class="card-body p-2">
+        <div v-if="!isCollection" class="card-body p-2">
           <label class="mt-3" for="option-content">{{ $t('Column Header') }}</label>
           <b-form-input id="option-content" v-model="optionContent"/>
           <label for="option-value">{{ $t('Value') }}</label>
@@ -26,12 +26,27 @@
             <div>{{ optionError }}</div>
           </div>
         </div>
+        <div v-else class="card-body p-2">
+          <label class="mt-3" for="option-content">{{ $t('Column') }}</label>
+          <b-form-select
+          id="columnCollection"
+          v-model="optionValueCollection"
+          :options="collectionOptions"
+          data-cy="inspector-collection-columns"
+          @change="handleColumnSelection"
+          />
+          <label v-show="!hideLabelAll" for="option-label-column">{{ $t('Column Label') }}</label>
+          <b-form-input v-show="!hideLabelAll" id="option-label-column" v-model="optionContentCollection" :classs="optionKeyClass" />
+          <div v-if="optionError" class="invalid-feedback d-block text-right">
+            <div>{{ optionError }}</div>
+          </div>
+        </div>
 
         <div class="card-footer text-right p-2">
           <button type="button" class="btn btn-sm btn-outline-secondary mr-2" @click="showOptionCard=false">
             {{ $t('Cancel') }}
           </button>
-          <button type="button" class="btn btn-sm btn-secondary" @click="addOption()">
+          <button type="button" class="btn btn-sm btn-secondary" @click="isCollection ? addOptionCollection() : addOption()">
             {{ $t('Save') }}
           </button>
         </div>
@@ -65,7 +80,7 @@
                   <div v-else class="card-header">
                     {{ $t('Edit Option') }}
                   </div>
-                  <div class="card-body p-2">
+                  <div v-if="!isCollection" class="card-body p-2">
                     <label class="mt-3" for="option-content">{{ $t('Column Header') }}</label>
                     <b-form-input id="option-content" v-model="optionContent"/>
                     <label for="option-value">{{ $t('Value') }}</label>
@@ -74,12 +89,26 @@
                       <div>{{ optionError }}</div>
                     </div>
                   </div>
+                  <div v-else class="card-body p-2">
+                    <label class="mt-3" for="option-content-collection">{{ $t('Column') }}</label>
+                    <b-form-select
+                    id="columnCollection"
+                    v-model="optionValueCollection"
+                    :options="collectionOptions"
+                    data-cy="inspector-collection-columns"
+                    />
+                    <label for="option-value-collection">{{ $t('Column Label') }}</label>
+                    <b-form-input id="option-value-collection" v-model="optionContentCollection" :classs="optionKeyClass" />
+                    <div v-if="optionError" class="invalid-feedback d-block text-right">
+                      <div>{{ optionError }}</div>
+                    </div>
+                  </div>
 
                   <div class="card-footer text-right p-2">
                     <button type="button" class="btn btn-sm btn-outline-secondary mr-2" @click="editIndex=null">
                       {{ $t('Cancel') }}
                     </button>
-                    <button type="button" class="btn btn-sm btn-secondary" @click="addOption()">
+                    <button type="button" class="btn btn-sm btn-secondary" @click="isCollection ? addOptionCollection() : addOption()">
                       {{ $t('Update') }}
                     </button>
                   </div>
@@ -186,6 +215,7 @@
 import draggable from 'vuedraggable';
 import { dataSources, dataSourceValues } from './data-source-types';
 import MonacoEditor from 'vue-monaco';
+import { cloneDeep } from "lodash";
 
 export default {
   components: {
@@ -219,6 +249,8 @@ export default {
       removeIndex: null,
       optionValue: '',
       optionContent: '',
+      optionValueCollection: '',
+      optionContentCollection: '',
       showRenderAs: false,
       renderAs: 'dropdown',
       allowMultiSelect: false,
@@ -242,6 +274,9 @@ export default {
         automaticLayout: true,
       },
       showPopup: false,
+      isCollection: null,
+      collectionOptions: [],
+      hideLabelAll: false
     };
   },
   watch: {
@@ -284,6 +319,9 @@ export default {
     keyField() {
       return this.key || 'value';
     },
+    keyFieldCollection() {
+      return this.key || 'key';
+    },
     valueField() {
       return this.value || 'content';
     },
@@ -321,8 +359,53 @@ export default {
   },
   mounted() {
     this.initData();
+    this.$root.$on("record-list-option", (val) => {
+      this.$nextTick(()=>{
+        this.isCollection = (val === "Collection") ? true : false;
+      });
+      
+    });
+    this.$root.$on("record-list-collection", (collectionData) => {
+      this.getCollectionColumns(collectionData);
+    });
+    this.$root.$on("collection-changed", (change) => {
+      if(change) {
+        this.optionsList = [];
+      }
+    });
+    this.$root.$on("option-source-changed", (change) => {
+      if(change) {
+        this.optionsList = [];
+      }
+    });
   },
   methods: {
+    handleColumnSelection() {
+      if (this.optionValueCollection === "all") {
+        this.optionsList = [];
+        this.hideLabelAll = true;
+        this.collectionOptions.forEach(option => {
+          if(option.value !== "all") {
+            this.optionsList.push({
+              content: option.value,
+              key: option.value
+            });
+          }
+        });
+      }
+    },
+    getCollectionColumns(collection) {
+      this.collectionOptions = [{ text: "All columns", value: "all" }];
+      const [firstRecord] = collection?.dataRecordList || [];
+
+      if (firstRecord?.data) {
+        const dataObject = firstRecord.data;
+
+        for (const [key, value] of Object.entries(dataObject)) {
+          this.collectionOptions.push({ text: key, value: key });
+        }
+      }
+    },
     initData() {
       this.dataSource = this.options.dataSource;
       this.jsonData = this.options.jsonData;
@@ -391,12 +474,16 @@ export default {
       this.editIndex = index;
       this.optionContent = this.optionsList[index][this.valueField];
       this.optionValue = this.optionsList[index][this.keyField];
+      this.optionContentCollection = this.optionsList[index][this.keyFieldCollection];
+      this.optionValueCollection = this.optionsList[index][this.valueField];
       this.optionError = '';
     },
     showAddOption() {
       this.optionCardType = 'insert';
       this.optionContent = '';
       this.optionValue = '';
+      this.optionContentCollection = '';
+      this.optionValueCollection = '';
       this.showOptionCard = true;
       this.optionError = '';
       this.editIndex = null;
@@ -412,6 +499,7 @@ export default {
           this.optionError = 'An item with the same key already exists';
           return;
         }
+
         this.optionsList.push(
           {
             [this.valueField]: this.optionContent,
@@ -420,7 +508,7 @@ export default {
         );
       }
       else {
-        if (this.optionsList.find((item, index) => { return item[that.keyField] === this.optionValue && index !== this.editIndex ; })) {
+        if (this.optionsList.find((item, index) => { return item[that.keyField] === this.optionValue && index !== this.editIndex; })) {
           this.optionError = 'An item with the same key already exists';
           return;
         }
@@ -434,19 +522,47 @@ export default {
       this.optionError = '';
       this.editIndex = null;
     },
+    addOptionCollection() {
+      const that = this;
+      if (this.optionsList === undefined) {
+        this.initData();
+      }
+
+      if (this.optionCardType === 'insert') {
+        if (this.optionsList.find(item => { return item[that.keyFieldCollection] === this.optionContentCollection; })) {
+          this.optionError = 'An item with the same key already exists';
+          return;
+        }
+
+        this.optionsList.push(
+          {
+            [this.keyFieldCollection]: this.optionContentCollection,
+            [this.valueField]: this.optionValueCollection,
+          }
+        );
+        this.optionsList = this.optionsList.filter(option => option["content"] !== "all");
+      }
+      else {
+        this.optionsList[this.editIndex][this.keyFieldCollection] = this.optionContentCollection;
+        this.optionsList[this.editIndex][this.valueField] = this.optionValueCollection;
+      }
 
+      this.jsonError = '';
+      this.jsonData = JSON.stringify(this.optionsList);
+      this.showOptionCard = false;
+      this.optionError = '';
+      this.editIndex = null;
+    },
     deleteOption() {
       this.optionsList.splice(this.removeIndex, 1);
       this.jsonData = JSON.stringify(this.optionsList);
       this.showRemoveWarning = false;
       this.removeIndex = null;
     },
-
     removeOption(index) {
       this.removeIndex = index;
       this.showRemoveWarning = true;
     },
-
     expandEditor() {
       this.showPopup = true;
     },