@digigov/react-modules 1.1.4

package/src/FilteredResults/__stories__/Default.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { FieldSpec } from '@digigov/form/types';
+import FilteredResults, {
+  DataConfigType,
+} from '@digigov/react-modules/FilteredResults';
+import { DataTable } from '@digigov/react-modules/FilteredResults/DataTable';
+import {
+  useURLParamsSearch,
+  useStaticSearch,
+} from '@digigov/react-modules/FilteredResults/hooks';
+import { CheckIcon, UncheckIcon } from '@digigov/ui/icons';
+import Link from '@digigov/ui/navigation/Link';
+
+const fields: FieldSpec[] = [
+  {
+    type: 'string',
+    key: 'text',
+    label: {
+      primary: 'Αναζήτηση λέξης',
+    },
+  },
+  {
+    type: 'choice:single',
+    key: 'name',
+    label: {
+      primary: 'Όνομα',
+    },
+    extra: {
+      component: 'Select',
+      options: [
+        {
+          label: {
+            primary: '',
+          },
+          value: '',
+        },
+        {
+          label: {
+            primary: 'Καλλιόπη Παπαδοπούλου',
+          },
+          value: 'Kalliopi Papadopoulou',
+        },
+        {
+          label: {
+            primary: 'Μάριος Μενεξές',
+          },
+          value: 'Marios Menekses',
+        },
+        {
+          label: {
+            primary: 'Μαρία Φλούπη',
+          },
+          value: 'Maria Floupi',
+        },
+        {
+          label: {
+            primary: 'Ηλέκτρα Αποστόλου',
+          },
+          value: 'Ilektra Apostolou',
+        },
+      ],
+    },
+  },
+  {
+    type: 'choice:single',
+    key: 'role',
+    label: {
+      primary: 'Ρόλος',
+    },
+    extra: {
+      component: 'Select',
+      options: [
+        {
+          label: {
+            primary: '',
+          },
+          value: '',
+        },
+        {
+          label: {
+            primary: 'Διαχειριστής',
+          },
+          value: 'admin',
+        },
+        {
+          label: {
+            primary: 'Χειριστής',
+          },
+          value: 'user',
+        },
+      ],
+    },
+  },
+  {
+    type: 'choice:single',
+    key: 'rights',
+    label: {
+      primary: 'Δικαιώματα',
+    },
+    extra: {
+      component: 'Select',
+      options: [
+        {
+          label: {
+            primary: '',
+          },
+          value: '',
+        },
+        {
+          label: {
+            primary: 'Ναι',
+          },
+          value: true,
+        },
+        {
+          label: {
+            primary: 'Όχι',
+          },
+          value: false,
+        },
+      ],
+    },
+  },
+];
+
+const displayLink = (value) => {
+  return <Link href={`#/${value}`}>{value}</Link>;
+};
+const displayRights = (value) => {
+  return <>{value ? <CheckIcon /> : <UncheckIcon />}</>;
+};
+
+type DataType = {
+  name: string;
+  case_id: number;
+  role: string;
+  email: string;
+  rights: boolean;
+};
+
+const data: DataType[] = [
+  {
+    name: 'Μάριος Μενεξές',
+    case_id: 123,
+    role: 'Χειριστής',
+    email: 'marios@mail.com',
+    rights: false,
+  },
+  {
+    name: 'Καλλιόπη Παπαδοπούλου',
+    case_id: 124,
+    role: 'Χειριστής',
+    email: 'kalliopi@mail.com',
+    rights: false,
+  },
+  {
+    name: 'Μαρία Φλούπη',
+    case_id: 125,
+    role: 'Διαχειριστής',
+    email: 'maria@mail.com',
+    rights: true,
+  },
+  {
+    name: 'Ηλέκτρα Αποστόλου',
+    case_id: 126,
+    role: 'Διαχειριστής',
+    email: 'ilektra@mail.com',
+    rights: true,
+  },
+];
+
+const dataConfig: DataConfigType[] = [
+  {
+    key: 'name',
+    title: 'Όνομα',
+  },
+  {
+    key: 'case_id',
+    title: 'Αρ. Υπόθεσης',
+    displayComponent: displayLink,
+  },
+  {
+    key: 'role',
+    title: 'Ρόλος',
+  },
+  {
+    key: 'email',
+    title: 'Email',
+  },
+  {
+    key: 'rights',
+    title: 'Δικαιώματα',
+    displayComponent: displayRights,
+  },
+];
+
+type InitialFiltersType = {
+  [K in (typeof dataConfig)[number]['key']]: string;
+};
+
+const initialFilters: InitialFiltersType = {
+  name: '',
+  case_id: '',
+  role: '',
+  text: '',
+  rights: '',
+};
+
+export const Default = () => {
+  const { search, results } = useStaticSearch<DataType, InitialFiltersType>({
+    fields,
+    data,
+    initialFilters,
+  });
+  const navigate = (url) => {
+    if (window.history.pushState) {
+      const newUrl =
+        window.location.protocol +
+        '//' +
+        window.location.host +
+        window.location.pathname +
+        url;
+      window.history.pushState({ path: newUrl }, '', newUrl);
+    }
+  };
+  const { search: urlSearch, values } = useURLParamsSearch(search, {
+    navigate,
+    fields,
+  });
+
+  return (
+    <FilteredResults
+      data={results}
+      variant="block"
+      currentFilters={values}
+      defaultFilters={initialFilters}
+      fields={fields}
+      onSearch={urlSearch}
+    >
+      <DataTable dataConfig={dataConfig} data={results} />
+    </FilteredResults>
+  );
+};

package/src/FilteredResults/hooks.ts

@@ -0,0 +1,131 @@
+import { useState, useEffect, useMemo } from 'react';
+import { FieldSpec } from '@digigov/form/types';
+import { ScalarType } from '@digigov/react-modules/FilteredResults';
+
+export function isBooleanString(str: string): boolean {
+  return /^(true|false)$/i.test(str);
+}
+
+export function normalizeText(text: string): string {
+  return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
+export const getOptionLabelForSelectValue = (field, value) => {
+  if (field.extra?.options) {
+    const matchedOption = field.extra.options.find(
+      (option) => option.value.toString() === value?.toString()
+    );
+    if (matchedOption) {
+      return matchedOption.label.primary;
+    }
+  }
+  return value;
+};
+
+export const useURLParamsSearch = (searchFunc, { navigate, fields }) => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const currentParams = Object.fromEntries(urlParams.entries());
+  const values = fields.reduce((newValues, field) => {
+    if (currentParams[field.key]) {
+      newValues[field.key] = currentParams[field.key];
+    }
+    return newValues;
+  }, {});
+
+  const search = (params) => {
+    navigate(
+      '?' +
+        new URLSearchParams(
+          // @ts-ignore
+          Object.entries({ ...currentParams, ...params }).filter(
+            ([_, value]) => !!value
+          )
+        ).toString()
+    );
+    return searchFunc(params);
+  };
+  return { search, values };
+};
+
+interface UseStaticSearchProps<
+  DT extends Record<string, ScalarType>,
+  FT extends Record<string, ScalarType>,
+> {
+  fields: FieldSpec[];
+  data: DT[];
+  initialFilters: FT;
+}
+
+export function useStaticSearch<
+  DT extends Record<string, ScalarType>,
+  FT extends Record<string, ScalarType>,
+>({ fields, data, initialFilters }: UseStaticSearchProps<DT, FT>) {
+  const [results, setResults] = useState<DT[]>(data);
+
+  useEffect(() => {
+    search(initialFilters);
+  }, [initialFilters]);
+
+  const search = (filters: FT) => {
+    if (!filters || Object.keys(filters).every((key) => filters[key] === '')) {
+      setResults(data);
+      return;
+    }
+
+    const newResults = data.filter((row) => {
+      const filterKeys = Object.keys(filters);
+      const enabledFilters = filterKeys.filter(
+        (filterKey) =>
+          filters[filterKey]?.toString() && row[filterKey]?.toString()
+      );
+      const freeTextFilters = filterKeys.filter(
+        (filterKey) =>
+          filters[filterKey]?.toString() && !row[filterKey]?.toString()
+      );
+      let filtersMatchingValue = false;
+
+      // Filter the fields that exists as columns in table
+      if (enabledFilters.length > 0) {
+        filtersMatchingValue = enabledFilters.every((filterKey) => {
+          if (filters[filterKey]?.toString() !== row[filterKey]?.toString()) {
+            const field = fields.find((f) => f.key === filterKey);
+            const optionsObj = field?.extra?.options.find(
+              (option) => option?.label?.primary === row[filterKey]
+            );
+            return (
+              optionsObj?.value.toString() === filters[filterKey]?.toString()
+            );
+          }
+          filtersMatchingValue = true;
+          return filtersMatchingValue;
+        });
+        if (!filtersMatchingValue) {
+          return false;
+        }
+      }
+      // Filter the free text fields (doesn't exist as columns)
+      if (freeTextFilters.length > 0) {
+        return freeTextFilters.every((filterKey) => {
+          return Object.values(row).some((value) => {
+            if (typeof value !== 'string') {
+              return false;
+            }
+            const normalizedItemValue = normalizeText(
+              value.toString().toLowerCase()
+            );
+
+            const normalizedFilterValue = normalizeText(
+              filters[filterKey]?.toString().toLowerCase().trim() || ''
+            );
+            return normalizedItemValue.includes(normalizedFilterValue);
+          });
+        });
+      }
+      return filtersMatchingValue;
+    });
+
+    setResults(newResults);
+  };
+
+  return useMemo(() => ({ search, results }), [search, results]);
+}

