Merge pull request #1715 from ProcessMaker/FOUR-18059

FOUR-18059 Clipboard Tab

src/App.vue

@@ -50,6 +50,7 @@
 
           <b-col v-if="displayBuilder && !displayPreview" class="text-right">
             <screen-toolbar
+              :disabled="$refs.builder?.isCurrentPageClipboard"
               @undo="$refs.builder.undo()"
               @redo="$refs.builder.redo()"
               @open-calc="openComputedProperties"

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,7 +14,7 @@
       <b-button
         class="screen-toolbar-button"
         variant="link"
-        :disabled="!canRedo"
+        :disabled="!canRedo || disabled"
         data-cy="toolbar-redo"
         @click="$emit('redo')"
       >
@@ -25,6 +25,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Calculated Properties')"
         data-cy="topbar-calcs"
         @click="$emit('open-calc')"
@@ -36,6 +37,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 +49,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Watchers')"
         data-cy="topbar-watchers"
         @click="$emit('open-watchers')"
@@ -58,6 +61,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="outlined-secondary"
+        :disabled="disabled"
         :popper-opts="{ placement: 'bottom-end' }"
         data-cy="topbar-options"
       >
@@ -77,6 +81,15 @@
 
 <script>
 export default {
+  props: {
+    /**
+     * Whether the toolbar is disabled or not
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       showToolbar: true

src/components/TabsBar.vue

@@ -60,11 +60,25 @@
     </b-tab>
     <b-tab
       v-if="showClipboard"
+      ref="clipboard"
       class="h-100 w-100"
-      @click="clipboard"
+      name="clipboard"
     >
       <template #title>
-        {{ $t('Clear Clipboard') }}
+        {{ $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>
@@ -144,6 +158,9 @@ export default {
     };
   },
   computed: {
+    clipboardPageIndex() {
+      return this.pages.length;
+    },
     validLocalOpenedPages() {
       return this.localOpenedPages.filter((page) => this.pages[page]);
     }
@@ -186,12 +203,22 @@ export default {
     this.checkTabsOverflow();
   },
   methods: {
-    clipboard() {
-      this.$emit('clearClipboard');
+    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;

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"
@@ -76,6 +76,8 @@
                     :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"
@@ -106,9 +108,9 @@
         ref="tabsBar"
         :pages="config"
         :is-multi-page="showToolbar"
-        :show-clipboard="true"
+        :show-clipboard="showClipboard"
         @tab-opened="currentPage = $event"
-        @clearClipboard="clearClipboard"
+        @close-clipboard="closeClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -121,6 +123,13 @@
           />
         </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"
@@ -155,15 +164,15 @@
             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
             }"
             @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="{
@@ -194,13 +203,14 @@
                   {{ 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(config[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(config[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
@@ -258,13 +268,14 @@
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
                     <clipboard-button
+                      v-if="!isClipboardPage(tabPage)"
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(config[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
                       class="btn btn-sm btn-secondary mr-2"
@@ -364,7 +375,7 @@
                   ''
                 )}`"
                 :builder="builder"
-                :form-config="config"
+                :form-config="extendedPages"
                 :screen-type="screenType"
                 :current-page="currentPage"
                 :selected-control="selected"
@@ -617,7 +628,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,
@@ -659,7 +676,15 @@ export default {
     };
   },
   computed: {
-    // Get clipboard items from Vuex store
+    isCurrentPageClipboard() {
+      return this.isClipboardPage(this.currentPage);
+    },
+    extendedPages() {
+      return [
+        ...this.config,
+        this.clipboardPage,
+      ];
+    },
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
     },
@@ -810,8 +835,23 @@ 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.$refs.tabsBar.openPageByIndex(-1);
+      this.showClipboard = true;
+      this.$nextTick(() => {
+        this.$refs.tabsBar.openClipboard();
+      });
     },
     isCurrentPageEmpty(currentPage) {
       return this.config[currentPage]?.items?.length === 0;
@@ -1118,6 +1158,8 @@ export default {
         config: JSON.stringify(this.config),
         currentPage: this.currentPage
       });
+      this.replaceClipboardContent([this.clipboardPage]);
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     async undo() {
       this.inspect();
@@ -1142,7 +1184,7 @@ export default {
       );
     },
     updateConfig(items) {
-      this.config[this.currentPage].items = items;
+      this.extendedPages[this.currentPage].items = items;
       this.updateState();
     },
     hasError(element) {
@@ -1190,14 +1232,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.updateUuids(duplicate);
-      this.config[this.currentPage].items.push(duplicate);
+      this.extendedPages[this.currentPage].items.push(duplicate);
     },
     openEditPageModal(index) {
       this.editPageIndex = index;
@@ -1300,6 +1342,7 @@ export default {
         currentPage: this.currentPage,
         deletedPage: true
       });
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     inspect(element = {}) {
       this.inspection = element;
@@ -1606,4 +1649,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>