Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 72afb023

Přidáno uživatelem Fantič před asi 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">


  		












  

    
      src/stores/actions/itemThunks.ts
    
  





  30
  30
  
    
                return {


  		




  31
  31
  
    
                    id: itemId,


  		




  32
  32
  
    
                    fullView: true,


  		




  33
  
  
    
                    concordances:  [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}].concat(response.data.concordances),


  		




  
  33
  
    
                    concordances: response.data.concordances ?


  		




  
  34
  
    
                         [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}].concat(response.data.concordances)


  		




  
  35
  
    
                         :


  		




  
  36
  
    
                         [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}],


  		




  34
  37
  
    
                    authorDisplayName: response.data.object[0]?.name?.[0]?.getty_data?.display_name || null,


  		




  35
  38
  
    
                    workName: response.data.object[0]?.caption || null,


  		




  36
  39
  
    
                    inventoryItem: response.data.text || null,


  		




  ......




  49
  52
  
    
                return {


  		




  50
  53
  
    
                    id: itemId,


  		




  51
  54
  
    
                    fullView: false,


  		




  52
  
  
    
                    concordances: [{id: itemId, cert: Certainty.Unknown}].concat(response.data.concordances),


  		




  
  55
  
    
                    concordances: response.data.concordances ?


  		




  
  56
  
    
                    [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}].concat(response.data.concordances)


  		




  
  57
  
    
                    :


  		




  
  58
  
    
                    [{id: itemId, cert: response.data.object[1]?.cert || Certainty.Unknown}],


  		




  53
  59
  
    
                    authorDisplayName: response.data.object[0]?.name?.[0]?.getty_data?.display_name || null,


  		




  54
  60
  
    
                    workName: response.data.object[0]?.caption || null,


  		




  55
  61
  
    
                    inventoryItem: response.data.text || null,


  		












Také k dispozici:  Unified diff