From e3ff3e66e451ec635c535c20591927e32152df67 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Fri, 27 Sep 2024 09:49:27 -0400
Subject: [PATCH 1/7] Refactor TabsBar component to add clipboard tab

---
 src/components/TabsBar.vue          | 37 +++++++++++++++++++++++--
 src/components/vue-form-builder.vue | 43 ++++++++++++++++++++---------
 src/mixins/Clipboard.js             | 12 ++++++++
 3 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 279fc5f0e..4d7bbf77b 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -60,11 +60,26 @@
     </b-tab>
     <b-tab
       v-if="showClipboard"
+      ref="clipboard"
       class="h-100 w-100"
+      name="clipboard"
       @click="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 +159,9 @@ export default {
     };
   },
   computed: {
+    clipboardPageIndex() {
+      return this.pages.length;
+    },
     validLocalOpenedPages() {
       return this.localOpenedPages.filter((page) => this.pages[page]);
     }
@@ -186,12 +204,25 @@ export default {
     this.checkTabsOverflow();
   },
   methods: {
+    openClipboard() {
+      if (this.$refs.clipboard) {
+        this.$refs.clipboard.activate();
+      }
+    },
+    closeClipboard() {
+      this.$emit('close-clipboard');
+    },
     clipboard() {
-      this.$emit('clearClipboard');
+      this.$emit('clear-clipboard');
     },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
-      this.$emit("tab-opened", pageIndex);
+      const isInClipboard = this.activeTab  === this.$refs.tabs.tabs.length - 1;
+      if (isInClipboard) {
+        this.$emit("tab-opened", this.clipboardPageIndex);
+      } else {
+        this.$emit("tab-opened", pageIndex);
+      }
     },
     pageNumber(index) {
       return index + 1;
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 95ea5a3c1..29e8dd034 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -8,7 +8,8 @@
         no-body
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
-        <b-input-group size="sm" style="height: 42px">
+      [{{currentPage}}]
+      <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"
@@ -106,9 +107,10 @@
         ref="tabsBar"
         :pages="config"
         :is-multi-page="showToolbar"
-        :show-clipboard="true"
+        :show-clipboard="showClipboard"
         @tab-opened="currentPage = $event"
-        @clearClipboard="clearClipboard"
+        @close-clipboard="closeClipboard"
+        @clear-clipboard="clearClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -155,7 +157,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
@@ -163,7 +165,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="{
@@ -196,11 +198,11 @@
                     <clipboard-button
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[currentPage].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[currentPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
                     />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
@@ -260,11 +262,11 @@
                     <clipboard-button
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[currentPage].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[currentPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
                     />
                     <button
                       class="btn btn-sm btn-secondary mr-2"
@@ -364,7 +366,7 @@
                   ''
                 )}`"
                 :builder="builder"
-                :form-config="config"
+                :form-config="extendedPages"
                 :screen-type="screenType"
                 :current-page="currentPage"
                 :selected-control="selected"
@@ -617,7 +619,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,
@@ -660,6 +668,12 @@ export default {
   },
   computed: {
     // Get clipboard items from Vuex store
+    extendedPages() {
+      return [
+        ...this.config,
+        this.clipboardPage,
+      ];
+    },
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
     },
@@ -811,7 +825,10 @@ export default {
   },
   methods: {
     openClipboard() {
-      this.$refs.tabsBar.openPageByIndex(-1);
+      this.showClipboard = true;
+      this.$nextTick(() => {
+        this.$refs.tabsBar.openClipboard();
+      });
     },
     isCurrentPageEmpty(currentPage) {
       return this.config[currentPage]?.items?.length === 0;
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 5908ebb35..74055c53c 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -4,6 +4,11 @@ import _ from "lodash";
 const clipboardComponentName = "Clipboard";
 
 export default {
+  data() {
+    return {
+      showClipboard: false,
+    };
+  },
   methods: {
     /**
      * Adds a deep-cloned item to the clipboard, ensuring the original item is unmodified.
@@ -120,5 +125,12 @@ export default {
       this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
       this.$root.$emit('update-clipboard');
     },
+
+    /**
+     * Close Clipboard
+     */
+    closeClipboard() {
+      this.showClipboard = false;
+    },
   },
 };

From c5fdf75f546798eb22c09316a1a0c0314e315151 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:03:28 -0400
Subject: [PATCH 2/7] Remove non used event

---
 src/components/TabsBar.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 4d7bbf77b..d02d7a21d 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -63,7 +63,6 @@
       ref="clipboard"
       class="h-100 w-100"
       name="clipboard"
-      @click="clipboard"
     >
       <template #title>
         {{ $t('Clipboard') }}
@@ -212,9 +211,6 @@ export default {
     closeClipboard() {
       this.$emit('close-clipboard');
     },
-    clipboard() {
-      this.$emit('clear-clipboard');
-    },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
       const isInClipboard = this.activeTab  === this.$refs.tabs.tabs.length - 1;

From a8690d0829de9b834f85f4ebc69ea30e0fa549be Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:04:16 -0400
Subject: [PATCH 3/7] Add function to clear the clipboard

---
 src/mixins/Clipboard.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 74055c53c..ef9478e19 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -121,9 +121,26 @@ export default {
     /**
      * Clear the clipboard
      */
-    clearClipboard() {
-      this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
-      this.$root.$emit('update-clipboard');
+    async clearClipboard() {
+      const confirm = await this.$bvModal.msgBoxConfirm(
+        this.$t("Deleting the clipboard will permanently remove all information, and you will need to copy all components again."),
+        {
+          title: this.$t("Are you sure you want to clear clipboard?"),
+          size: "md",
+          buttonSize: "sm",
+          okVariant: "primary py-2 px-4",
+          cancelVariant: "outline-secondary py-2 px-4",
+          okTitle: this.$t("Confirm"),
+          cancelTitle: this.$t("Cancel"),
+          footerClass: "p-2 border-0",
+          hideHeaderClose: true,
+          centered: true,
+        }
+      );
+      if (confirm) {
+        this.$store.dispatch("clipboardModule/clearClipboard");
+        this.$root.$emit('update-clipboard');
+      }
     },
 
     /**

From dddbd2d250a7ce6ea9c0345a62ba23b0c9092aa9 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:04:56 -0400
Subject: [PATCH 4/7] Implemente Clipboard special page

---
 src/components/vue-form-builder.vue  | 42 ++++++++++++++++++++++++----
 src/store/modules/clipboardModule.js |  7 +++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 29e8dd034..9ce40ee2e 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -8,7 +8,6 @@
         no-body
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
-      [{{currentPage}}]
       <b-input-group size="sm" style="height: 42px">
           <b-input-group-prepend>
             <span
@@ -77,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"
@@ -110,7 +111,6 @@
         :show-clipboard="showClipboard"
         @tab-opened="currentPage = $event"
         @close-clipboard="closeClipboard"
-        @clear-clipboard="clearClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -123,6 +123,13 @@
           />
         </template>
         <template #default="{ currentPage: tabPage }">
+          <b-button
+            v-if="isClipboardPage(currentPage)"
+            variant="link"
+            @click="clearClipboard"
+          >
+            {{ $t('Clear All') }}
+          </b-button>
           <div
             v-if="isCurrentPageEmpty(tabPage)"
             data-cy="screen-drop-zone"
@@ -196,6 +203,7 @@
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <div class="ml-auto">
                     <clipboard-button
+                      v-if="!isClipboardPage(currentPage)"
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
@@ -260,6 +268,7 @@
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
                     <clipboard-button
+                      v-if="!isClipboardPage(currentPage)"
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
@@ -667,7 +676,9 @@ export default {
     };
   },
   computed: {
-    // Get clipboard items from Vuex store
+    isCurrentPageClipboard() {
+      return this.isClipboardPage(this.currentPage);
+    },
     extendedPages() {
       return [
         ...this.config,
@@ -824,6 +835,18 @@ 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(() => {
@@ -1135,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();
@@ -1159,7 +1184,7 @@ export default {
       );
     },
     updateConfig(items) {
-      this.config[this.currentPage].items = items;
+      this.extendedPages[this.currentPage].items = items;
       this.updateState();
     },
     hasError(element) {
@@ -1207,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;
@@ -1317,6 +1342,7 @@ export default {
         currentPage: this.currentPage,
         deletedPage: true
       });
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     inspect(element = {}) {
       this.inspection = element;
@@ -1623,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>
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 1c5ab0a40..a2bff4b5a 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -174,6 +174,13 @@ const clipboardModule = {
       ClipboardManager.saveToServer(state.clipboard);
     },
 
+    pushState({ commit, state }, clipboard) {
+      commit('SET_CLIPBOARD', clipboard);
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
+    },
+
     /**
      * Removes an item from the clipboard.
      * Updates localStorage and the server.

From e433b1ea65b309e74fb6571d3ea2a88ba1311c92 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:05:09 -0400
Subject: [PATCH 5/7] Disable toolbar when on clipboard page

---
 src/App.vue                      |  1 +
 src/components/ScreenToolbar.vue | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 28195ba49..06ca969ae 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/components/ScreenToolbar.vue b/src/components/ScreenToolbar.vue
index a1815d844..a149b95dd 100644
--- a/src/components/ScreenToolbar.vue
+++ b/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

From 01d42c6b1e833696995cfaee405114079a3c7db4 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:47:23 -0400
Subject: [PATCH 6/7] Fix tab current page and clipboard index

---
 src/components/TabsBar.vue          |  2 +-
 src/components/vue-form-builder.vue | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index d02d7a21d..be765fde4 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -213,7 +213,7 @@ export default {
     },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
-      const isInClipboard = this.activeTab  === this.$refs.tabs.tabs.length - 1;
+      const isInClipboard = (this.activeTab  === this.$refs.tabs.tabs.length - 1) && this.showClipboard;
       if (isInClipboard) {
         this.$emit("tab-opened", this.clipboardPageIndex);
       } else {
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 9ce40ee2e..3e195519d 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -124,7 +124,7 @@
         </template>
         <template #default="{ currentPage: tabPage }">
           <b-button
-            v-if="isClipboardPage(currentPage)"
+            v-if="isClipboardPage(tabPage)"
             variant="link"
             @click="clearClipboard"
           >
@@ -203,14 +203,14 @@
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <div class="ml-auto">
                     <clipboard-button
-                      v-if="!isClipboardPage(currentPage)"
+                      v-if="!isClipboardPage(tabPage)"
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(extendedPages[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
@@ -268,14 +268,14 @@
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
                     <clipboard-button
-                      v-if="!isClipboardPage(currentPage)"
+                      v-if="!isClipboardPage(tabPage)"
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(extendedPages[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
                       class="btn btn-sm btn-secondary mr-2"

From fcd2244539c6d756d49bd265ff7e1cc9655c0142 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Wed, 2 Oct 2024 10:05:26 -0400
Subject: [PATCH 7/7] Remove commented code

---
 src/store/modules/clipboardModule.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index a2bff4b5a..13a64e3e0 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -93,7 +93,6 @@ const clipboardModule = {
         console.error('Item or item uuid is missing');
         return;
       }
-      // state.clipboard = state.clipboard.filter(clipboardItem => clipboardItem.uuid !== item.uuid);
       const index = state.clipboard.findIndex(clipboardItem => clipboardItem.uuid === item.uuid);
       if (index !== -1) {
         state.clipboard.splice(index, 1);