ui: mimic ant card

2024-11-25 09:57:10 +01:00 · 2024-11-25 09:57:10 +01:00 · e5267497a6
commit e5267497a6
parent 8f9cad4715
4 changed files with 76 additions and 33 deletions
--- 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 (
      <div
-        className={cn('px-4 h-12 flex items-center relative', {
+        className={cn('px-4 h-12 flex items-center relative bg-white border-gray-lighter border-t border-l border-r rounded-t-xl', {
          hidden: props.hidden,
+          'rounded-b-xl': !props.expanded,
        })}
      >
        <Space className="mr-auto" size={30}>
@ -181,7 +182,7 @@ function FilterSeries(props: Props) {

      {expandable && (
        <Space
-          className="justify-between w-full px-5 py-2 cursor-pointer"
+          className="justify-between w-full py-2 cursor-pointer"
          onClick={() => setExpanded(!expanded)}
        >
          <div>
@ -211,6 +212,7 @@ function FilterSeries(props: Props) {
          onFilterMove={onFilterMove}
          excludeFilterKeys={excludeFilterKeys}
          onAddFilter={onAddFilter}
+          mergeUp
        />
      ) : null}
    </div>
--- 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) => (
-            <div className="mb-2" key={series.name}>
+            <div className="mb-2 rounded-xl border border-gray-lighter" key={series.name}>
              <FilterSeries
                canExclude={isPathAnalysis}
                supportsEmpty={!isClickMap && !isPathAnalysis}
                excludeFilterKeys={excludeFilterKeys}
                observeChanges={() => 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}
              />
            </div>
-          ))
-      }
+          ))}

      {!isSingleSeries && canAddSeries && (
-        <Card styles={{ body: { padding: '4px' } }} className="rounded-full shadow-sm">
+        <Card
+          styles={{ body: { padding: '4px' } }}
+          className="rounded-xl shadow-sm mb-2"
+        >
          <Button
            type="link"
            onClick={() => {
@ -110,6 +136,21 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
          </Button>
        </Card>
      )}
+
+      {metric.series[0] ?
+       <div className={'rounded-xl border border-gray-lighter'}>
+        <FilterList
+          filter={metric.series[0].filter}
+          onUpdateFilter={onUpdateFilter}
+          onRemoveFilter={onRemoveFilter}
+          onChangeEventsOrder={onChangeEventsOrder}
+          supportsEmpty
+          onFilterMove={onFilterMove}
+          excludeFilterKeys={excludeFilterKeys}
+          onAddFilter={onAddFilter}
+        />
+       </div>
+      : null}
    </>
  );
 });
--- 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: {
            </Tooltip>
        </div>

-        <Segmented
+        <Select
            size={"small"}
            className="text-sm"
            onChange={(v) => onChange(null, options.find((i) => i.value === v))}
--- 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 (
    <div
-      className={'py-2 px-4 widget-wrapper'}
+      className={'py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
      style={{
-        borderBottomLeftRadius: props.mergeDown ? 0 : 'unset',
-        borderBottomRightRadius: props.mergeDown ? 0 : 'unset',
-        borderTopLeftRadius: props.mergeUp ? 0 : 'unset',
-        borderTopRightRadius: props.mergeUp ? 0 : 'unset',
+        borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
+        borderBottomRightRadius: props.mergeDown ? 0 : undefined,
+        borderTopLeftRadius: props.mergeUp ? 0 : undefined,
+        borderTopRightRadius: props.mergeUp ? 0 : undefined,
      }}
    >
      <div className={'flex items-center gap-2 mb-2'}>
@ -174,17 +174,17 @@ export const EventsList = observer((props: Props) => {
  const eventsNum = filters.filter((i: any) => i.isEvent).length;
  return (
    <div
-      className={'widget-wrapper border-b border-b-gray-lighter py-2 px-4'}
+      className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
      style={{
-        borderBottomLeftRadius: props.mergeDown ? 0 : 'unset',
-        borderBottomRightRadius: props.mergeDown ? 0 : 'unset',
-        borderTopLeftRadius: props.mergeUp ? 0 : 'unset',
-        borderTopRightRadius: props.mergeUp ? 0 : 'unset',
+        borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
+        borderBottomRightRadius: props.mergeDown ? 0 : undefined,
+        borderTopLeftRadius: props.mergeUp ? 0 : undefined,
+        borderTopRightRadius: props.mergeUp ? 0 : undefined,
        marginBottom: props.mergeDown ? '-1px' : undefined,
      }}
    >
      <div className="flex items-center mb-2 gap-2">
-        <div className="font-semibold">{filter.eventsHeader || 'Events'}</div>
+        <div className="font-semibold">Events</div>
        <FilterSelection mode={'events'} filter={undefined} onFilterClick={onAddFilter}>
          <Button icon={<Plus size={16} strokeWidth={1} />} type="default" size={'small'}>
            Add