-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1540 from ProcessMaker/feature/FOUR-13447_B
FOUR-13447: Page Dropdown
- Loading branch information
Showing
9 changed files
with
448 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .btn-platform { | ||
| background-color: #ffff; | ||
| color: #6a7888; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| <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 data-test="page-dropdown" variant="platform" :boundary="boundary"> | ||
| <!-- 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-test="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-test="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-test="'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 | ||
| }, | ||
| boundary: { | ||
| type: String, | ||
| default: "viewport" | ||
| } | ||
| }, | ||
| /** | ||
| * 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 btn style | ||
| .btn-platform { | ||
| background-color: #ffff; | ||
| color: #6a7888; | ||
| } | ||
| .platform-dropdown-item-icon { | ||
| // Style for the icons in dropdown items. | ||
| color: #1572c2; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| import { within, userEvent, expect, waitFor } from "@storybook/test"; | ||
| import "../bootstrap"; | ||
| // b-tabs from bootstrap-vue | ||
| import TabsBar from "../components/TabsBar.vue"; | ||
| import PagesDropdown from "../components/editor/pagesDropdown.vue"; | ||
|
|
||
| export default { | ||
| title: "Components/DropdownAndPages", | ||
| component: [TabsBar, PagesDropdown], | ||
| tags: ["autodocs"], | ||
| render: (args, { argTypes }) => ({ | ||
| props: Object.keys(argTypes), | ||
| components: { TabsBar, PagesDropdown }, | ||
| template: ` | ||
| <tabs-bar ref="tabsBar" v-bind="$props"> | ||
| <template v-slot:tabs-start> | ||
| <pages-dropdown | ||
| :data="pages" | ||
| @addPage="onAddPage" | ||
| @clickPage="onClick" | ||
| @seeAllPages="onSeeAllPages" | ||
| /> | ||
| </template> | ||
| <template v-slot="{ currentPage }"> | ||
| Here comes content of {{pages[currentPage].name}} (#{{currentPage}}) | ||
| </template> | ||
| </tabs-bar> | ||
| `, | ||
| data() { | ||
| return {}; | ||
| }, | ||
| methods: { | ||
| onAddPage() { | ||
| console.log("Add page clicked"); | ||
| }, | ||
| onSeeAllPages() { | ||
| console.log("See all pages clicked"); | ||
| }, | ||
| onClick(index) { | ||
| this.$refs.tabsBar.openPageByIndex(index); | ||
| } | ||
| } | ||
| }) | ||
| }; | ||
|
|
||
| /** | ||
| * Stories of the component | ||
| */ | ||
| // Preview the component | ||
| export const Preview = { | ||
| args: { | ||
| pages: [ | ||
| { name: "Page 1" }, | ||
| { name: "Page 2" }, | ||
| { name: "Page 3" }, | ||
| { name: "Page 4" }, | ||
| { name: "Page 5" } | ||
| ], | ||
| initialOpenedPages: [0] | ||
| } | ||
| }; | ||
|
|
||
| // Open a page using the PageDropdown(index) | ||
| export const OpenPageUsingDropdown = { | ||
| args: { | ||
| pages: [ | ||
| { name: "Page1" }, | ||
| { name: "Page2" }, | ||
| { name: "Page3" }, | ||
| { name: "Page4" }, | ||
| { name: "Page5" } | ||
| ], | ||
| initialOpenedPages: [0] | ||
| }, | ||
| play: async ({ canvasElement, step }) => { | ||
| const canvas = within(canvasElement); | ||
| const selector = canvasElement.querySelector( | ||
| "[data-test=page-dropdown] button" | ||
| ); | ||
| let selectorAddPage = canvasElement.querySelector("[data-test=page-Page3]"); | ||
| console.log(selectorAddPage); | ||
| await selector.click(selector); | ||
| await selectorAddPage.click(selectorAddPage); | ||
| // Open Page 3 (index=2) | ||
| await step("Open Page 3 (index=2)", async () => { | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByTestId("tab-content")).toContainHTML( | ||
| "Here comes content of Page3 (#2)" | ||
| ); | ||
| }, | ||
| { timeout: 1000 } | ||
| ); | ||
| }); | ||
|
|
||
| // Open Page 2 (index=1) | ||
| await selector.click(selector); | ||
| selectorAddPage = canvasElement.querySelector("[data-test=page-Page2]"); | ||
| await selectorAddPage.click(selectorAddPage); | ||
| await step("Open Page 2 (index=1)", async () => { | ||
| await waitFor( | ||
| () => { | ||
| expect(canvas.getByTestId("tab-content")).toContainHTML( | ||
| "Here comes content of Page2 (#1)" | ||
| ); | ||
| }, | ||
| { timeout: 1000 } | ||
| ); | ||
| }); | ||
| } | ||
| }; |
Oops, something went wrong.