@processmaker/screen-builder 2.83.10 → 2.84.0

package/src/stories/PagesDropdown.stories.js

@@ -0,0 +1,132 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { within, expect, waitFor } from "@storybook/test";
+import "../bootstrap";
+// b-tabs from bootstrap-vue
+import PagesDropdown from "../components/editor/pagesDropdown.vue";
+
+export default {
+  title: "Components/PagesDropdown",
+  component: PagesDropdown,
+  tags: ["autodocs"],
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PagesDropdown },
+    template: `
+      <pages-dropdown
+        :data="data"
+        @addPage="onAddPage"
+        @clickPage="onClick"
+        @seeAllPages="onSeeAllPages"
+      />
+    `,
+    data() {
+      return {};
+    },
+    methods: {
+      onAddPage() {
+        console.log("Add page clicked");
+      },
+      onSeeAllPages() {
+        console.log("See all pages clicked");
+      },
+      onClick(index) {
+        console.log("Click page item:", index);
+      }
+    }
+  })
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component
+export const Preview = {
+  args: {
+    data: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ]
+  }
+};
+
+// Open the pages dropdown
+export const ClickInDropdown = {
+  args: {
+    data: [{ name: "Page 1" }, { name: "Page 2" }, { name: "Page 3" }]
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const selector = canvasElement.querySelector(
+      "[data-test=page-dropdown] button"
+    );
+    console.log(selector);
+    await selector.click(selector);
+    await waitFor(
+      () => {
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML(
+          "Create Page"
+        );
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML(
+          "See all pages"
+        );
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML("Page 1");
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML("Page 2");
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML("Page 3");
+      },
+      { timeout: 1000 }
+    );
+  }
+};
+// Open the Create Page
+export const ClickInCreatePage = {
+  args: {
+    data: [{ name: "Page 1" }]
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const selector = canvasElement.querySelector(
+      "[data-test=page-dropdown] button"
+    );
+    const selectorAddPage = canvasElement.querySelector("[data-test=add-page]");
+    console.log(selectorAddPage);
+    await selector.click(selector);
+    await waitFor(
+      () => {
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML(
+          "Create Page"
+        );
+      },
+      { timeout: 1000 }
+    );
+    await selectorAddPage.click(selectorAddPage);
+  }
+};
+// Open the See all Pages
+export const ClickInSeeAllPages = {
+  args: {
+    data: [{ name: "Page 1" }]
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const selector = canvasElement.querySelector(
+      "[data-test=page-dropdown] button"
+    );
+    const selectorAddPage = canvasElement.querySelector(
+      "[data-test=see-all-pages]"
+    );
+    console.log(selectorAddPage);
+    await selector.click(selector);
+    await waitFor(
+      () => {
+        expect(canvas.getByTestId("page-dropdown")).toContainHTML(
+          "See all pages"
+        );
+      },
+      { timeout: 1000 }
+    );
+    await selectorAddPage.click(selectorAddPage);
+  }
+};

package/src/stories/ScreenToolbar.stories.js

