Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 72afb023

Přidáno uživatelem Fantič před téměř 2 roky(ů)

re #10569: NotesView: NotesView in ItemDetail

Zobrazit rozdíly:

src/components/item/ItemView.tsx
10 10
    item: Item,
11 11
    itemLoading: boolean,
12 12
    notes: Note[],
13
    notesLoading: boolean
13
    notesLoading: boolean,
14
    navigation: any
14 15
}
15 16

  
16 17
const ItemDetail = (props: { item: Item }) => {
17 18
    const item = props.item;
18 19

  
19
    return (
20
        <ScrollView flex="1">
21
            <Box width="90%" marginLeft="5%">
22
                {
23
                    item && (
24
                        <VStack>
25
                            <HStack marginTop="5%">
26
                                <VStack width="75%">
27
                                    <Text>
28
                                        {item.authorDisplayName ? item.authorDisplayName : item.authorName}
29
                                    </Text>
30
                                    <Heading size="sm">
31
                                        {item.workName}
32
                                    </Heading>
20
    return (<>
21
        {
22
            item && (
23
                <VStack>
24
                    <HStack marginTop="5%">
25
                        <VStack width="75%">
26
                            <Text>
27
                                {item.authorDisplayName ? item.authorDisplayName : item.authorName}
28
                            </Text>
29
                            <Heading size="sm">
30
                                {item.workName}
31
                            </Heading>
33 32

  
34
                                </VStack>
35
                                <Box width="25%">
36
                                    <Button variant="outline" size="md">
37
                                        {item.concordances[0].id}
38
                                    </Button>
39
                                </Box>
40
                            </HStack>
41
                            <Card shadow="1" marginTop="5%">
42
                                {item.inventoryItem &&
43
                                    <VStack>
44
                                        <Text italic>
45
                                            <Text color="light.500">Inventory item: </Text>
46
                                            {item.inventoryItem}
47
                                        </Text>
48
                                        <Text italic marginTop="2.5%">
49
                                            {item.searchSubjects.map((subject, index) => (
50
                                                index < item.searchSubjects.length -1 ? (subject + ", ") : (subject)
51
                                            ))}
52
                                        </Text>
53
                                    </VStack>}
54
                            </Card>
55
                            {item.fullView && item.imageUrl && (
56
                                <Center background="primary.100" marginTop="5%">
57
                                    <Text>Resembling object</Text>
58
                                    <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }}/>
59
                                </Center>)}
60
                            {item.fullView && (
61
                                <Card shadow="1" marginTop="5%" marginBottom="5%">
62
                                    {item.authorName &&
63
                                        <HStack>
64
                                            <Text italic  marginTop="2.5%">
65
                                                <Text color="light.500">Author name: </Text>
66
                                                {item.authorName}
67
                                            </Text>
68
                                        </HStack>}
69
                                    {item.title &&
70
                                        <HStack>
71
                                            <Text italic  marginTop="2.5%">
72
                                                <Text color="light.500">Title: </Text>
73
                                                {item.title}
74
                                            </Text>
75
                                        </HStack>}
76
                                    {item.institution &&
77
                                        <HStack>
78
                                            <Text italic  marginTop="2.5%">
79
                                                <Text color="light.500">Institution: </Text>
80
                                                {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
81
                                            </Text>
82
                                        </HStack>}
83
                                    {item.repository &&
84
                                        <HStack>
85
                                            <Text italic  marginTop="2.5%">
86
                                                <Text color="light.500">Repository: </Text>
87
                                                {item.repository}
88
                                            </Text>
89
                                        </HStack>}
90
                                    {item.provenance &&
91
                                        <HStack>
92
                                            <Text italic  marginTop="2.5%">
93
                                                <Text color="light.500">Provenance: </Text>
94
                                                {item.provenance}
95
                                            </Text>
96
                                        </HStack>}
97
                                    {item.description &&
98
                                        <HStack>
99
                                            <Text italic  marginTop ="2.5%">
100
                                                <Text color="light.500">Description: </Text>
101
                                                {item.description}
102
                                            </Text>
103
                                        </HStack>}
104
                                </Card>)}
105 33
                        </VStack>
106
                    )
107
                }
108
            </Box>
109
        </ScrollView>
34
                        <Box width="25%">
35
                            <Button variant="outline" size="md">
36
                                {item.concordances[0].id}
37
                            </Button>
38
                        </Box>
39
                    </HStack>
40
                    <Card shadow="1" marginTop="5%">
41
                        {item.inventoryItem &&
42
                            <VStack>
43
                                <Text italic>
44
                                    <Text color="light.500">Inventory item: </Text>
45
                                    {item.inventoryItem}
46
                                </Text>
47
                                <Text italic marginTop="2.5%">
48
                                    {item.searchSubjects.map((subject, index) => (
49
                                        index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
50
                                    ))}
51
                                </Text>
52
                            </VStack>}
53
                    </Card>
54
                    {item.fullView && item.imageUrl && (
55
                        <Center background="primary.100" marginTop="5%">
56
                            <Text>Resembling object</Text>
57
                            <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }} />
58
                        </Center>)}
59
                    {item.fullView && (
60
                        <Card shadow="1" marginTop="5%" marginBottom="5%">
61
                            {item.authorName &&
62
                                <HStack>
63
                                    <Text italic marginTop="2.5%">
64
                                        <Text color="light.500">Author name: </Text>
65
                                        {item.authorName}
66
                                    </Text>
67
                                </HStack>}
68
                            {item.title &&
69
                                <HStack>
70
                                    <Text italic marginTop="2.5%">
71
                                        <Text color="light.500">Title: </Text>
72
                                        {item.title}
73
                                    </Text>
74
                                </HStack>}
75
                            {item.institution &&
76
                                <HStack>
77
                                    <Text italic marginTop="2.5%">
78
                                        <Text color="light.500">Institution: </Text>
79
                                        {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
80
                                    </Text>
81
                                </HStack>}
82
                            {item.repository &&
83
                                <HStack>
84
                                    <Text italic marginTop="2.5%">
85
                                        <Text color="light.500">Repository: </Text>
86
                                        {item.repository}
87
                                    </Text>
88
                                </HStack>}
89
                            {item.provenance &&
90
                                <HStack>
91
                                    <Text italic marginTop="2.5%">
92
                                        <Text color="light.500">Provenance: </Text>
93
                                        {item.provenance}
94
                                    </Text>
95
                                </HStack>}
96
                            {item.description &&
97
                                <HStack>
98
                                    <Text italic marginTop="2.5%">
99
                                        <Text color="light.500">Description: </Text>
100
                                        {item.description}
101
                                    </Text>
102
                                </HStack>}
103
                        </Card>)}
104
                </VStack>
105
            )
106
        }</>
110 107
    );
