@processmaker/screen-builder 2.83.1 → 2.83.3

package/src/components/renderer/add-loop-row.vue

@@ -1,18 +1,36 @@
 <template>
   <div>
-    <b-row class="justify-content-start" v-if="error">
+    <b-row v-if="error" class="justify-content-start">
       <b-col md="auto">
         <div class="invalid-feedback d-block">{{ error }}</div>
       </b-col>
     </b-row>
 
-    <b-row class="justify-content-md-center"  v-if="value && config.settings.add">
+    <b-row
+      v-if="value && config.settings.add"
+      class="justify-content-md-center"
+    >
       <b-col md="auto">
-        <b-button size="sm" variant="secondary" class="ml-1 mr-1" @click="add" :title="$t('Add Item')" :data-cy="`loop-${config.name}-add`">
-          <i class="fas fa-plus"/>
+        <b-button
+          size="sm"
+          variant="secondary"
+          class="ml-1 mr-1"
+          :title="$t('Add Item')"
+          :data-cy="`loop-${config.name}-add`"
+          @click="add"
+        >
+          <i class="fas fa-plus" />
         </b-button>
-        <b-button v-if="value.length > 0" size="sm" variant="outline-danger" class="ml-1 mr-1" @click="removeConfirm" :title="$t('Delete Item')" :data-cy="`loop-${config.name}-remove`">
-          <i class="fas fa-minus"/>
+        <b-button
+          v-if="value.length > 0"
+          size="sm"
+          variant="outline-danger"
+          class="ml-1 mr-1"
+          :title="$t('Delete Item')"
+          :data-cy="`loop-${config.name}-remove`"
+          @click="removeConfirm"
+        >
+          <i class="fas fa-minus" />
         </b-button>
       </b-col>
     </b-row>
@@ -20,13 +38,11 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
-
 export default {
   props: {
     value: Array,
     config: Object,
-    error: String,
+    error: String
   },
   methods: {
     async add() {
@@ -34,19 +50,14 @@ export default {
     },
     remove() {
       const removed = this.value.pop();
-      this.$root.$emit('removed-loop', this, removed);
+      this.$root.$emit("removed-loop", this, removed);
     },
     removeConfirm() {
-      const message = this.$t('Are you sure you want to delete this?');
-      window.ProcessMaker.confirmModal(
-        this.$t('Caution!'),
-        message,
-        '',
-        () => {
-          this.remove();
-        }
-      );
-    },
-  },
+      const message = this.$t("Are you sure you want to delete this?");
+      window.ProcessMaker.confirmModal(this.$t("Caution!"), message, "", () => {
+        this.remove();
+      });
+    }
+  }
 };
 </script>

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

@@ -1,24 +1,18 @@
 <template>
-  <div class="container mt-4">
-    <div class="card">
-      <div
-        class="card-header d-flex justify-content-between align-items-center"
-      >
-        <span class="control-text">{{ title }}</span>
-        <b-link @click="openExternalLink">
-          <i class="fas fa-external-link-alt custom-icon" />
-        </b-link>
-      </div>
-      <div>
-        <div class="d-flex flex-wrap p-2">
-          <template>
-            <b-col cols="12">
-              <b-card-text>
-                <b-embed type="iframe" :src="graphic.link"></b-embed>
-              </b-card-text>
-            </b-col>
-          </template>
-        </div>
+  <div class="card" :style="customStyle">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <span class="mb-2 mt-2 control-text">{{ title }}</span>
+      <b-link @click="openExternalLink">
+        <i class="fas fa-external-link-alt custom-icon" />
+      </b-link>
+    </div>
+    <div>
+      <div class="d-flex flex-wrap p-2">
+        <b-col cols="12">
+          <b-card-text>
+            <b-embed type="iframe" :src="graphic.link"></b-embed>
+          </b-card-text>
+        </b-col>
       </div>
     </div>
   </div>
