Revize fb120216

re #10895: ItemView: ItemObjects switching, display color

src/components/item/ItemView.tsx

@@ -1 +1 @@
 import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon, Divider, Pressable } from "native-base"
 import React, { useCallback, useEffect, useState } from "react"
-import { Item } from "../../types/item"
+import { Certainty, Item, RelationshipType } from "../../types/item"
 import { Note } from "../../types/note"
 import LoadingBox from "../loading/LoadingBox"
 import NotesListView from "../notes/NotesListView"
@@ -15 +15 @@
 import { DrawerNavigationProp } from "@react-navigation/drawer"
 import { RootStackParamList } from "../../pages/Navigation"
 import { select } from "d3"
+import { CertaintyWithColors } from "../../stores/reducers/itemSlice"
 
 interface ItemDetailProps {
     item: Item,
@@ -86 +87 @@
                             {item.fullView && item.images && item.images.length > 0 && (
                                 <VStack marginTop={5} alignItems="center" justifyContent="center" backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
 
-                                    <Box marginTop={2.5} borderWidth={1} width={Dimensions.get('window').width - 110} alignItems="center" backgroundColor="red" borderTopRadius={10} >
-                                        <Text marginBottom={2}>{"Resembling objects"}
-                                            {selectedImage + 1 + "/" + item.images.length + item.images[selectedImage].cert + item.images[selectedImage].relationship_type}
+                                    <Box style={{ backgroundColor: item.images[selectedImage].relationship_type != RelationshipType.IdentifiedArtwork ? "#B3B3B3" : CertaintyWithColors[item.images[selectedImage].cert ?? Certainty.Unknown].color }}
+                                        marginTop={2.5} width={Dimensions.get('window').width - 110} alignItems="center" borderTopRadius={10} >
+                                        <Text marginBottom={2}>
+                                            
+                                            {item.images[selectedImage].relationship_type == RelationshipType.Resembling && "Resembling object"}
+                                            {item.images[selectedImage].relationship_type == RelationshipType.IdentifiedArtwork && "Identified artwork"}
+                                            {item.images[selectedImage].relationship_type == RelationshipType.Related && "Related item"}
+
+                                            {item.images[selectedImage].relationship_type == RelationshipType.IdentifiedArtwork && item.images[selectedImage].cert && item.images[selectedImage].cert != Certainty.Unknown && ` - ${item.images?.[selectedImage].cert}`}
                                         </Text>
                                     </Box>
 
@@ -126 +133 @@
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Author name: </Text>
-                                                {item.authorName}
+                                                {item.images?.[selectedImage]?.author}
                                             </Text>
                                         </HStack>}
                                     {item.title &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Title: </Text>
-                                                {item.title}
+                                                {item.images?.[selectedImage].title}
                                             </Text>
                                         </HStack>}
                                     {item.institution &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Institution: </Text>
-                                                {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
+                                                {item.images?.[selectedImage].institution.name && `${item.images?.[selectedImage].institution.name}`}
+                                                {item.images?.[selectedImage].institution.inventoryNumber && `, Inv. No. ${item.images?.[selectedImage].institution.inventoryNumber}`}
+                                                {item.images?.[selectedImage].institution.city && `, ${item.images?.[selectedImage].institution.city}`}
+                                                {item.images?.[selectedImage].institution.country && ` (${item.images?.[selectedImage].institution.country})`}
                                             </Text>
                                         </HStack>}
                                     {item.repository &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Repository: </Text>
-                                                {item.repository}
+                                                {item.images?.[selectedImage].repository}
                                             </Text>
                                         </HStack>}
-                                    {item.provenance &&
+                                    {item.images?.[selectedImage].provenance &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Provenance: </Text>
-                                                {item.provenance}
+                                                {item.images?.[selectedImage].provenance}
                                             </Text>
                                         </HStack>}
-                                    {item.description &&
+                                    {item.images?.[selectedImage].description &&
                                         <HStack>
                                             <Text marginTop={2.5}>
                                                 <Text color="#654B07" italic fontWeight={"semibold"}>Description: </Text>
-                                                {item.description}
+                                                {item.images?.[selectedImage].description}
                                             </Text>
                                         </HStack>}
                                 </View>)}