@@ -0,0 +1,188 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import "../bootstrap";
+// b-tabs from bootstrap-vue
+import ScreenToolbar from "../components/ScreenToolbar.vue";
+
+const options = [
+  {
+    id: "group_design",
+    type: "group",
+    section: "left",
+    items: [
+      {
+        id: "button_design",
+        type: "button",
+        title: "Design Screen",
+        name: "Design",
+        variant: "secondary",
+        icon: "fas fa-drafting-compass pr-1",
+        action: "changeMode(\"editor\")",
+      },
+      {
+        id: "button_preview",
+        type: "button",
+        title: "Preview Screen",
+        name: "Preview",
+        variant: "outline-secondary",
+        icon: "fas fa-cogs pr-1",
+        action: "changeMode(\"preview\")",
+      },
+    ],
+  },
+  {
+    id: "group_preview",
+    type: "group",
+    section: "left",
+    displayCondition: "displayPreview",
+    items: [
+      {
+        id: "button_preview_desktop",
+        type: "button",
+        title: "Preview Desktop",
+        variant: "secondary",
+        icon: "fas fa-desktop",
+        action: "changeDeviceScreen(\"desktop\")",
+      },
+      {
+        id: "button_preview_mobile",
+        type: "button",
+        title: "Preview Mobile",
+        variant: "outline-secondary",
+        icon: "fas fa-mobile pr-1",
+        action: "changeDeviceScreen(\"mobile\")",
+      },
+    ],
+  },
+  {
+    id: "group_properties",
+    type: "group",
+    section: "right",
+    items: [
+      {
+        id: "button_calcs",
+        type: "button",
+        title: "Calculated Properties",
+        name: "Calcs",
+        variant: "secondary",
+        icon: "fas fa-flask",
+        action: "openComputedProperties()",
+      },
+      {
+        id: "button_custom_css",
+        type: "button",
+        title: "Custom CSS",
+        name: "CSS",
+        variant: "secondary",
+        icon: "fab fa-css3",
+        action: "openCustomCSS()",
+      },
+      {
+        id: "button_watchers",
+        type: "button",
+        title: "Watchers",
+        name: "Watchers",
+        variant: "secondary",
+        icon: "fas fa-mask",
+        action: "openWatchersPopup()",
+      },
+    ],
+  },
+  {
+    id: "button_export",
+    section: "right",
+    type: "button",
+    title: "Export Screen",
+    name: "",
+    variant: "secondary",
+    icon: "fas fa-file-export",
+    action: "beforeExportScreen()",
+  },
+  {
+    id: "button_save",
+    section: "right",
+    type: "button",
+    title: "Save Screen",
+    name: "",
+    variant: "secondary",
+    icon: "fas fa-save",
+    action: () => {
+      ProcessMaker.EventBus.$emit("save-screen", false);
+    },
+  },
+];
+
+export default {
+  title: "Components/ScreenToolbar",
+  component: ScreenToolbar,
+  tags: ["autodocs"],
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Toolbar: ScreenToolbar },
+    template: `
+      <toolbar v-bind="$props">
+        <b-btn
+          variant="secondary"
+          size="sm"
+          class="mr-2"
+          :title="$t('Load Screen')"
+        >
+          <i class="fas fa-upload mr-1" />
+        </b-btn>
+        <button
+          type="button"
+          class="btn btn-secondary btn-sm ml-1"
+          :title="$t('Save Screen')"
+          @click="saveToLocalStorage()"
+        >
+          <i class="fas fa-save" />
+        </button>
+      </toolbar>
+    `,
+    data() {
+      return {};
+    },
+    methods: {
+      sorted(orderedArray) {
+        console.log("edit", orderedArray);
+      },
+      editPage(page) {
+        console.log("edit", page);
+      },
+      deletePage(page) {
+        this.items.splice(this.items.indexOf(page), 1);
+      },
+      openPage(index) {
+        this.$refs.tabsBar.openPageByIndex(index);
+      }
+    }
+  }),
+  decorators: [
+    () => ({
+      template: `<div class="d-flex flex-row align-items-center border">
+        <b-button-group size="sm" class="mx-2 text-nowrap">
+          <b-button
+            variant="secondary"
+          >
+            <i class="fas fa-drafting-compass pr-1" />{{ $t("Design") }}
+          </b-button>
+          <b-button
+            variant="outline-secondary"
+          >
+            <i class="fas fa-cogs pr-1" />{{ $t("Preview") }}
+          </b-button>
+        </b-button-group>
+        <story />
+      </div>`
+    })
+  ]
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component
+export const Preview = {
+  args: {
+    options
+  },
+};

package/src/stories/Sortable.stories.js

