From e5267497a69f3972d2eccf72d9bdadd3d966c74c Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 25 Nov 2024 09:57:10 +0100 Subject: [PATCH] ui: mimic ant card --- .../components/FilterSeries/FilterSeries.tsx | 6 +- .../components/WidgetForm/WidgetFormNew.tsx | 71 +++++++++++++++---- .../shared/Filters/FilterList/EventsOrder.tsx | 10 +-- .../shared/Filters/FilterList/FilterList.tsx | 22 +++--- 4 files changed, 76 insertions(+), 33 deletions(-) diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx index 663c47181..dc0e225d7 100644 --- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx +++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx @@ -56,8 +56,9 @@ const FilterSeriesHeader = observer( }; return (
@@ -181,7 +182,7 @@ function FilterSeries(props: Props) { {expandable && ( setExpanded(!expanded)} >
@@ -211,6 +212,7 @@ function FilterSeries(props: Props) { onFilterMove={onFilterMove} excludeFilterKeys={excludeFilterKeys} onAddFilter={onAddFilter} + mergeUp /> ) : null}
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx index 873cb570f..e2b2a60da 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx +++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx @@ -1,5 +1,7 @@ import React from 'react'; import { Card, Space, Typography, Button, Alert, Form } from 'antd'; +import { FilterList } from 'Shared/Filters/FilterList'; + import { useStore } from 'App/mstore'; import { eventKeys } from 'Types/filter/newFilter'; import { @@ -45,8 +47,6 @@ function WidgetFormNew() { export default observer(WidgetFormNew); const FilterSection = observer(({ metric, excludeFilterKeys }: any) => { - // const timeseriesOptions = metricOf.filter((i) => i.type === 'timeseries'); - // const tableOptions = metricOf.filter((i) => i.type === 'table'); const isTable = metric.metricType === TABLE; const isClickMap = metric.metricType === HEATMAP; const isFunnel = metric.metricType === FUNNEL; @@ -54,29 +54,53 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => { const isPathAnalysis = metric.metricType === USER_PATH; const isRetention = metric.metricType === RETENTION; const canAddSeries = metric.series.length < 3; - const eventsLength = metric.series[0].filter.filters.filter((i: any) => i && i.isEvent).length; - // const cannotSaveFunnel = isFunnel && (!metric.series[0] || eventsLength <= 1); const isSingleSeries = isTable || isFunnel || isClickMap || isInsights || isRetention; - // const onAddFilter = (filter: any) => { - // metric.series[0].filter.addFilter(filter); - // metric.updateKey('hasChanged', true) - // } + const onUpdateFilter = (filterIndex: any, filter: any) => { + metric.series[0].filter.updateFilter(filterIndex, filter); + metric.updateKey('hasChanged', true) + }; + + const onFilterMove = (newFilters: any) => { + metric.series[0].filter.replaceFilters(newFilters.toArray()); + metric.updateKey('hasChanged', true) + }; + + const onChangeEventsOrder = (_: any, { name, value }: any) => { + metric.series[0].filter.updateKey(name, value); + metric.updateKey('hasChanged', true) + }; + + const onRemoveFilter = (filterIndex: any) => { + metric.series[0].filter.removeFilter(filterIndex); + metric.updateKey('hasChanged', true) + }; + + const onAddFilter = (filter: any) => { + metric.series[0].filter.addFilter(filter); + metric.updateKey('hasChanged', true) + } return ( <> - { - metric.series.length > 0 && metric.series + {metric.series.length > 0 && + metric.series .slice(0, isSingleSeries ? 1 : metric.series.length) .map((series: any, index: number) => ( -
+
metric.updateKey('hasChanged', true)} - hideHeader={isTable || isClickMap || isInsights || isPathAnalysis || isFunnel} + hideHeader={ + isTable || + isClickMap || + isInsights || + isPathAnalysis || + isFunnel + } seriesIndex={index} series={series} onRemoveSeries={() => metric.removeSeries(index)} @@ -89,11 +113,13 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => { expandable={isSingleSeries} />
- )) - } + ))} {!isSingleSeries && canAddSeries && ( - + )} + + {metric.series[0] ? +
+ +
+ : null} ); }); diff --git a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx index 6f7f8a0b6..c39547b2b 100644 --- a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx +++ b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx @@ -1,6 +1,6 @@ import {observer} from "mobx-react-lite"; import {Tooltip} from "UI"; -import {Segmented} from "antd"; +import {Segmented, Select} from "antd"; import React from "react"; const EventsOrder = observer((props: { @@ -12,19 +12,19 @@ const EventsOrder = observer((props: { const options = [ { name: 'eventsOrder', - label: 'THEN', + label: 'Then', value: 'then', disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'), }, { name: 'eventsOrder', - label: 'AND', + label: 'And', value: 'and', disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'), }, { name: 'eventsOrder', - label: 'OR', + label: 'Or', value: 'or', disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'), }, @@ -42,7 +42,7 @@ const EventsOrder = observer((props: {
- onChange(null, options.find((i) => i.value === v))} diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx index 2b5a430c4..002705eaf 100644 --- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx +++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx @@ -44,12 +44,12 @@ export const FilterList = observer((props: Props) => { }; return (
@@ -174,17 +174,17 @@ export const EventsList = observer((props: Props) => { const eventsNum = filters.filter((i: any) => i.isEvent).length; return (
-
{filter.eventsHeader || 'Events'}
+
Events