status-desktop/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml

import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1

import SortFilterProxyModel 0.2

import utils 1.0
import shared.controls 1.0

/*!
   \qmltype TokenHoldersList
   \inherits StatusListView
   \brief Shows list of users or addresses with corrensponding numbers of
   messages and holding amounts.

   Expected roles: name, walletAddress, imageSource, amount
  */


Item {
    id: root
    implicitHeight: (listView.contentHeight+header.height+12)//initial height plus top margin

    property alias model: listView.model
    property bool isSelectorMode: false
    readonly property alias sortBy: d.sortBy
    readonly property alias sortOrder: d.sorting
    readonly property bool bottomSeparatorVisible: ((listView.contentY > 0) &&
    (listView.contentY < (listView.contentHeight - listView.height - 40/*margins*/)))

    signal selfDestructAmountChanged(string walletAddress, int amount)
    signal selfDestructRemoved(string walletAddress)

    QtObject {
        id: d
        property int sortBy: TokenHoldersProxyModel.SortBy.None
        property int sorting: Qt.DescendingOrder
        property var selectedTokenAmount: new Map();
        property var selectedTokenChecked: new Map();
        property int delegateHeight: 64

        signal resetOtherHeaders(var header)
    }

    clip: true

    Control {
        id: header
        width: parent.width
        height: 40
        readonly property alias usernameHeaderWidth: usernameHeader.width
        readonly property alias holdingHeaderWidth: holdingHeader.width
        background: Rectangle {
            id: scrollingSeparator
            width: parent.width
            height: 4
            anchors.bottom: parent.bottom
            color: Theme.palette.baseColor2
            visible: (listView.contentY > 0)
        }
        contentItem: Item {
            anchors.fill: parent
            anchors.leftMargin: Style.current.padding
            anchors.rightMargin: Style.current.padding
            clip: true
            RowLayout {
                id: row
                anchors.fill: parent
                spacing: Style.current.padding
                RowLayout {
                    id: usernameHeader

                    ColumnHeader {
                        text: qsTr("Username")

                        traversalOrder: [
                            StatusSortableColumnHeader.Sorting.NoSorting,
                            StatusSortableColumnHeader.Sorting.Ascending,
                            StatusSortableColumnHeader.Sorting.Descending
                        ]

                        onClicked: {
                            if (sorting !== StatusSortableColumnHeader.Sorting.NoSorting)
                                d.sortBy = TokenHoldersProxyModel.SortBy.Username
                            else
                                d.sortBy = TokenHoldersProxyModel.SortBy.None
                        }
                    }
                    Item {  Layout.fillWidth: true }
                }

                ColumnHeader {
                    id: holdingHeader
                    text: qsTr("Hodling")
                    onClicked: {
                        if (sorting !== StatusSortableColumnHeader.Sorting.NoSorting)
                            d.sortBy = TokenHoldersProxyModel.SortBy.Holding
                        else
                            d.sortBy = TokenHoldersProxyModel.SortBy.None
                    }
                }
                Item {
                    Layout.preferredWidth: 233
                    Layout.rightMargin: Style.current.halfPadding
                }
            }
        }
    }

    StatusListView {
        id: listView
        anchors.fill: parent
        anchors.topMargin: header.height
        currentIndex: -1
        component ColumnHeader: StatusSortableColumnHeader {
            id: columnHeader

            leftPadding: 0
            rightPadding: 0
            Connections {
                target: d

                function onResetOtherHeaders(header) {
                    if (header !== columnHeader)
                        columnHeader.reset()
                }
            }

            onClicked: {
                d.resetOtherHeaders(this)

                if (sorting === StatusSortableColumnHeader.Sorting.Ascending)
                    d.sorting = Qt.AscendingOrder
                else if (sorting === StatusSortableColumnHeader.Sorting.Descending)
                    d.sorting = Qt.DescendingOrder
            }
        }

        component NumberCell: StatusBaseText {
            horizontalAlignment: Qt.AlignRight

            font.weight: Font.Medium
            font.pixelSize: 13

            color: Theme.palette.baseColor1
            elide: Qt.ElideRight
        }

        delegate: ItemDelegate {
            id: delegate
            width: ListView.view.width
            height: d.delegateHeight
            padding: 0
            readonly property string name: model.name

            readonly property bool isFirstRowAddress: {
                if (model.name !== "")
                    return false

                const item = listView.itemAtIndex(index - 1)
                return item && item.name
            }

            readonly property bool showSeparator: isFirstRowAddress
                                                  && root.sortBy === TokenHoldersProxyModel.SortBy.Username


            background: Item {
                Rectangle {
                    anchors.fill: parent
                    radius: Style.current.radius
                    color: (delegate.hovered || delegate.ListView.isCurrentItem)
                           ? Theme.palette.baseColor2 : "transparent"
                }

                Rectangle {
                    visible: delegate.showSeparator
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.topMargin: delegate.topPadding / 2

                    height: 1
                    color: Theme.palette.baseColor2
                }
            }

            contentItem: Item {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: Style.current.padding
                anchors.rightMargin: Style.current.padding
                RowLayout {
                    spacing: Style.current.halfPadding

                    StatusListItem {
                        readonly property bool unknownHolder: model.name === ""
                        readonly property string formattedTitle: unknownHolder ? "?" : model.name
                        Layout.preferredWidth: header.usernameHeaderWidth
                        color: "transparent"
                        leftPadding: 0
                        rightPadding: 0
                        sensor.enabled: false
                        title: formattedTitle
                        statusListItemTitle.visible: !unknownHolder
                        subTitle: Utils.getElidedPk(model.walletAddress)
                        asset.name: model.imageSource
                        asset.isImage: true
                        asset.isLetterIdenticon: !asset.name
                        asset.color: Theme.palette.getColor("red2")
                    }

                    NumberCell {
                        Layout.preferredWidth: header.holdingHeaderWidth
                        Layout.leftMargin: Style.current.halfPadding

                        text: LocaleUtils.numberToLocaleString(model.amount)
                    }

                    Item { Layout.preferredWidth: 100 }

                    StatusComboBox {
                        id: combo
                        Layout.preferredWidth: 68
                        Layout.preferredHeight: 44
                        control.spacing: Style.current.halfPadding / 2
                        model: amount
                        size: StatusComboBox.Size.Small
                        type: StatusComboBox.Type.Secondary
                        delegate: StatusItemDelegate {
                            width: combo.control.width
                            centerTextHorizontally: true
                            highlighted: combo.control.highlightedIndex === index
                            font: combo.control.font
                            text: Number(modelData) + 1
                        }
                        contentItem: StatusBaseText {
                            id: comboText
                            font: combo.control.font
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight
                            color: Theme.palette.baseColor1
                            Component.onCompleted: {
                                if (d.selectedTokenAmount.get(walletAddress) === undefined) {
                                    d.selectedTokenAmount.set(walletAddress, amount);
                                }
                                text = d.selectedTokenAmount.get(walletAddress);
                            }
                        }

                        control.onActivated: {
                            d.selectedTokenAmount.set(walletAddress, (index+1));
                            comboText.text = d.selectedTokenAmount.get(walletAddress);
                            if (checkBox.checked) {
                                root.selfDestructAmountChanged(walletAddress, d.selectedTokenAmount.get(walletAddress))
                            }
                        }
                    }
                    Item { Layout.preferredWidth: 28 }
                    StatusCheckBox {
                        id: checkBox
                        Layout.preferredWidth: 24
                        Layout.preferredHeight: 24
                        Layout.alignment: Qt.AlignRight
                        visible: root.isSelectorMode
                        padding: 0
                        onCheckStateChanged: {
                            if (checked)
                                root.selfDestructAmountChanged(model.walletAddress, d.selectedTokenAmount.get(walletAddress))
                            else
                                root.selfDestructRemoved(model.walletAddress)

                            d.selectedTokenChecked.set(walletAddress, checked);
                        }
                        Component.onCompleted: {
                            checked = !!d.selectedTokenChecked.get(walletAddress);
                        }
                    }
                }
            }
        }
    }
}