@@ -0,0 +1,225 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { within, userEvent, fireEvent, expect, waitFor } from "@storybook/test";
+import "../bootstrap";
+// b-tabs from bootstrap-vue
+import Sortable from "../components/sortable/Sortable.vue";
+
+/**
+ * Simulates a drag and drop action from one element to another.
+ *
+ * @param {HTMLElement} sourceElement - The element to drag.
+ * @param {HTMLElement} targetElement - The element to drop onto.
+ */
+async function dragAndDrop(sourceElement, targetElement) {
+  await fireEvent.dragStart(sourceElement);
+  await fireEvent.dragEnter(targetElement);
+  await fireEvent.dragOver(targetElement);
+  await fireEvent.drop(targetElement);
+  await fireEvent.dragEnd(sourceElement);
+}
+
+export default {
+  title: "Components/Sortable",
+  component: Sortable,
+  tags: ["autodocs"],
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { Sortable },
+    template: `
+      <sortable
+        v-bind="$props"
+        @sorted="sorted"
+        @item-edit="editPage"
+        @item-delete="deletePage"
+      />
+    `,
+    data() {
+      return {};
+    },
+    methods: {
+      sorted(orderedArray) {
+        console.log("edit", orderedArray);
+      },
+      editPage(page) {
+        console.log("edit", page);
+      },
+      deletePage(page) {
+        this.items.splice(this.items.indexOf(page), 1);
+      },
+      openPage(index) {
+        this.$refs.tabsBar.openPageByIndex(index);
+      }
+    }
+  })
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component
+export const Preview = {
+  args: {
+    filterKey: "name",
+    items: [
+      { name: "Page 1", order: 1 },
+      { name: "Page 2", order: 2 },
+      { name: "Page 3", order: 3 },
+      { name: "Page 4", order: 4 },
+      { name: "Page 5", order: 5 }
+    ]
+  }
+};
+
+// User can reorder items
+export const UserCanReorderItems = {
+  args: {
+    filterKey: "name",
+    items: [
+      { name: "Page 1", order: 1 },
+      { name: "Page 2", order: 2 },
+      { name: "Page 3", order: 3 },
+      { name: "Page 4", order: 4 },
+      { name: "Page 5", order: 5 }
+    ]
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Drag item-1 item-5 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-5")
+    );
+
+    // Drag item-1 item-4 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-4")
+    );
+
+    // Drag item-1 item-3 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-3")
+    );
+
+    // Drag item-1 item-2 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-2")
+    );
+
+    // Check the new order
+    const items = canvas.getAllByTestId(/item-\d+/);
+    expect(items[0]).toHaveTextContent("Page 5");
+    expect(items[1]).toHaveTextContent("Page 4");
+    expect(items[2]).toHaveTextContent("Page 3");
+    expect(items[3]).toHaveTextContent("Page 2");
+    expect(items[4]).toHaveTextContent("Page 1");
+  }
+};
+
+// User can filter by text
+export const UserCanFilterByText = {
+  args: {
+    filterKey: "name",
+    items: [
+      { name: "Zeus", order: 1 },
+      { name: "Hera", order: 2 },
+      { name: "Poseidon", order: 3 },
+      { name: "Athena", order: 4 },
+      { name: "Hephaïstus", order: 5 }
+    ]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const search = canvas.getByTestId("search");
+
+    // Type "Zeus"
+    await step("Type 'Zeus'", async () => {
+      await userEvent.clear(search);
+      await userEvent.type(search, "Zeus");
+      const items = canvas.getAllByTestId(/item-\d+/);
+      await waitFor(() => {
+        expect(items).toHaveLength(1);
+      });
+    });
+
+    // Type "a" should be case insensitive
+    await step("Type 'a'", async () => {
+      await userEvent.clear(search);
+      await userEvent.type(search, "a");
+      const items = canvas.getAllByTestId(/item-\d+/);
+      await waitFor(() => {
+        expect(items).toHaveLength(3);
+      });
+    });
+
+    // Type "Ï" support unicode
+    await step("Type 'Ï'", async () => {
+      await userEvent.clear(search);
+      await userEvent.type(search, "Ï");
+      const items = canvas.getAllByTestId(/item-\d+/);
+      await waitFor(() => {
+        expect(items).toHaveLength(1);
+      });
+    });
+  }
+};
+
+// User can sort with filter by text
+export const UserCanSortWithFilterByText = {
+  args: {
+    filterKey: "name",
+    items: [
+      { name: "Zeus", order: 1 },
+      { name: "Hera", order: 2 },
+      { name: "Poseidon", order: 3 },
+      { name: "Athena", order: 4 },
+      { name: "Hephaïstus", order: 5 }
+    ]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const search = canvas.getByTestId("search");
+
+    // Type "A"
+    await step("Type 'A'", async () => {
+      await userEvent.clear(search);
+      await userEvent.type(search, "A");
+      const items = canvas.getAllByTestId(/item-\d+/);
+      await waitFor(() => {
+        expect(items).toHaveLength(3);
+      });
+    });
+
+    // Drag "Hera" to "Hephaïstus" position
+    await dragAndDrop(
+      canvas.getByTitle("Hera"),
+      canvas.getByTitle("Hephaïstus")
+    );
+
+    // Drag "Athena" to "Hephaïstus" position
+    await dragAndDrop(
+      canvas.getByTitle("Athena"),
+      canvas.getByTitle("Hephaïstus")
+    );
+
+    // Clean search
+    await step("Clean search", async () => {
+      await userEvent.clear(search);
+      const items = canvas.getAllByTestId(/item-\d+/);
+      await waitFor(() => {
+        expect(items).toHaveLength(5);
+      });
+    });
+
+    // Check the new order
+    const items = canvas.getAllByTestId(/item-\d+/);
+    expect(items[0]).toHaveTextContent("Zeus");
+    expect(items[1]).toHaveTextContent("Poseidon");
+    expect(items[2]).toHaveTextContent("Hephaïstus");
+    expect(items[3]).toHaveTextContent("Athena");
+    expect(items[4]).toHaveTextContent("Hera");
+  }
+};