From ad386d0277b23c0b484db4bd3c68e536f46887f6 Mon Sep 17 00:00:00 2001 From: Jorge Esteves Date: Mon, 6 Nov 2023 16:19:33 +0100 Subject: [PATCH 1/2] feat: add bubble view to analytics --- frontend-vue/package.json | 2 +- frontend-vue/playwright.config.ts | 2 +- .../src/pages/analytics/Analytics.vue | 383 +++++++++++------- frontend-vue/src/pages/domains/Root.vue | 12 - 4 files changed, 240 insertions(+), 159 deletions(-) diff --git a/frontend-vue/package.json b/frontend-vue/package.json index fe041de2..ec57903b 100644 --- a/frontend-vue/package.json +++ b/frontend-vue/package.json @@ -6,7 +6,7 @@ "build": "vite build", "dev": "vite --port 4200 --host", "lint": "eslint .", - "lintFix": "eslint . --fix", + "lint:fix": "eslint . --fix", "typecheck": "vue-tsc --noEmit", "preview": "vite preview", "test:unit": "vitest --environment jsdom --root src/", diff --git a/frontend-vue/playwright.config.ts b/frontend-vue/playwright.config.ts index add288d9..64fa957c 100644 --- a/frontend-vue/playwright.config.ts +++ b/frontend-vue/playwright.config.ts @@ -90,4 +90,4 @@ export default defineConfig({ port: 4200, reuseExistingServer: true, }, -}); \ No newline at end of file +}); diff --git a/frontend-vue/src/pages/analytics/Analytics.vue b/frontend-vue/src/pages/analytics/Analytics.vue index e07b1c64..b729ac86 100644 --- a/frontend-vue/src/pages/analytics/Analytics.vue +++ b/frontend-vue/src/pages/analytics/Analytics.vue @@ -1,157 +1,198 @@ @@ -161,6 +202,9 @@ import { storeToRefs } from "pinia"; import { computed, Ref, ref, watch } from "vue"; import { useI18n } from "vue-i18n"; import { LocationQueryValue, useRoute, useRouter } from "vue-router"; +import { useRouteQuery } from "@vueuse/router"; +import { Disclosure, Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue"; +import BubbleView from "~/pages/domains/BubbleView.vue"; import ContextureBoundedContextCard from "~/components/bounded-context/ContextureBoundedContextCard.vue"; import ContextureAccordionItem from "~/components/primitives/accordion/ContextureAccordionItem.vue"; import ContextureBadge from "~/components/primitives/badge/ContextureBadge.vue"; @@ -179,12 +223,31 @@ import { BoundedContext } from "~/types/boundedContext"; import { Domain } from "~/types/domain"; import ContextureHelpfulErrorAlert from "~/components/primitives/alert/ContextureHelpfulErrorAlert.vue"; import { Namespace, NamespaceLabel } from "~/types/namespace"; +import IconsMaterialSymbolsApps from "~icons/material-symbols/apps"; +import IconsMaterialSymbolsCalendarViewWeekOutline from "~icons/material-symbols/calendar-view-week-outline"; +import IconsMaterialSymbolsWorkspaceOutline from "~icons/material-symbols/workspaces-outline"; interface SearchSettings { selectedTextPresentationMode: number; selectedVisualization: number; } +interface TabListOption { + id: ViewOption; + icon: any; + text: string; +} + +interface TabPanelOption { + id: ViewOption; + component?: any; +} + +enum ViewOption { + LIST = "list", + BUBBLE = "bubble", +} + const { t } = useI18n(); const { namespaces } = storeToRefs(useNamespaces()); const { allDomains } = storeToRefs(useDomainsStore()); @@ -378,4 +441,34 @@ const queryAsString = computed(() => { return ""; } }); + +const tabOptions: TabListOption[] = [ + { + id: ViewOption.LIST, + icon: IconsMaterialSymbolsCalendarViewWeekOutline, + text: t("domains.buttons.list"), + }, + { + id: ViewOption.BUBBLE, + icon: IconsMaterialSymbolsWorkspaceOutline, + text: t("domains.buttons.bubble"), + }, +]; + +const tabPanelViews: TabPanelOption[] = [ + { + id: ViewOption.LIST, + }, + { + id: ViewOption.BUBBLE, + component: BubbleView, + }, +]; + +const queryParamType: Ref = useRouteQuery("type", ViewOption.LIST, { mode: "push" }); +const selectedViewTab = computed(() => tabOptions.findIndex((t) => t.id === queryParamType.value) || 0); + +function onTabChange(newSelectedTab: number): void { + queryParamType.value = tabOptions[newSelectedTab].id; +} diff --git a/frontend-vue/src/pages/domains/Root.vue b/frontend-vue/src/pages/domains/Root.vue index 4264e70d..6888500c 100644 --- a/frontend-vue/src/pages/domains/Root.vue +++ b/frontend-vue/src/pages/domains/Root.vue @@ -34,12 +34,10 @@ import { useRouteQuery } from "@vueuse/router"; import { useRoute } from "vue-router"; import { computed, Ref, watchEffect } from "vue"; import { useI18n } from "vue-i18n"; -import BubbleView from "~/pages/domains/BubbleView.vue"; import GridView from "~/pages/domains/GridView.vue"; import ListView from "~/pages/domains/ListView.vue"; import IconsMaterialSymbolsApps from "~icons/material-symbols/apps"; import IconsMaterialSymbolsCalendarViewWeekOutline from "~icons/material-symbols/calendar-view-week-outline"; -import IconsMaterialSymbolsWorkspaceOutline from "~icons/material-symbols/workspaces-outline"; interface TabListOption { id: ViewOption; @@ -54,7 +52,6 @@ interface TabPanelOption { enum ViewOption { GRID = "grid", - BUBBLE = "bubble", LIST = "list", } @@ -70,11 +67,6 @@ const tabOptions: TabListOption[] = [ icon: IconsMaterialSymbolsApps, text: t("domains.buttons.grid"), }, - { - id: ViewOption.BUBBLE, - icon: IconsMaterialSymbolsWorkspaceOutline, - text: t("domains.buttons.bubble"), - }, { id: ViewOption.LIST, icon: IconsMaterialSymbolsCalendarViewWeekOutline, @@ -87,10 +79,6 @@ const tabPanelViews: TabPanelOption[] = [ id: ViewOption.GRID, component: GridView, }, - { - id: ViewOption.BUBBLE, - component: BubbleView, - }, { id: ViewOption.LIST, component: ListView, From d162ee1ed34b4f69cbf2599f38f4b3c177030d8f Mon Sep 17 00:00:00 2001 From: Jorge Esteves Date: Mon, 6 Nov 2023 16:24:55 +0100 Subject: [PATCH 2/2] fix mobile styles --- frontend-vue/src/pages/analytics/Analytics.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend-vue/src/pages/analytics/Analytics.vue b/frontend-vue/src/pages/analytics/Analytics.vue index b729ac86..d7906d15 100644 --- a/frontend-vue/src/pages/analytics/Analytics.vue +++ b/frontend-vue/src/pages/analytics/Analytics.vue @@ -1,9 +1,9 @@