@processmaker/screen-builder 3.8.7 → 3.8.9

package/src/components/renderer/case-progress-bar.vue

@@ -0,0 +1,205 @@
+<template>
+  <div v-if="stagesPerCase.length > 0">
+    <div class="pipeline-wrapper">
+      <div class="pipeline">
+        <div
+          v-for="(stage, index) in stagesPerCase"
+          :key="index"
+          class="stage-container"
+        >
+          <div
+            :class="['stage-block', getStageClass(stage.status)]"
+            :style="getClipPathStyle(index)"
+          >
+            <div class="stage-name">{{ stage.name }}</div>
+            <template v-if="validateDate(stage.completed_at)">
+              <div class="stage-date">{{ formatDate(stage.completed_at) }}</div>
+            </template>
+            <template v-else>
+              <div class="stage-status">{{ getStatusLabel(stage.status) }}</div>
+            </template>
+          </div>
+          <!-- Connector Arrow, not shown after last block -->
+          <div
+            v-if="index < stagesPerCase.length - 1"
+            :class="['arrow-connector', getStageClass(stage.status)]"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <div class="pipeline-wrapper">
+      <div class="pipeline">
+        <div class="stage-container">
+          <div class="stage-block pending">
+            <div class="stage-name">No stages available</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+import { getUserDateFormat } from "@processmaker/vue-form-elements";
+
+export default {
+  props: ["label", "event", "eventData"],
+  data() {
+    return {
+      caseNumber: null,
+      stagesPerCase: [],
+      stagesStatus: {
+        Done: "closed",
+        "In Progress": "active",
+        Pending: "pending"
+      }
+    };
+  },
+  mounted() {
+    this.caseNumber = window.ProcessMaker?.caseNumber;
+    this.getStageStatus(this.caseNumber);
+  },
+  methods: {
+    getStageStatus(caseNumber) {
+      let url_api = 'cases/stages_bar';
+      if (caseNumber) {
+        url_api += `/${caseNumber}`;
+      }
+      ProcessMaker.apiClient
+        .get(url_api)
+        .then((response) => {
+          this.stagesPerCase = response.data.stages_per_case;
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
+    },
+    validateDate(date) {
+      return date && date !== "null";
+    },
+    getStageClass(status) {
+      return this.stagesStatus[status] || "pending";
+    },
+    getStatusLabel(status) {
+      if (status === "Done") return "Completed";
+      return status || "Pending";
+    },
+    formatDate(date) {
+      if (!date || date === "null") return "";
+      return moment
+        .utc(date, [getUserDateFormat(), moment.ISO_8601], true)
+        .toISOString()
+        .split(RegExp("T[0-9]"))[0];
+    },
+    getClipPathStyle(index) {
+      if (index === 0) {
+        return {
+          clipPath: "none"
+        };
+      }
+      if (this.stagesPerCase.length > 1) {
+        return {
+          clipPath: "polygon(0 0, 100% 0, 100% 100%, 0px 100%, 20px 50%)"
+        };
+      }
+      return {
+        clipPath: "none"
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.pipeline-wrapper {
+  width: 100%;
+  overflow-x: hidden;
+  padding: 10px;
+}
+.pipeline {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.stage-container {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-left: -10px;
+  align-self: stretch;
+}
+
+.stage-block {
+  flex: 1;
+  height: 100px;
+  padding: 22px 8px 40px 44px;;
+  color: #333;
+  text-align: center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+  box-sizing: border-box;
+}
+.stage-block.active {
+  background-color: #ffcc99;
+}
+.stage-block.closed {
+  background-color: #ffd9b3;
+}
+.stage-block.pending {
+  background-color: #f0f0f0;
+  color: #999;
+}
+.stage-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: break-spaces;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.16px;
+}
+.stage-status,
+.stage-date {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.75);
+  position: absolute;
+  right: 4.999px;
+  bottom: 12px;
+  display: flex;
+  padding: 2px 6px;
+  align-items: center;
+  gap: 10px;
+}
+
+.arrow-connector {
+  width: 0;
+  height: 0;
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  border-left: 20px solid;
+  flex-shrink: 0;
+}
+.arrow-connector.active {
+  color: #ffcc99;
+}
+.arrow-connector.closed {
+  color: #ffd9b3;
+}
+.arrow-connector.pending {
+  color: #f0f0f0;
+}
+</style>

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

@@ -10,7 +10,7 @@
       :disabled="showSpinner"
     >
       <b-spinner v-if="showSpinner" small></b-spinner>
-      {{ showSpinner ? (!loadingLabel ? 'Loading...': loadingLabel) : label }}
+      {{ showSpinner ? (!loadingLabel ? "Loading..." : loadingLabel) : label }}
     </button>
   </div>
 </template>
@@ -19,17 +19,33 @@
 import Mustache from 'mustache';
 import { mapActions, mapState } from "vuex";
 import { getValidPath } from '@/mixins';
+import Worker from "@/workers/worker.js?worker&inline";
+import { findRootScreen } from "@/mixins/DataReference";
+import { stringify } from 'flatted';
 
 export default {
   mixins: [getValidPath],
-  props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData', 'loading', 'loadingLabel', 'handler'],
+  props: [
+    "variant",
+    "label",
+    "event",
+    "eventData",
+    "name",
+    "fieldValue",
+    "value",
+    "tooltip",
+    "transientData",
+    "loading",
+    "loadingLabel",
+    "handler"
+  ],
   data() {
     return {
       showSpinner: false
     };
   },
   computed: {
-    ...mapState('globalErrorsModule', ['valid']),
+    ...mapState("globalErrorsModule", ["valid"]),
     classList() {
       let variant = this.variant || 'primary';
       return {
@@ -98,24 +114,50 @@ export default {
         });
         return;
       }
+      if (this.event === 'pageNavigate') {
+        // Run handler for page navigate
+        await this.runHandler();
+      }
       this.$emit(this.event, this.eventData);
       if (this.event === 'pageNavigate') {
         this.$emit('page-navigate', this.eventData);
       }
     },
-    async runHandler() {
+    runHandler() {
       if (this.handler) {
-        try {
-          const data = this.getScreenDataReference(null, (screen, name, value) => {
-            // Enable the data reference to be updated by the handler
-            screen.$set(screen.vdata, name, value);
-          });
-          await new Function(['toRaw'], this.handler).apply(data, [(item) => {
-            return item[Symbol.for('__v_raw')];
-          }]);
-        } catch (error) {
-          console.error('❌ There is an error in the button handler', error);
-        }
+        return new Promise((resolve, reject) => {
+          try {
+            const rootScreen = findRootScreen(this);
+            const data = rootScreen.vdata;
+            const scope = this.transientData;
+
+            const worker = new Worker();
+            // Send the handler code to the worker
+            worker.postMessage({
+              fn: this.handler,
+              dataRefs: stringify({data, scope}),
+            });
+
+            // Listen for the result from the worker
+            worker.onmessage = (e) => {
+              if (e.data.error) {
+                reject(e.data.error);
+              } else if (e.data.result) {
+                // Update the data with the result
+                Object.keys(e.data.result).forEach(key => {
+                  if (key === '_root') {
+                    Object.assign(data, e.data.result[key]);
+                  } else {
+                    scope[key] = e.data.result[key];
+                  }
+                });
+                resolve();
+              }
+            };
+          } catch (error) {
+            console.error("❌ There is an error in the button handler", error);
+          }
+        });
       }
     }
   },

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

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div v-if="itemData">
+      <slot></slot>
+    </div>
+    <div v-else class="dynamic-panel-empty">
+      <div v-html="renderedEmptyMessage" class="text-muted"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Mustache from 'mustache';
+
+export default {
+  name: "FormDynamicPanel",
+  props: {
+    itemData: {
+      type: [Object, Array, String, Number, Boolean],
+      required: false,
+      default: null
+    },
+    emptyStateMessage: {
+      type: String,
+      required: false,
+      default: 'No data available for this dynamic panel'
+    },
+    validationData: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  computed: {
+    hasData() {
+      return this.itemData !== null && this.itemData !== undefined;
+    },
+    renderedEmptyMessage() {
+      if (!this.emptyStateMessage) {
+        return this.$t('No data available for this dynamic panel');
+      }
+
+      try {
+        // Process Mustache placeholders
+        const processedMessage = Mustache.render(this.emptyStateMessage, this.validationData);
+        return processedMessage;
+      } catch (error) {
+        // If Mustache processing fails, return the original message
+        return this.emptyStateMessage;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.dynamic-panel-empty {
+  text-align: center;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.dynamic-panel-empty p {
+  margin-bottom: 8px;
+}
+</style>

package/src/components/renderer/index.js

@@ -21,3 +21,5 @@ export { default as FormTasks } from "./form-tasks.vue";
 export { default as LinkButton } from "./link-button.vue";
 export { default as FormCollectionRecordControl } from "./form-collection-record-control.vue";
 export { default as FormCollectionViewControl } from "./form-collection-view-control.vue";
+export { default as FormDynamicPanel } from "./form-dynamic-panel.vue";
+export { default as CaseProgressBar } from "./case-progress-bar.vue";

package/src/components/renderer/link-button.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="form-group">
-    <a :class="classColor" :href="inputUrlLink"> {{ label }} </a>
+  <div class="form-group link-button">
+    <a :class="classColor" :href="inputUrlLink">
+      <i v-if="variantStyle === 'button'" class="fas fa-external-link-alt" />
+      {{ label }}
+    </a>
   </div>
 </template>
 
@@ -8,6 +11,7 @@
 export default {
   props: [
     "variant",
+    "variantStyle",
     "label",
     "event",
     "eventData",
@@ -18,7 +22,10 @@ export default {
   ],
   computed: {
     classColor() {
-      return `text-${this.variant}`;
+      if (this.variantStyle === "link") {
+        return `text-${this.variant}`;
+      }
+      return `btn btn-${this.variant}`;
     }
   }
 };

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

@@ -1521,7 +1521,8 @@ export default {
 
       if (
         _.findIndex(control.inspector, keyNamePropertyToFind) !== -1 ||
-        control.component === "FormLoop"
+        control.component === "FormLoop" ||
+        control.component === "FormDynamicPanel"
       ) {
         [this.variables, copy.config.name] = this.generator.generate(
           this.config,
@@ -1531,7 +1532,9 @@ export default {
           copy.config.settings.varname = copy.config.name;
         }
       }
-
+      if (copy.component === "FormHtmlViewer") {
+        copy.config.name = "form_html_viewer";
+      }
       return copy;
     },
     initiateLanguageSupport() {

package/src/form-builder-controls.js

@@ -3,6 +3,7 @@ import FormAvatar from './components/renderer/form-avatar';
 import FormButton from './components/renderer/form-button';
 import FormMultiColumn from './components/renderer/form-multi-column';
 import FormLoop from './components/renderer/form-loop';
+import FormDynamicPanel from './components/renderer/form-dynamic-panel.vue';
 import FormRecordList from './components/renderer/form-record-list';
 import FormImage from './components/renderer/form-image';
 import FormMaskedInput from './components/renderer/form-masked-input';
@@ -27,6 +28,7 @@ import {
 } from '@processmaker/vue-form-elements';
 import { dataSourceValues } from '@/components/inspector/data-source-types';
 import LinkButton from "./components/renderer/link-button.vue";
+import CaseProgressBar from "./components/renderer/case-progress-bar.vue";
 
 import {
   bgcolorProperty,
@@ -50,6 +52,8 @@ import {
   bgcolorModern,
   bgcolorPropertyRecord,
   colorPropertyRecord,
+  linkVariantStyleProperty,
+  variantStyleProperty
 } from './form-control-common-properties';
 
 export default [
@@ -461,6 +465,43 @@ export default [
       ],
     },
   },
+  {
+    editorComponent: FormDynamicPanel,
+    editorBinding: 'FormDynamicPanel',
+    rendererComponent: FormDynamicPanel,
+    rendererBinding: 'FormDynamicPanel',
+    control: {
+      popoverContent: "Add a dynamic panel component",
+      order: 6.0,
+      group: 'Content Fields',
+      label: 'Dynamic Panel',
+      component: 'FormDynamicPanel',
+      'editor-component': 'DynamicPanel',
+      'editor-control': 'DynamicPanel',
+      container: true,
+      // Default items container
+      items: [],
+      config: {
+        name: '',
+        icon: 'fas fa-th-large',
+        settings: {
+          type: 'new',
+          varname: 'dynamic_panel',
+          indexName: '',
+          add: false,
+          emptyStateMessage:  'No data available for this dynamic panel',
+        },
+      },
+      inspector: [
+        {
+          type: 'DynamicPanelInspector',
+          field: 'settings',
+          config: {
+          },
+        },
+      ],
+    },
+  },
   {
     editorComponent: FormText,
     editorBinding: 'FormText',
@@ -1083,7 +1124,9 @@ export default [
         label: "New Link",
         icon: "fas fa-link",
         variant: "primary",
+        variantStyle: "link",
         event: "link",
+        value: "link"
       },
       inspector: [
         {
@@ -1091,7 +1134,7 @@ export default [
           field: 'label',
           config: {
             label: 'Label',
-            helper: 'The label describes the button\'s text',
+            helper: 'The label describes the link\'s text',
           },
         },
         {
@@ -1100,9 +1143,10 @@ export default [
           config: {
             label: 'Link URL',
             helper: 'Type here the URL link. Mustache syntax is supported.',
-          },         
+          },
         },
-        buttonVariantStyleProperty
+        variantStyleProperty,
+        linkVariantStyleProperty
       ]
     }
   },
@@ -1213,5 +1257,30 @@ export default [
         }
       ],
     },
+  },
+  {
+    editorComponent: CaseProgressBar,
+    editorBinding: 'CaseProgressBar',
+    rendererComponent: CaseProgressBar,
+    rendererBinding: 'CaseProgressBar',
+    control: {
+      popoverContent: "Add a progress bar to show the status of a case",
+      order: 7.0,
+      group: 'Dashboards',
+      label: 'Case Progress Bar',
+      component: 'CaseProgressBar',
+      'editor-component': 'CaseProgressBar',
+      'editor-control': 'CaseProgressBar',
+      config: {
+        label: 'New Case Progress Bar',
+        icon: 'fas fa-chart-bar',
+        variant: 'primary',
+        event: 'submit',
+        name: null,
+        fieldValue: null,
+        tooltip: {},
+      },
+      inspector: [],
+    }
   }
 ];

package/src/form-control-common-properties.js

@@ -284,53 +284,76 @@ export const toggleStyleProperty = {
   },
 };
 
+const optionsColor = [
+  {
+    value: "primary",
+    content: "Primary"
+  },
+  {
+    value: "secondary",
+    content: "Secondary"
+  },
+  {
+    value: "success",
+    content: "Success"
+  },
+  {
+    value: "danger",
+    content: "Danger"
+  },
+  {
+    value: "warning",
+    content: "Warning"
+  },
+  {
+    value: "info",
+    content: "Info"
+  },
+  {
+    value: "light",
+    content: "Light"
+  },
+  {
+    value: "dark",
+    content: "Dark"
+  },
+  {
+    value: "link",
+    content: "Link"
+  }
+];
+
 export const buttonVariantStyleProperty = {
-  type: 'FormMultiselect',
-  field: 'variant',
+  type: "FormMultiselect",
+  field: "variant",
   config: {
-    label: 'Button Variant Style',
-    helper: 'The variant determines the appearance of the button',
-    options: [
-      {
-        value: 'primary',
-        content: 'Primary',
-      },
-      {
-        value: 'secondary',
-        content: 'Secondary',
-      },
-      {
-        value: 'success',
-        content: 'Success',
-      },
-      {
-        value: 'danger',
-        content: 'Danger',
-      },
-      {
-        value: 'warning',
-        content: 'Warning',
-      },
-      {
-        value: 'info',
-        content: 'Info',
-      },
-      {
-        value: 'light',
-        content: 'Light',
-      },
+    label: "Button Variant Style",
+    helper: "The variant determines the appearance of the button",
+    options: optionsColor
+  }
+};
 
-      {
-        value: 'dark',
-        content: 'Dark',
-      },
+export const linkVariantStyleProperty = {
+  type: "FormMultiselect",
+  field: "variant",
+  config: {
+    label: "Link Variant Style",
+    helper: "The variant determines the appearance of the link",
+    options: optionsColor
+  }
+};
 
-      {
-        value: 'link',
-        content: 'Link',
-      },
-    ],
-  },
+export const variantStyleProperty = {
+  type: "FormMultiselect",
+  field: "variantStyle",
+  config: {
+    label: "Variant Style",
+    helper: "The variant determines the appearance of the link",
+    options: [
+      { value: "link", content: "Link" },
+      { value: "button", content: "Button" }
+    ]
+  }
 };
 
 export const defaultValueProperty = {