From 398ac8be1ed30d462912d2a9d48aeff26b74d24c Mon Sep 17 00:00:00 2001 From: Murat Merdoglu <64781656+muratmerdoglu-dp@users.noreply.github.com> Date: Tue, 14 Jan 2025 16:44:58 +0100 Subject: [PATCH] BC 8586 - Make Visible Action Menu on Mobile View (#3487) BC-8586 - implement sticky action menu on mobile view --- .../templates/DefaultWireframe.unit.ts | 25 ++++- src/components/templates/DefaultWireframe.vue | 14 ++- .../templates/default-wireframe.types.ts | 1 + .../room/RoomMembers/ActionMenu.unit.ts | 50 ++++++++++ .../feature/room/RoomMembers/ActionMenu.vue | 52 +++++++++++ .../room/RoomMembers/MembersTable.unit.ts | 92 ++++++++++--------- .../feature/room/RoomMembers/MembersTable.vue | 64 ++++++------- src/modules/page/room/RoomMembers.page.vue | 21 ++++- src/serverApi/v3/api.ts | 34 ++----- 9 files changed, 241 insertions(+), 112 deletions(-) create mode 100644 src/modules/feature/room/RoomMembers/ActionMenu.unit.ts create mode 100644 src/modules/feature/room/RoomMembers/ActionMenu.vue diff --git a/src/components/templates/DefaultWireframe.unit.ts b/src/components/templates/DefaultWireframe.unit.ts index 3d65312611..5b0e51f57d 100644 --- a/src/components/templates/DefaultWireframe.unit.ts +++ b/src/components/templates/DefaultWireframe.unit.ts @@ -8,6 +8,7 @@ import { } from "@@/tests/test-utils/setup"; import { ComponentMountingOptions, mount } from "@vue/test-utils"; import DefaultWireframe from "../templates/DefaultWireframe.vue"; +import { nextTick } from "vue"; describe("DefaultWireframe", () => { const setup = ( @@ -44,6 +45,7 @@ describe("DefaultWireframe", () => { props: { fullWidth: true, headline: "dummy title", + maxWidth: "full", breadcrumbs: [ { title: "dummy breadcrumb 1", @@ -109,7 +111,7 @@ describe("DefaultWireframe", () => { it("displays headline in slot", () => { const wrapper = setup({ - props: { headline: "property title", fullWidth: false }, + props: { headline: "property title", fullWidth: false, maxWidth: "full" }, slots: { header: [ "

slot title

", @@ -125,7 +127,9 @@ describe("DefaultWireframe", () => { }); it("should emit 'fab:clicked' after click the fab button", async () => { - const wrapper = setup(); + const wrapper = setup({ + props: { maxWidth: "nativ" }, + }); await wrapper.setProps({ fabItems: { icon: "mdi-close", @@ -138,4 +142,21 @@ describe("DefaultWireframe", () => { expect(wrapper.emitted("fab:clicked")).toHaveLength(1); }); + + describe("when 'fixedHeader' prop is set", () => { + it("should have 'fixed-header' class", async () => { + const wrapper = setup({ + props: { maxWidth: "nativ" }, + }); + + const headerBefore = wrapper.find(".wireframe-header"); + expect(headerBefore.classes("fixed")).toBe(false); + + wrapper.setProps({ fixedHeader: true }); + await nextTick(); + + const headerAfter = wrapper.find(".wireframe-header"); + expect(headerAfter.classes("fixed")).toBe(true); + }); + }); }); diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue index acdf83e2a8..c6d32b048b 100644 --- a/src/components/templates/DefaultWireframe.vue +++ b/src/components/templates/DefaultWireframe.vue @@ -10,7 +10,7 @@ id="notify-screen-reader-assertive" class="d-sr-only" /> -
+
@@ -108,6 +108,9 @@ const props = defineProps({ type: String as PropType, default: null, }, + fixedHeader: { + type: Boolean, + }, }); const emit = defineEmits({ @@ -184,6 +187,13 @@ const showDivider = computed(() => { background-color: rgb(var(--v-theme-white)); } +.fixed { + position: fixed; + top: 64px; + width: 100%; + background-color: rgb(var(--v-theme-white)); +} + @media #{map-get($display-breakpoints, 'lg-and-up')} { .wireframe-fab { position: relative; @@ -208,7 +218,7 @@ $fab-wrapper-height: 80px; align-items: center; justify-content: flex-end; height: $fab-wrapper-height; - margin-top: -#{$fab-wrapper-height}; // stylelint-disable-line sh-waqar/declaration-use-variable + margin-top: -#{$fab-wrapper-height}; pointer-events: none; * { diff --git a/src/components/templates/default-wireframe.types.ts b/src/components/templates/default-wireframe.types.ts index 985e188711..9b6ec82d5a 100644 --- a/src/components/templates/default-wireframe.types.ts +++ b/src/components/templates/default-wireframe.types.ts @@ -22,6 +22,7 @@ export type Fab = { icon: string; title: string; href?: string; + to?: string; ariaLabel?: string; dataTestId?: string; }; diff --git a/src/modules/feature/room/RoomMembers/ActionMenu.unit.ts b/src/modules/feature/room/RoomMembers/ActionMenu.unit.ts new file mode 100644 index 0000000000..97de61dfd4 --- /dev/null +++ b/src/modules/feature/room/RoomMembers/ActionMenu.unit.ts @@ -0,0 +1,50 @@ +import { + createTestingI18n, + createTestingVuetify, +} from "@@/tests/test-utils/setup"; +import ActionMenu from "./ActionMenu.vue"; + +describe("ActionMenu", () => { + const setup = (selectedIds: string[] = ["test-id#1", "test-id#2"]) => { + const wrapper = mount(ActionMenu, { + global: { + plugins: [createTestingVuetify(), createTestingI18n()], + }, + props: { + selectedIds, + }, + }); + + return { wrapper }; + }; + + it("should be rendered", () => { + const { wrapper } = setup(); + expect(wrapper).toBeDefined(); + }); + + it("should show selected count", async () => { + const { wrapper } = setup(); + const selectedCount = wrapper.find(".selected-count"); + expect(selectedCount.html()).toContain("2 pages.administration.selected"); + }); + + it("should emit 'remove:selected' event when 'Remove' button is clicked", async () => { + const { wrapper } = setup(); + await wrapper + .findComponent({ ref: "removeSelectedMembers" }) + .trigger("click"); + const emitted = wrapper.emitted("remove:selected"); + expect(wrapper.emitted()).toHaveProperty("remove:selected"); + expect(emitted![0][0]).toStrictEqual(["test-id#1", "test-id#2"]); + }); + + it("should emit 'reset:selected' event when 'Reset' button is clicked", async () => { + const { wrapper } = setup(); + await wrapper + .findComponent({ ref: "resetSelectedMembers" }) + .trigger("click"); + + expect(wrapper.emitted()).toHaveProperty("reset:selected"); + }); +}); diff --git a/src/modules/feature/room/RoomMembers/ActionMenu.vue b/src/modules/feature/room/RoomMembers/ActionMenu.vue new file mode 100644 index 0000000000..fbbed6d1da --- /dev/null +++ b/src/modules/feature/room/RoomMembers/ActionMenu.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts index e087fe58a5..a3d9cc8218 100644 --- a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts +++ b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts @@ -6,7 +6,7 @@ import MembersTable from "./MembersTable.vue"; import { nextTick, ref } from "vue"; import { mdiMenuDown, mdiMenuUp, mdiMagnify } from "@icons/material"; import { roomMemberFactory } from "@@/tests/test-utils"; -import { DOMWrapper, VueWrapper } from "@vue/test-utils"; +import { DOMWrapper, flushPromises, VueWrapper } from "@vue/test-utils"; import { VDataTable, VTextField } from "vuetify/lib/components/index.mjs"; import { useConfirmationDialog } from "@ui-confirmation-dialog"; import setupConfirmationComposableMock from "@@/tests/test-utils/composable-mocks/setupConfirmationComposableMock"; @@ -131,41 +131,29 @@ describe("MembersTable", () => { expect(multiActionMenu.exists()).toBe(true); }); - it("should render selected members remove button", async () => { + it("should render ActionMenu component", async () => { const { wrapper } = setup(); - await selectCheckboxes([1], wrapper); - - const removeButton = wrapper.findComponent({ - ref: "removeSelectedMembers", - }); - - expect(removeButton.exists()).toBe(true); - }); - - it("should render selected members reset button", async () => { - const { wrapper } = setup(); + const actionMenuBefore = wrapper.findComponent({ name: "ActionMenu" }); + expect(actionMenuBefore.exists()).toBe(false); - await selectCheckboxes([1, 2], wrapper); + await selectCheckboxes([1], wrapper); - const resetButton = wrapper.findComponent({ - ref: "resetSelectedMembers", - }); + const actionMenuAfter = wrapper.findComponent({ name: "ActionMenu" }); - expect(resetButton.exists()).toBe(true); + expect(actionMenuAfter.exists()).toBe(true); }); - it("should reset member selection when clicking reset button", async () => { + it("should reset member selection when clicking reset button on ActionMenu", async () => { const { wrapper } = setup(); askConfirmationMock.mockResolvedValue(false); await selectCheckboxes([0], wrapper); - const resetButton = wrapper.findComponent({ - ref: "resetSelectedMembers", - }); - await resetButton.trigger("click"); + const actionMenu = wrapper.findComponent({ name: "ActionMenu" }); + actionMenu.vm.$emit("reset:selected"); + await flushPromises(); const checkboxes = wrapper .getComponent(VDataTable) @@ -200,17 +188,16 @@ describe("MembersTable", () => { } ); - it("should emit remove:members when selected members remove button is clicked", async () => { + it("should emit remove:members when selected members remove button is clicked on Action Menu", async () => { const { wrapper, mockMembers } = setup(); askConfirmationMock.mockResolvedValue(true); await selectCheckboxes([1], wrapper); - const removeButton = wrapper.findComponent({ - ref: "removeSelectedMembers", - }); - await removeButton.trigger("click"); + const actionMenu = wrapper.findComponent({ name: "ActionMenu" }); + actionMenu.vm.$emit("remove:selected", [mockMembers[0].userId]); + await flushPromises(); const removeEvents = wrapper.emitted("remove:members"); expect(removeEvents).toHaveLength(1); @@ -224,10 +211,9 @@ describe("MembersTable", () => { await selectCheckboxes([1], wrapper); - const removeButton = wrapper.findComponent({ - ref: "removeSelectedMembers", - }); - await removeButton.trigger("click"); + const actionMenu = wrapper.findComponent({ name: "ActionMenu" }); + actionMenu.vm.$emit("reset:selected"); + await flushPromises(); expect(wrapper.emitted()).not.toHaveProperty("remove:members"); }); @@ -246,16 +232,18 @@ describe("MembersTable", () => { ])( "should render confirmation dialog with text for $description when remove button is clicked", async ({ checkboxesToSelect, expectedMessage }) => { - const { wrapper } = setup(); + const { wrapper, mockMembers } = setup(); askConfirmationMock.mockResolvedValue(true); await selectCheckboxes(checkboxesToSelect, wrapper); - const removeButton = wrapper.findComponent({ - ref: "removeSelectedMembers", - }); - await removeButton.trigger("click"); + const actionMenu = wrapper.findComponent({ name: "ActionMenu" }); + actionMenu.vm.$emit( + "remove:selected", + checkboxesToSelect.map((i) => mockMembers[i].userId) + ); + await flushPromises(); expect(wrapper.emitted()).toHaveProperty("remove:members"); @@ -267,16 +255,15 @@ describe("MembersTable", () => { ); it("should keep selection if confirmation dialog is canceled", async () => { - const { wrapper } = setup(); + const { wrapper, mockMembers } = setup(); askConfirmationMock.mockResolvedValue(false); await selectCheckboxes([1], wrapper); - const removeButton = wrapper.getComponent({ - ref: "removeSelectedMembers", - }); - await removeButton.trigger("click"); + const actionMenu = wrapper.findComponent({ name: "ActionMenu" }); + actionMenu.vm.$emit("remove:selected", [mockMembers[0].userId]); + await flushPromises(); const checkboxes = wrapper .getComponent(VDataTable) @@ -410,4 +397,25 @@ describe("MembersTable", () => { expect(dataTableTextContent).not.toContain(mockMembers[2].firstName); }); }); + + describe("when 'fixedPosition' prop is set", () => { + it("should have 'fixed-position' class", async () => { + const { wrapper } = setup(); + + const elementBefore = wrapper.find(".table-title-header"); + expect(elementBefore.classes("fixed-position")).toBe(false); + + wrapper.setProps({ + fixedPosition: { + enabled: true, + positionTop: 0, + }, + }); + await nextTick(); + await nextTick(); + + const elementAfter = wrapper.find(".table-title-header"); + expect(elementAfter.classes("fixed-position")).toBe(true); + }); + }); }); diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue index 8a2ba88e60..c5ba259e7f 100644 --- a/src/modules/feature/room/RoomMembers/MembersTable.vue +++ b/src/modules/feature/room/RoomMembers/MembersTable.vue @@ -1,38 +1,17 @@