From c8b4619e0c48f3fc79ad0f10a10482f99a98db83 Mon Sep 17 00:00:00 2001 From: winzlieb Date: Mon, 14 Mar 2022 12:00:17 +0100 Subject: [PATCH] separate definitions from table --- .../components/config/defaultColumnGroups.ts | 12 ++ .../config/defaultColumnRawDefinition.ts | 140 ++++++++++++++ .../components/ngo/HostOfferLookupTable.tsx | 175 +----------------- .../components/util/datagrid/columnRaw.ts | 10 + .../datagrid/genateColumnRawDefinition.ts | 12 ++ 5 files changed, 179 insertions(+), 170 deletions(-) create mode 100644 frontend/search/components/config/defaultColumnGroups.ts create mode 100644 frontend/search/components/config/defaultColumnRawDefinition.ts create mode 100644 frontend/search/components/util/datagrid/columnRaw.ts create mode 100644 frontend/search/components/util/datagrid/genateColumnRawDefinition.ts diff --git a/frontend/search/components/config/defaultColumnGroups.ts b/frontend/search/components/config/defaultColumnGroups.ts new file mode 100644 index 0000000..f7b001b --- /dev/null +++ b/frontend/search/components/config/defaultColumnGroups.ts @@ -0,0 +1,12 @@ +const groups = [ + { name: 'contactStatus', header: 'Contact Status' }, + { name: 'offerStatus', header: 'Offer Status' }, + { name: 'locationCoarse', header: 'Location' }, + { name: 'time', header: 'Time' }, + { name: 'features', header: 'Limitations / Features' }, + { name: 'animals', group: 'features', header: 'Animals' }, + { name: 'contact', header: 'Contact' }, + { name: 'address', group: 'contact', header: 'Address' }, +] + +export default groups diff --git a/frontend/search/components/config/defaultColumnRawDefinition.ts b/frontend/search/components/config/defaultColumnRawDefinition.ts new file mode 100644 index 0000000..571ce77 --- /dev/null +++ b/frontend/search/components/config/defaultColumnRawDefinition.ts @@ -0,0 +1,140 @@ +import {ColumnRaw} from "../util/datagrid/columnRaw"; + +const columnsRaw: Partial[] = [ + { + "name": "rw_contacted", + "group": "contactStatus", + "header": "Asked", + "type": "boolean", + "editable": true, + "defaultWidth": 85 + }, + { + "name": "rw_contact_replied", + "group": "contactStatus", + "header": "Answered", + "type": "boolean", + "editable": true, + "defaultWidth": 110 + }, + { + "name": "rw_offer_occupied", + "group": "offerStatus", + "header": "Occupied", + "type": "boolean", + "editable": true, + "defaultWidth": 110 + }, + { + "name": "rw_note", + "header": "Our notes", + "type": "string", + "editable": true, + "defaultWidth": 400 + }, + { + "name": "place_country", + "group": "locationCoarse", + "header": "Country", + "type": "string", + "defaultWidth": 10 + }, + { + "name": "place_city", + "group": "locationCoarse", + "header": "City", + "type": "string" + }, + { + "name": "beds", + "header": "Beds", + "type": "number" + }, + { + "name": "time_from_str", + "group": "time", + "header": "From", + "type": "date", + "defaultWidth": 90 + }, + { + "name": "time_duration_str", + "group": "time", + "header": "Duration", + "type": "string" + }, + { + "name": "languages", + "header": "Languages", + "type": "object", + "defaultWidth": 200 + }, + { + "name": "accessible", + "group": "features", + "header": "Accessible", + "type": "boolean", + "defaultWidth": 120 + }, + { + "name": "animals_allowed", + "group": "animals", + "header": "Allowed", + "type": "boolean", + "defaultWidth": 100 + }, + { + "name": "animals_present", + "group": "animals", + "header": "Present", + "type": "boolean", + "defaultWidth": 95 + }, + { + "name": "note", + "header": "User comment", + "type": "string", + "defaultWidth": 400 + }, + { + "name": "contact_name_full", + "group": "contact", + "header": "Name", + "type": "string" + }, + { + "name": "contact_phone", + "group": "contact", + "header": "Phone", + "type": "string" + }, + { + "name": "contact_email", + "group": "contact", + "header": "EMail", + "type": "string" + }, + { + "name": "place_street", + "group": "address", + "header": "Street", + "type": "string" + }, + { + "name": "place_street_number", + "group": "address", + "header": "Number", + "type": "string", + "defaultWidth": 100 + }, + { + "name": "place_zip", + "group": "address", + "header": "Zip", + "type": "string", + "defaultWidth": 80 + }, +] + + +export default columnsRaw diff --git a/frontend/search/components/ngo/HostOfferLookupTable.tsx b/frontend/search/components/ngo/HostOfferLookupTable.tsx index e7108ed..e7b18f1 100644 --- a/frontend/search/components/ngo/HostOfferLookupTable.tsx +++ b/frontend/search/components/ngo/HostOfferLookupTable.tsx @@ -20,6 +20,9 @@ import {Box} from "@mui/material" import { fetcher } from '../../codegen/fetcher' import { useAuthStore, AuthState } from '../Login' +import defaultColumnRawDefinition from "../config/defaultColumnRawDefinition"; +import defaultColumnGroups from "../config/defaultColumnGroups"; +import { ColumnRaw } from '../util/datagrid/columnRaw' global.moment = moment @@ -29,173 +32,6 @@ type HostOfferLookupTableProps = { refetch_rw: any, } -interface ColumnRaw { - name: string; - header: string; - type: string; - editable: boolean; - defaultWidth: number; - group: string; -} - -/** - * you can generate an inital raw column json by running the following - * function - */ -const makeColumnDefinition = (data: any) => Object.keys(data) - .map(k => ({ - name: k, - header: k.replace(/_/g, ' '), - type: typeof data[k] - })) - -const columnsRaw: Partial[] = [ - { - "name": "rw_contacted", - "group": "contactStatus", - "header": "Asked", - "type": "boolean", - "editable": true, - "defaultWidth": 85 - }, - { - "name": "rw_contact_replied", - "group": "contactStatus", - "header": "Answered", - "type": "boolean", - "editable": true, - "defaultWidth": 110 - }, - { - "name": "rw_offer_occupied", - "group": "offerStatus", - "header": "Occupied", - "type": "boolean", - "editable": true, - "defaultWidth": 110 - }, - { - "name": "rw_note", - "header": "Our notes", - "type": "string", - "editable": true, - "defaultWidth": 400 - }, - { - "name": "place_country", - "group": "locationCoarse", - "header": "Country", - "type": "string", - "defaultWidth": 10 - }, - { - "name": "place_city", - "group": "locationCoarse", - "header": "City", - "type": "string" - }, - { - "name": "beds", - "header": "Beds", - "type": "number" - }, - { - "name": "time_from_str", - "group": "time", - "header": "From", - "type": "date", - "defaultWidth": 90 - }, - { - "name": "time_duration_str", - "group": "time", - "header": "Duration", - "type": "string" - }, - { - "name": "languages", - "header": "Languages", - "type": "object", - "defaultWidth": 200 - }, - { - "name": "accessible", - "group": "features", - "header": "Accessible", - "type": "boolean", - "defaultWidth": 120 - }, - { - "name": "animals_allowed", - "group": "animals", - "header": "Allowed", - "type": "boolean", - "defaultWidth": 100 - }, - { - "name": "animals_present", - "group": "animals", - "header": "Present", - "type": "boolean", - "defaultWidth": 95 - }, - { - "name": "note", - "header": "User comment", - "type": "string", - "defaultWidth": 400 - }, - { - "name": "contact_name_full", - "group": "contact", - "header": "Name", - "type": "string" - }, - { - "name": "contact_phone", - "group": "contact", - "header": "Phone", - "type": "string" - }, - { - "name": "contact_email", - "group": "contact", - "header": "EMail", - "type": "string" - }, - { - "name": "place_street", - "group": "address", - "header": "Street", - "type": "string" - }, - { - "name": "place_street_number", - "group": "address", - "header": "Number", - "type": "string", - "defaultWidth": 100 - }, - { - "name": "place_zip", - "group": "address", - "header": "Zip", - "type": "string", - "defaultWidth": 80 - }, -] - -const groups = [ - { name: 'contactStatus', header: 'Contact Status' }, - { name: 'offerStatus', header: 'Offer Status' }, - { name: 'locationCoarse', header: 'Location' }, - { name: 'time', header: 'Time' }, - { name: 'features', header: 'Limitations / Features' }, - { name: 'animals', group: 'features', header: 'Animals' }, - { name: 'contact', header: 'Contact' }, - { name: 'address', group: 'contact', header: 'Address' }, -] - const filterMappings = { string: StringFilter, boolean: BoolFilter, @@ -253,7 +89,7 @@ const findMatchingRenderer = (c: Partial) => { return customRenderer?.render } -const columns: TypeColumn[] = columnsRaw +const columns: TypeColumn[] = defaultColumnRawDefinition .map(c => ({ ...c, render: findMatchingRenderer(c) || undefined, @@ -301,7 +137,6 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTab // @ts-ignore const reactdatagridi18n = resources[language]?.translation?.reactdatagrid - return diff --git a/frontend/search/components/util/datagrid/columnRaw.ts b/frontend/search/components/util/datagrid/columnRaw.ts new file mode 100644 index 0000000..4387ef4 --- /dev/null +++ b/frontend/search/components/util/datagrid/columnRaw.ts @@ -0,0 +1,10 @@ +export interface ColumnRaw { + name: string; + header: string; + type: string; + editable: boolean; + defaultWidth: number; + group: string; +} + + diff --git a/frontend/search/components/util/datagrid/genateColumnRawDefinition.ts b/frontend/search/components/util/datagrid/genateColumnRawDefinition.ts new file mode 100644 index 0000000..5b321da --- /dev/null +++ b/frontend/search/components/util/datagrid/genateColumnRawDefinition.ts @@ -0,0 +1,12 @@ +/** + * you can generate an inital raw column json by running the following + * function + */ +const makeColumnDefinition = (data: any) => Object.keys(data) + .map(k => ({ + name: k, + header: k.replace(/_/g, ' '), + type: typeof data[k] + })) + +export default makeColumnDefinition