clean up and fix type definitions
This commit is contained in:
parent
05cf024e0b
commit
de8b222a2e
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue