commit 091dec611b1dbca648d9941c3ac7a823b6fb3bf7
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Tue May 2 09:36:33 2023 +0200

    #re 10454: ItemView: ItemDetail update

diff --git a/src/components/item/ItemTabBar.tsx b/src/components/item/ItemTabBar.tsx
index c2935e3..e4443a2 100644
--- a/src/components/item/ItemTabBar.tsx
+++ b/src/components/item/ItemTabBar.tsx
@@ -13,7 +13,7 @@ const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: C
             <VStack>
                 <HStack h="16" >
                     <HStack width="50%">
-                        <Button variant="link" size="lg" marginLeft={0}
+                        <Button variant="ghost" size="lg" marginLeft={0}
                             onPress={onBackPressed}
                             leftIcon={<ChevronLeftIcon size="lg" />}>
                             Back
@@ -24,11 +24,11 @@ const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: C
 
                         </HStack>
                         <HStack marginRight={0}>
-                            <Button variant="link" size="lg"
+                            <Button variant="ghost" size="lg"
                                 onPress={() => onIndexChange(index-1)}
                                 leftIcon={<ChevronLeftIcon size="lg" />}>
                             </Button>
-                            <Button variant="link" size="lg"
+                            <Button variant="ghost" size="lg"
                                 onPress={() => onIndexChange(index+1)}
                                 leftIcon={<ChevronRightIcon size="lg" />}>
                             </Button>
@@ -51,7 +51,7 @@ const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: C
                                                     color={CertaintyWithColors[concordances[i].cert].color}
                                                 />
                                             }
-                                            onPress={() => {onIndexChange(i) }}
+                                            onPress={() => {onIndexChange(i)}}
                                         >
                                             {concordances[i].id}
                                         </Button>
diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index 3be1dbd..4f89af4 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -1,9 +1,10 @@
-import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer } from "native-base"
+import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading } from "native-base"
 import React from "react"
 import { Item } from "../../types/item"
 import { Note } from "../../types/note"
 import LoadingBox from "../loading/LoadingBox"
 import NotesListView from "../notes/NotesListView"
