@processmaker/screen-builder 2.99.3 → 3.0.0

package/src/store/modules/ClipboardManager.js

@@ -0,0 +1,79 @@
+/**
+ * ClipboardManager class to handle saving to and loading from
+ * localStorage and the server.
+ */
+class ClipboardManager {
+
+  /**
+   * Callable property function that loads the clipboard from server.
+   */
+  static loadFromServerFn = null;
+
+  /**
+   * Callable property function that saves the clipboard to server.
+   */
+  static saveToServerFn = null;
+
+  /**
+   * Saves the clipboard items to localStorage.
+   * @param {Array} clipboard - The clipboard items to save.
+   */
+  static saveToLocalStorage(clipboard) {
+    localStorage.setItem('clipboard', JSON.stringify(clipboard));
+  }
+
+  /**
+   * Loads the clipboard items from localStorage.
+   * @returns {Array} The clipboard items.
+   */
+  static loadFromLocalStorage() {
+    const clipboardData = localStorage.getItem('clipboard');
+    if (clipboardData) {
+      try {
+        return JSON.parse(clipboardData);
+      } catch (e) {
+        console.error('Failed to parse clipboard data from localStorage:', e);
+        return [];
+      }
+    } else {
+      return [];
+    }
+  }
+
+  /**
+   * Saves the clipboard items to the server via POST /clipboard/create_or_update.
+   * @param {Array} clipboard - The clipboard items to save.
+   * @returns {Promise}
+   */
+  static saveToServer(clipboard) {
+    // return axios.post('/clipboard/create_or_update', { clipboard });
+    if (!ClipboardManager.saveToServerFn) {
+      return Promise.resolve();
+    }
+    return ClipboardManager.saveToServerFn(clipboard);
+  }
+
+  /**
+   * Loads the clipboard items from the server via GET /clipboard/get_by_user.
+   * @returns {Promise<Array>} The clipboard items.
+   */
+  static loadFromServer() {
+    if (!ClipboardManager.loadFromServerFn) {
+      return Promise.resolve([]);
+    }
+    return ClipboardManager.loadFromServerFn()
+      .then(clipboard => {
+        if (Array.isArray(clipboard)) {
+          return clipboard;
+        } else {
+          throw new Error('Invalid server response: Expected array for clipboard content');
+        }
+      })
+      .catch(error => {
+        console.error('Failed to load clipboard from server:', error);
+        return [];
+      });
+  }
+}
+
+export default ClipboardManager;

package/src/store/modules/clipboardModule.js

