@processmaker/screen-builder 2.99.3 → 3.0.0

package/src/components/ScreenToolbar.vue

@@ -4,7 +4,7 @@
       <b-button
         class="screen-toolbar-button"
         variant="link"
-        :disabled="!canUndo"
+        :disabled="!canUndo || disabled"
         data-cy="toolbar-undo"
         @click="$emit('undo')"
       >
@@ -14,17 +14,27 @@
       <b-button
         class="screen-toolbar-button"
         variant="link"
-        :disabled="!canRedo"
+        :disabled="!canRedo || disabled"
         data-cy="toolbar-redo"
         @click="$emit('redo')"
       >
         <i class="fas fa-redo" />
         {{ $t("Redo") }}
       </b-button>
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        data-cy="screen-templates"
+        @click="$emit('open-templates')"
+      >
+        <i class="fas fa-palette" />
+        {{ $t("Templates") }}
+      </b-button>
       <b-button
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Calculated Properties')"
         data-cy="topbar-calcs"
         @click="$emit('open-calc')"
@@ -36,6 +46,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Custom CSS')"
         data-cy="topbar-css"
         @click="$emit('open-customCss')"
@@ -47,6 +58,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Watchers')"
         data-cy="topbar-watchers"
         @click="$emit('open-watchers')"
@@ -58,6 +70,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="outlined-secondary"
+        :disabled="disabled"
         :popper-opts="{ placement: 'bottom-end' }"
         data-cy="topbar-options"
       >
