pay/guis/mobile/FilterPopup.qml

/*
 * This file is part of the Flowee project
 * Copyright (C) 2024-2026 Tom Zander <tom@flowee.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import QtQuick
import QtQuick.Layouts
import "../Flowee" as Flowee
import Flowee.org.pay

// the widget that shows up on the AccountHistory
// allowing one to change the timeline filters
Item {
    id: root
    implicitHeight: coreColumn.height + 10
    width: parent.width

    function toggleFlag(flag, on) {
        var cf = portfolio.current.transactions.includeFlags
        if (((cf & flag) > 0) === on) // nothing to do.
            return
        if (on)
            cf += flag
        else
            cf -= flag
        portfolio.current.transactions.includeFlags = cf
    }

    ColumnLayout {
        id: coreColumn
        width: parent.width
        spacing: 10
        Flowee.Label {
            text: qsTr("Transactions Filter")
        }
        Flow {
            width: parent.width
            spacing: 12
            Rectangle {
                width: 80
                height: 80
                radius: 40

                border.width: 3
                color: checked ? palette.alternateBase : palette.base
                border.color: checked ? palette.midlight : palette.mid

                Image {
                    source: "qrc:/tx-receiving" + (Pay.useDarkSkin ? "-light.svg" : ".svg")
                    width: 50
                    height: 50
                    smooth: true
                    y: 11
                    x: 12
                    opacity: parent.checked ? 1 : 0.5
                }
                property bool checked: (portfolio.current.transactions.includeFlags
                                        & Wallet.IncludeReceivedTransactions)
                                        === Wallet.IncludeReceivedTransactions
                MouseArea {
                    anchors.fill: parent
                    onClicked: toggleFlag(Wallet.IncludeReceivedTransactions, !parent.checked)
                }
                Rectangle {
                    visible: !parent.checked
                    width: parent.width * 1.4
                    height: 3
                    anchors.centerIn: parent
                    rotation: -45
                    color: mainWindow.errorRedBg
                }
            }
            Rectangle {
                width: 80
                height: 80
                radius: 40

                border.width: 3
                color: checked ? palette.alternateBase : palette.base
                border.color: checked ? palette.midlight : palette.mid

                Image {
                    source: "qrc:/tx-send" + (Pay.useDarkSkin ? "-light.svg" : ".svg")
                    width: 50
                    height: 50
                    smooth: true
                    x: 15
                    y: 11
                    opacity: parent.checked ? 1 : 0.5
                }
                property bool checked: (portfolio.current.transactions.includeFlags
                                        & Wallet.IncludeSentTransactions)
                                        === Wallet.IncludeSentTransactions
                MouseArea {
                    anchors.fill: parent
                    onClicked: toggleFlag(Wallet.IncludeSentTransactions, !parent.checked)

                }
                Rectangle {
                    visible: !parent.checked
                    width: parent.width * 1.4
                    height: 3
                    anchors.centerIn: parent
                    rotation: -45
                    color: mainWindow.errorRedBg
                }
            }
            Rectangle {
                id: cfCheckbox
                width: 80
                height: 80
                radius: 6
                color: checked ? palette.alternateBase : palette.base
                border.width: 3
                border.color: checked ? palette.midlight : palette.mid
                visible: portfolio.current.hasAnonimityTransactions

                property bool checked: (portfolio.current.transactions.includeFlags
                                        & Wallet.IncludeCFs) > 0

                Image {
                    source: "qrc:/cf.svg"
                    width: 60
                    height: 60
                    smooth: true
                    anchors.centerIn: parent
                    opacity: cfCheckbox.checked ? 1 : 0.5
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: toggleFlag(Wallet.IncludeCFs, !cfCheckbox.checked)
                }
            }
        }
        Flowee.CheckBox {
            id: commentCheckbox
            width: parent.width
            text: qsTr("Only with a comment", "This is a statement about a transaction")
            checked: !(portfolio.current.transactions.includeFlags & Wallet.IncludeTxWithoutComment) > 0
            onToggled: toggleFlag(Wallet.IncludeTxWithoutComment, !checked)
        }
        Flowee.TextField {
            id: filterTextField
            Layout.fillWidth: true
            text: portfolio.current.transactions.filterString
            onDisplayTextChanged: portfolio.current.transactions.filterString = displayText
            placeholderText: qsTr("Filter on transaction details")
            inputMethodHints: Qt.ImhNoAutoUppercase

            Image {
                source: "qrc:/backspace" + (Pay.useDarkSkin ? "-light.svg" : ".svg")
                width: 22
                height: 15
                anchors.right: parent.right
                anchors.rightMargin: 6
                anchors.verticalCenter: parent.verticalCenter

                MouseArea {
                    anchors.fill: parent
                    anchors.margins: -10
                    onClicked: {
                        filterTextField.text = ""
                        root.forceActiveFocus()
                    }
                }
            }
        }
    }
}