+import WebView from "react-native-webview"
 
 interface ItemDetailProps {
     item: Item,
@@ -12,29 +13,100 @@ interface ItemDetailProps {
     notesLoading: boolean
 }
 
-
 const ItemDetail = (props: { item: Item }) => {
     const item = props.item;
 
     return (
-        <View alignItems="center" flex="1" justifyContent="center">
-            {
-                item && (
-                    <ScrollView>
+        <ScrollView flex="1">
+            <Box width="90%" marginLeft="5%">
+                {
+                    item && (
                         <VStack>
-                            <Text>id: {item.id}</Text>
-                            <Text>name: {item.workName}</Text>
-                            {
-                                item.fullView && item.imageUrl && (
+                            <HStack marginTop="5%">
+                                <VStack width="75%">
+                                    <Text>
+                                        {item.authorDisplayName ? item.authorDisplayName : item.authorName}
+                                    </Text>
+                                    <Heading size="sm">
+                                        {item.workName}
+                                    </Heading>
+
+                                </VStack>
+                                <Box width="25%">
+                                    <Button variant="outline" size="md">
+                                        {item.concordances[0].id}
+                                    </Button>
+                                </Box>
+                            </HStack>
+                            <Card shadow="1" marginTop="5%">
+                                {item.inventoryItem &&
+                                    <VStack>
+                                        <Text italic>
+                                            <Text color="light.500">Inventory item: </Text>
+                                            {item.inventoryItem}
+                                        </Text>
+                                        <Text italic marginTop="2.5%">
+                                            {item.searchSubjects.map((subject, index) => (
+                                                index < item.searchSubjects.length -1 ? (subject + ", ") : (subject)
+                                            ))}
+                                        </Text>
+                                    </VStack>}
+                            </Card>
+                            {item.fullView && item.imageUrl && (
+                                <Center background="primary.100" marginTop="5%">
+                                    <Text>Resembling object</Text>
                                     <Image size={250} alt="image" source={{ uri: `http:147.228.173.159/static/images/${item.imageUrl}` }} />
-                                )
-                            }
+                                </Center>)}
+                            {item.fullView && (
+                                <Card shadow="1" marginTop="5%" marginBottom="5%">
+                                    {item.authorName &&
+                                        <HStack>
+                                            <Text italic>
+                                                <Text color="light.500">Author name: </Text>
+                                                {item.authorName}
+                                            </Text>
+                                        </HStack>}
+                                    {item.title &&
+                                        <HStack>
+                                            <Text italic>
+                                                <Text color="light.500">Title: </Text>
+                                                {item.title}
+                                            </Text>
+                                        </HStack>}
+                                    {item.institution &&
+                                        <HStack>
+                                            <Text italic>
+                                                <Text color="light.500">Institution: </Text>
+                                                {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
+                                            </Text>
+                                        </HStack>}
+                                    {item.repository &&
+                                        <HStack>
+                                            <Text italic>
+                                                <Text color="light.500">Repository: </Text>
+                                                {item.repository}
+                                            </Text>
+                                        </HStack>}
+                                    {item.provenance &&
+                                        <HStack>
+                                            <Text italic>
+                                                <Text color="light.500">Provenance: </Text>
+                                                {item.provenance}
+                                            </Text>
+                                        </HStack>}
+                                    {item.description &&
+                                        <HStack>
+                                            <Text italic>
+                                                <Text color="light.500">Description: </Text>
+                                                {item.description}
+                                            </Text>
+                                        </HStack>}
+                                </Card>)}
                         </VStack>
-                    </ScrollView>
-
-                )
-            }
-        </View>
+                    )
+                }
+            </Box>
+        </ScrollView>
     );
 }
 
@@ -45,7 +117,7 @@ const ItemView = (props: ItemDetailProps) => {
     // item shown / note shown
     const [itemShown, setItemShown] = React.useState(true);
 
-    const {itemLoading, notesLoading} = props;
+    const { itemLoading, notesLoading } = props;
 
     const handleItemClick = () => {
         setItemShown(true);
@@ -58,27 +130,27 @@ const ItemView = (props: ItemDetailProps) => {
     return (
         <Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
             {itemShown ? (
-                itemLoading ? 
-                <LoadingBox text="Item loading"/>
-                :
-                <ItemDetail item={props.item} />
+                itemLoading ?
+                    <LoadingBox text="Item loading" />
+                    :
+                    <ItemDetail item={props.item} />
             ) : (
-                notesLoading ? 
-                <LoadingBox text="Notes loading"/>
-                :
-                <NotesListView notes={props.notes} />
+                notesLoading ?
+                    <LoadingBox text="Notes loading" />
+                    :
+                    <NotesListView notes={props.notes} />
             )}
 
             {/* item notes switch tab */}
             <HStack alignItems="center">
-                <Button 
+                <Button
                     variant={itemShown ? "subtle" : "outline"}
                     w="50%"
                     onPress={handleItemClick}
                 >
                     Item
                 </Button>
-                <Button 
+                <Button
                     variant={itemShown ? "outline" : "subtle"}
                     w="50%"
                     onPress={handleNotesClick}
diff --git a/src/pages/ItemViewPage.tsx b/src/pages/ItemViewPage.tsx
index 53eeb32..caf77b7 100644
--- a/src/pages/ItemViewPage.tsx
+++ b/src/pages/ItemViewPage.tsx
@@ -9,13 +9,11 @@ import { useWindowDimensions } from "react-native"
 import LoadingBox from "../components/loading/LoadingBox"
 import ItemTabBar from "../components/item/ItemTabBar"
 
-
 interface ItemViewProps {
   itemId: string,
   backPressed: any
 }
 
-
 const ItemViewPage = (props: ItemViewProps) => {
 
   const layout = useWindowDimensions();
@@ -110,6 +108,4 @@ const ItemViewPage = (props: ItemViewProps) => {
   );
 }
 
-
-
 export default ItemViewPage;
