- add distinct filters for test table

mvc/views/react/admin/index.html

@@ -8,9 +8,9 @@
 
     <link rel="icon" href="/assets/favicon.bf5828d5.svg">
     <title>Syngrisi</title>
-  <script type="module" crossorigin src="/assets/admin.abf99edc.js"></script>
+  <script type="module" crossorigin src="/assets/admin.1d19d186.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/use-form.83d6f5c0.js">
-  <link rel="modulepreload" crossorigin href="/assets/LogicalGroup.c8c79450.js">
+  <link rel="modulepreload" crossorigin href="/assets/LogicalGroup.f95783e9.js">
   <link rel="modulepreload" crossorigin href="/assets/PasswordInput.ac0ae0e2.js">
   <link rel="stylesheet" href="/assets/use-form.ecb4391b.css">
 </head>

mvc/views/react/assets/LogicalGroup.c8c79450.js → mvc/views/react/assets/LogicalGroup.f95783e9.js

@@ -12862,6 +12862,7 @@ function RelativeDrawer({
           }), /* @__PURE__ */ jsx(ActionIcon, {
             size: "sm",
             onClick: () => setOpen(false),
+            "data-test": "relative-wrapper-icon",
             children: /* @__PURE__ */ jsx(lAe, {
               stroke: 1,
               size: 16
@@ -15526,11 +15527,149 @@ function IdFilter({
     })
   });
 }
+function CommonDistinctFilter({
+  label,
+  updateGroupRules,
+  id,
+  resource
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const distinctQuery = useQuery({
+    queryKey: [resource],
+    queryFn: () => GenericService.get(resource, {}, {
+      page: "1",
+      limit: "50"
+    }, resource),
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+    onError: (e) => {
+      errorMsg({
+        error: e
+      });
+    },
+    onSuccess: (result) => {
+    }
+  });
+  let items = [];
+  if (distinctQuery.isSuccess && ((_a = distinctQuery == null ? void 0 : distinctQuery.data) == null ? void 0 : _a.results)) {
+    items = (_d = (_c = (_b = distinctQuery.data) == null ? void 0 : _b.results) == null ? void 0 : _c.map((item) => item.name)) == null ? void 0 : _d.map((item) => ({
+      value: item,
+      label: item
+    }));
+  }
+  if (distinctQuery.error)
+    items = [{
+      value: "",
+      label: "error loading filter items"
+    }];
+  const form = useForm({
+    initialValues: {
+      operator: "eq",
+      value: distinctQuery.data ? distinctQuery == null ? void 0 : distinctQuery.data.results[0].name : "",
+      label
+    },
+    validateInputOnChange: true
+  });
+  react.exports.useEffect(() => {
+    var _a2, _b2;
+    if ((_b2 = (_a2 = distinctQuery == null ? void 0 : distinctQuery.data) == null ? void 0 : _a2.results[0]) == null ? void 0 : _b2.name) {
+      form.setFieldValue("value", distinctQuery == null ? void 0 : distinctQuery.data.results[0].name);
+    }
+  }, [(_f = (_e = distinctQuery == null ? void 0 : distinctQuery.data) == null ? void 0 : _e.results[0]) == null ? void 0 : _f.name]);
+  react.exports.useEffect(() => {
+    updateGroupRules(id, generateItemFilter(label, form.values.operator, form.values.value));
+  }, [form.values.value, form.values.operator, label]);
+  return /* @__PURE__ */ jsx("form", {
+    children: /* @__PURE__ */ jsxs(Group, {
+      align: "start",
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(SafeSelect, {
+        label: "",
+        "data-test": "table-filter-operator",
+        sx: {
+          width: "130px"
+        },
+        optionsData: [{
+          value: "eq",
+          label: "equals"
+        }, {
+          value: "ne",
+          label: "not equals"
+        }, {
+          value: "contains",
+          label: "contains"
+        }, {
+          value: "not_contains",
+          label: "not contains"
+        }],
+        ...form.getInputProps("operator")
+      }), /* @__PURE__ */ jsx(SafeSelect, {
+        "data-test": "table-filter-value",
+        title: form.getInputProps("value").value,
+        optionsData: items,
+        loaded: distinctQuery.isLoading,
+        ...form.getInputProps("value")
+      })]
+    })
+  });
+}
+function BrowserNameFilter({
+  label,
+  updateGroupRules,
+  id
+}) {
+  return /* @__PURE__ */ jsx(CommonDistinctFilter, {
+    label,
+    updateGroupRules,
+    id,
+    resource: "test-distinct/browserName"
+  });
+}
+function OsFilter({
+  label,
+  updateGroupRules,
+  id
+}) {
+  return /* @__PURE__ */ jsx(CommonDistinctFilter, {
+    label,
+    updateGroupRules,
+    id,
+    resource: "test-distinct/os"
+  });
+}
+function StatusFilter({
+  label,
+  updateGroupRules,
+  id
+}) {
+  return /* @__PURE__ */ jsx(CommonDistinctFilter, {
+    label,
+    updateGroupRules,
+    id,
+    resource: "test-distinct/status"
+  });
+}
+function AcceptedFilter({
+  label,
+  updateGroupRules,
+  id
+}) {
+  return /* @__PURE__ */ jsx(CommonDistinctFilter, {
+    label,
+    updateGroupRules,
+    id,
+    resource: "test-distinct/markedAs"
+  });
+}
 const Filters = {
   DateFilter,
   StringFilter,
   IdFilter,
-  LogLevelFilter
+  LogLevelFilter,
+  BrowserNameFilter,
+  StatusFilter,
+  OsFilter,
+  AcceptedFilter
 };
 function FilterWrapper({
   groupRules,

mvc/views/react/assets/admin.abf99edc.js → mvc/views/react/assets/admin.1d19d186.js

@@ -1,5 +1,5 @@
 import { bD as transitions$1, r as react, U as useUncontrolled, a$ as useIsomorphicEffect, O as useId, b as jsx, c as createStyles, K as useComponentDefaultProps, B as Box, j as jsxs, aW as UnstyledButton, aF as getDefaultZIndex, b0 as useInputProps, ay as useDidUpdate, W as Input, aS as useMergedRef, aE as packSx, aG as createPolymorphicComponent, d as useMantineTheme, a0 as Fragment, V as ActionIcon, a6 as Transition, P as Paper, aD as OptionalPortal, T as Text, a_ as Overlay, bE as assignRef, bF as getSystemStyles, bG as MANTINE_SIZES, aR as isElement, b1 as keyframes, aH as _extends, R as extractSystemStyles, a5 as React, J as sizes$8, q as TextInput, G as Group, bH as InputsGroup, bI as InlineInput, A as Anchor, a4 as Loader, bJ as CheckboxIcon, bK as GROUP_POSITIONS, s as Checkbox, bL as SYSTEM_PROPS, h as Button, C as Center, aX as CheckIcon, e as Container, L as LoadingOverlay, bg as Portal, i as Progress, Y as Stack, S as Switch, g as Title, a2 as Tooltip, aT as clsx, bM as DEFAULT_THEME, bN as MANTINE_COLORS, M as MantineProvider, F as ColorSchemeProvider, bO as useMantineColorScheme, bP as GlobalStyles, bQ as NormalizeCSS, bR as filterProps, bS as useCss, bT as useEmotionCache, bU as defaultMantineEmotionCache, bV as createCache, $ as Dge, bi as useLocation, bW as Link, bX as Dqe, bY as ya, bs as N9, bx as CMe, p as useForm, X as queryString, l as log, bZ as useParams$1, m as dj, n as lAe, b_ as tMe, b$ as wQ, bv as Qa, u as useQuery, bq as Iqe, Z as Epe, ab as Ol, ac as ua, ad as RX, a8 as rze, a7 as Xfe, y as useLocalStorage, as as Y, a9 as zV, au as Routes, av as Route, Q as QueryClient, f as useDocumentTitle, at as useNavigate, E as QueryClientProvider, H as createRoot, I as BrowserRouter } from "./use-form.83d6f5c0.js";
-import { a9 as createSafeContext, aa as createScopedKeydownHandler, z as Collapse, ab as CloseButton, ac as HorizontalSection, ad as Section, ae as VerticalSection, af as DefaultItem$2, ag as groupOptions, ah as SelectPopover, ai as SelectScrollArea, aj as SelectItems, ak as noop$1, P as Popover, A as Affix, al as useFocusTrap, am as useScrollLock, an as useFocusReturn, ao as GroupedTransition, ap as createEventHandler, a as useDisclosure, aq as useDelayedHover, ar as _objectWithoutPropertiesLoose, as as useScrollIntoView, at as getSelectRightSectionProps, i as useOs, au as useElementSize, D as Divider, N as Navbar, H as Header, a0 as AppShell, av as Avatar, r as Badge, B as Breadcrumbs, E as Burger, y as Card, aw as CardSection, f as Chip, C as CopyButton, F as FocusTrap, ax as Highlight, I as Image, K as Kbd, L as List, ay as Mark, az as Menu, M as Modal, aA as Notification, R as RingProgress, d as ScrollArea, Q as SegmentedControl, aB as Select, aC as ChevronIcon$1, k as Skeleton, V as Table, T as ThemeIcon, aD as Global, aE as AppContext, n as getNavigationItem, aF as stopNavigationProgress, aG as resetNavigationProgress, l as links, g as HeaderLogo, o as openSpotlight, U as UserMenu, j as useMutation, h as SafeSelect, t as ActionPopoverIcon, s as successMsg, e as errorMsg, G as GenericService, v as UserHooks, $ as useNavProgressFetchEffect, m as useInView, p as useToggle, u as useQueryParams, S as StringParam, J as JsonParam, W as useInputState, X as RelativeDrawer, Y as LogicalGroup, Z as uuid, q as useInfinityScroll, a1 as ReactQueryDevtools, a2 as useColorScheme, a3 as navigationData, a4 as SpotlightProvider, a5 as NotificationsProvider, a6 as NavigationProgress, a7 as QueryParamProvider, a8 as ReactRouter6Adapter } from "./LogicalGroup.c8c79450.js";
+import { a9 as createSafeContext, aa as createScopedKeydownHandler, z as Collapse, ab as CloseButton, ac as HorizontalSection, ad as Section, ae as VerticalSection, af as DefaultItem$2, ag as groupOptions, ah as SelectPopover, ai as SelectScrollArea, aj as SelectItems, ak as noop$1, P as Popover, A as Affix, al as useFocusTrap, am as useScrollLock, an as useFocusReturn, ao as GroupedTransition, ap as createEventHandler, a as useDisclosure, aq as useDelayedHover, ar as _objectWithoutPropertiesLoose, as as useScrollIntoView, at as getSelectRightSectionProps, i as useOs, au as useElementSize, D as Divider, N as Navbar, H as Header, a0 as AppShell, av as Avatar, r as Badge, B as Breadcrumbs, E as Burger, y as Card, aw as CardSection, f as Chip, C as CopyButton, F as FocusTrap, ax as Highlight, I as Image, K as Kbd, L as List, ay as Mark, az as Menu, M as Modal, aA as Notification, R as RingProgress, d as ScrollArea, Q as SegmentedControl, aB as Select, aC as ChevronIcon$1, k as Skeleton, V as Table, T as ThemeIcon, aD as Global, aE as AppContext, n as getNavigationItem, aF as stopNavigationProgress, aG as resetNavigationProgress, l as links, g as HeaderLogo, o as openSpotlight, U as UserMenu, j as useMutation, h as SafeSelect, t as ActionPopoverIcon, s as successMsg, e as errorMsg, G as GenericService, v as UserHooks, $ as useNavProgressFetchEffect, m as useInView, p as useToggle, u as useQueryParams, S as StringParam, J as JsonParam, W as useInputState, X as RelativeDrawer, Y as LogicalGroup, Z as uuid, q as useInfinityScroll, a1 as ReactQueryDevtools, a2 as useColorScheme, a3 as navigationData, a4 as SpotlightProvider, a5 as NotificationsProvider, a6 as NavigationProgress, a7 as QueryParamProvider, a8 as ReactRouter6Adapter } from "./LogicalGroup.f95783e9.js";
 import { P as PasswordInput } from "./PasswordInput.ac0ae0e2.js";
 function getSafeId(uid, errorMessage) {
   return (value) => {

mvc/views/react/assets/root.362cfee0.js → mvc/views/react/assets/root.b0a2fed2.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { r as react, X as queryString, b as jsx, j as jsxs, P as Paper, g as Title, Y as Stack, T as Text, G as Group, h as Button, Z as Epe, k as ky, a as config, u as useQuery, d as useMantineTheme, q as TextInput, V as ActionIcon, n as lAe, _ as Pj, c as createStyles, y as useLocalStorage, e as Container, $ as Dge, a0 as Fragment, a1 as useQueryClient, l as log, a2 as Tooltip, a3 as CK, a4 as Loader, a5 as React, a6 as Transition, a7 as Xfe, a8 as rze, f as useDocumentTitle, A as Anchor, a9 as zV, aa as ea, ab as Ol, ac as ua, ad as RX, ae as rWe, af as UZ, s as Checkbox, ag as getAugmentedNamespace, ah as zb, D as useHotkeys, ai as Pbe, aj as Cbe, ak as pi, al as Lbe, am as lDe, an as dDe, ao as IMe, ap as DMe, aq as qF, L as LoadingOverlay, ar as LHe, B as Box, o as useSearchParams, as as Y, Q as QueryClient, at as useNavigate, t as GCe, v as Nie, E as QueryClientProvider, F as ColorSchemeProvider, M as MantineProvider, au as Routes, av as Route, H as createRoot, I as BrowserRouter } from "./use-form.83d6f5c0.js";
-import { _ as _inheritsLoose, C as CopyButton, u as useQueryParams, S as StringParam, J as JsonParam, G as GenericService, e as errorMsg, a as useDisclosure, b as useClickOutside, c as escapeRegExp, P as Popover, d as ScrollArea, f as Chip, D as Divider, l as links, H as Header, g as HeaderLogo, h as SafeSelect, o as openSpotlight, K as Kbd, i as useOs, U as UserMenu, B as Breadcrumbs, j as useMutation, s as successMsg, M as Modal, R as RingProgress, L as List, k as Skeleton, m as useInView, F as FocusTrap, n as getNavigationItem, p as useToggle, q as useInfinityScroll, N as Navbar, r as Badge, A as Affix, t as ActionPopoverIcon, v as UserHooks, T as ThemeIcon, w as getStatusMessage, x as encodeQueryParams, I as Image$1, y as Card, z as Collapse, E as Burger, O as useInfiniteQuery, Q as SegmentedControl, V as Table, W as useInputState, X as RelativeDrawer, Y as LogicalGroup, Z as uuid, $ as useNavProgressFetchEffect, a0 as AppShell, a1 as ReactQueryDevtools, a2 as useColorScheme, a3 as navigationData, a4 as SpotlightProvider, a5 as NotificationsProvider, a6 as NavigationProgress, a7 as QueryParamProvider, a8 as ReactRouter6Adapter } from "./LogicalGroup.c8c79450.js";
+import { _ as _inheritsLoose, C as CopyButton, u as useQueryParams, S as StringParam, J as JsonParam, G as GenericService, e as errorMsg, a as useDisclosure, b as useClickOutside, c as escapeRegExp, P as Popover, d as ScrollArea, f as Chip, D as Divider, l as links, H as Header, g as HeaderLogo, h as SafeSelect, o as openSpotlight, K as Kbd, i as useOs, U as UserMenu, B as Breadcrumbs, j as useMutation, s as successMsg, M as Modal, R as RingProgress, L as List, k as Skeleton, m as useInView, F as FocusTrap, n as getNavigationItem, p as useToggle, q as useInfinityScroll, N as Navbar, r as Badge, A as Affix, t as ActionPopoverIcon, v as UserHooks, T as ThemeIcon, w as getStatusMessage, x as encodeQueryParams, I as Image$1, y as Card, z as Collapse, E as Burger, O as useInfiniteQuery, Q as SegmentedControl, V as Table, W as useInputState, X as RelativeDrawer, Y as LogicalGroup, Z as uuid, $ as useNavProgressFetchEffect, a0 as AppShell, a1 as ReactQueryDevtools, a2 as useColorScheme, a3 as navigationData, a4 as SpotlightProvider, a5 as NotificationsProvider, a6 as NavigationProgress, a7 as QueryParamProvider, a8 as ReactRouter6Adapter } from "./LogicalGroup.f95783e9.js";
 function useDebouncedValue(value, wait, options = { leading: false }) {
   const [_value, setValue] = react.exports.useState(value);
   const mountedRef = react.exports.useRef(false);
@@ -4412,7 +4412,7 @@ const tableColumns = {
     label: "Status",
     headStyle: { width: "10%" },
     cellStyle: { width: "10%" },
-    type: "StringFilter"
+    type: "StatusFilter"
   },
   creatorUsername: {
     label: "Created",
@@ -4426,7 +4426,7 @@ const tableColumns = {
     cellStyle: {
       width: "auto"
     },
-    type: "StringFilter"
+    type: "AcceptedFilter"
   },
   startDate: {
     label: "Date",
@@ -4438,7 +4438,7 @@ const tableColumns = {
     label: "Browser",
     headStyle: { width: "10%" },
     cellStyle: { width: "10%" },
-    type: "StringFilter"
+    type: "BrowserNameFilter"
   },
   browserVersion: {
     label: "Browser Ver.",
@@ -4450,7 +4450,7 @@ const tableColumns = {
     label: "Platform",
     headStyle: { width: "10%" },
     cellStyle: { width: "10%" },
-    type: "StringFilter"
+    type: "OsFilter"
   },
   run: {
     label: "Run",

mvc/views/react/index2/index.html

@@ -8,9 +8,9 @@
 
     <link rel="icon" href="/assets/favicon.bf5828d5.svg">
     <title>Syngrisi</title>
-  <script type="module" crossorigin src="/assets/root.362cfee0.js"></script>
+  <script type="module" crossorigin src="/assets/root.b0a2fed2.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/use-form.83d6f5c0.js">
-  <link rel="modulepreload" crossorigin href="/assets/LogicalGroup.c8c79450.js">
+  <link rel="modulepreload" crossorigin href="/assets/LogicalGroup.f95783e9.js">
   <link rel="stylesheet" href="/assets/use-form.ecb4391b.css">
 </head>
 <div></div>

src/ui-app/index2/components/Tests/Table/tableColumns.ts

@@ -15,7 +15,7 @@ export const tableColumns: { [key: string]: any } = {
         label: 'Status',
         headStyle: { width: '10%' },
         cellStyle: { width: '10%' },
-        type: 'StringFilter',
+        type: 'StatusFilter',
     },
     creatorUsername: {
         label: 'Created',
@@ -29,7 +29,7 @@ export const tableColumns: { [key: string]: any } = {
         cellStyle: {
             width: 'auto',
         },
-        type: 'StringFilter',
+        type: 'AcceptedFilter',
     },
     startDate: {
         label: 'Date',
@@ -41,7 +41,7 @@ export const tableColumns: { [key: string]: any } = {
         label: 'Browser',
         headStyle: { width: '10%' },
         cellStyle: { width: '10%' },
-        type: 'StringFilter',
+        type: 'BrowserNameFilter',
     },
     browserVersion: {
         label: 'Browser Ver.',
@@ -53,7 +53,7 @@ export const tableColumns: { [key: string]: any } = {
         label: 'Platform',
         headStyle: { width: '10%' },
         cellStyle: { width: '10%' },
-        type: 'StringFilter',
+        type: 'OsFilter',
     },
     run: {
         label: 'Run',

src/ui-app/shared/components/RelativeDrawer.tsx

@@ -26,7 +26,7 @@ function RelativeDrawer(
                     <Paper p="md" m={8} shadow="sm" radius="xs" withBorder>
                         <Group position="apart" align="start" noWrap>
                             <Text size="sm" pb={24}>{title}</Text>
-                            <ActionIcon size="sm" onClick={() => setOpen(false)}>
+                            <ActionIcon size="sm" onClick={() => setOpen(false)} data-test="relative-wrapper-icon">
                                 <IconX stroke={1} size={16} />
                             </ActionIcon>
                         </Group>

src/ui-app/shared/components/filter/AcceptedFilter.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-props-no-spreading,react-hooks/exhaustive-deps */
+import * as React from 'react';
+import { CommonDistinctFilter } from './CommonDistinctFilter';
+
+interface Props {
+    label: string
+    updateGroupRules: any
+    id: string
+}
+
+export function AcceptedFilter({ label, updateGroupRules, id }: Props) {
+    return (
+        <CommonDistinctFilter
+            label={label}
+            updateGroupRules={updateGroupRules}
+            id={id}
+            resource="test-distinct/markedAs"
+        />
+    );
+}

src/ui-app/shared/components/filter/BrowserNameFilter.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-props-no-spreading,react-hooks/exhaustive-deps */
+import * as React from 'react';
+import { CommonDistinctFilter } from './CommonDistinctFilter';
+
+interface Props {
+    label: string
+    updateGroupRules: any
+    id: string
+}
+
+export function BrowserNameFilter({ label, updateGroupRules, id }: Props) {
+    return (
+        <CommonDistinctFilter
+            label={label}
+            updateGroupRules={updateGroupRules}
+            id={id}
+            resource="test-distinct/browserName"
+        />
+    );
+}