From 36a37d1ea533325d9f2db424335eb69ab6b0c66e Mon Sep 17 00:00:00 2001 From: winzlieb Date: Wed, 9 Mar 2022 17:01:05 +0100 Subject: [PATCH] bootstrap table using reactdatagrid --- .../components/ngo/HostOfferLookupTable.tsx | 141 +++++++++++++++++- frontend/search/package.json | 1 + frontend/search/yarn.lock | 82 +++++++++- 3 files changed, 222 insertions(+), 2 deletions(-) diff --git a/frontend/search/components/ngo/HostOfferLookupTable.tsx b/frontend/search/components/ngo/HostOfferLookupTable.tsx index a5eee0a..dc8d237 100644 --- a/frontend/search/components/ngo/HostOfferLookupTable.tsx +++ b/frontend/search/components/ngo/HostOfferLookupTable.tsx @@ -1,13 +1,152 @@ import React from 'react' +import '@inovua/reactdatagrid-community/index.css' + +import DataGrid from '@inovua/reactdatagrid-community' +import DateFilter from '@inovua/reactdatagrid-community/DateFilter' +import StringFilter from '@inovua/reactdatagrid-community/StringFilter' +import BoolFilter from '@inovua/reactdatagrid-community/BoolFilter' import {GetOffersQuery} from "../../codegen/generates"; +import {TypeColumn, TypeFilterValue, TypeSingleFilterValue} from "@inovua/reactdatagrid-community/types"; +import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter"; type HostOfferLookupTableProps = { data: GetOffersQuery } +const columnsRaw: { name: string; header: string; type: string }[] = [ + { + "name": "beds", + "header": "beds", + "type": "number" + }, + { + "name": "place_street", + "header": "place street", + "type": "string" + }, + { + "name": "contact_email", + "header": "contact email", + "type": "object" + }, + { + "name": "contact_name_full", + "header": "contact name full", + "type": "string" + }, + { + "name": "time_duration_str", + "header": "time duration str", + "type": "string" + }, + { + "name": "note", + "header": "note", + "type": "string" + }, + { + "name": "place_street_number", + "header": "place street number", + "type": "string" + }, + { + "name": "place_city", + "header": "place city", + "type": "string" + }, + { + "name": "contact_phone", + "header": "contact phone", + "type": "object" + }, + { + "name": "place_zip", + "header": "place zip", + "type": "string" + }, + { + "name": "time_from_str", + "header": "time from str", + "type": "date" + }, + { + "name": "place_country", + "header": "place country", + "type": "string" + }, + { + "name": "animals_present", + "header": "animals present", + "type": "boolean" + }, + { + "name": "languages", + "header": "languages", + "type": "object" + }, + { + "name": "accessible", + "header": "accessible", + "type": "boolean" + }, + { + "name": "animals_allowed", + "header": "animals allowed", + "type": "boolean" + } +] + +const filterMappings = { + string: StringFilter, + boolean: BoolFilter, + number: NumberFilter, + date: DateFilter +} +const operatorsForType = { + number: 'gte', + string: 'contains', + date: 'inrange'} + + +const columns: TypeColumn[] = columnsRaw + .map(c => ({ + ...c, + filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean'] + })) + +const defaultFilterValue: TypeFilterValue = columns + .filter(( {type} ) => type && ['string', 'number', 'date'].includes( type )) + .map(( {name, type} ) => { + return { + name, + type, + value: '', + operator: operatorsForType[type as 'string' | 'number' | 'date'] + } as unknown as TypeSingleFilterValue + } ) + +const makeColumnDefinition = (data: any ) => Object.keys(data) + .map(k => ({ + name: k, + header: k.replace(/_/g, ' '), + type: typeof data[k]})) + const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => { + console.log({columns}) + const dataSource = data.get_offers?.map((d, index) => ({...d, id: index})) || [] return <> - { data.get_offers?.map(offer => (
{offer.contact_name_full}
)) } + } diff --git a/frontend/search/package.json b/frontend/search/package.json index 1d664aa..b55b0b7 100644 --- a/frontend/search/package.json +++ b/frontend/search/package.json @@ -12,6 +12,7 @@ "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", + "@inovua/reactdatagrid-community": "^4.16.2", "@jsonforms/core": "3.0.0-alpha.3", "@jsonforms/material-renderers": "3.0.0-alpha.3", "@jsonforms/react": "3.0.0-alpha.3", diff --git a/frontend/search/yarn.lock b/frontend/search/yarn.lock index ab2c9f8..3bfb969 100644 --- a/frontend/search/yarn.lock +++ b/frontend/search/yarn.lock @@ -1008,6 +1008,21 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== +"@inovua/reactdatagrid-community@^4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@inovua/reactdatagrid-community/-/reactdatagrid-community-4.16.2.tgz#af957645c92140c6fbeeddc00d9d6136239d7321" + integrity sha512-ipQJOtA9rz9Y0WdxkQg8GDxIdNIudTwSwM73O5tW812f5Se31V6wArxsCg5pGH4nP/MnTJcbkNWN84XztPul/A== + dependencies: + "@types/lodash.debounce" "^4.0.6" + "@types/lodash.throttle" "^4.1.6" + eventemitter3 "^4.0.7" + fast-deep-equal "^3.1.1" + lodash.debounce "^4.0.8" + lodash.throttle "^4.1.1" + object-assign "^4.1.1" + resize-observer-polyfill "^1.5.1" + shallowequal "0.2.2" + "@jridgewell/resolve-uri@^3.0.3": version "3.0.5" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c" @@ -1333,7 +1348,21 @@ dependencies: "@types/node" "*" -"@types/lodash@^4.14.179": +"@types/lodash.debounce@^4.0.6": + version "4.0.6" + resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60" + integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ== + dependencies: + "@types/lodash" "*" + +"@types/lodash.throttle@^4.1.6": + version "4.1.6" + resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz#f5ba2c22244ee42ff6c2c49e614401a870c1009c" + integrity sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg== + dependencies: + "@types/lodash" "*" + +"@types/lodash@*", "@types/lodash@^4.14.179": version "4.14.179" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5" integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w== @@ -2601,6 +2630,11 @@ eventemitter3@^3.1.0: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== +eventemitter3@^4.0.7: + version "4.0.7" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" + integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== + external-editor@^3.0.3: version "3.1.0" resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495" @@ -3682,6 +3716,16 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash._getnative@^3.0.0: + version "3.9.1" + resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" + integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= + +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + lodash.get@^4: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" @@ -3692,6 +3736,16 @@ lodash.includes@^4.3.0: resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f" integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8= +lodash.isarguments@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" + integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo= + +lodash.isarray@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" + integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U= + lodash.isboolean@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6" @@ -3717,6 +3771,15 @@ lodash.isstring@^4.0.1: resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= +lodash.keys@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" + integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo= + dependencies: + lodash._getnative "^3.0.0" + lodash.isarguments "^3.0.0" + lodash.isarray "^3.0.0" + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" @@ -3727,6 +3790,11 @@ lodash.once@^4.0.0: resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w= +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@~4.17.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" @@ -4533,6 +4601,11 @@ require-main-filename@^2.0.0: resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b" integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg== +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-from@5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69" @@ -4690,6 +4763,13 @@ setimmediate@^1.0.5: resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU= +shallowequal@0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e" + integrity sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4= + dependencies: + lodash.keys "^3.1.2" + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"