separate definitions from table
This commit is contained in:
parent
31bf7a263f
commit
c8b4619e0c
|
@ -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
|
|
@ -0,0 +1,140 @@
|
||||||
|
import {ColumnRaw} from "../util/datagrid/columnRaw";
|
||||||
|
|
||||||
|
const columnsRaw: Partial<ColumnRaw>[] = [
|
||||||
|
{
|
||||||
|
"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
|
|
@ -20,6 +20,9 @@ import {Box} from "@mui/material"
|
||||||
|
|
||||||
import { fetcher } from '../../codegen/fetcher'
|
import { fetcher } from '../../codegen/fetcher'
|
||||||
import { useAuthStore, AuthState } from '../Login'
|
import { useAuthStore, AuthState } from '../Login'
|
||||||
|
import defaultColumnRawDefinition from "../config/defaultColumnRawDefinition";
|
||||||
|
import defaultColumnGroups from "../config/defaultColumnGroups";
|
||||||
|
import { ColumnRaw } from '../util/datagrid/columnRaw'
|
||||||
|
|
||||||
global.moment = moment
|
global.moment = moment
|
||||||
|
|
||||||
|
@ -29,173 +32,6 @@ type HostOfferLookupTableProps = {
|
||||||
refetch_rw: any,
|
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<ColumnRaw>[] = [
|
|
||||||
{
|
|
||||||
"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 = {
|
const filterMappings = {
|
||||||
string: StringFilter,
|
string: StringFilter,
|
||||||
boolean: BoolFilter,
|
boolean: BoolFilter,
|
||||||
|
@ -253,7 +89,7 @@ const findMatchingRenderer = (c: Partial<ColumnRaw>) => {
|
||||||
return customRenderer?.render
|
return customRenderer?.render
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns: TypeColumn[] = columnsRaw
|
const columns: TypeColumn[] = defaultColumnRawDefinition
|
||||||
.map(c => ({
|
.map(c => ({
|
||||||
...c,
|
...c,
|
||||||
render: findMatchingRenderer(c) || undefined,
|
render: findMatchingRenderer(c) || undefined,
|
||||||
|
@ -301,7 +137,6 @@ 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 <Box sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'stretch',
|
alignItems: 'stretch',
|
||||||
|
@ -323,7 +158,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTab
|
||||||
i18n={reactdatagridi18n || undefined}
|
i18n={reactdatagridi18n || undefined}
|
||||||
style={{height: '100%'}}
|
style={{height: '100%'}}
|
||||||
onEditComplete={onEditComplete}
|
onEditComplete={onEditComplete}
|
||||||
groups={groups}
|
groups={defaultColumnGroups}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
export interface ColumnRaw {
|
||||||
|
name: string;
|
||||||
|
header: string;
|
||||||
|
type: string;
|
||||||
|
editable: boolean;
|
||||||
|
defaultWidth: number;
|
||||||
|
group: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue