Sandbox/Paged Table demo - fixed and simplified

epam · Sep 1, 2022 · 2c52123 · 2c52123
1 parent 0ce8b2d
commit 2c52123
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 60 deletions.
diff --git a/app/src/sandbox/tablePaged/DemoTablePaged.tsx b/app/src/sandbox/tablePaged/DemoTablePaged.tsx
@@ -1,26 +1,27 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import css from "./DemoTablePaged.scss";
-import { DataTable, FlexRow, Paginator,  FlexSpacer } from "@epam/promo";
+import { DataTable, FlexRow, Paginator,  FlexSpacer, Button } from "@epam/promo";
 import { DataRowOptions, DataTableState, LazyDataSourceApi, useLazyDataSource, useTableState } from "@epam/uui-core";
 import { Person } from "@epam/uui-docs";
 import { svc } from "../../services";
-import { getFilters } from "./data";
+import { getFilters } from "./filters";
 import { personColumns } from "./columns";
+import { FlexCell } from "uui-components";
 
 export const DemoTablePaged: React.FC = () => {
     const filters = useMemo(getFilters, []);
 
     const {tableState, setTableState} = useTableState({
         columns: personColumns,
     });
-    
+
     useEffect(() => {
         setTableState({...tableState, page: 1, pageSize: 100});
     }, []);
-    
+
     const [totalCount, setTotalCount] = useState(0);
     const [appliedFilter, setAppliedFilter] = useState<DataTableState>({});
-    
+
     const api: LazyDataSourceApi<Person, number, Person> = useCallback(async request => {
         const result = await svc.api.demo.personsPaged({
             filter: request.filter,
@@ -33,21 +34,21 @@ export const DemoTablePaged: React.FC = () => {
         result.from = 0;
         return result;
     }, []);
-    
+
     const applyFilter = useCallback(() => {
         setAppliedFilter(tableState.filter);
         setTableState({ ...tableState, indexToScroll: 0 });
     }, [tableState]);
-    
+
     // applying filter after parsing initial filter data from url
     useEffect(() => {
         applyFilter();
     }, []);
-    
+
     const dataSource = useLazyDataSource({
         api,
     }, [api]);
-    
+
     const rowOptions: DataRowOptions<Person, number> = {
         checkbox: { isVisible: true },
         isSelectable: true,
@@ -60,11 +61,12 @@ export const DemoTablePaged: React.FC = () => {
         ...tableState,
         filter: appliedFilter,
     }), [tableState, appliedFilter]);
+
     const personsDataView = dataSource.useView(viewTableState, setTableState, {
         rowOptions,
         isFoldedByDefault: () => true,
     });
-    
+
     return (
         <div className={ css.container }>
             <DataTable
@@ -80,6 +82,9 @@ export const DemoTablePaged: React.FC = () => {
             />
 
             <FlexRow size="36" padding="12" background="gray5">
+                <FlexCell width='auto'>
+                    <Button caption="Apply filter" onClick={ applyFilter } cx={ css.apply } />
+                </FlexCell>
                 <FlexSpacer/>
                 <Paginator
                     value={ tableState.page }
@@ -89,10 +94,6 @@ export const DemoTablePaged: React.FC = () => {
                 />
                 <FlexSpacer/>
             </FlexRow>
-
-            {/*<FlexRow vPadding="12" background="white">*/}
-            {/*    <Button caption="Apply filter" onClick={ applyFilter } cx={ css.apply }/>*/}
-            {/*</FlexRow>*/}
         </div>
     );
 };
diff --git a/app/src/sandbox/tablePaged/data/api.ts b/app/src/sandbox/tablePaged/data/api.ts
diff --git a/app/src/sandbox/tablePaged/data/constants.ts b/app/src/sandbox/tablePaged/data/constants.ts
diff --git a/app/src/sandbox/tablePaged/data/index.ts b/app/src/sandbox/tablePaged/data/index.ts
diff --git a/app/src/sandbox/tablePaged/data/filters.ts → app/src/sandbox/tablePaged/filters.ts b/app/src/sandbox/tablePaged/data/filters.ts → app/src/sandbox/tablePaged/filters.ts
@@ -1,5 +1,5 @@
 import { TableFiltersConfig, LazyDataSource } from "@epam/uui-core";
-import { svc } from "../../../services";
+import { svc } from "../../services";
 
 export const getFilters = <TFilter extends Record<string, any>>(): TableFiltersConfig<TFilter>[] => {
     return [

diff --git a/app/src/sandbox/tablePaged/types.ts b/app/src/sandbox/tablePaged/types.ts
@@ -1,11 +1,9 @@
 import { DataTableState, ITablePreset } from "@epam/uui";
-import { Person, PersonGroup, Location } from "@epam/uui-docs";
+import { Person } from "@epam/uui-docs";
 
-type PersonTableRecord = Person | PersonGroup | Location;
+type PersonTableRecord = Person;
 
-type PersonTableRecordId = [PersonTableRecord["__typename"], string | number];
-
-type PersonTableFilter = { [key: string]: any, groupBy?: string };
+type PersonTableFilter = Record<string, any>;
 
 interface PersonsTableState extends DataTableState {
     isFolded?: boolean;
@@ -14,4 +12,4 @@ interface PersonsTableState extends DataTableState {
 
 type ILocalStoragePresets = (Omit<ITablePreset, "isActive">)[];
 
-export { PersonTableRecord, PersonTableRecordId, PersonTableFilter, PersonsTableState, ILocalStoragePresets };
+export { PersonTableRecord, PersonTableFilter, PersonsTableState, ILocalStoragePresets };