@processmaker/screen-builder 3.0.5 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "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

@@ -62,7 +62,8 @@ export default {
       hasMustache: false,
       flagDraft: {},
       taskDraft: {},
-      enableDraft: true
+      enableDraft: true,
+      defaultColumnsRecordId: 1
     };
   },
   computed: {
@@ -80,7 +81,6 @@ export default {
         Object.keys(data).forEach((variable) => {
           this.validationData && this.$set(this.validationData, variable, data[variable]);
         });
-
         if (this.collection) {
           this.$set(this.collection, 'data', Array.isArray(data) ? data : [data]);
           this.$set(this.collection, 'screen', this.screenCollectionId);
@@ -140,7 +140,6 @@ export default {
       this.customCSS = null;
       this.watchers = [];
       this.screenTitle = null;
-
       if (id) {
         this.$dataProvider.getScreen(id).then((response) => {
           this.config = response.data.config;
@@ -212,6 +211,9 @@ export default {
     collection(collection) {
       if(collection) {
         this.selCollectionId = collection.collectionId;
+        const currentData = this.localData;
+        this.$set(collection, 'data', Array.isArray(currentData) ? currentData : [currentData]);
+        this.$set(collection, 'screen', this.screenCollectionId);
       }
     },
     record(record) {
@@ -240,7 +242,11 @@ export default {
     });
 
     if (this.collection && this.record) {
-      this.loadRecordCollection(this.collection.collectionId, this.record, this.collectionmode.modeId);
+      const recordId = this.isMustache(this.record) ? this.defaultColumnsRecordId : this.record;
+      if(this.isMustache(this.record)) {
+        this.hasMustache = true;
+      }
+      this.loadRecordCollection(this.collection.collectionId, recordId, this.collectionmode.modeId);
     }
   },
 };

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/mixins/Clipboard.js

@@ -170,9 +170,10 @@ export default {
         }
       );
       if (confirm) {
-        this.clipboardPage.items = [];
         this.$store.dispatch("clipboardModule/clearClipboard");
         this.$root.$emit('update-clipboard');
+        // Update the clipboard page with the new clipboard items
+        this.clipboardPage.items = this.$store.getters["clipboardModule/clipboardItems"];
       }
     },
 

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) {