@processmaker/screen-builder 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/components/editor/loop.vue

@@ -62,7 +62,7 @@
                 </button>
                 <button
                   v-if="!(isAiSection(element) && aiPreview(element))"
-                  class="btn btn-sm btn-secondary mr-2"
+                  class="btn btn-sm btn-primary mr-2"
                   :title="$t('Copy Control')"
                   @click="duplicateItem(index)"
                 >
@@ -128,7 +128,7 @@
                   @removeFromClipboard="removeFromClipboard(items[index])"
                 />
                 <button
-                  class="btn btn-sm btn-secondary mr-2"
+                  class="btn btn-sm btn-primary mr-2"
                   :title="$t('Copy Control')"
                   @click="duplicateItem(index)"
                 >

package/src/components/editor/multi-column.vue

@@ -72,7 +72,7 @@
                       </button>
                       <button
                         v-if="!(isAiSection(element) && aiPreview(element))"
-                        class="btn btn-sm btn-secondary mr-2"
+                        class="btn btn-sm btn-primary mr-2"
                         :aria-label="$t('Duplicate')"
                         @click="duplicateItem(index, row)"
                       >
@@ -140,7 +140,7 @@
                         @removeFromClipboard="removeFromClipboard(element)"
                       />
                       <button
-                        class="btn btn-sm btn-secondary mr-2"
+                        class="btn btn-sm btn-primary mr-2"
                         :title="$t('Copy Control')"
                         @click="duplicateItem(index, row)"
                       >

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

@@ -54,7 +54,8 @@ export default {
       dataRecordList: [],
       idCollectionScreenView: null,
       idCollectionScreenEdit: null,
-      screenMode: null
+      screenMode: null,
+      collectionsMap: {}
     };
   },
   computed: {
@@ -76,6 +77,7 @@ export default {
     },
     collectionId: {
       handler() {
+        this.updateScreenIds();
         this.getFields();
       }
     },
@@ -114,17 +116,20 @@ export default {
     },
     getCollections() {
       this.$dataProvider.getCollections().then((response) => {
-        const [firstItem = {}] = response.data.data || [];
-        this.idCollectionScreenView = firstItem.read_screen_id;
-        this.idCollectionScreenEdit = firstItem.create_screen_id;
+        this.collectionsMap = response.data.data.reduce((acc, collection) => {
+          acc[collection.id] = {
+            read_screen_id: collection.read_screen_id,
+            create_screen_id: collection.create_screen_id
+          };
+          return acc;
+        }, {});
+
         this.collections = [
           { value: null, text: this.$t("Select a collection") },
-          ...response.data.data.map((collection) => {
-            return {
-              text: collection.name,
-              value: collection.id
-            };
-          })
+          ...response.data.data.map((collection) => ({
+            text: collection.name,
+            value: collection.id
+          }))
         ];
       });
     },
@@ -155,6 +160,16 @@ export default {
     },
     onPmqlChange(pmql) {
       this.pmql = pmql;
+    },
+    updateScreenIds() {
+      if (this.collectionId && this.collectionsMap[this.collectionId]) {
+        const selectedCollection = this.collectionsMap[this.collectionId];
+        this.idCollectionScreenView = selectedCollection.read_screen_id;
+        this.idCollectionScreenEdit = selectedCollection.create_screen_id;
+      } else {
+        this.idCollectionScreenView = null;
+        this.idCollectionScreenEdit = null;
+      }
     }
   }
 };

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

@@ -192,7 +192,7 @@
     </div>
 
     <div v-if="dataSource === dataSourceValues.dataConnector">
-      <div v-if="valueTypeReturned === 'single'">
+      <div v-if="valueTypeReturned === 'single' || valueTypeReturned === 'object' && $attrs['screen-type'] === 'conversational'">
         <label for="key">{{ $t('Value') }}</label>
         <mustache-helper/>
         <b-form-input id="key" v-model="key" @change="keyChanged" data-cy="inspector-datasource-value"/>

package/src/components/renderer/form-collection-record-control.vue

