@processmaker/screen-builder 2.99.2 → 3.0.0

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

@@ -8,7 +8,7 @@
         no-body
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
-        <b-input-group size="sm" style="height: 42px">
+      <b-input-group size="sm" style="height: 42px">
           <b-input-group-prepend>
             <span
               class="input-group-text rounded-0 border-left-0 border-top-0 border-bottom-0"
@@ -72,9 +72,12 @@
                       customClass: 'custom-popover',
                       boundaryPadding: 16
                     }"
+                    :data-control="controls.indexOf(element)"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
                     class="gray-text"
+                    :disabled="!canDragControl(element)"
+                    @mousedown="disableEnableDragControl(element, $event)"
                   >
                     <i
                       v-if="element.config && element.config.icon"
@@ -105,7 +108,9 @@
         ref="tabsBar"
         :pages="config"
         :is-multi-page="showToolbar"
+        :show-clipboard="showClipboard"
         @tab-opened="currentPage = $event"
+        @close-clipboard="closeClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -114,9 +119,17 @@
             @addPage="$bvModal.show('addPageModal')"
             @clickPage="onClick"
             @seeAllPages="$bvModal.show('openSortable')"
+            @clipboard="openClipboard"
           />
         </template>
         <template #default="{ currentPage: tabPage }">
+          <b-button
+            v-if="isClipboardPage(tabPage)"
+            variant="link"
+            @click="clearClipboard"
+          >
+            {{ $t('Clear All') }}
+          </b-button>
           <div
             v-if="isCurrentPageEmpty(tabPage)"
             data-cy="screen-drop-zone"
@@ -151,7 +164,7 @@
             data-cy="editor-content"
             class="h-100"
             ghost-class="form-control-ghost"
-            :value="config[tabPage].items"
+            :value="extendedPages[tabPage].items"
             v-bind="{
               group: { name: 'controls' },
               swapThreshold: 0.5
@@ -159,7 +172,7 @@
             @input="updateConfig"
           >
             <div
-              v-for="(element, index) in config[tabPage].items"
+              v-for="(element, index) in extendedPages[tabPage].items"
               :key="index"
               class="control-item mt-4 mb-4"
               :class="{
@@ -189,6 +202,16 @@
                   />
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <div class="ml-auto">
+                    <clipboard-button
+                      v-if="!isClipboardPage(tabPage)"
+                      :index="index"
+                      :config="element.config"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
+                      :addTitle="$t('Add to clipboard')"
+                      :removeTitle="$t('Remove from clipboard')"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
+                    />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
                       data-test="apply-ai-btn"
@@ -244,6 +267,16 @@
                   />
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
+                    <clipboard-button
+                      v-if="!isClipboardPage(tabPage)"
+                      :index="index"
+                      :config="element.config"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
+                      :addTitle="$t('Add to clipboard')"
+                      :removeTitle="$t('Remove from clipboard')"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
+                    />
                     <button
                       class="btn btn-sm btn-secondary mr-2"
                       :title="$t('Copy Control')"
@@ -290,13 +323,26 @@
     <!-- Inspector -->
     <b-col
       v-if="renderControls"
-      class="overflow-hidden h-100 p-0 inspector-column"
+      class="overflow-auto mh-100 p-0 d-flex flex-column position-relative inspector-column"
     >
       <b-card
         no-body
-        class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
+        class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0 inspector-column"
       >
-        <b-card-body class="p-0 h-100 overflow-auto">
+        <div v-if="showTemplatesPanel">
+          <b-card-body class="p-2 h-100 overflow-auto screen-templates-column">
+            <screen-templates
+              ref="screenTemplates"
+              :shared-templates-data="sharedTemplatesData"
+              @close-templates-panel="closeTemplatesPanel"
+              :screen-id="screen.id"
+              :screen-type="screen.type"
+              :currentScreenPage="currentPage"
+            />
+          </b-card-body>
+        </div>
+        <div v-else>
+          <b-card-body class="p-0 h-100 overflow-auto">
           <template v-for="accordion in accordions">
             <b-button
               v-if="
@@ -330,6 +376,7 @@
               v-model="accordion.open"
             >
               <component
+                v-if="shouldShow(item)"
                 :is="item.type"
                 v-for="(item, index) in getInspectorFields(accordion)"
                 :key="index"
