From de8b222a2e38f9c0807ea16a874125b993bd8c5e Mon Sep 17 00:00:00 2001 From: winzlieb Date: Mon, 14 Mar 2022 13:27:20 +0100 Subject: [PATCH] clean up and fix type definitions --- .../config/defaultColumnRawDefinition.ts | 2 +- .../components/ngo/HostOfferLookupTable.tsx | 32 +++++++++---------- .../components/ngo/HostOfferLookupWrapper.tsx | 22 ++++++------- .../components/util/datagrid/columnRaw.ts | 14 ++++++-- .../components/util/tableValueMapper.ts | 14 ++------ 5 files changed, 39 insertions(+), 45 deletions(-) diff --git a/frontend/search/components/config/defaultColumnRawDefinition.ts b/frontend/search/components/config/defaultColumnRawDefinition.ts index 571ce77..02ecdbe 100644 --- a/frontend/search/components/config/defaultColumnRawDefinition.ts +++ b/frontend/search/components/config/defaultColumnRawDefinition.ts @@ -1,6 +1,6 @@ import {ColumnRaw} from "../util/datagrid/columnRaw"; -const columnsRaw: Partial[] = [ +const columnsRaw: ColumnRaw[] = [ { "name": "rw_contacted", "group": "contactStatus", diff --git a/frontend/search/components/ngo/HostOfferLookupTable.tsx b/frontend/search/components/ngo/HostOfferLookupTable.tsx index e7b18f1..84f8132 100644 --- a/frontend/search/components/ngo/HostOfferLookupTable.tsx +++ b/frontend/search/components/ngo/HostOfferLookupTable.tsx @@ -1,4 +1,4 @@ -import React, {ReactNode, useCallback} from 'react' +import React, {ReactNode, useCallback, useEffect, useState} from 'react' import {CheckBoxOutlineBlank, CheckBox} from '@mui/icons-material' @@ -11,7 +11,7 @@ import StringFilter from '@inovua/reactdatagrid-community/StringFilter' import BoolFilter from '@inovua/reactdatagrid-community/BoolFilter' import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter" import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor' -import {GetOffersQuery} from "../../codegen/generates" +import {GetOffersQuery, GetRwQuery} from "../../codegen/generates" import moment from "moment" import {useTranslation} from "react-i18next" @@ -23,12 +23,14 @@ import { useAuthStore, AuthState } from '../Login' import defaultColumnRawDefinition from "../config/defaultColumnRawDefinition"; import defaultColumnGroups from "../config/defaultColumnGroups"; import { ColumnRaw } from '../util/datagrid/columnRaw' +import columnsRaw from "../config/defaultColumnRawDefinition"; +import {transformValue} from "../util/tableValueMapper"; global.moment = moment type HostOfferLookupTableProps = { - data_ro: GetOffersQuery, - data_rw: any, // TODO + data_ro?: GetOffersQuery, + data_rw?: GetRwQuery, // TODO refetch_rw: any, } @@ -123,7 +125,12 @@ async function mutate(auth: AuthState, onEditComplete: {value: string, columnId: const rw_default = {rw_note: ''} // Required for filtering 'Not empty'. TODO: Should be fixed in StringFilter const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTableProps) => { - const dataSource = !data_ro.get_offers ? [] : data_ro.get_offers.map( e_ro => ({...e_ro, ...(data_rw.find((e_rw: any) => e_rw.id === e_ro.id) || rw_default)}) ) + const [dataSource, setDataSource] = useState([]); + + + useEffect(() => { + setDataSource((/*data_rw?.get_rw || */ data_ro?.get_offers || []).map(v => transformValue(v, columnsRaw))) + }, [data_ro, data_rw]); const auth = useAuthStore() @@ -137,14 +144,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTab // @ts-ignore const reactdatagridi18n = resources[language]?.translation?.reactdatagrid - return -
- -
- } export default HostOfferLookupTable diff --git a/frontend/search/components/ngo/HostOfferLookupWrapper.tsx b/frontend/search/components/ngo/HostOfferLookupWrapper.tsx index 5b4a9c2..80a9d3c 100644 --- a/frontend/search/components/ngo/HostOfferLookupWrapper.tsx +++ b/frontend/search/components/ngo/HostOfferLookupWrapper.tsx @@ -17,27 +17,25 @@ const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => { const queryResult_rw = useGetRwQuery({auth}, {staleTime: staleTimeMinutes_rw * 60 * 1000}) return <> -
{/** TODO: a proper Header (css class) **/} +
{ (queryResult_ro.isFetching || queryResult_rw.isFetching) && t('loading…') } { (queryResult_ro.error || queryResult_rw.error) && t('An error occurred while trying to get data from the backend.') } { (queryResult_ro.data && !queryResult_ro.data.get_offers || queryResult_rw.data && !queryResult_rw.data.get_rw) - && t('Seems like you have no permissions. Please try to login again.') } + && t('Seems like you have no permissions. Please try to login again.') }
-
- { queryResult_ro.data?.get_offers && -
-
- } + } + } diff --git a/frontend/search/components/util/datagrid/columnRaw.ts b/frontend/search/components/util/datagrid/columnRaw.ts index 4387ef4..d38e9d5 100644 --- a/frontend/search/components/util/datagrid/columnRaw.ts +++ b/frontend/search/components/util/datagrid/columnRaw.ts @@ -1,10 +1,18 @@ +import {Array2StringTransformOptions} from "../tableValueMapper"; + +export type ColumnOptions = { + transform?: { + array2string?: Array2StringTransformOptions + } +} export interface ColumnRaw { name: string; header: string; type: string; - editable: boolean; - defaultWidth: number; - group: string; + editable?: boolean; + defaultWidth?: number; + group?: string; + options?: ColumnOptions } diff --git a/frontend/search/components/util/tableValueMapper.ts b/frontend/search/components/util/tableValueMapper.ts index da0e6e7..72962f2 100644 --- a/frontend/search/components/util/tableValueMapper.ts +++ b/frontend/search/components/util/tableValueMapper.ts @@ -1,22 +1,12 @@ +import {ColumnRaw} from "./datagrid/columnRaw"; + export type Array2StringTransformOptions = { join?: string } -export type ColumnOptions = { - transform?: { - array2string?: Array2StringTransformOptions - } -} const array2string = (value: string[], options: Array2StringTransformOptions) => value.join(options.join || ',') -export type ColumnRaw = { - name: string; - header: string; - type: string; - editable?: boolean; - options?: ColumnOptions } - export const transformValue = (values: T, columnsRaw: ColumnRaw[]) => { const newValues = {...values} columnsRaw