@@ -61,7 +61,8 @@ export default {
       screenType: "",
       hasMustache: false,
       flagDraft: {},
-      taskDraft: {}
+      taskDraft: {},
+      enableDraft: true
     };
   },
   computed: {
@@ -167,7 +168,6 @@ export default {
       this.selCollectionId = collectionId;
       this.selRecordId = recordId;
       this.selDisplayMode = modeId;
-
       this.$dataProvider
         .getCollectionRecordsView(collectionId, recordId)
         .then((response) => {
@@ -176,22 +176,25 @@ export default {
           const viewScreen = response.collection.read_screen_id;
           const editScreen = response.collection.update_screen_id;
             //Choose screen id regarding of the display Mode
-            this.screenCollectionId =
-              this.selDisplayMode === "View" ? viewScreen : editScreen;
-          
+            this.screenCollectionId = 
+              typeof this.selDisplayMode === 'function' ? 
+                (this.collectionmode.modeId === "View" ? viewScreen : editScreen) :
+                (this.selDisplayMode === "View" ? viewScreen : editScreen);
           this.loadScreen(this.screenCollectionId);
          
           //This section validates if Collection has draft data
-          if(this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '') {
+          if (this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '' || !this.enableDraft) 
+          {
             this.localData = respData;
           }else{
             this.localData = _.merge({}, respData, this.taskDraft.draft.data);
           }
-          
+
         })
         .catch(() => {
           this.localData = {};
           globalObject.ProcessMaker.alert(this.$t('This content does not exist. We could not locate indicated data'), "danger");
+          this.placeholder = "Select a collection";
         });;
     },
     isMustache(record) {
@@ -213,6 +216,7 @@ export default {
     },
     record(record) {
       this.hasMustache = false;
+      this.enableDraft = false;
       if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
         this.selRecordId = record;
         this.loadRecordCollection(this.collection.collectionId, record, this.selDisplayMode);

package/src/components/renderer/form-list-table.vue

@@ -160,12 +160,12 @@ export default {
   },
   watch: {
     listOption() {
-      this.title = this.checkTitle(this.listOption);
+      this.title = this.$t(this.checkTitle(this.listOption));
       this.dataControl = {};
     }
   },
   mounted() {
-    this.title = this.checkTitle(this.listOption);
+    this.title = this.$t(this.checkTitle(this.listOption));
   },
   methods: {
     /**

package/src/components/renderer/form-new-request.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div v-else>
-      <formEmpty link="" title="No Case to Start" url="" />
+      <formEmpty link="" :title="$t('No Case to Start')" url="" />
     </div>
   </div>
 </template>

package/src/components/renderer/form-record-list.vue

@@ -431,20 +431,22 @@ export default {
       }
 
       // Adds radio buttons or checkbox to the table depending selected option
-      if (['single-field', 'single-record'].includes(this.source?.dataSelectionOptions)) {
-        fields.unshift({
-          key: 'radio',
-          label: '',
-          sortable: false,
-        });
-      }
-
-      if (this.source?.dataSelectionOptions === 'multiple-records') {
-        fields.unshift({
-          key: 'checkbox',
-          label: '',
-          sortable: false
-        });
+      if(this.source?.sourceOptions === "Collection") { 
+        if (['single-field', 'single-record'].includes(this.source?.dataSelectionOptions)) {
+          fields.unshift({
+            key: 'radio',
+            label: '',
+            sortable: false,
+          });
+        }
+  
+        if (this.source?.dataSelectionOptions === 'multiple-records') {
+          fields.unshift({
+            key: 'checkbox',
+            label: '',
+            sortable: false
+          });
+        }
       }
       
       return fields;

package/src/components/renderer/form-requests.vue

@@ -70,7 +70,7 @@
     </filter-table>
   </div>
   <div v-else>
-    <formEmpty link="Requests" title="No Cases to Show" :url="noDataUrl" />
+    <formEmpty link="Requests" :title="$t('No Cases to Show')" :url="noDataUrl" />
   </div>
 </template>
 

package/src/components/screen-renderer.vue

@@ -37,7 +37,7 @@
       :is="component"
       ref="component"
       :vdata="value"
-      :_parent="_parent || value._parent"
+      :_parent="_parent || value?._parent"
       :_initial-page="currentPage"
       :taskdraft="taskdraft"
       @after-submit="afterSubmit"

package/src/components/vue-form-builder.vue

@@ -234,7 +234,7 @@
                     <button
                       v-if="!(isAiSection(element) && aiPreview(element))"
                       data-test="copy-control-btn"
-                      class="btn btn-sm btn-secondary mr-2"
+                      class="btn btn-sm btn-primary mr-2"
                       :title="$t('Copy Control')"
                       @click="duplicateItem(index)"
                     >
@@ -255,9 +255,7 @@
                   v-model="element.items"
                   :validation-errors="validationErrors"
                   class="card-body"
-                  :class="styleMode === 'Modern' && element.component === 'FormRecordList' 
-                    ? elementCssClassModern(element) 
-                    : elementCssClass(element)"
+                  :class="elementCssClass(element)"
                   :selected="selected"
                   :config="element.config"
                   :ai-element="element"
@@ -300,7 +298,7 @@
                       @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
-                      class="btn btn-sm btn-secondary mr-2"
+                      class="btn btn-sm btn-primary mr-2"
                       :title="$t('Copy Control')"
                       @click="duplicateItem(index)"
                     >
@@ -321,9 +319,7 @@
                   :tabindex="element.config.interactive ? 0 : -1"
                   class="card-body m-0 pb-4 pt-4"
                   :class="[
-                    styleMode === 'Modern' && element.component === 'FormRecordList' 
-                    ? elementCssClassModern(element) 
-                    : elementCssClass(element),
+                    elementCssClass(element),
                     { 'prevent-interaction': !element.config.interactive }
                   ]"
                   :screen-type="screenType"

package/src/components/vue-form-renderer.vue

@@ -10,7 +10,7 @@
     <screen-renderer
       ref="renderer"
       :value="data"
-      :_parent="_parent || data._parent"
+      :_parent="_parent || data?._parent"
       :definition="definition"
       :current-page="currentPage"
       data-cy="screen-renderer"

package/src/form-builder-controls.js

@@ -481,6 +481,15 @@ export default [
           jsonData: '',
         },
         form: '',
+        source: {
+          collectionFields: [],
+          collectionFieldsColumns: [],
+          pmql: null,
+          sourceOptions: "Variable",
+          variableStore: null,
+          dataSelectionOptions: "no-selection",
+          singleField: null
+        }
       },
       inspector: [
         keyNameProperty,

package/src/mixins/HasColorProperty.js

@@ -5,6 +5,7 @@ export default {
       const css = [];
       element.config.bgcolor ? css.push(element.config.bgcolor) : null;
       element.config.color ? css.push(element.config.color) : null;
+      element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
       return css.join(' ');
     },
     elementCssClassModern(element) {