From d5cbe8df0292a97294f5e0cb01725f533f9448ab Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Fri, 20 Sep 2024 17:13:13 -0400
Subject: [PATCH] Implement clear clipboard button

---
 src/components/TabsBar.vue              | 11 +++++++++++
 src/components/editor/pagesDropdown.vue | 22 ++++++++++++++++++++--
 src/components/vue-form-builder.vue     |  8 ++++++++
 src/mixins/Clipboard.js                 |  8 ++++++++
 src/stories/PagesDropdown.stories.js    | 19 +++++++++++--------
 5 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 069a766cf..c52e795a1 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -58,6 +58,14 @@
         </div>
       </template>
     </b-tab>
+    <b-tab
+      class="h-100 w-100"
+      @click="clipboard"
+    >
+      <template #title>
+        {{ $t('Clear Clipboard') }}
+      </template>
+    </b-tab>
     <template #tabs-end>
       <div
         v-if="tabsListOverflow"
@@ -170,6 +178,9 @@ export default {
     this.checkTabsOverflow();
   },
   methods: {
+    clipboard() {
+      this.$emit('clearClipboard');
+    },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
       this.$emit("tab-opened", pageIndex);
diff --git a/src/components/editor/pagesDropdown.vue b/src/components/editor/pagesDropdown.vue
index 6e36f1b2d..02c956e78 100644
--- a/src/components/editor/pagesDropdown.vue
+++ b/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>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 98974c640..2a282f77b 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -107,6 +107,7 @@
         :pages="config"
         :is-multi-page="showToolbar"
         @tab-opened="currentPage = $event"
+        @clearClipboard="clearClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -115,6 +116,7 @@
             @addPage="$bvModal.show('addPageModal')"
             @clickPage="onClick"
             @seeAllPages="$bvModal.show('openSortable')"
+            @clipboard="openClipboard"
           />
         </template>
         <template #default="{ currentPage: tabPage }">
@@ -656,6 +658,9 @@ export default {
     };
   },
   computed: {
+    pagesAndClipboard() {
+      return [...this.config, [{name:"Clipboard", items: []}]];
+    },
     // Get clipboard items from Vuex store
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
@@ -810,6 +815,9 @@ export default {
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
+    openClipboard() {
+      this.$refs.tabsBar.openPageByIndex(-1);
+    },
     isCurrentPageEmpty(currentPage) {
       return this.config[currentPage]?.items?.length === 0;
     },
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 270ae2e30..2bf2279a4 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -99,5 +99,13 @@ export default {
       }
       screenConfig.forEach((item) => replaceInPage(item));
     },
+
+    /**
+     * Clear the clipboard
+     */
+    clearClipboard() {
+      this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
+      this.$root.$emit('update-clipboard');
+    },
   },
 };
diff --git a/src/stories/PagesDropdown.stories.js b/src/stories/PagesDropdown.stories.js
index ad676b0f7..fa74095fa 100644
--- a/src/stories/PagesDropdown.stories.js
+++ b/src/stories/PagesDropdown.stories.js
@@ -17,6 +17,7 @@ export default {
         @addPage="onAddPage"
         @clickPage="onClick"
         @seeAllPages="onSeeAllPages"
+        @clipboard="onClipboard"
       />
     `,
     data() {
@@ -31,7 +32,10 @@ export default {
       },
       onClick(index) {
         console.log("Click page item:", index);
-      }
+      },
+      onClipboard() {
+        console.log("Open clipboard");
+      },
     }
   })
 };
@@ -104,8 +108,8 @@ export const ClickInCreatePage = {
     await selectorAddPage.click(selectorAddPage);
   }
 };
-// Open the See all Pages
-export const ClickInSeeAllPages = {
+// Open the Clipboard
+export const ClickInClipboard = {
   args: {
     data: [{ name: "Page 1" }]
   },
@@ -114,19 +118,18 @@ export const ClickInSeeAllPages = {
     const selector = canvasElement.querySelector(
       "[data-test=page-dropdown] button"
     );
-    const selectorAddPage = canvasElement.querySelector(
-      "[data-test=see-all-pages]"
+    const clipboardOption = canvasElement.querySelector(
+      "[data-test=clipboard]"
     );
-    console.log(selectorAddPage);
     await selector.click(selector);
     await waitFor(
       () => {
         expect(canvas.getByTestId("page-dropdown")).toContainHTML(
-          "See all pages"
+          "Clipboard"
         );
       },
       { timeout: 1000 }
     );
-    await selectorAddPage.click(selectorAddPage);
+    await clipboardOption.click(clipboardOption);
   }
 };