@@ -30,14 +24,12 @@ export default {
   data() {
     return {
       title: this.$t("Analytics Chart"),
-      graphic: []
+      graphic: [],
+      customStyle: {
+        "border-radius": "8px"
+      }
     };
   },
-  methods: {
-    openExternalLink() {
-      window.open("/package-analytics-reporting", "_blank");
-    }
-  },
   watch: {
     listChartOption() {
       if (this.listChartOption && this.listChartOption.name) {
@@ -49,6 +41,11 @@ export default {
     if (this.listChartOption && this.listChartOption.name) {
       this.graphic = this.listChartOption;
     }
+  },
+  methods: {
+    openExternalLink() {
+      window.open("/package-analytics-reporting", "_blank");
+    }
   }
 };
 </script>

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="card mt-4 mb-4">
+  <div class="card" :style="customStyle">
     <div class="card-header d-flex justify-content-between align-items-center">
       <template v-if="dataControl.showControl">
-        <div class="mb-2">
+        <div class="mb-1 mt-1">
           <b-avatar
             v-if="dataControl.showAvatar"
             size="2em"
@@ -10,11 +10,11 @@
             :text="dataControl.count"
             class="avatar-text"
           ></b-avatar>
-          <p class="control-text" :style="dataControl.colorText">
+          <p class="control-text mb-0" :style="dataControl.colorText">
             {{ title }}
           </p>
           <template v-if="dataControl.dropdownShow === 'requests'">
-            <b-dropdown variant="custom" no-caret>
+            <b-dropdown variant="outline-secondary" no-caret>
               <template #button-content>
                 <i class="fas fa-caret-down" />
               </template>
@@ -38,9 +38,16 @@
       <div class="ml-auto d-flex align-items-center">
         <template v-if="dataControl.dropdownShow === 'requests'">
           <div class="mr-4">
-            <b-dropdown variant="secondary" size="sm">
+            <b-dropdown variant="outline-secondary" size="sm">
               <template #button-content>
-                <span>{{ $t(titleDropdown) }}</span>
+                <span>
+                  <b-icon
+                    v-if="showBadge"
+                    icon="circle-fill"
+                    :variant="badgeVariant"
+                  />
+                  {{ $t(titleDropdown) }}
+                </span>
               </template>
               <b-dropdown-item
                 variant="success"
@@ -61,37 +68,38 @@
               <b-dropdown-item
                 @click="handleDropdownSelection('requests_dropdown', 'all')"
               >
-                {{ $t(titleDropdown) }}
+                {{ $t("View All") }}
               </b-dropdown-item>
             </b-dropdown>
           </div>
         </template>
         <template v-if="dataControl.dropdownShow === 'tasks'">
           <div class="mr-4">
-            <b-dropdown variant="secondary" size="sm">
+            <b-dropdown variant="outline-secondary" size="sm">
               <template #button-content>
-                <span>{{ $t(titleDropdown) }}</span>
+                <span>
+                  <b-icon
+                    v-if="showBadge"
+                    icon="circle-fill"
+                    :variant="badgeVariant"
+                  />
+                  {{ $t(titleDropdown) }}
+                </span>
               </template>
               <b-dropdown-item
+                variant="warning"
                 @click="handleDropdownSelection('tasks', 'In Progress')"
               >
-                <AvatarDropdown
-                  :variant="'warning'"
-                  :text="countInProgress"
-                  :label="'In Progress'"
-                ></AvatarDropdown>
+                <i class="fas fa-circle mr-2" />{{ $t("In Progress") }}
               </b-dropdown-item>
               <b-dropdown-item
+                variant="danger"
                 @click="handleDropdownSelection('tasks', 'Overdue')"
               >
-                <AvatarDropdown
-                  :variant="'danger'"
-                  :text="countOverdue"
-                  :label="'Overdue'"
-                ></AvatarDropdown>
+                <i class="fas fa-circle mr-2" />{{ $t("Overdue") }}
               </b-dropdown-item>
               <b-dropdown-item @click="handleDropdownSelection('tasks', 'all')">
-                {{ $t(titleDropdown) }}
+                {{ $t("View All") }}
               </b-dropdown-item>
             </b-dropdown>
           </div>
@@ -99,7 +107,7 @@
         <div>
           <div class="d-flex justify-content-end">
             <button
-              class="btn btn-outline-primary border-0 mr-1"
+              class="btn btn-outline-secondary border-0 mr-1"
               @click="toggleInput(dataControl.dropdownShow)"
             >
               <i class="fas fa-search" />
@@ -146,10 +154,9 @@
 import FormTasks from "./form-tasks.vue";
 import FormRequests from "./form-requests.vue";
 import FormNewRequest from "./form-new-request.vue";
-import AvatarDropdown from "./avatar-dropdown.vue";
 
 export default {
-  components: { FormTasks, FormRequests, FormNewRequest, AvatarDropdown },
+  components: { FormTasks, FormRequests, FormNewRequest },
   mixins: [],
   props: ["listOption"],
   data() {
@@ -157,13 +164,18 @@ export default {
       optionRequest: "by_me",
       dropdownRequest: "In Progress",
       titleDropdown: "View All",
-      countInProgress: "0",
-      countOverdue: "0",
+      viewAll: "View All",
       title: this.$t("List Table"),
       dataControl: {},
       searchCriteria: "",
       showInput: false,
-      pmql: ""
+      pmql: "",
+      badgeVariant: "",
+      typeSelected: "",
+      showBadge: false,
+      customStyle: {
+        "border-radius": "8px"
+      }
     };
   },
   watch: {
@@ -178,16 +190,18 @@ export default {
   methods: {
     getData(data) {
       this.dataControl = data.dataControls;
-      this.countOverdue = data.tasksDropdown[0];
-      this.countInProgress = data.tasksDropdown[1];
     },
     openExternalLink() {
       window.open(this.dataControl.url, "_blank");
     },
     handleDropdownSelection(listType, valueSelected) {
       const combinedFilter = [];
+      this.typeSelected = listType;
       if (listType === "tasks") {
         this.$root.$emit("dropdownSelectionTask", valueSelected);
+        this.titleDropdown =
+          valueSelected === "all" ? this.viewAll : valueSelected;
+        this.colorBadge();
       } else {
         if (listType === "requests_filter") {
           this.optionRequest = valueSelected;
@@ -199,6 +213,9 @@ export default {
           }
         }
         if (listType === "requests_dropdown") {
+          this.titleDropdown =
+            valueSelected === "all" ? this.viewAll : valueSelected;
+          this.colorBadge();
           this.dropdownRequest = valueSelected;
         }
         combinedFilter.push(this.optionRequest);
@@ -233,6 +250,36 @@ export default {
     clearSearch(listType) {
       this.searchCriteria = "";
       this.toggleInput(listType);
+    },
+    /**
+     * Set the badge's color of the filter selected
+     */
+    colorBadge() {
+      if (this.titleDropdown === "In Progress") {
+        if (this.typeSelected === "tasks") {
+          this.badgeVariant = "warning";
+        }
+        if (this.typeSelected === "requests_dropdown") {
+          this.badgeVariant = "success";
+        }
+        this.showBadge = true;
+      }
+      if (this.titleDropdown === "Overdue") {
+        this.badgeVariant = "danger";
+        this.showBadge = true;
+      }
+      if (this.titleDropdown === "Overdue") {
+        this.badgeVariant = "danger";
+        this.showBadge = true;
+      }
+      if (this.titleDropdown === "Completed") {
+        this.badgeVariant = "primary";
+        this.showBadge = true;
+      }
+      if (this.titleDropdown === "View All" || this.titleDropdown === "all") {
+        this.badgeVariant = "";
+        this.showBadge = false;
+      }
     }
   }
 };
@@ -276,7 +323,7 @@ export default {
   overflow: auto;
 }
 
-.btn-custom {
-  background-color: #f7f7f7;
+.btn-outline-secondary {
+  border: none;
 }
 </style>

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

@@ -9,21 +9,34 @@
         :watchers="null"
         :is-loop="true"
         :debug-context="'Loop #' + loopIndex"
-        @submit="submit"
-        @pageNavigate="$emit('pageNavigate', $event)"
-        @update="setMatrixValue(loopIndex, $event)"
         :mode="mode"
         :loop-context="getLoopContext(loopIndex)"
         :form-config="formConfig"
+        @submit="submit"
+        @pageNavigate="$emit('pageNavigate', $event)"
+        @update="setMatrixValue(loopIndex, $event)"
       />
     </form>
-    <b-row class="justify-content-md-center" v-if="config.settings.add">
+    <b-row v-if="config.settings.add" class="justify-content-md-center">
       <b-col md="auto">
-        <b-button size="sm" variant="secondary" class="ml-1 mr-1" @click="add" :title="$t('Add Item')">
-          <i class="fas fa-plus"/>
+        <b-button
+          size="sm"
+          variant="secondary"
+          class="ml-1 mr-1"
+          :title="$t('Add Item')"
+          @click="add"
+        >
+          <i class="fas fa-plus" />
         </b-button>
-        <b-button v-if="times.length > 0" size="sm" variant="outline-danger" class="ml-1 mr-1" @click="removeConfirm" :title="$t('Delete Item')">
-          <i class="fas fa-minus"/>
+        <b-button
+          v-if="times.length > 0"
+          size="sm"
+          variant="outline-danger"
+          class="ml-1 mr-1"
+          :title="$t('Delete Item')"
+          @click="removeConfirm"
+        >
+          <i class="fas fa-minus" />
         </b-button>
       </b-col>
     </b-row>
@@ -31,27 +44,31 @@
 </template>
 
 <script>
-import Mustache from 'mustache';
-import _ from 'lodash';
+import Mustache from "mustache";
+import _ from "lodash";
+import VueFormRenderer from "../vue-form-renderer.vue";
 
 export default {
-  name: 'FormLoop',
+  name: "FormLoop",
+  components: {
+    VueFormRenderer
+  },
   mixins: [],
-  props: ['value', 'config', 'transientData', 'name', 'mode', 'formConfig'],
+  props: ["value", "config", "transientData", "name", "mode", "formConfig"],
   data() {
     return {
       matrix: [],
       items: [],
       additionalItems: 0,
       transientDataCopy: null,
-      parentObjectChanges: [],
+      parentObjectChanges: []
     };
   },
   computed: {
     parentLoopContext() {
       let parent = this.$parent;
       let i = 0;
-      let context = '';
+      let context = "";
       while (!parent.loopContext) {
         parent = parent.$parent;
 
@@ -59,9 +76,9 @@ export default {
           parent = null;
           break;
         }
-        
+
         if (i > 100) {
-          throw 'Loop Error';
+          throw new Error("Loop Error");
         }
 
         i++;
@@ -74,18 +91,20 @@ export default {
       return context;
     },
     rendererConfig() {
-      let items = this.items;
-      return [{
-        name: 'LoopItem',
-        items,
-      }];
+      const { items } = this;
+      return [
+        {
+          name: "LoopItem",
+          items
+        }
+      ];
     },
     times() {
       if (!this.config || !this.config.settings) {
         return [];
       }
 
-      if (this.config.settings.type === 'existing') {
+      if (this.config.settings.type === "existing") {
         const itemsFromData = _.get(this.transientData, this.name, null);
         if (!itemsFromData) {
           return [];
@@ -93,11 +112,13 @@ export default {
         return [...itemsFromData.keys()];
       }
 
-      let times = this.config.settings.times;
+      let { times } = this.config.settings;
 
       try {
         times = Mustache.render(times, this.transientData);
-      } catch (error) { error; }
+      } catch (error) {
+        throw new Error(error);
+      }
 
       times = parseInt(times);
 
@@ -112,7 +133,7 @@ export default {
       times += this.additionalItems;
 
       return [...Array(times).keys()];
-    },
+    }
   },
   watch: {
     transientData: {
@@ -120,7 +141,7 @@ export default {
         this.transientDataCopy = _.cloneDeep(this.transientData);
         this.$delete(this.transientDataCopy, this.name);
 
-        const data = _.get(this, 'transientData.' + this.name, null);
+        const data = _.get(this, `transientData.${this.name}`, null);
         if (data && Array.isArray(data)) {
           this.matrix = data;
         } else {
@@ -128,82 +149,92 @@ export default {
         }
         this.setupMatrix();
       },
-      immediate: true,
+      immediate: true
     },
     value: {
       handler() {
         this.items = this.value;
       },
-      immediate: true,
+      immediate: true
     },
     matrix: {
       handler() {
         if (_.isEqual(this.$parent.transientData[this.name], this.matrix)) {
           return;
         }
-        this.$set(this.$parent.transientData, this.name, _.cloneDeep(this.matrix));
+        this.$set(
+          this.$parent.transientData,
+          this.name,
+          _.cloneDeep(this.matrix)
+        );
       },
-      deep: true,
+      deep: true
     },
     times() {
       this.setupMatrix();
     },
-    'config.settings.times': {
+    "config.settings.times": {
       handler() {
         this.additionalItems = 0;
-      },
-    },
+      }
+    }
+  },
+  mounted() {
+    this.$set(this.$parent.transientData, this.name, _.cloneDeep(this.matrix));
   },
   methods: {
     getLoopContext(i) {
-      let context = this.name + '.' + i.toString();
-      if (this.parentLoopContext !== '') {
-        context = this.parentLoopContext + '.' + context;
+      let context = `${this.name}.${i.toString()}`;
+      if (this.parentLoopContext !== "") {
+        context = `${this.parentLoopContext}.${context}`;
       }
       return context;
     },
     add() {
-      if (this.config.settings.type === 'existing') {
+      if (this.config.settings.type === "existing") {
         this.setMatrixValue(this.matrix.length, {});
       } else {
         this.additionalItems++;
       }
     },
     remove() {
-      if (this.config.settings.type === 'existing') {
+      if (this.config.settings.type === "existing") {
         this.$delete(this.matrix, this.matrix.length - 1);
       } else {
         this.additionalItems--;
       }
     },
     removeConfirm() {
-      const message = this.$t('Are you sure you want to delete this?');
-      window.ProcessMaker.confirmModal(
-        this.$t('Caution!'),
-        message,
-        '',
-        () => {
-          this.remove();
-        }
-      );
+      const message = this.$t("Are you sure you want to delete this?");
+      window.ProcessMaker.confirmModal(this.$t("Caution!"), message, "", () => {
+        this.remove();
+      });
     },
     setMatrixValue(i, v) {
-      let item = _.omit(v, '_parent');
+      const item = _.omit(v, "_parent");
       this.registerParentVariableChanges(v);
       this.$set(this.matrix, i, item);
       this.setChagnedParentVariables();
     },
     registerParentVariableChanges(obj) {
       if (obj._parent) {
-        Object.keys(obj._parent).forEach(parentKey => {
-          if (!_.isEqual(this.transientDataCopy[parentKey], obj._parent[parentKey])) {
-            this.parentObjectChanges.push({key: parentKey, value: obj._parent[parentKey]});
+        Object.keys(obj._parent).forEach((parentKey) => {
+          if (
+            !_.isEqual(
+              this.transientDataCopy[parentKey],
+              obj._parent[parentKey]
+            )
+          ) {
+            this.parentObjectChanges.push({
+              key: parentKey,
+              value: obj._parent[parentKey]
+            });
           }
         });
       }
     },
     setChagnedParentVariables() {
-      this.parentObjectChanges.forEach(change => {
+      this.parentObjectChanges.forEach((change) => {
         this.$set(this.$parent.transientData, change.key, change.value);
       });
       this.parentObjectChanges = [];
@@ -213,13 +244,13 @@ export default {
       if (!val) {
         val = {};
       }
-      
+
       val._parent = _.cloneDeep(this.transientDataCopy);
       return val;
     },
     setupMatrix() {
       for (const i of this.times) {
-        if (typeof this.matrix[i] === 'undefined') {
+        if (typeof this.matrix[i] === "undefined") {
           this.setMatrixValue(i, {});
         }
       }
@@ -230,11 +261,8 @@ export default {
     },
     submit() {
       // Just bubble up
-      this.$emit('submit');
-    },
-  },
-  mounted() {
-    this.$set(this.$parent.transientData, this.name, _.cloneDeep(this.matrix));
-  },
+      this.$emit("submit");
+    }
+  }
 };
 </script>

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

@@ -51,7 +51,7 @@ import {
   getUserDateTimeFormat,
   ValidationMixin
 } from "@processmaker/vue-form-elements";
-import Inputmasked from "./form-input-masked";
+import Inputmasked from "./form-input-masked.vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 const componentTypes = {