1
0
ohmyform/ui/components/form/admin/submission.values.tsx
Michael Schramm 9c4c325e5a
Switch to single branch (#221)
* remove submodules
* add api and ui files
* update github actions
* use sparse checkout
* update node setup
* update checkout
* update docker
* change permissions
* update mariadb health check
* update changelog
2023-12-02 19:22:40 +01:00

64 lines
1.8 KiB
TypeScript

import { Descriptions, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table/interface'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FormPagerFragment } from '../../../graphql/fragment/form.pager.fragment'
import {
SubmissionFieldFragment,
SubmissionFragment,
} from '../../../graphql/fragment/submission.fragment'
import { fieldTypes } from '../types'
interface Props {
form: FormPagerFragment
submission: SubmissionFragment
}
export const SubmissionValues: React.FC<Props> = (props) => {
const { t } = useTranslation()
const columns: ColumnsType<SubmissionFieldFragment> = [
{
title: t('submission:field'),
render(_, row) {
if (row.field) {
return `${row.field.title}${row.field.required ? '*' : ''}`
}
return `${row.id}`
},
},
{
title: t('submission:value'),
render(_, row) {
try {
return fieldTypes[row.type]?.displayValue(row.value)
} catch (e) {
return row.value
}
},
},
]
return (
<div>
<Descriptions title={t('submission:submission')}>
<Descriptions.Item label={t('submission:country')}>
{props.submission.geoLocation.country}
</Descriptions.Item>
<Descriptions.Item label={t('submission:city')}>
{props.submission.geoLocation.city}
</Descriptions.Item>
<Descriptions.Item label={t('submission:device.type')}>
{props.submission.device.type}
</Descriptions.Item>
<Descriptions.Item label={t('submission:device.name')}>
{props.submission.device.name}
</Descriptions.Item>
</Descriptions>
<Table columns={columns} dataSource={props.submission.fields} rowKey={'id'} />
</div>
)
}