add component

src/components/editor/pagesDropdown.vue

@@ -0,0 +1,109 @@
+<template>
+  <!--
+    Dropdown component to display options related to pages.
+    Provides options to add a new page, see all pages, and select individual pages.
+  -->
+  <b-dropdown right data-cy="page-dropdown" variant="platform">
+    <!-- Dropdown button content -->
+    <template #button-content>
+      <!-- Icon representing a file -->
+      <i class="fa fa-file"></i>
+    </template>
+
+    <!-- Option to add a new page -->
+    <b-dropdown-item data-cy="add-page" @click="onAddPage">
+      <!-- Icon for adding a new page -->
+      <i class="fa fa-plus platform-dropdown-item-icon"></i>
+      <!-- Text for adding a new page -->
+      {{ $t("Create Page") }}
+    </b-dropdown-item>
+
+    <!-- Option to see all pages -->
+    <b-dropdown-item data-cy="see-all-pages" @click="onSeeAllPages">
+      <!-- Icon for seeing all pages -->
+      <i class="fa fa-eye platform-dropdown-item-icon"></i>
+      <!-- Text for seeing all pages -->
+      {{ $t("See all pages") }}
+    </b-dropdown-item>
+
+    <!-- Divider between adding and viewing options -->
+    <b-dropdown-divider></b-dropdown-divider>
+
+    <!-- Dropdown items for selecting individual pages -->
+    <b-dropdown-item
+      v-for="(item, page) in data"
+      :key="page"
+      :data-cy="'page-' + item.name"
+      @click="onClickPage(page)"
+    >
+      <!-- Display the name of the page -->
+      {{ item.name }}
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+/**
+ * Vue component for managing pages through a dropdown menu.
+ * @component
+ * @prop {Props} props - The component's props object.
+ */
+
+export default {
+  /**
+   * The name of the component.
+   * @type {string}
+   */
+  name: "PagesDropdown",
+
+  /**
+   * The props that the component accepts.
+   * @type {Object}
+   * @property {PageItem[]} data - The array of page items to be displayed in the dropdown.
+   *                               Defaults to null.
+   */
+  props: {
+    data: {
+      type: Array,
+      default: null
+    }
+  },
+
+  /**
+   * The methods available within the component.
+   */
+  methods: {
+    /**
+     * Handler for when the "Add Page" option is clicked.
+     * Emits the "addPage" event.
+     */
+    onAddPage() {
+      this.$emit("addPage");
+    },
+
+    /**
+     * Handler for when the "See All Pages" option is clicked.
+     * Emits the "seeAllPages" event.
+     */
+    onSeeAllPages() {
+      this.$emit("seeAllPages");
+    },
+
+    /**
+     * Handler for when a specific page is clicked.
+     * Emits the "clickPage" event with the selected page.
+     * @param {PageItem} page - The selected page item.
+     */
+    onClickPage(page) {
+      this.$emit("clickPage", page);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.platform-dropdown-item-icon {
+  // Style for the icons in dropdown items.
+  color: #1572c2;
+}
+</style>

tests/e2e/specs/pagesDropdown.spec.js

@@ -0,0 +1,45 @@
+describe("Page Dropdown", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+  it("Basic default value", () => {
+    cy.openAllAcordeon();
+    cy.get("[data-cy=page-dropdown]").click();
+    cy.get("[data-cy=add-page]").click();
+    // Define Page 2
+    cy.get("[data-cy=add-page-name]").clear().type("Page_2");
+    cy.get("[data-cy=add-page-modal] button.btn").eq(1).click();
+    cy.get('[data-cy=controls-FormButton]:contains("Page")').drag(
+      "[data-cy=screen-drop-zone]",
+      { position: "bottom" }
+    );
+    cy.get("[data-cy=screen-element-container]").click();
+    cy.get("[data-cy=inspector-label]").clear().type("Go to Page 1");
+    cy.get("[data-cy=accordion-Configuration]").click();
+    cy.setMultiselect("[data-cy=inspector-eventData]", "Default");
+    // Define Page 1
+    cy.get("[data-cy=page-dropdown]").click();
+    cy.get("[data-cy=page-Default]").click();
+    cy.get('[data-cy=controls-FormButton]:contains("Page")').drag(
+      "[data-cy=screen-drop-zone]",
+      { position: "bottom" }
+    );
+    cy.get("[data-cy=screen-element-container]").click();
+    cy.get("[data-cy=inspector-label]").clear().type("Go to Page 2");
+    cy.get("[data-cy=accordion-Configuration]").click();
+    cy.setMultiselect("[data-cy=inspector-eventData]", "Page_2");
+    // Navigate Default
+    cy.get("[data-cy=page-dropdown]").click();
+    cy.get("[data-cy=page-Default]").click();
+    cy.get("[data-cy=editor-content]").should("contain.text", "Go to Page 2");
+    // Navigate Page 2
+    cy.get("[data-cy=page-dropdown]").click();
+    cy.get("[data-cy=page-Page_2]").click();
+    cy.get("[data-cy=editor-content]").should("contain.text", "Go to Page 1");
+    // Preview
+    cy.get("[data-cy=mode-preview]").click();
+    cy.get("[data-cy=preview-content]").should("contain.text", "Go to Page 2");
+    cy.get("[data-cy=preview-content] button").click();
+    cy.get("[data-cy=preview-content]").should("contain.text", "Go to Page 1");
+  });
+});