FOUR-13443 Implement Clipboard usage between pages or separate screens

ProcessMaker/Models/Clipboard.php

@@ -26,6 +26,15 @@ class Clipboard extends ProcessMakerModel
         'updated_at',
     ];
 
+    /**
+     * The attributes that should be cast to native types.
+     *
+     * @var array
+     */
+    protected $casts = [
+        'config' => 'array',
+    ];
+
     public function user()
     {
         return $this->belongsTo(User::class);

resources/js/processes/screen-builder/screen.vue

@@ -716,15 +716,6 @@ export default {
     ProcessMaker.EventBus.$on("show-create-template-modal", () => {
       this.$refs["create-template-modal"].show();
     });
-    ProcessMaker.EventBus.$on(
-      "save-clipboard",
-      (items) => {
-        console.log('save-clipboard',items);
-        ProcessMaker.apiClient.post('/api/1.1/clipboard/create_or_update', {
-          config: JSON.stringify(items),
-        });
-      },
-    );
   },
   methods: {
     ...mapMutations("globalErrorsModule", { setStoreMode: "setMode" }),

resources/views/processes/screen-builder/screen.blade.php

@@ -100,43 +100,29 @@ class="border-0 bg-white p-0"
         }
       });
       window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
-        const savedClipboard = localStorage.getItem("savedClipboard");
+        // Register saveToServerFn
+        screen.$store.dispatch("clipboardModule/setupSaveToServerFn", (items) => {
+          return ProcessMaker.apiClient.post('/api/1.1/clipboard/create_or_update', {
+            config: items, // JSON.stringify(items),
+          });
+        });
 
-        if (savedClipboard) {
-          addClipboardToStore(savedClipboard);
-          return;
-        }
-
-        ProcessMaker.apiClient.get('/api/1.1/clipboard/get_by_user')
+        // Register loadFromServerFn
+        screen.$store.dispatch("clipboardModule/setupLoadFromServerFn", () => {
+          return ProcessMaker.apiClient.get('/api/1.1/clipboard/get_by_user')
           .then(handleClipboardResponse)
           .catch(handleClipboardError);
 
-          /**
-           * Helper function to add clipboard data to the store
-           * @param {string|object} clipboardData
-           */
-          function addClipboardToStore(clipboardData) {
-            try {
-              const parsedData = typeof clipboardData === 'string' ? JSON.parse(clipboardData) : clipboardData;
-              if (parsedData && typeof parsedData === 'object') {
-                screen.$store.dispatch("clipboardModule/addToClipboard", parsedData);
-              } else {
-                console.error("Clipboard data is not in the expected format.");
-              }
-            } catch (error) {
-              console.error("Failed to parse clipboard data: ", error);
-            }
-          }
-
           /**
            * Handle clipboard API response
            * @param {object} response
            */
           function handleClipboardResponse(response) {
-            if (response && response.data && response.data.config) {
-              addClipboardToStore(response.data.config);
+            if (response && response.data && response.data.config && Array.isArray(response.data.config)) {
+              // addClipboardToStore(response.data.config);
+              return response.data.config;
             } else {
-              console.error("No valid clipboard config data in response.");
+              throw new Error("No valid clipboard config data in response.");
             }
           }
 
@@ -147,6 +133,7 @@ function handleClipboardResponse(response) {
           function handleClipboardError(error) {
             console.error("Error fetching clipboard data: ", error);
           }
+        });
       });
 
       window.Processmaker.user = @json($currentUser);