FOUR-13436 Screen Builder Clipboard

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-templates="openTemplatesPanel"
@@ -522,7 +523,11 @@ export default {
         });
       }
       return warnings;
-    }
+    },
+     // Get clipboard items from Vuex store
+    clipboardItems() {
+      return this.$store.getters["clipboardModule/clipboardItems"];
+    },
   },
   created() {
     this.updateDataInput = debounce(this.updateDataInput, 1000);
@@ -605,6 +610,7 @@ export default {
       const savedWatchers = localStorage.getItem("savedWatchers");
       const customCSS = localStorage.getItem("customCSS");
       const computed = localStorage.getItem("computed");
+      const savedClipboard = localStorage.getItem("savedClipboard");  
 
       if (savedConfig) {
         const config = JSON.parse(savedConfig);

src/VariableDataTypeProperties.js

@@ -30,7 +30,7 @@ function dataTypeFactory(options) {
 function dataFormatFactory() {
 
   return {
-    type: SelectDataTypeMask,
+    type: 'SelectDataTypeMask',
     field: 'dataMask',
     config: {
       label: 'Data Format',

src/components/ClipboardButton.vue

@@ -0,0 +1,77 @@
+<template>
+    <!-- Conditionally render buttons based on clipboardContent -->
+    <button
+      v-if="isInClipboard"
+      class="btn btn-sm btn-outline-secondary mr-2 remove-btn"
+      :title="removeTitle"
+      @click="removeFromClipboard"
+      data-cy="removeFromClipboard"
+    >
+      <i class="fas fa-minus"></i>
+    </button>
+
+    <button
+      v-else
+      class="btn btn-sm btn-success mr-2 add-btn"
+      :title="addTitle"
+      @click="addToClipboard(index)"
+      data-cy="addToClipboard"
+    >
+      <i class="fas fa-plus"></i>
+    </button>
+</template>
+
+<script>
+export default {
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    isInClipboard: {
+      type: Boolean,
+      required: true,
+    },
+    addTitle: {
+      type: String,
+      required: false,
+      default: 'Add to clipboard',
+    },
+    removeTitle: {
+      type: String,
+      required: false,
+      default: 'Remove from clipboard',
+    }
+  },
+
+
+  methods: {
+    // Method to handle adding to clipboard
+    addToClipboard(index) {
+      this.$emit('addToClipboard');
+    },
+    // Method to handle removing from clipboard
+    removeFromClipboard() {
+      this.$emit('removeFromClipboard');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.remove-btn {
+  background-color: #FFFFFF;
+  color: #596372;
+}
+.remove-btn:hover {
+  background-color: #f8f9fa; 
+  color: #596372;
+}
+.add-btn {
+  background-color: #0CA442;
+}
+</style>

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')"
       >
@@ -34,6 +34,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Calculated Properties')"
         data-cy="topbar-calcs"
         @click="$emit('open-calc')"
@@ -45,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')"
@@ -56,6 +58,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Watchers')"
         data-cy="topbar-watchers"
         @click="$emit('open-watchers')"
@@ -67,6 +70,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="outlined-secondary"
+        :disabled="disabled"
         :popper-opts="{ placement: 'bottom-end' }"
         data-cy="topbar-options"
       >
@@ -86,6 +90,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

@@ -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;

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 {

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 {