Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 3ec590e6

Přidáno uživatelem Václav Honzík před více než 2 roky(ů)

re #9369 item left col display text

Zobrazit rozdíly:

frontend/src/features/Catalog/CatalogItemDetail.tsx
1
import { Divider, Grid, Paper, Typography } from '@mui/material'
2
import { Fragment, ReactNode } from 'react'
3
import { CatalogItemDto } from '../../swagger/data-contracts'
1 4

  
2
export default {}
5
const CatalogItemDetail = () => {
6
    // TODO fetch from api
7
    const item: CatalogItemDto = {
8
        id: '1',
9
        name: 'Abaindi',
10
        alternativeNames: ['Abaindi', 'Tell muhamad', 'and his waifu'],
11
        certainty: 100,
12
        longitude: 27.22,
13
        latitude: 27.22,
14
        bibliography: ['A', 'V muhamad', '😭😂'],
15
        writtenForms: ['sadsadsa', 'sadTell muhamad', 'and his waifu'],
16
        types: ['City', 'Town', 'Village'],
17
        countries: ['Sidonu', 'Lebanon', 'Syria'],
18
    }
19

  
20
    const mapToRow = (rowName: string, items: string[]): ReactNode => (
21
        <Fragment>
22
            <Grid sx={{ my: 2 }} container justifyContent="space-around">
23
                <Grid item xs={8} sx={{ px: 1 }}>
24
                    <Typography>{rowName}</Typography>
25
                </Grid>
26
                <Grid item xs={4} sx={{ ml: 'auto' }}>
27
                    {items.map((item) => (
28
                        <Typography>{item}</Typography>
29
                    ))}
30
                    {items.map((itm, idx) => () => <Fragment></Fragment>)}
31
                </Grid>
32
            </Grid>
33
        </Fragment>
34
    )
35

  
36
    const rows = [
37
        {
38
            rowName: 'Name',
39
            items: [item.name],
40
        },
41
        {
42
            rowName: 'Alternative Names',
43
            items: item.alternativeNames,
44
        },
45
        {
46
            rowName: 'Written Forms',
47
            items: item.writtenForms,
48
        },
49
        {
50
            rowName: 'Type',
51
            items: item.types,
52
        },
53
        {
54
            rowName: 'State or Territory',
55
            items: item.countries,
56
        },
57
        {
58
            rowName: 'Coordinates',
59
            items: [`${item.longitude} ${item.latitude}`],
60
        },
61

  
62
        {
63
            rowName: 'Certainty',
64
            // @ts-ignore
65
            items: [item.certainty],
66
        },
67
        {
68
            rowName: 'Bibliography',
69
            items: item.bibliography,
70
        },
71
        // TODO description
72
    ]
73

  
74
    return (
75
        // TODO remove min height
76
        <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
77
            <Grid container justifyContent="space-around">
78
                {/* <Paper style={{ minHeight: '100vh', borderRadius: 0 }}> */}
79
                <Grid item xs={6} sx={{ px: 2 }}>
80
                    {rows.map((row, idx) => {
81
                        return (
82
                            <Fragment>
83
                                {mapToRow(
84
                                    row.rowName as string,
85
                                    row.items as string[]
86
                                )}
87
                                {idx === rows.length - 1 ? null : <Divider />}
88
                            </Fragment>
89
                        )
90
                    })}
91
                </Grid>
92

  
93
                <Grid item xs={6}>
94
                    {/* Map */}
95
                </Grid>
96
                {/* </Paper> */}
97
            </Grid>
98
        </Paper>
99
    )
100
}
101

  
102
export default CatalogItemDetail
frontend/src/features/Home/Home.tsx
1 1
import { Button } from '@mui/material'
2 2
import { useDispatch, useSelector } from 'react-redux'
3 3
import { logout } from '../Auth/userSlice'
4
import CatalogItemDetail from '../Catalog/CatalogItemDetail'
4 5
import { RootState } from '../redux/store'
5 6

  
6 7
const Home = () => {
......
23 24
                    Logout
24 25
                </Button>
25 26
            ) : null}
27
            <CatalogItemDetail />
26 28
        </>
27 29
    )
28 30
}

Také k dispozici: Unified diff