@@ -342,7 +389,7 @@
                   ''
                 )}`"
                 :builder="builder"
-                :form-config="config"
+                :form-config="extendedPages"
                 :screen-type="screenType"
                 :current-page="currentPage"
                 :selected-control="selected"
@@ -354,7 +401,8 @@
             </b-collapse>
           </template>
         </b-card-body>
-      </b-card>
+        </div>
+    </b-card>
     </b-col>
 
     <!-- Modals -->
@@ -474,6 +522,7 @@ import {
 } from "@processmaker/vue-form-elements";
 import Validator from "@chantouchsek/validatorjs";
 import HasColorProperty from "../mixins/HasColorProperty";
+import Clipboard from "../mixins/Clipboard";
 import * as renderer from "./renderer";
 import * as inspector from "./inspector";
 import "@processmaker/vue-form-elements/dist/vue-form-elements.css";
@@ -488,6 +537,8 @@ import MultipleUploadsCheckbox from "./utils/multiple-uploads-checkbox";
 import { formTypes } from "@/global-properties";
 import TabsBar from "./TabsBar.vue";
 import Sortable from './sortable/Sortable.vue';
+import ClipboardButton from './ClipboardButton.vue';
+import ScreenTemplates from './ScreenTemplates.vue';
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -527,12 +578,13 @@ const defaultConfig = [
 ];
 
 const defaultGroupOrder = {
-  "Input Fields" : 1.0,
-  "Content Fields" : 2.0,
-  "Dashboards" : 2.5,
-  "Navigation" : 3.0,
-  "Files" : 4.0,
-  "Advanced" : 5.0,
+  "Clipboard": 1.0,
+  "Input Fields" : 2.0,
+  "Content Fields" : 3.0,
+  "Dashboards" : 3.5,
+  "Navigation" : 4.0,
+  "Files" : 5.0,
+  "Advanced" : 6.0,
 };
 
 const DEFAULT_GROUP = "Advanced";
@@ -555,8 +607,10 @@ export default {
     ...renderer,
     PagesDropdown,
     Sortable,
+    ClipboardButton,
+    ScreenTemplates,
   },
-  mixins: [HasColorProperty, testing],
+  mixins: [HasColorProperty, testing, Clipboard],
   props: {
     renderControls: {
       type: Boolean,
@@ -580,7 +634,10 @@ export default {
     },
     processId: {
       default: 0
-    }
+    },
+    sharedTemplatesData: {
+      type: Array,
+    },
   },
   data() {
     const config = this.initialConfig || defaultConfig;
@@ -592,7 +649,13 @@ export default {
       config[0].name = this.title;
     }
 
+    const clipboardPage = {
+      name: this.$t("Clipboard"),
+      items: this.$store.getters["clipboardModule/clipboardItems"],
+    };
+
     return {
+      clipboardPage,
       showAddPageValidations: false,
       openedPages: [0],
       currentPage: 0,
@@ -631,9 +694,24 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
+      showTemplatesPanel: false,
+      enableOption: true
     };
   },
   computed: {
+    isCurrentPageClipboard() {
+      return this.isClipboardPage(this.currentPage);
+    },
+    extendedPages() {
+      return [
+        ...this.config,
+        this.clipboardPage,
+      ];
+    },
+    clipboardItems() {
+      return this.$store.getters["clipboardModule/clipboardItems"];
+    },
+    
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -700,7 +778,6 @@ export default {
           return orderA - orderB;
         });
       });
-
       return grouped;
     },
     showToolbar() {
@@ -713,7 +790,7 @@ export default {
         this.checkForCaptchaInLoops();
         this.$emit("change", this.config);
       },
-      deep: true
+      deep: true,
     },
     currentPage() {
       this.inspect();
@@ -747,6 +824,7 @@ export default {
     }
   },
   created() {
+    this.addUuidToElements(this.config);
     this.$store.dispatch("undoRedoModule/pushState", {
       config: JSON.stringify(this.config),
       currentPage: this.currentPage
@@ -780,6 +858,38 @@ export default {
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
+    isClipboardPage(page) {
+      return page === this.config.length;
+    },
+    disableEnableDragControl(control, event) {
+      if (!this.canDragControl(control)) {
+        event.preventDefault();
+      }
+    },
+    canDragControl(control) {
+      const isDragAndPaste = control.component === "Clipboard";
+      return !(isDragAndPaste && this.isClipboardPage(this.currentPage));
+    },
+    openClipboard() {
+      this.showClipboard = true;
+      this.$nextTick(() => {
+        this.$refs.tabsBar.openClipboard();
+      });
+    },
+    shouldShow(item) {
+      const sourceOptions = this.inspection.config[item.field]?.sourceOptions;
+
+      if (sourceOptions === 'Variable') {
+        this.enableOption = true;
+        return true;
+      }
+
+      if (sourceOptions === 'Collection') {
+        this.enableOption = false;
+      }
+
+      return !(item.if === "hideControl" && this.enableOption === false);
+    },
     isCurrentPageEmpty(currentPage) {
       return this.config[currentPage]?.items?.length === 0;
     },
@@ -895,6 +1005,7 @@ export default {
       accordion.open = true;
     },
     migrateConfig(config = this.config) {
+      this.addUuidToElements(config);
       config.forEach((page) => this.replaceFormText(page.items));
       config.forEach((page) => this.migrateFormSubmit(page.items));
       config.forEach((page) => this.updateFieldNameValidation(page.items));
@@ -1078,10 +1189,14 @@ export default {
       });
     },
     updateState() {
+      // paste the clipboard items into the current page
+      this.replaceClipboardContent(this.config);
       this.$store.dispatch("undoRedoModule/pushState", {
         config: JSON.stringify(this.config),
         currentPage: this.currentPage
       });
+      this.replaceClipboardContent([this.clipboardPage]);
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     async undo() {
       this.inspect();
@@ -1105,8 +1220,14 @@ export default {
         this.$store.getters["undoRedoModule/currentState"].currentPage
       );
     },
+    openTemplatesPanel() {
+      this.showTemplatesPanel = true;
+    },
+    closeTemplatesPanel() {
+      this.showTemplatesPanel = false;
+    },
     updateConfig(items) {
-      this.config[this.currentPage].items = items;
+      this.extendedPages[this.currentPage].items = items;
       this.updateState();
     },
     hasError(element) {
@@ -1154,13 +1275,14 @@ export default {
     },
     deleteItem(index) {
       // Remove the item from the array in currentPage
-      this.config[this.currentPage].items.splice(index, 1);
+      this.extendedPages[this.currentPage].items.splice(index, 1);
       this.inspection.inspector.splice(0, this.inspection.inspector.length);
       this.updateState();
     },
     duplicateItem(index) {
       const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
-      this.config[this.currentPage].items.push(duplicate);
+      this.updateUuids(duplicate);
+      this.extendedPages[this.currentPage].items.push(duplicate);
     },
     openEditPageModal(index) {
       this.editPageIndex = index;
@@ -1263,8 +1385,10 @@ export default {
         currentPage: this.currentPage,
         deletedPage: true
       });
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     inspect(element = {}) {
+      this.closeTemplatesPanel();
       this.inspection = element;
       this.selected = element;
       const defaultAccordion = this.accordions.find(
@@ -1278,6 +1402,7 @@ export default {
     // This will ensure each control in the editor has it's own config and it's not shared
     cloneControl(control) {
       const copy = {
+        uuid: this.generateUUID(),
         config: JSON.parse(JSON.stringify(control.config)),
         inspector: JSON.parse(JSON.stringify(control.inspector)),
         component: control.component,
@@ -1398,7 +1523,6 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-
   }
 };
 </script>
@@ -1532,6 +1656,12 @@ $side-bar-font-size: 0.875rem;
 .inspector-column {
   max-width: 265px;
   font-size: $side-bar-font-size;
+  border-left: 1px solid rgba(0, 0, 0, 0.125);
+  height: 100%;
+}
+
+.screen-templates-column {
+  overflow-y: auto;
 }
 
 .form-control-ghost {
@@ -1568,4 +1698,8 @@ $side-bar-font-size: 0.875rem;
   font-size: 15px;
   font-weight: normal;
 }
+.gray-text.disabled {
+  cursor: not-allowed; /* Cambia el cursor cuando se pasa por encima */
+  pointer-events: all; /* Permite que el pseudo-elemento reciba eventos del ratón */
+}
 </style>

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

@@ -18,6 +18,7 @@
       :test-screen-definition="testScreenDefinition || false"
       class="p-0"
       :loop-context="loopContext"
+      :taskdraft="taskdraft"
       @after-submit="afterSubmit"
       @submit="submit"
     />
@@ -60,7 +61,8 @@ export default {
     "loopContext",
     "showErrors",
     "testScreenDefinition",
-    "deviceScreen"
+    "deviceScreen",
+    "taskdraft"
   ],
   data() {
     return {
@@ -180,6 +182,9 @@ export default {
     this.scrollable = Scrollparent(this.$el);
 
     this.containerObserver.observe(this.$refs.formRendererContainer);
+    
+    // Initialize the clipboard module
+    this.$store.dispatch('clipboardModule/initializeClipboard');
   },
   methods: {
     ...mapActions("globalErrorsModule", [
@@ -362,7 +367,10 @@ export default {
       // Control coordinates
       const controlEl = entries[0].target.getBoundingClientRect();
       this.parseCss();
-    }
+    },
+    saveClipboarToLocalStorage(items){
+      localStorage.setItem("savedClipboard", JSON.stringify(items));
+    },
   }
 };
 </script>