|
1
|
import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading } from "native-base"
|
|
2
|
import React from "react"
|
|
3
|
import { Item } from "../../types/item"
|
|
4
|
import { Note } from "../../types/note"
|
|
5
|
import LoadingBox from "../loading/LoadingBox"
|
|
6
|
import NotesListView from "../notes/NotesListView"
|
|
7
|
import { IMAGE_URL } from "../../api/constants"
|
|
8
|
|
|
9
|
interface ItemDetailProps {
|
|
10
|
item: Item,
|
|
11
|
itemLoading: boolean,
|
|
12
|
notes: Note[],
|
|
13
|
notesLoading: boolean
|
|
14
|
}
|
|
15
|
|
|
16
|
const ItemDetail = (props: { item: Item }) => {
|
|
17
|
const item = props.item;
|
|
18
|
|
|
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>
|
|
33
|
|
|
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
|
</VStack>
|
|
106
|
)
|
|
107
|
}
|
|
108
|
</Box>
|
|
109
|
</ScrollView>
|
|
110
|
);
|
|
111
|
}
|
|
112
|
|
|
113
|
|
|
114
|
|
|
115
|
const ItemView = (props: ItemDetailProps) => {
|
|
116
|
|
|
117
|
// item shown / note shown
|
|
118
|
const [itemShown, setItemShown] = React.useState(true);
|
|
119
|
|
|
120
|
const { itemLoading, notesLoading } = props;
|
|
121
|
|
|
122
|
const handleItemClick = () => {
|
|
123
|
setItemShown(true);
|
|
124
|
}
|
|
125
|
|
|
126
|
const handleNotesClick = () => {
|
|
127
|
setItemShown(false);
|
|
128
|
}
|
|
129
|
|
|
130
|
return (
|
|
131
|
<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")}/>
|
|
142
|
)}
|
|
143
|
|
|
144
|
{/* item notes switch tab */}
|
|
145
|
<HStack alignItems="center">
|
|
146
|
<Button
|
|
147
|
variant={itemShown ? "subtle" : "outline"}
|
|
148
|
w="50%"
|
|
149
|
onPress={handleItemClick}
|
|
150
|
>
|
|
151
|
Item
|
|
152
|
</Button>
|
|
153
|
<Button
|
|
154
|
variant={itemShown ? "outline" : "subtle"}
|
|
155
|
w="50%"
|
|
156
|
onPress={handleNotesClick}
|
|
157
|
>
|
|
158
|
Notes
|
|
159
|
</Button>
|
|
160
|
</HStack>
|
|
161
|
</Box>
|
|
162
|
)
|
|
163
|
}
|
|
164
|
|
|
165
|
export default ItemView
|