@processmaker/screen-builder 2.90.0 → 2.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.90.0",
+  "version": "2.91.0",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -56,7 +56,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.56.0",
+    "@processmaker/vue-form-elements": "0.57.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -115,7 +115,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.56.0",
+    "@processmaker/vue-form-elements": "0.57.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/DataProvider.js

@@ -71,18 +71,38 @@ export default {
 
   // Methods below are used in the components
 
-  getTasks(params) {
+  async getTasks(params) {
     const endpoint = get(
       window,
       "PM4ConfigOverrides.getTasksEndpoint",
-      "/tasks"
+      "/api/1.1/tasks"
     );
-    return this.get(endpoint + params).then((response) => {
-      if (response.data.screen && response.data.screen.nested) {
-        this.addNestedScreenCache(response.data.screen.nested);
-      }
-      return response;
-    });
+    const promises = [];
+    const hasIncludeScreen = params.match(/include=.*,screen,/);
+    const hasIncludeNested = params.match(/include=.*,nested,/);
+
+    // remove params ?...
+    promises.push(
+      this.get(endpoint + params.replace(/,screen,|,nested,/g, ","))
+    );
+    // Get the screen from a separated cached endpoint
+    if (hasIncludeScreen) {
+      const screenEndpoint = `${(endpoint + params).replace(
+        /\?.+$/,
+        ""
+      )}/screen?include=screen${hasIncludeNested ? ",nested" : ""}`;
+      promises.push(this.get(screenEndpoint));
+    }
+    // Await for both promises to resolve
+    const [taskData, taskScreen] = await Promise.all(promises);
+    const response = taskData;
+    if (taskScreen) {
+      response.data.screen = taskScreen.data;
+    }
+    if (response.data.screen && response.data.screen.nested) {
+      this.addNestedScreenCache(response.data.screen.nested);
+    }
+    return response;
   },
   addNestedScreenCache(nested) {
     nested.forEach((screen) => {

package/src/assets/icons/Bypass.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2632 7.10528H16M16 7.10528L14.0263 9.07896M16 7.10528L15.0132 6.11843L14.0263 5.13159" stroke="#6A7888" stroke-width="1.5" stroke-linecap="round"/>
+<rect x="3.4791" y="0.9" width="7.67368" height="12.4105" rx="1.1" stroke="#6A7888" stroke-width="1.8"/>
+<path d="M1 6.20522C0.502944 6.20522 0.1 6.60817 0.1 7.10522C0.1 7.60228 0.502944 8.00522 1 8.00522L1 6.20522ZM1 8.00522L7.31579 8.00523L7.31579 6.20523L1 6.20522L1 8.00522Z" fill="#6A7888"/>
+</svg>

package/src/assets/icons/Unbypass.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7H18M18 7L15.5 9M18 7L16.75 6L15.5 5" stroke="#6A7888" stroke-width="1.5" stroke-linecap="round"/>
+<rect x="4.4791" y="0.9" width="7.67368" height="12.4105" rx="1.1" stroke="#6A7888" stroke-width="1.8"/>
+<path d="M1 6.1C0.502944 6.1 0.1 6.50294 0.1 7C0.1 7.49706 0.502944 7.9 1 7.9V6.1ZM1 7.9H13V6.1H1V7.9Z" fill="#6A7888"/>
+</svg>

package/src/components/accordions.js

@@ -13,6 +13,7 @@ export default [
       'initiallyChecked',
       'screen',
       'multipleUpload',
+      'linkUrl'
     ],
     open: true,
   },

package/src/components/computed-properties.vue

@@ -2,111 +2,124 @@
   <b-modal
     id="computed-properties"
     ref="modal"
-    size="lg"
-    :title="$t('Calculated Properties')"
+    :size="modalSize"
     content-class="p-3"
     header-class="m-0 p-0 mb-3"
     body-class="m-0 p-0"
     title-class="m-0"
-    footer-class="m-0 p-0"
+    footer-class="m-0 p-0 border-0"
     no-close-on-backdrop
     header-close-content="&times;"
     data-cy="calcs-modal"
     @hidden="displayTableList"
   >
+    <template #modal-title>
+      <h5 class="modal-title">{{ $t('Calculated Properties') }}</h5>
+      <small v-show="!displayList" class="modal-subtitle my-2">
+        {{
+          $t(
+            'Perform mathematical calculations offering quick, convenient, and accurate operations, enhancing user efficiency and usability.',
+          )
+        }}
+      </small>
+    </template>
     <template v-if="displayList">
-      <div class="d-flex align-items-end flex-column mb-3">
-        <button
-          type="button"
-          class="btn btn-secondary"
-          data-cy="calcs-add-property"
-          @click.stop="displayFormProperty"
-        >
-          <i class="fas fa-plus" /> {{ $t("Property") }}
-        </button>
-      </div>
-      <div class="card card-body table-card">
-        <b-table
-          :css="css"
-          :fields="fields"
-          :items="current"
-          :empty-text="$t('No Data Available')"
-          data-cy="calcs-table"
-        >
-          <template #cell(__actions)="{ item }">
-            <div class="actions">
-              <div class="popout">
-                <b-btn
-                  v-b-tooltip.hover
-                  variant="link"
-                  :title="$t('Edit')"
-                  data-cy="calcs-table-edit"
-                  @click="editProperty(item)"
-                >
-                  <i class="fas fa-edit fa-lg fa-fw" />
-                </b-btn>
-                <b-btn
-                  v-b-tooltip.hover
-                  variant="link"
-                  :title="$t('Delete')"
-                  data-cy="calcs-table-remove"
-                  @click="deleteProperty(item)"
-                >
-                  <i class="fas fa-trash-alt fa-lg fa-fw" />
-                </b-btn>
-              </div>
-            </div>
-          </template>
-        </b-table>
-      </div>
+      <Sortable
+        class="mb-3"
+        :fields="fields"
+        :items="current"
+        disable-key="byPass"
+        :inline-edit="false"
+        :data-test-actions="{
+          tableBox: { 'data-cy': 'calcs-table' },
+          btnNew: { 'data-cy': 'calcs-add-property' },
+          btnEdit: { 'data-cy': 'calcs-table-edit' },
+          btnDelete: { 'data-cy': 'calcs-table-remove' },
+        }"
+        @item-edit="editProperty"
+        @item-delete="deleteProperty"
+        @add-page="displayFormProperty"
+        :searchProperties= "searchProperties"
+      >
+        <template #options="{ item }">
+          <button
+            v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
+            :title="item.byPass ? $t('Unbypass Calc') : $t('Bypass Calc')"
+            class="btn"
+            data-test="calcs-bypass"
+            @click="toggleBypass(item.id)"
+          >
+            <img :src="getByPassIcon(item)" alt="Bypass" width="24" />
+          </button>
+          <div class="sortable-item-vr"></div>
+        </template>
+      </Sortable>
+
       <template slot="modal-footer">
-        <span />
+        <div class="d-flex align-items-end">
+          <button
+            class="btn btn-secondary ml-3 text-uppercase"
+            data-cy="calcs-button-close"
+            @click="$refs.modal.hide()"
+          >
+            {{ $t("Done") }}
+          </button>
+        </div>
       </template>
     </template>
 
     <template v-else>
-      <required />
-      <form-input
-        ref="property"
-        v-model="add.property"
-        :label="$t('Property Name') + ' *'"
-        name="property"
-        :error="errors.property"
-        class="mb-3"
-        data-cy="calcs-property-name"
-        required
-        aria-required="true"
-      />
-      <form-text-area
-        ref="name"
-        v-model="add.name"
-        :label="$t('Description') + ' *'"
-        name="name"
-        :error="errors.name"
-        class="mb-3"
-        data-cy="calcs-property-description"
-        required
-        aria-required="true"
-      />
+      <b-row>
+        <b-col>
+          <form-input
+            ref="property"
+            v-model="add.property"
+            :label="$t('Property Name') + ' *'"
+            name="property"
+            :error="errors.property"
+            class="mb-3 calcs-input"
+            data-cy="calcs-property-name"
+            required
+            aria-required="true"
+          />
+        </b-col>
+        <b-col>
+          <form-text-area
+            ref="name"
+            v-model="add.name"
+            :label="$t('Description') + ' *'"
+            name="name"
+            :error="errors.name"
+            class="mb-3 calcs-input"
+            data-cy="calcs-property-description"
+            required
+            aria-required="true"
+          />
+        </b-col>
+      </b-row>
+
       <div class="form-group mb-3" style="position: relative">
-        <label v-show="isJS">{{ $t("Formula") + " *" }}</label>
-        <div class="float-right">
-          <a
-            class="btn btn-sm"
-            :class="expressionTypeClass"
-            data-cy="calcs-switch-formula"
-            @click="switchExpressionType('expression')"
-          >
-            <i class="fas fa-square-root-alt" />
-          </a>
-          <a
-            class="btn btn-sm"
-            :class="javascriptTypeClass"
-            data-cy="calcs-switch-javascript"
-            @click="switchExpressionType('javascript')"
-          >
-            <i class="fab fa-js-square" />
-          </a>
+        <div class="d-flex justify-content-between mb-1">
+          <label class="m-0">{{ $t('Formula') + ' *' }}</label>
+
+          <div>
+            <a
+              class="btn btn-sm"
+              :class="expressionTypeClass"
+              data-cy="calcs-switch-formula"
+              @click="switchExpressionType('expression')"
+            >
+              <i class="fas fa-square-root-alt" />
+            </a>
+            <a
+              class="btn btn-sm"
+              :class="javascriptTypeClass"
+              data-cy="calcs-switch-javascript"
+              @click="switchExpressionType('javascript')"
+            >
+              <i class="fab fa-js-square fa-lg"></i>
+            </a>
+          </div>
         </div>
 
         <form-text-area
@@ -114,12 +127,12 @@
           ref="formula"
           v-model="add.formula"
           rows="5"
-          :label="$t('Formula') + ' *'"
           name="formula"
           :error="errors.formula"
           data-cy="calcs-property-formula"
           required
           aria-required="true"
+          class="calcs-input-formula"
         />
         <div
           v-show="isJS"
@@ -144,14 +157,14 @@
       <template slot="modal-footer">
         <div class="d-flex align-items-end">
           <button
-            class="btn btn-outline-secondary"
+            class="btn btn-outline-secondary text-uppercase"
             data-cy="calcs-button-cancel"
             @click="displayTableList"
           >
             {{ $t("Cancel") }}
           </button>
           <button
-            class="btn btn-secondary ml-3"
+            class="btn btn-secondary ml-3 text-uppercase"
             data-cy="calcs-button-save"
             @click="validateData"
           >
@@ -168,12 +181,16 @@ import { FormInput, FormTextArea } from "@processmaker/vue-form-elements";
 import MonacoEditor from "vue-monaco";
 import Validator from "@chantouchsek/validatorjs";
 import FocusErrors from "../mixins/focusErrors";
+import Sortable from './sortable/Sortable.vue';
+
+const globalObject = typeof window === 'undefined' ? global : window;
 
 export default {
   components: {
     FormInput,
     FormTextArea,
-    MonacoEditor
+    MonacoEditor,
+    Sortable,
   },
   mixins: [FocusErrors],
   props: ["value"],
@@ -208,18 +225,23 @@ export default {
       },
       fields: [
         {
-          label: this.$t("Property Name"),
-          key: "property"
+          label: this.$t("Name"),
+          key: "property",
         },
         {
-          label: this.$t("Description"),
-          key: "name"
+          label: this.$t("Type"),
+          key: "type",
+          cb: (value) => {
+            switch (value) {
+              case 'expression':
+                return 'Formula';
+              case 'javascript':
+                return 'JavaScript';
+              default:
+                return value;
+            }
+          },
         },
-        {
-          key: "__actions",
-          label: "",
-          class: "text-right"
-        }
       ],
       monacoOptions: {
         automaticLayout: true,
@@ -227,7 +249,8 @@ export default {
         minimap: false
       },
       monacoEditor: null,
-      errors: {}
+      errors: {},
+      searchProperties: ['property', 'type'],
     };
   },
   computed: {
@@ -251,16 +274,24 @@ export default {
     },
     isJS() {
       return this.add.type === "javascript";
-    }
+    },
+    modalSize() {
+      return this.displayList ? 'lg' : 'xl';
+    },
   },
   watch: {
     value() {
       this.value.forEach((item) => {
         this.numberItem++;
         item.id = this.numberItem;
+
+        if (!Object.hasOwn(item, 'byPass')) {
+          item.byPass = false;
+        }
       });
+
       this.current = this.value;
-    }
+    },
   },
   created() {
     Validator.register(
@@ -334,6 +365,13 @@ export default {
         this.focusFirstCalculatedPropertiesError();
       }
     },
+    toggleBypass(itemId) {
+      this.current = this.current.map((item) =>
+        item.id === itemId ? { ...item, byPass: !item.byPass } : item,
+      );
+
+      this.$emit("input", this.current);
+    },
     saveProperty() {
       if (this.add.id === 0) {
         this.numberItem++;
@@ -342,7 +380,8 @@ export default {
           property: this.add.property,
           name: this.add.name,
           formula: this.add.formula,
-          type: this.add.type
+          type: this.add.type,
+          byPass: false,
         });
       } else {
         this.current.forEach((item) => {
@@ -367,6 +406,16 @@ export default {
       this.displayList = false;
     },
     deleteProperty(item) {
+      globalObject.ProcessMaker.confirmModal(
+        this.$t('Are you sure you want to delete the calc ?'),
+        this.$t('If you do, you wont be able to recover the calc configuration.'),
+        '',
+        () => {
+          this.remove(item);
+        }
+      );
+    },
+    remove(item) {
       this.current = this.current.filter((val) => {
         return val.id !== item.id;
       });
@@ -375,22 +424,28 @@ export default {
     },
     editorMounted(editor) {
       this.monacoEditor = editor;
-    }
+    },
+    getByPassIcon(item) {
+      return new URL(
+        `../assets/icons/${item.byPass ? 'Unbypass' : 'Bypass'}.svg`,
+        import.meta.url,
+      ).href;
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .editor {
-  height: 8.5em;
+  height: 430px;
   z-index: 0;
 }
 
 .editor-border {
-  border: 1px solid #ced4da;
+  border: 1px solid #CDDDEE;
   border-radius: 4px;
   overflow: hidden;
-  height: 8.8em;
+  height: 430px;
   position: absolute;
   pointer-events: none;
   width: 100%;
@@ -400,4 +455,50 @@ export default {
 .editor-border.is-invalid {
   border-color: #dc3545;
 }
+
+.bypass-btn-tooltip::v-deep {
+  & .tooltip-inner {
+    background-color: #EBEEF2 !important;
+    color: #444444 !important;
+  }
+
+  & .arrow:before {
+    border-top-color: #EBEEF2 !important;
+    border-bottom-color: #EBEEF2 !important;
+  }
+}
+
+.modal-subtitle {
+  display: block;
+  color: #556271;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.calcs-input::v-deep {
+  & > .form-control {
+    height: 86px;
+    border-color: #CDDDEE;
+  }
+
+  & > input.form-control {
+    padding-bottom: 52px;
+  }
+
+  & > textarea.form-control {
+    resize: none;
+  }
+}
+
+.calcs-input-formula::v-deep {
+  & > textarea.form-control {
+    height: 430px;
+    border-color: #CDDDEE;
+    resize: none;
+  }
+
+  & > label {
+    display: none;
+  }
+}
 </style>

package/src/components/index.js

@@ -47,6 +47,7 @@ import FormListTable from "./renderer/form-list-table.vue";
 import FormAnalyticsChart from "./renderer/form-analytics-chart.vue";
 import accordions from "@/components/accordions";
 import VariableNameGenerator from "@/components/VariableNameGenerator";
+import { LinkButton } from "./renderer";
 import "../assets/css/tabs.css";
 
 const rendererComponents = {
@@ -161,6 +162,7 @@ export default {
 
     Vue.use(Vuex);
     Vue.component("FormListTable", FormListTable);
+    Vue.component("LinkButton", LinkButton);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,

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

@@ -122,6 +122,7 @@
     </div>
     <div class="card-body list-table">
       <template v-if="listOption === 'My Tasks'">
+        <Recommendations :dashboard="true" />
         <FormTasks @tasksCount="getData"></FormTasks>
       </template>
       <template v-if="verifyListCase()">
@@ -139,8 +140,12 @@ import FormTasks from "./form-tasks.vue";
 import FormRequests from "./form-requests.vue";
 import FormNewRequest from "./form-new-request.vue";
 
+const Recommendations = (resolve) => {
+  resolve(window.SharedComponents?.Recommendations || { template: "<span></span>" });
+};
+
 export default {
-  components: { FormTasks, FormRequests, FormNewRequest },
+  components: { FormTasks, FormRequests, FormNewRequest, Recommendations },
   mixins: [],
   props: ["listOption"],
   data() {

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

@@ -98,7 +98,7 @@ export default {
   },
   computed: {
     noDataUrl() {
-      return `${window.ProcessMaker?.app?.url}/requests`;
+      return `${window.ProcessMaker?.app?.url}/cases`;
     }
   },
   mounted() {
@@ -167,7 +167,7 @@ export default {
               variant: "primary",
               textColor: "text-primary",
               colorText: "color: #1572C2",
-              url: "/requests",
+              url: "/cases",
               dropdownShow: "requests"
             };
             const tasksDropdown = [];

package/src/components/renderer/index.js

@@ -18,3 +18,4 @@ export { default as FormListTable } from "./form-list-table.vue";
 export { default as FormAnalyticsChart } from "./form-analytics-chart.vue";
 export { default as FormRequests } from "./form-requests.vue";
 export { default as FormTasks } from "./form-tasks.vue";
+export { default as LinkButton } from "./link-button.vue";

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="form-group">
+    <a :class="classColor" :href="inputUrlLink"> {{ label }} </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    "variant",
+    "label",
+    "event",
+    "eventData",
+    "name",
+    "fieldValue",
+    "value",
+    "inputUrlLink"
+  ],
+  computed: {
+    classColor() {
+      return `text-${this.variant}`;
+    }
+  }
+};
+</script>
+<style scoped>
+a {
+  text-decoration: underline;
+}
+</style>