@processmaker/screen-builder 2.83.2 → 2.83.4

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/file-upload.vue

@@ -5,7 +5,7 @@
       {{ $t('File uploads are unavailable in preview mode.') }}
     </b-card>
     <uploader
-      v-else
+      v-if="!inPreviewMode && showComponent"
       :options="options"
       :attrs="attrs"
       ref="uploader"
@@ -106,6 +106,10 @@ export default {
 
     this.$root.$on('removed-loop',
       (loop, removed) => this.listenRemovedLoop(loop, removed));
+    
+    window.ProcessMaker.EventBus.$on("modal-shown", () => {
+      this.clearFiles();
+    });
 
     this.removeDefaultClasses();
 
@@ -297,9 +301,16 @@ export default {
       nativeFiles: {},
       uploading: false,
       invalidFile: false,
+      showComponent: true,
     };
   },
   methods: {
+    clearFiles() {
+      this.showComponent = false;
+      this.$nextTick(() => {
+        this.showComponent = true;
+      });
+    },
     uploaderLoaded() {
       return this.$refs['uploader'];
     },

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>