status-desktop/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml

108 lines
3.4 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import shared.panels 1.0
import utils 1.0
import "collectibles"
Item {
id: root
property var collectiblesModel
width: parent.width
signal collectibleClicked(int chainId, string contractAddress, string tokenId, string uid)
Loader {
id: contentLoader
width: parent.width
height: parent.height
sourceComponent: {
/* TODO: Issue #11635
if (!root.collectiblesModel.hasMore && root.collectiblesModel.count === 0)
return empty;
*/
return loaded;
}
}
Component {
id: empty
Item {
StyledText {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: Style.current.secondaryText
text: qsTr("Collectibles will appear here")
font.pixelSize: 15
}
}
}
Component {
id: loaded
StatusGridView {
id: gridView
anchors.fill: parent
model: root.collectiblesModel
cellHeight: 229
cellWidth: 176
delegate: CollectibleView {
height: gridView.cellHeight
width: gridView.cellWidth
title: model.name ? model.name : "..."
subTitle: model.collectionName ?? ""
mediaUrl: model.mediaUrl ?? ""
mediaType: model.mediaType ?? ""
fallbackImageUrl: model.imageUrl ?? ""
backgroundColor: model.backgroundColor ? model.backgroundColor : "transparent"
isLoading: !!model.isLoading
privilegesLevel: model.communityPrivilegesLevel ?? Constants.TokenPrivilegesLevel.Community
ornamentColor: model.communityColor ?? "transparent"
communityId: model.communityId
onClicked: root.collectibleClicked(model.chainId, model.contractAddress, model.tokenId, model.uid)
}
ScrollBar.vertical: StatusScrollBar {}
// For some reason fetchMore is not working properly.
// Adding some logic here as a workaround.
visibleArea.onYPositionChanged: checkLoadMore()
visibleArea.onHeightRatioChanged: checkLoadMore()
Connections {
target: gridView
function onVisibleChanged() {
checkLoadMore()
}
}
Connections {
target: root.collectiblesModel
function onHasMoreChanged() {
checkLoadMore()
}
function onIsFetchingChanged() {
checkLoadMore()
}
}
function checkLoadMore() {
// If there is no more items to load or we're already fetching, return
if (!gridView.visible || !root.collectiblesModel.hasMore || root.collectiblesModel.isFetching)
return
// Only trigger if close to the bottom of the list
if (visibleArea.yPosition + visibleArea.heightRatio > 0.9)
root.collectiblesModel.loadMore()
}
}
}
}