clean up and fix type definitions

This commit is contained in:
Winzlieb - 2022-03-14 13:27:20 +01:00
parent 05cf024e0b
commit de8b222a2e
5 changed files with 39 additions and 45 deletions

View File

@ -1,6 +1,6 @@
import {ColumnRaw} from "../util/datagrid/columnRaw"; import {ColumnRaw} from "../util/datagrid/columnRaw";
const columnsRaw: Partial<ColumnRaw>[] = [ const columnsRaw: ColumnRaw[] = [
{ {
"name": "rw_contacted", "name": "rw_contacted",
"group": "contactStatus", "group": "contactStatus",

View File

@ -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' 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 BoolFilter from '@inovua/reactdatagrid-community/BoolFilter'
import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter" import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter"
import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor' import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor'
import {GetOffersQuery} from "../../codegen/generates" import {GetOffersQuery, GetRwQuery} from "../../codegen/generates"
import moment from "moment" import moment from "moment"
import {useTranslation} from "react-i18next" import {useTranslation} from "react-i18next"
@ -23,12 +23,14 @@ import { useAuthStore, AuthState } from '../Login'
import defaultColumnRawDefinition from "../config/defaultColumnRawDefinition"; import defaultColumnRawDefinition from "../config/defaultColumnRawDefinition";
import defaultColumnGroups from "../config/defaultColumnGroups"; import defaultColumnGroups from "../config/defaultColumnGroups";
import { ColumnRaw } from '../util/datagrid/columnRaw' import { ColumnRaw } from '../util/datagrid/columnRaw'
import columnsRaw from "../config/defaultColumnRawDefinition";
import {transformValue} from "../util/tableValueMapper";
global.moment = moment global.moment = moment
type HostOfferLookupTableProps = { type HostOfferLookupTableProps = {
data_ro: GetOffersQuery, data_ro?: GetOffersQuery,
data_rw: any, // TODO data_rw?: GetRwQuery, // TODO
refetch_rw: any, 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 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 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<any[]>([]);
useEffect(() => {
setDataSource((/*data_rw?.get_rw || */ data_ro?.get_offers || []).map(v => transformValue(v, columnsRaw)))
}, [data_ro, data_rw]);
const auth = useAuthStore() const auth = useAuthStore()
@ -137,14 +144,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTab
// @ts-ignore // @ts-ignore
const reactdatagridi18n = resources[language]?.translation?.reactdatagrid const reactdatagridi18n = resources[language]?.translation?.reactdatagrid
return <Box sx={{ return <DataGrid
display: 'flex',
alignItems: 'stretch',
flexDirection: 'column',
height: '100%'}}>
<div
style={{flex: '1 1', height: '100%'}}>
<DataGrid
idProperty="id" idProperty="id"
filterable filterable
showColumnMenuFilterOptions={true} showColumnMenuFilterOptions={true}
@ -157,11 +157,9 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTab
dataSource={dataSource} dataSource={dataSource}
i18n={reactdatagridi18n || undefined} i18n={reactdatagridi18n || undefined}
style={{height: '100%'}} style={{height: '100%'}}
onEditComplete={onEditComplete} onEditComplete={onEditComplete}
groups={defaultColumnGroups} groups={defaultColumnGroups}
/> />
</div>
</Box>
} }
export default HostOfferLookupTable export default HostOfferLookupTable

View File

@ -17,27 +17,25 @@ const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
const queryResult_rw = useGetRwQuery({auth}, {staleTime: staleTimeMinutes_rw * 60 * 1000}) const queryResult_rw = useGetRwQuery({auth}, {staleTime: staleTimeMinutes_rw * 60 * 1000})
return <> return <>
<div style={{minHeight: '5vh', display: 'flex'}}> {/** TODO: a proper Header (css class) **/} <Box sx={{
display: 'flex',
alignItems: 'stretch',
flexDirection: 'column',
height: '100vh'}}>
<div> <div>
{ (queryResult_ro.isFetching || queryResult_rw.isFetching) && t('loading…') } { (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.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) { (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.') }
</div> </div>
<Login/> <Login/>
</div> {queryResult_ro.data && <div
{ queryResult_ro.data?.get_offers && <Box sx={{
display: 'flex',
alignItems: 'stretch',
flexDirection: 'column',
height: '95vh'}}>
<div
style={{flex: '1 1', height: '100%'}}> style={{flex: '1 1', height: '100%'}}>
<HostOfferLookupTable data_ro={queryResult_ro.data} <HostOfferLookupTable data_ro={queryResult_ro.data}
data_rw={queryResult_rw.data?.get_rw||[]} data_rw={queryResult_rw.data}
refetch_rw={queryResult_rw.refetch}/> refetch_rw={queryResult_rw.refetch}/>
</div> </div>}
</Box> } </Box>
</> </>
} }

View File

@ -1,10 +1,18 @@
import {Array2StringTransformOptions} from "../tableValueMapper";
export type ColumnOptions = {
transform?: {
array2string?: Array2StringTransformOptions
}
}
export interface ColumnRaw { export interface ColumnRaw {
name: string; name: string;
header: string; header: string;
type: string; type: string;
editable: boolean; editable?: boolean;
defaultWidth: number; defaultWidth?: number;
group: string; group?: string;
options?: ColumnOptions
} }

View File

@ -1,22 +1,12 @@
import {ColumnRaw} from "./datagrid/columnRaw";
export type Array2StringTransformOptions = { export type Array2StringTransformOptions = {
join?: string join?: string
} }
export type ColumnOptions = {
transform?: {
array2string?: Array2StringTransformOptions
}
}
const array2string = (value: string[], options: Array2StringTransformOptions) => value.join(options.join || ',') 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 = <T>(values: T, columnsRaw: ColumnRaw[]) => { export const transformValue = <T>(values: T, columnsRaw: ColumnRaw[]) => {
const newValues = {...values} const newValues = {...values}
columnsRaw columnsRaw