@@ -0,0 +1,210 @@
+import { v4 as uuidv4 } from 'uuid';
+import ClipboardManager from './ClipboardManager';
+
+/**
+ * Vuex module for managing clipboard state with localStorage synchronization.
+ */
+const clipboardModule = {
+  /**
+   * Indicates that this module is namespaced, which means
+   * all its state, mutations, actions, and getters will be
+   * scoped to this module.
+   */
+  namespaced: true,
+
+  /**
+   * The state of the clipboard module.
+   * @returns {Object} The initial state of the clipboard.
+   */
+  state() {
+    return {
+      /**
+       * @type {Array} Array to store clipboard items.
+       */
+      clipboard: [],
+    };
+  },
+
+  /**
+   * Getters provide read-only access to the state.
+   */
+  getters: {
+    /**
+     * Returns all items in the clipboard.
+     * @param {Object} state - The state of the module.
+     * @returns {Array} The array of clipboard items.
+     */
+    clipboardItems: state => state.clipboard,
+
+    /**
+     * Checks if an item with a specific uuid is present in the clipboard.
+     * @param {Object} state - The state of the module.
+     * @returns {Function} Function to check item presence.
+     */
+    isInClipboard: state => item => {
+      if (!item || !item.uuid) {
+        // If the item is invalid or doesn't have an uuid, return false
+        return false;
+      }
+      return state.clipboard.some(clipboardItem => clipboardItem.uuid === item.uuid);
+    },
+  },
+
+  /**
+   * Mutations are used to modify the state.
+   */
+  mutations: {
+    /**
+     * Sets the entire clipboard state.
+     * @param {Object} state - The state of the module.
+     * @param {Array} clipboard - The new clipboard array.
+     */
+    SET_CLIPBOARD(state, clipboard) {
+      if (!Array.isArray(clipboard)) {
+        throw new Error('Clipboard content must be an array');
+      }
+      state.clipboard.splice(0, state.clipboard.length, ...clipboard);
+    },
+
+    /**
+     * Adds items to the clipboard.
+     * @param {Object} state - The state of the module.
+     * @param {any} items - The items to add.
+     */
+    ADD_TO_CLIPBOARD(state, items) {
+      const itemsToAdd = Array.isArray(items) ? items : [items];
+      itemsToAdd.forEach(item => {
+        if (!item.uuid) {
+          item.uuid = uuidv4();
+        }
+        if (!state.clipboard.some(clipboardItem => clipboardItem.uuid === item.uuid)) {
+          state.clipboard.push(item);
+        }
+      });
+    },
+
+    /**
+     * Removes a specific item from the clipboard.
+     * @param {Object} state - The state of the module.
+     * @param {any} item - The item to remove.
+     */
+    REMOVE_FROM_CLIPBOARD(state, item) {
+      if (!item || !item.uuid) {
+        console.error('Item or item uuid is missing');
+        return;
+      }
+      const index = state.clipboard.findIndex(clipboardItem => clipboardItem.uuid === item.uuid);
+      if (index !== -1) {
+        state.clipboard.splice(index, 1);
+      }
+    },
+
+    /**
+     * Clears all items from the clipboard.
+     * @param {Object} state - The state of the module.
+     */
+    CLEAR_CLIPBOARD(state) {
+      state.clipboard.splice(0, state.clipboard.length);
+    },
+  },
+
+  /**
+   * Actions are used to commit mutations and can contain asynchronous operations.
+   */
+  actions: {
+    /**
+     * Initializes the clipboard by loading from localStorage and server,
+     * and setting up the storage event listener.
+     * @param {Object} context - The Vuex context.
+     */
+    initializeClipboard({ commit }) {
+      // Load from localStorage
+      const clipboard = ClipboardManager.loadFromLocalStorage();
+      commit('SET_CLIPBOARD', clipboard);
+
+      // Load from server and update state
+      ClipboardManager.loadFromServer().then(serverClipboard => {
+        if (serverClipboard.length > 0) {
+          commit('SET_CLIPBOARD', serverClipboard);
+          ClipboardManager.saveToLocalStorage(serverClipboard);
+        }
+      });
+
+      // Set up storage event listener
+      window.addEventListener('storage', event => {
+        if (event.key === 'clipboard') {
+          const clipboard = ClipboardManager.loadFromLocalStorage();
+          commit('SET_CLIPBOARD', clipboard);
+        }
+      });
+    },
+
+    /**
+     * Setup saveToServerFn
+     * @param {Object} context - The Vuex context.
+     * @param {Function} saveToServerFn - The function to save the clipboard to the server.
+     */
+    setupSaveToServerFn({ commit }, saveToServerFn) {
+      ClipboardManager.saveToServerFn = saveToServerFn;
+    },
+
+    /**
+     * Setup loadFromServerFn
+     * @param {Object} context - The Vuex context.
+     * @param {Function} loadFromServerFn - The function to load the clipboard from the server.
+     */
+    setupLoadFromServerFn({ commit }, loadFromServerFn) {
+      ClipboardManager.loadFromServerFn = loadFromServerFn;
+    },
+
+    /**
+     * Adds an item to the clipboard.
+     * Updates localStorage and the server.
+     * @param {Object} context - The Vuex context.
+     * @param {any} item - The item to add.
+     */
+    addToClipboard({ commit, state }, item) {
+      if (!item) {
+        throw new Error('Item is missing');
+      }
+      commit('ADD_TO_CLIPBOARD', item);
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      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.
+     * @param {Object} context - The Vuex context.
+     * @param {any} item - The item to remove.
+     */
+    removeFromClipboard({ commit, state }, item) {
+      commit('REMOVE_FROM_CLIPBOARD', item);
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
+    },
+
+    /**
+     * Clears all items from the clipboard.
+     * Updates localStorage and the server.
+     * @param {Object} context - The Vuex context.
+     */
+    clearClipboard({ commit, state }) {
+      commit('CLEAR_CLIPBOARD');
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
+    },
+  },
+};
+
+export default clipboardModule;

package/src/stories/ClipboardButton.stories.js

@@ -0,0 +1,66 @@
+import ClipboardButton from '../components/ClipboardButton.vue';
+import { within, userEvent, expect } from "@storybook/test";
+
+export default {
+  title: 'Components/ClipboardButton',
+  tags: ["autodocs"],
+  component: ClipboardButton,
+  argTypes: {
+    isInClipboard: { control: 'boolean' },
+  },
+};
+
+const Template = (args) => ({
+  components: { ClipboardButton },
+  setup() {
+    return { args };
+  },
+  template: '<ClipboardButton v-bind="args" @addToClipboard="args.addToClipboard" @removeFromClipboard="args.removeFromClipboard"/>',
+});
+
+// Story for when the item is in the clipboard
+export const InClipboard = Template.bind({});
+InClipboard.args = {
+  isInClipboard: true,
+  index: 1,
+  addTitle: 'Add to clipboard',
+  removeTitle: 'Remove from clipboard',
+  addToClipboard: () => {},
+  removeFromClipboard: () => {},
+};
+InClipboard.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Expect the "Remove from clipboard" button to be rendered
+  const removeButton = await canvas.getByRole('button', { name: /Remove from clipboard/i });
+  expect(removeButton).toBeInTheDocument();
+
+  // Simulate a click on the remove button
+  await userEvent.click(removeButton);
+
+  // Ensure that the button remains visible after interaction
+  expect(removeButton).toBeVisible();
+};
+
+// Story for when the item is not in the clipboard
+export const NotInClipboard = Template.bind({});
+NotInClipboard.args = {
+  isInClipboard: false,
+  index: 1,
+  addToClipboard: () => {},
+  removeFromClipboard: () => {},
+};
+
+NotInClipboard.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Expect the "Add to clipboard" button to be rendered
+  const addButton = await canvas.getByRole('button', { name: /Add to clipboard/i });
+  expect(addButton).toBeInTheDocument();
+
+  // Simulate a click on the add button
+  await userEvent.click(addButton);
+
+  // Ensure that the button remains visible after interaction
+  expect(addButton).toBeVisible();
+};

package/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);
   }
 };