separate definitions from table

main
winzlieb 7 months ago
parent 31bf7a263f
commit c8b4619e0c
  1. 12
      frontend/search/components/config/defaultColumnGroups.ts
  2. 140
      frontend/search/components/config/defaultColumnRawDefinition.ts
  3. 175
      frontend/search/components/ngo/HostOfferLookupTable.tsx
  4. 10
      frontend/search/components/util/datagrid/columnRaw.ts
  5. 12
      frontend/search/components/util/datagrid/genateColumnRawDefinition.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

@ -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 { 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<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 = {
string: StringFilter,
boolean: BoolFilter,
@ -253,7 +89,7 @@ const findMatchingRenderer = (c: Partial<ColumnRaw>) => {
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 <Box sx={{
display: 'flex',
alignItems: 'stretch',
@ -323,7 +158,7 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw}: HostOfferLookupTab
i18n={reactdatagridi18n || undefined}
style={{height: '100%'}}
onEditComplete={onEditComplete}
groups={groups}
groups={defaultColumnGroups}
/>
</div>
</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…
Cancel
Save