111 108
}
112 109

  
......
117 114
    // item shown / note shown
118 115
    const [itemShown, setItemShown] = React.useState(true);
119 116

  
120
    const { itemLoading, notesLoading } = props;
117
    const { itemLoading, notesLoading, navigation } = props;
121 118

  
122 119
    const handleItemClick = () => {
123 120
        setItemShown(true);
......
129 126

  
130 127
    return (
131 128
        <Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
132
            {itemShown ? (
133
                itemLoading ?
134
                    <LoadingBox text="Item loading" />
135
                    :
136
                    <ItemDetail item={props.item} />
137
            ) : (
138
                notesLoading ?
139
                    <LoadingBox text="Notes loading" />
140
                    :
141
                    <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")} setConfirmDialog={() => {}}/>
142
            )}
129
            <ScrollView flex="1">
130
                <Box width="92%" marginLeft="5%">
131
                    {itemShown ? (
132
                        itemLoading ?
133
                            <LoadingBox text="Item loading" />
134
                            :
135
                            <ItemDetail item={props.item} />
136
                    ) : (
137
                        notesLoading ?
138
                            <LoadingBox text="Notes loading" />
139
                            :
140
                            <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")} setConfirmDialog={() => { }} navigation={navigation} />
141
                    )}
142
                </Box>
143
            </ScrollView>
144

  
143 145

  
144 146
            {/* item notes switch tab */}
145 147
            <HStack alignItems="center">

Také k dispozici: Unified diff