Revize 72afb023
Přidáno uživatelem Fantič před téměř 2 roky(ů)
| 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
re #10569: NotesView: NotesView in ItemDetail