package/src/FilteredResults/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/react-modules/FilteredResults/__stories__/Default';
+
+test('renders the All FilteredResults variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/FilteredResults/index.tsx

@@ -0,0 +1,180 @@
+import React, { useContext, useEffect } from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { FormContext } from '@digigov/form/FormContext';
+import { FieldSpec } from '@digigov/form/types';
+import { FilterChips } from '@digigov/react-modules/FilteredResults/FilterChips';
+import { FilterFields } from '@digigov/react-modules/FilteredResults/FilterFields';
+import CloseButton from '@digigov/ui/app/CloseButton';
+import FilterContainer, {
+  FilterContent,
+  FilterHeadingContainer,
+} from '@digigov/ui/app/FilterContainer';
+import { Button } from '@digigov/ui/form/Button';
+import { Grid } from '@digigov/ui/layouts/Grid';
+import { Hidden } from '@digigov/ui/layouts/Hidden';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
+import { Drawer, DrawerHeading } from '@digigov/ui/navigation/Drawer';
+import { useDrawer } from '@digigov/ui/navigation/Drawer/hooks';
+import { Heading } from '@digigov/ui/typography/Heading';
+
+export type ScalarType = string | number | boolean | null | undefined;
+
+export interface DataConfigType {
+  key: string;
+  title: string;
+  displayComponent?: (value: string | number | boolean) => React.ReactNode;
+}
+export interface FilteredResultsProps<
+  DT extends Record<string, ScalarType>,
+  FT extends Record<string, ScalarType>,
+> {
+  fields: FieldSpec[];
+  data: DT[];
+  variant?: 'drawer-left' | 'drawer-right' | 'block';
+  defaultFilters?: FT;
+  currentFilters?: FT;
+  onSearch: (filters: unknown) => void;
+  children?: React.ReactNode;
+}
+
+export const FormBuilderSyncValues = ({ values, autoSubmit }) => {
+  const form = useContext(FormContext);
+  const previousValues = form.getValues();
+  useEffect(() => {
+    const mergedObject = { ...values, ...previousValues };
+    let shouldSubmit = false;
+    for (const key in mergedObject) {
+      // catching the filters that have been parsed from url & avoid continuous submitting
+      if (values[key] !== undefined && previousValues[key] !== values[key]) {
+        shouldSubmit = true;
+        previousValues[key] = values[key];
+        form.setValue(key, values[key]);
+      }
+    }
+    if (autoSubmit && shouldSubmit) {
+      form.submit();
+    }
+  }, [values]);
+  return <></>;
+};
+
+export const DrawerFilteredResults = React.forwardRef<HTMLDivElement, unknown>(
+  function DrawerFilteredResults(
+    { fields, direction = 'left', ...props },
+    ref
+  ) {
+    const { registerDrawer, registerAction, currentOpen } = useDrawer();
+
+    return (
+      <>
+        {currentOpen && (
+          <Grid item xs={12} md={12} lg={4} ref={ref}>
+            <Drawer
+              {...registerDrawer('filters-drawer', {
+                upRelative: 'lg',
+                direction,
+              })}
+            >
+              <DrawerHeading {...registerAction('filters-drawer', 'close')}>
+                <Heading size="md">Φίλτρα</Heading>
+              </DrawerHeading>
+              <FilterContent>
+                <FilterFields fields={fields} horizontal={false} />
+              </FilterContent>
+            </Drawer>
+          </Grid>
+        )}
+        <Grid item xs={12} md={12} lg={currentOpen ? 8 : 12}>
+          <Button
+            mb={4}
+            {...registerAction(
+              'filters-drawer',
+              currentOpen === 'filters-drawer' ? 'close' : 'open'
+            )}
+            color="secondary"
+          >
+            Φίλτρα
+          </Button>
+          <FilterChips />
+          {props.children}
+        </Grid>
+      </>
+    );
+  }
+);
+
+export const BlockFilteredResults = React.forwardRef<HTMLDivElement, unknown>(
+  function BlockFilteredResults({ fields, ...props }, ref) {
+    const [open, setOpen] = React.useState(true);
+    return (
+      <Grid item xs={12} ref={ref}>
+        <FilterContainer open={open}>
+          <FilterHeadingContainer>
+            <Hidden mdUp>
+              <CloseButton onClick={() => setOpen(false)}>Κλείσιμο</CloseButton>
+            </Hidden>
+            <Heading size="md">Φίλτρα</Heading>
+          </FilterHeadingContainer>
+          <FilterContent>
+            <FilterChips />
+            <FilterFields fields={fields} horizontal={true} />
+          </FilterContent>
+        </FilterContainer>
+        <Button
+          color="secondary"
+          mdUpHidden
+          mb={4}
+          onClick={() => setOpen(true)}
+        >
+          Φίλτρα
+        </Button>
+        <SectionBreak size="md" visible={false} />
+        {props.children}
+      </Grid>
+    );
+  }
+);
+
+export const FilteredResults = React.forwardRef<
+  HTMLFormElement,
+  FilteredResultsProps<Record<string, ScalarType>, Record<string, ScalarType>>
+>(function FilteredResults(
+  {
+    fields,
+    onSearch,
+    variant = 'block',
+    defaultFilters,
+    currentFilters,
+    children,
+  },
+  ref
+) {
+  const isDrawer = variant.startsWith('drawer-');
+  return (
+    <FormBuilder
+      onSubmit={onSearch}
+      initial={defaultFilters}
+      fields={fields}
+      grid
+      ref={ref}
+    >
+      {currentFilters && (
+        <FormBuilderSyncValues values={currentFilters} autoSubmit={true} />
+      )}
+      {isDrawer ? (
+        // @ts-ignore
+        <DrawerFilteredResults
+          fields={fields}
+          direction={variant.split('-')[1]}
+        >
+          {children}
+        </DrawerFilteredResults>
+      ) : (
+        // @ts-ignore
+        <BlockFilteredResults fields={fields}>{children}</BlockFilteredResults>
+      )}
+    </FormBuilder>
+  );
+});
+
+export default FilteredResults;

package/src/ReactModules.stories.js

@@ -0,0 +1,3 @@
+export default {
+  title: 'Digigov React Modules',
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from '@digigov/react-modules/FilteredResults';

package/src/lazy.js

@@ -0,0 +1,11 @@
+import {lazy} from 'react';
+export default {
+    'DataTable': lazy(() => import('@digigov/react-modules/FilteredResults/DataTable').then((module)=> ({default: module['DataTable']}))),
+  'FilterChips': lazy(() => import('@digigov/react-modules/FilteredResults/FilterChips').then((module)=> ({default: module['FilterChips']}))),
+  'FilterFields': lazy(() => import('@digigov/react-modules/FilteredResults/FilterFields').then((module)=> ({default: module['FilterFields']}))),
+  'BlockFilteredResults': lazy(() => import('@digigov/react-modules/FilteredResults').then((module)=> ({default: module['BlockFilteredResults']}))),
+  'DrawerFilteredResults': lazy(() => import('@digigov/react-modules/FilteredResults').then((module)=> ({default: module['DrawerFilteredResults']}))),
+  'FilteredResults': lazy(() => import('@digigov/react-modules/FilteredResults').then((module)=> ({default: module['FilteredResults']}))),
+  'FormBuilderSyncValues': lazy(() => import('@digigov/react-modules/FilteredResults').then((module)=> ({default: module['FormBuilderSyncValues']}))),
+
+}

package/src/registry.js

@@ -0,0 +1,35 @@
+
+import * as _digigov_react_modules_FilteredResults_DataTable from '@digigov/react-modules/FilteredResults/DataTable';
+import * as _digigov_react_modules_FilteredResults_FilterChips from '@digigov/react-modules/FilteredResults/FilterChips';
+import * as _digigov_react_modules_FilteredResults_FilterFields from '@digigov/react-modules/FilteredResults/FilterFields';
+import * as _digigov_react_modules_FilteredResults_hooks from '@digigov/react-modules/FilteredResults/hooks';
+import * as _digigov_react_modules_FilteredResults from '@digigov/react-modules/FilteredResults';
+import * as _digigov_react_modules from '@digigov/react-modules'
+function lazyImport(pkgImport) {
+  // eslint-disable-next-line no-undef
+  return new Proxy(
+    {},
+    {
+      get: (_target, name) => {
+        if (name === '__esModule' || name === 'default') {
+          return pkgImport.default;
+        } else if(
+          name === '*'
+        ) {
+          return pkgImport;
+        } else {
+          return pkgImport[name];
+        }
+      },
+    }
+  )
+}
+export default {
+  '@digigov/react-modules/FilteredResults/DataTable': lazyImport(_digigov_react_modules_FilteredResults_DataTable),
+  '@digigov/react-modules/FilteredResults/FilterChips': lazyImport(_digigov_react_modules_FilteredResults_FilterChips),
+  '@digigov/react-modules/FilteredResults/FilterFields': lazyImport(_digigov_react_modules_FilteredResults_FilterFields),
+  '@digigov/react-modules/FilteredResults/hooks': lazyImport(_digigov_react_modules_FilteredResults_hooks),
+  '@digigov/react-modules/FilteredResults': lazyImport(_digigov_react_modules_FilteredResults),
+  '@digigov/react-modules': lazyImport(_digigov_react_modules)
+};
+