@@ -77,6 +90,15 @@
 
 <script>
 export default {
+  props: {
+    /**
+     * Whether the toolbar is disabled or not
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       showToolbar: true

package/src/components/SelectUserGroup.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="form-group">
+      <label v-if="label">{{ label }}</label>
+      <multiselect
+          :id="'category-select-' + _uid"
+          v-model="content"
+          track-by="id"
+          label="fullname"
+          group-values="items"
+          group-label="type"
+          :class="{'border border-danger':error}"
+          :loading="loading"
+          :placeholder="placeholder ? placeholder : $t('type here to search')"
+          :options="options"
+          :multiple="multiple"
+          :show-labels="false"
+          :searchable="true"
+          :internal-search="false"
+          @open="load(null)"
+          @input="updateSeletected"
+          @search-change="load">
+
+          <template slot="noResult">
+              <slot name="noResult">{{ $t("No elements found. Consider changing the search query.") }}</slot>
+          </template>
+          <template slot="noOptions">
+              <slot name="noOptions">{{ $t("No Data Available") }}</slot>
+          </template>
+      </multiselect>
+
+      <small v-if="error" class="text-danger">{{ error }}</small>
+      <small v-if="helper" class="form-text text-muted">{{ $t(helper) }}</small>
+
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    value: null,
+    label: {
+      type: String,
+      default: ""
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    hideUsers: {
+      type: Boolean,
+      default: false
+    },
+    hideGroups: {
+      type: Boolean,
+      default: false
+    },
+    error: String,
+    helper: String,
+    placeholder: String,
+  },
+  data () {
+    return {
+      loading: false,
+      selected: {
+        users: [],
+        groups: []
+      },
+      options: [],
+      results: [],
+      lastEmitted: "",
+      labelUsers: this.$t("Users"),
+      labelGroups: this.$t("Groups"),
+    };
+  },
+  computed: {
+    content: {
+      get () {
+        if (this.loading) {
+          return [];
+        }
+        return this.selected.users.map(user => {
+          let uid;
+          if (typeof user === 'number') {
+            uid = user;
+          } else {
+            uid = user.id;
+          }
+          return this.results.find(item => item.id === uid);
+        })
+          .concat(this.selected.groups.map(group => {
+            let gid;
+            if (typeof group == 'number') {
+              gid = "group-" + group;
+            } else {
+              gid = group.id;
+            }
+            return this.results.find(item => item.id ===  gid);
+            
+          }));
+      },
+      set (value) {
+        this.selected.users = [];
+        this.selected.groups = [];
+        if (value === null) {
+          return;
+        }
+
+        // If it is array (this happens when the Select User/Group is selected)
+        // add value just if it is not empty
+        if (Array.isArray(value) && value.length) {
+          value.forEach(item => {
+            this.results.push(item);
+            if (typeof item.id === "number") {
+              this.selected.users.push(item.id);
+            } else {
+              this.selected.groups.push(parseInt(item.id.substr(6)));
+            }
+          });
+        }
+
+        //If an object arrives as value (this happens with Self Service and assign by expression)
+        if (!Array.isArray(value) && value)
+        {
+          this.results.push(value);
+          if (typeof value.id === "number") {
+            this.selected.users.push(value);
+          } else {
+            this.selected.groups.push(value);
+          }
+        }
+
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      deep: true,
+      handler (value) {
+        if (!value) {
+          return
+        }
+        if (value.users.length === 0 && value.groups.length === 0) {
+          return;
+        }
+        if (JSON.stringify(value) == this.lastEmitted) {
+          return;
+        }
+        this.loading = true;
+        let results = [];
+
+        let usersPromise = Promise.all(
+          value.users.map(item => {
+            if (typeof item == 'number' || typeof item == 'string') {
+              return ProcessMaker.apiClient.get("users/" + item);
+            } else {
+              if (item.assignee) {
+                let id = item.assignee;
+                return ProcessMaker.apiClient.get("users/" + id);
+              }
+            }
+          })
+        )
+          .then(items => {
+            items.forEach(item => {
+              results.push(this.addUsernameToFullName(item.data));
+            });
+          });
+
+        let groupsPromise = Promise.all(
+          value.groups.map(item => {
+            if (typeof item == 'number' || typeof item == 'string' ) {
+              return ProcessMaker.apiClient.get("groups/" + item);
+            } else {
+              if (item.assignee) {
+                let id = this.unformatGroup(item.assignee);
+                return ProcessMaker.apiClient.get("groups/" + id);
+              }
+            }
+          })
+        )
+          .then(items => {
+            items.forEach(item => {
+              results.push(this.formatGroup(item.data));
+            });
+          });
+
+        Promise.all([usersPromise, groupsPromise])
+          .then(() => {
+            this.content = results;
+            this.loading = false;
+          });
+      }
+    }
+  },
+  methods: {
+    updateSeletected() {
+      this.lastEmitted = JSON.stringify(this.selected);
+      this.$emit("input", this.selected);
+    },
+    addUsernameToFullName(user) {
+      if (!user.fullname || ! user.username)
+      {
+        return user;
+      }
+      let status = '';
+      if (user.status === 'INACTIVE') {
+        status = " - " + this.$t('Inactive');
+      }
+      return {...user, fullname: `${user.fullname} (${user.username}${status})`};
+    },
+    load (filter) {
+      this.options = [];
+      if (!this.hideUsers) {
+        this.loadUsers(filter);
+      }
+      if (!this.hideGroups) {
+        this.loadGroups(filter);
+      }
+    },
+    loadUsers (filter) {
+      ProcessMaker.apiClient
+        .get("users" + (typeof filter === "string" ? "?filter=" + filter : ""))
+        .then(response => {
+          const users = response.data.data.map(user => this.addUsernameToFullName(user));
+          this.users = users;
+
+          if (response.data.data) {
+            this.options.push({
+              "type": this.labelUsers,
+              "items": users,
+            });
+          }
+        });
+    },
+    loadGroups (filter) {
+      ProcessMaker.apiClient
+        .get("groups" + (typeof filter === "string" ? "?filter=" + filter : ""))
+        .then(response => {
+          let groups = response.data.data.map(item => {
+            return this.formatGroup(item);
+          });
+
+          if (groups) {
+            this.options.push({
+              "type": this.labelGroups,
+              "items": groups
+            });
+          }
+        });
+    },
+    formatGroup (item) {
+      if (item && typeof item.id == 'number') {
+        item.id = "group-" + item.id;
+      }
+      item.fullname = item.name;
+      if (item.status === 'INACTIVE') {
+        item.fullname += " (" + this.$t('Inactive') + ")";
+      }
+      return item;
+    },
+    unformatGroup(groupId) {
+      if (typeof groupId == 'number') {
+        return groupId;
+      } else {
+        let id = groupId.replace('group-', "");
+        return id;
+      }
+      
+    }
+  },
+};
+</script>

package/src/components/TabsBar.vue

@@ -58,6 +58,29 @@
         </div>
       </template>
     </b-tab>
+    <b-tab
+      v-if="showClipboard"
+      ref="clipboard"
+      class="h-100 w-100"
+      name="clipboard"
+    >
+      <template #title>
+        {{ $t('Clipboard') }}
+        <span
+          :data-test="`close-clipboard-tab`"
+          class="close-tab"
+          role="link"
+          @click.stop="closeClipboard"
+        >
+          <i class="fas fa-times" />
+        </span>
+      </template>
+      <template #default>
+        <div class="h-100 w-100" data-test="tab-content">
+          <slot :current-page="clipboardPageIndex" />
+        </div>
+      </template>
+    </b-tab>
     <template #tabs-end>
       <div
         v-if="tabsListOverflow"
@@ -115,6 +138,13 @@ export default {
     isMultiPage: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Show clipboard tab
+     */
+    showClipboard: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -128,6 +158,9 @@ export default {
     };
   },
   computed: {
+    clipboardPageIndex() {
+      return this.pages.length;
+    },
     validLocalOpenedPages() {
       return this.localOpenedPages.filter((page) => this.pages[page]);
     }
@@ -170,9 +203,22 @@ export default {
     this.checkTabsOverflow();
   },
   methods: {
+    openClipboard() {
+      if (this.$refs.clipboard) {
+        this.$refs.clipboard.activate();
+      }
+    },
+    closeClipboard() {
+      this.$emit('close-clipboard');
+    },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
-      this.$emit("tab-opened", pageIndex);
+      const isInClipboard = (this.activeTab  === this.$refs.tabs.tabs.length - 1) && this.showClipboard;
+      if (isInClipboard) {
+        this.$emit("tab-opened", this.clipboardPageIndex);
+      } else {
+        this.$emit("tab-opened", pageIndex);
+      }
     },
     pageNumber(index) {
       return index + 1;

package/src/components/accordions.js

@@ -13,7 +13,11 @@ export default [
       'initiallyChecked',
       'screen',
       'multipleUpload',
-      'linkUrl'
+      'linkUrl',
+      'collection',
+      'record',
+      'collectionmode',
+      'submitCollectionCheck',
     ],
     open: true,
   },
@@ -47,6 +51,7 @@ export default [
     },
     fields: [
       'fields',
+      'paginationOption',
       { name: 'options', hideFor: 'FormMultiColumn' },
     ],
     open: false,
@@ -80,6 +85,7 @@ export default [
       {name: 'tabindex', showFor: 'FormSelectList'},
       {name: 'tabindex', showFor: 'FormButton'},
       {name: 'tabindex', showFor: 'FormTextArea'},
+      {name: 'encryptedConfig', showFor: 'FormInput'},
     ],
     open: false,
   },

package/src/components/editor/loop.vue

@@ -28,6 +28,15 @@
               />
               {{ element.config.name || $t("Variable Name") }}
               <div class="ml-auto">
+                <clipboard-button
+                  :index="index"
+                  :config="element.config"
+                  :isInClipboard="isInClipboard(items[index])"
+                  :addTitle="$t('Add to clipboard')"
+                  :removeTitle="$t('Remove from clipboard')"
+                  @addToClipboard="addToClipboard(items[index])"
+                  @removeFromClipboard="removeFromClipboard(items[index])"
+                />
                 <button
                   v-if="isAiSection(element) && aiPreview(element)"
                   class="btn btn-sm btn-primary mr-2"
@@ -83,6 +92,15 @@
               />
               {{ element.config.name || $t("Variable Name") }}
               <div class="ml-auto">
+                <clipboard-button
+                  :index="index"
+                  :config="element.config"
+                  :isInClipboard="isInClipboard(items[index])"
+                  :addTitle="$t('Add to clipboard')"
+                  :removeTitle="$t('Remove from clipboard')"
+                  @addToClipboard="addToClipboard(items[index])"
+                  @removeFromClipboard="removeFromClipboard(items[index])"
+                />
                 <button
                   class="btn btn-sm btn-secondary mr-2"
                   :title="$t('Copy Control')"
@@ -136,6 +154,8 @@ import {
   FormTextArea
 } from "@processmaker/vue-form-elements";
 import { HasColorProperty } from "@/mixins";
+import { Clipboard } from "@/mixins";
+import ClipboardButton from '../ClipboardButton.vue';
 import * as renderer from "@/components/renderer";
 
 export default {
@@ -149,9 +169,10 @@ export default {
     FormDatePicker,
     FormHtmlEditor,
     FormHtmlViewer,
+    ClipboardButton,
     ...renderer
   },
-  mixins: [HasColorProperty],
+  mixins: [HasColorProperty, Clipboard],
   props: ["value", "name", "config", "selected", "validationErrors"],
   data() {
     return {

package/src/components/editor/multi-column.vue

@@ -43,6 +43,15 @@
                     />
                     {{ element.config.name || $t("Variable Name") }}
                     <div class="ml-auto">
+                      <clipboard-button
+                        :index="index"
+                        :config="element.config"
+                        :isInClipboard="isInClipboard(element)"
+                        :addTitle="$t('Add to clipboard')"
+                        :removeTitle="$t('Remove from clipboard')"
+                        @addToClipboard="addToClipboard(element)"
+                        @removeFromClipboard="removeFromClipboard(element)"
+                      />
                       <button
                         v-if="isAiSection(element) && aiPreview(element)"
                         class="btn btn-sm btn-primary mr-2"
@@ -100,6 +109,15 @@
                     />
                     {{ element.config.name || $t("Variable Name") }}
                     <div class="ml-auto">
+                      <clipboard-button
+                        :index="index"
+                        :config="element.config"
+                        :isInClipboard="isInClipboard(element)"
+                        :addTitle="$t('Add to clipboard')"
+                        :removeTitle="$t('Remove from clipboard')"
+                        @addToClipboard="addToClipboard(element)"
+                        @removeFromClipboard="removeFromClipboard(element)"
+                      />
                       <button
                         class="btn btn-sm btn-secondary mr-2"
                         :title="$t('Copy Control')"
@@ -156,8 +174,9 @@ import {
   FormTextArea
 } from "@processmaker/vue-form-elements";
 import { HasColorProperty } from "@/mixins";
+import { Clipboard } from "@/mixins";
 import * as renderer from "@/components/renderer";
-
+import ClipboardButton from '../ClipboardButton.vue';
 const defaultColumnWidth = 1;
 
 export default {
@@ -171,9 +190,10 @@ export default {
     FormDatePicker,
     FormHtmlEditor,
     FormHtmlViewer,
+    ClipboardButton,
     ...renderer
   },
-  mixins: [HasColorProperty],
+  mixins: [HasColorProperty, Clipboard],
   props: ["value", "name", "config", "selected", "validationErrors"],
   data() {
     return {

package/src/components/editor/pagesDropdown.vue

@@ -19,7 +19,7 @@
     <!-- Option to add a new page -->
     <b-dropdown-item data-test="add-page" @click="onAddPage">
       <!-- Icon for adding a new page -->
-      <i class="fa fa-plus platform-dropdown-item-icon"></i>
+      <i class="fas fa-plus platform-dropdown-item-icon text-dark w-icon text-center"></i>
       <!-- Text for adding a new page -->
       {{ $t("Create Page") }}
     </b-dropdown-item>
@@ -27,11 +27,19 @@
     <!-- Option to see all pages -->
     <b-dropdown-item data-test="see-all-pages" @click="onSeeAllPages">
       <!-- Icon for seeing all pages -->
-      <i class="fa fa-eye platform-dropdown-item-icon"></i>
+      <i class="far fa-eye platform-dropdown-item-icon text-dark w-icon text-center"></i>
       <!-- Text for seeing all pages -->
       {{ $t("See all pages") }}
     </b-dropdown-item>
 
+    <!-- Option to open Clipboard page -->
+    <b-dropdown-item data-test="clipboard" @click="onClipboard" class="d-flex">
+      <!-- Icon for clipboard -->
+      <i class="far fa-clipboard platform-dropdown-item-icon text-dark w-icon text-center"></i>
+      <!-- Text for clipboard -->
+      {{ $t("Clipboard") }}
+    </b-dropdown-item>
+
     <!-- Divider between adding and viewing options -->
     <b-dropdown-divider></b-dropdown-divider>
 
@@ -100,6 +108,13 @@ export default {
       this.$emit("seeAllPages");
     },
 
+    /**
+     * Handle when user clicks on "Clipboard
+     */
+    onClipboard() {
+      this.$emit("clipboard");
+    },
+
     /**
      * Handler for when a specific page is clicked.
      * Emits the "clickPage" event with the selected page.
@@ -122,4 +137,7 @@ export default {
   // Style for the icons in dropdown items.
   color: #1572c2;
 }
+.w-icon {
+  width: 1.25rem;
+}
 </style>

package/src/components/index.js

@@ -29,6 +29,7 @@ import { LRUCache } from "lru-cache";
 import Vuex from "vuex";
 import globalErrorsModule from "../store/modules/globalErrorsModule";
 import undoRedoModule from "../store/modules/undoRedoModule";
+import clipboardModule from "../store/modules/clipboardModule";
 import BasicSearch from "./basic-search.vue";
 import ComputedProperties from "./computed-properties.vue";
 import CustomCSS from "./custom-css.vue";
@@ -49,6 +50,8 @@ import accordions from "@/components/accordions";
 import VariableNameGenerator from "@/components/VariableNameGenerator";
 import { LinkButton } from "./renderer";
 import "../assets/css/tabs.css";
+import FormCollectionRecordControl from "./renderer/form-collection-record-control.vue";
+import FormCollectionViewControl from "./renderer/form-collection-view-control.vue";
 
 const rendererComponents = {
   ...renderer,
@@ -163,11 +166,14 @@ export default {
     Vue.use(Vuex);
     Vue.component("FormListTable", FormListTable);
     Vue.component("LinkButton", LinkButton);
+    Vue.component("FormCollectionRecordControl", FormCollectionRecordControl);
+    Vue.component("FormCollectionViewControl", FormCollectionViewControl);
     const store = new Vuex.Store({
       modules: {
         globalErrorsModule,
         // @todo Improve how to load this module, it is used only in the form builder, not used in the form renderer.
-        undoRedoModule
+        undoRedoModule,
+        clipboardModule
       }
     });
     Vue.mixin({ store });