From ecabcdc59a1118d83f8a630c31f034129f0f3837 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 31 Jul 2024 11:01:41 +0200 Subject: [PATCH 01/68] fix(frontend): fix drawer breakpoints (#1586) Fixes: The tables drawer for small screens (at the bottom) is always visible The tables drawer for other screens (sidebar) is not visible for medium screens --- frontend/src/components/menu/BottomMenu.vue | 2 +- frontend/src/components/menu/TopMenu.vue | 2 +- .../src/components/menu/__snapshots__/BottomMenu.test.ts.snap | 2 +- frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap | 2 +- frontend/src/pages/index/__snapshots__/Page.test.ts.snap | 2 +- frontend/src/pages/table/__snapshots__/Page.test.ts.snap | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/menu/BottomMenu.vue b/frontend/src/components/menu/BottomMenu.vue index 08170e4537..e66202ef85 100644 --- a/frontend/src/components/menu/BottomMenu.vue +++ b/frontend/src/components/menu/BottomMenu.vue @@ -1,6 +1,6 @@ diff --git a/frontend/src/components/buttons/CreateButton.stories.ts b/frontend/src/components/buttons/LargeDreamMallButton.stories.ts similarity index 79% rename from frontend/src/components/buttons/CreateButton.stories.ts rename to frontend/src/components/buttons/LargeDreamMallButton.stories.ts index 2f8ce0346e..a44c1afc8a 100644 --- a/frontend/src/components/buttons/CreateButton.stories.ts +++ b/frontend/src/components/buttons/LargeDreamMallButton.stories.ts @@ -1,20 +1,20 @@ import { SBComp } from '#types/SBComp' -import CreateButton from './CreateButton.vue' +import LargeDreamMallButton from './LargeDreamMallButton.vue' import type { Meta, StoryObj } from '@storybook/vue3' // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction const meta = { - title: 'Inputs/CreateButton', - component: CreateButton as SBComp, + title: 'Inputs/LargeDreamMallButton', + component: LargeDreamMallButton as SBComp, // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs tags: ['autodocs'], argTypes: { onClick: { action: 'clicked' }, }, args: {}, // default value -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/frontend/src/components/buttons/LargeDreamMallButton.vue b/frontend/src/components/buttons/LargeDreamMallButton.vue new file mode 100644 index 0000000000..102c6b3306 --- /dev/null +++ b/frontend/src/components/buttons/LargeDreamMallButton.vue @@ -0,0 +1,423 @@ + + + + + diff --git a/frontend/src/components/buttons/mobile-create-button/MobileCreateButton.stories.ts b/frontend/src/components/buttons/SmallDreamMallButton.stories.ts similarity index 88% rename from frontend/src/components/buttons/mobile-create-button/MobileCreateButton.stories.ts rename to frontend/src/components/buttons/SmallDreamMallButton.stories.ts index 6eab2e8fae..6e633a19bb 100644 --- a/frontend/src/components/buttons/mobile-create-button/MobileCreateButton.stories.ts +++ b/frontend/src/components/buttons/SmallDreamMallButton.stories.ts @@ -1,6 +1,6 @@ import { SBComp } from '#types/SBComp' -import MobileCreateButton from './MobileCreateButton.vue' +import MobileCreateButton from './SmallDreamMallButton.vue' import type { Meta, StoryObj } from '@storybook/vue3' diff --git a/frontend/src/components/buttons/mobile-create-button/MobileCreateButton.test.ts b/frontend/src/components/buttons/SmallDreamMallButton.test.ts similarity index 83% rename from frontend/src/components/buttons/mobile-create-button/MobileCreateButton.test.ts rename to frontend/src/components/buttons/SmallDreamMallButton.test.ts index be7f7c43c3..353df1c93b 100644 --- a/frontend/src/components/buttons/mobile-create-button/MobileCreateButton.test.ts +++ b/frontend/src/components/buttons/SmallDreamMallButton.test.ts @@ -3,7 +3,7 @@ import { describe, it, expect, afterEach } from 'vitest' import { h } from 'vue' import { VApp } from 'vuetify/components' -import MobileCreateButton from './MobileCreateButton.vue' +import MobileCreateButton from './SmallDreamMallButton.vue' describe('MobileCreateButton', () => { const Wrapper = (props = { isActive: false }) => { @@ -33,9 +33,9 @@ describe('MobileCreateButton', () => { describe('click on create button', () => { it('emits click event', async () => { wrapper = Wrapper() - await wrapper.find('#create-button-mobile').trigger('click') + await wrapper.find('#small-dream-mall-button').trigger('click') const component = wrapper.findComponent(MobileCreateButton) - expect(component.emitted('button-click')).toBeTruthy() + expect(component.emitted('click')).toBeTruthy() }) }) }) diff --git a/frontend/src/components/buttons/mobile-create-button/MobileCreateButton.vue b/frontend/src/components/buttons/SmallDreamMallButton.vue similarity index 97% rename from frontend/src/components/buttons/mobile-create-button/MobileCreateButton.vue rename to frontend/src/components/buttons/SmallDreamMallButton.vue index 858b09e105..d3540f9e9b 100644 --- a/frontend/src/components/buttons/mobile-create-button/MobileCreateButton.vue +++ b/frontend/src/components/buttons/SmallDreamMallButton.vue @@ -5,8 +5,8 @@ viewBox="0 0 182 182" fill="none" xmlns="http://www.w3.org/2000/svg" - class="create-button-svg" - :class="[isActive ? 'create-button-svg--active' : '']" + class="dream-mall-button-svg" + :class="[isActive ? 'dream-mall-button-svg--active' : '']" > - + () -defineEmits(['button-click']) +defineEmits(['click']) diff --git a/frontend/src/components/buttons/mobile-create-button/__snapshots__/MobileCreateButtonActions.test.ts.snap b/frontend/src/components/buttons/mobile-create-button/__snapshots__/MobileCreateButtonActions.test.ts.snap deleted file mode 100644 index 64008e572c..0000000000 --- a/frontend/src/components/buttons/mobile-create-button/__snapshots__/MobileCreateButtonActions.test.ts.snap +++ /dev/null @@ -1,407 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`MobileCreateButtonActions > renders closed 1`] = ` -
-