From e106f93c4db683005b0900b4c7470fe271f4b694 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Mon, 27 Jun 2022 12:51:12 +0200
Subject: [PATCH] feat(StatusItemSelector): Component improvements

-  Added `popupItem` property
- Replaced `GridLayout` to `Flow`.
- Added add item logic.
- Added operators logic.
- Added basic documentation.
- Added to sandbox.
---
 .../doc/src/images/status_item_selector.png   | Bin 0 -> 15414 bytes
 ui/StatusQ/doc/src/statusqcomponents.qdoc     |   1 +
 ui/StatusQ/sandbox/main.qml                   |   5 +
 .../sandbox/pages/StatusItemSelectorPage.qml  |  44 ++++
 ui/StatusQ/sandbox/qml.qrc                    |   1 +
 .../StatusQ/Components/StatusItemSelector.qml | 189 ++++++++++++++++--
 ui/StatusQ/src/StatusQ/Components/qmldir      |   2 +-
 ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml   |   8 +
 8 files changed, 232 insertions(+), 18 deletions(-)
 create mode 100644 ui/StatusQ/doc/src/images/status_item_selector.png
 create mode 100644 ui/StatusQ/sandbox/pages/StatusItemSelectorPage.qml

diff --git a/ui/StatusQ/doc/src/images/status_item_selector.png b/ui/StatusQ/doc/src/images/status_item_selector.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0cbaac7ebca5880e39a72f33f36464d740137ea
GIT binary patch
literal 15414
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
Z1>8l%sKiUxe;1{KNQuddmJ93o{~r&x{eS=f

literal 0
HcmV?d00001

diff --git a/ui/StatusQ/doc/src/statusqcomponents.qdoc b/ui/StatusQ/doc/src/statusqcomponents.qdoc
index 781b769b18..3425eaa482 100644
--- a/ui/StatusQ/doc/src/statusqcomponents.qdoc
+++ b/ui/StatusQ/doc/src/statusqcomponents.qdoc
@@ -20,6 +20,7 @@
        \li \l{StatusChatToolBar}
        \li \l{StatusContactRequestsIndicatorListItem}
        \li \l{StatusDescriptionListItem}
+       \li \l{StatusItemSelector}
        \li \l{StatusLetterIdenticon}
        \li \l{StatusListItem}
        \li \l{StatusListPicker}
diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index c436414ec4..1d4a4b5321 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -294,6 +294,11 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusItemSelector"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem {
                             title: "StatusPopupMenu"
diff --git a/ui/StatusQ/sandbox/pages/StatusItemSelectorPage.qml b/ui/StatusQ/sandbox/pages/StatusItemSelectorPage.qml
new file mode 100644
index 0000000000..2a346b0d91
--- /dev/null
+++ b/ui/StatusQ/sandbox/pages/StatusItemSelectorPage.qml
@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+ColumnLayout {
+    spacing: 20
+    StatusItemSelector {
+        id: selector
+        icon: "qrc:/images/SNT.png"
+        iconSize: 24
+        title: "Item Selector Title"
+        defaultItemText: "Example: Empty items"
+        andOperatorText: "and"
+        orOperatorText: "or"
+        popupItem: StatusDropdown {
+            id: dropdown
+            width: 200
+            contentItem: ColumnLayout {
+                spacing: 10
+                StatusInput {
+                    id: input
+                    Layout.fillWidth: true
+                }
+                StatusButton {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: "Add element"
+                    onClicked: {
+                        selector.addItem(input.text, "qrc:/images/SNT.png", selector.itemsModel.count > 0 ? Utils.Operators.Or : Utils.Operators.None)
+                        dropdown.close()
+                    }
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        Layout.alignment: Qt.AlignHCenter
+        text: "Clear list"
+        onClicked: { selector.itemsModel.clear() }
+    }
+}
diff --git a/ui/StatusQ/sandbox/qml.qrc b/ui/StatusQ/sandbox/qml.qrc
index 082509d60a..050d4d7bc5 100644
--- a/ui/StatusQ/sandbox/qml.qrc
+++ b/ui/StatusQ/sandbox/qml.qrc
@@ -68,5 +68,6 @@
         <file>images/SuperRareCommunityBanner.png</file>
         <file>images/RARI.png</file>
         <file>images/SRToken.png</file>
+        <file>pages/StatusItemSelectorPage.qml</file>
     </qresource>
 </RCC>
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
index be379be63e..8d399f7918 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
@@ -1,32 +1,150 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14 as QC
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
 
+/*!
+   \qmltype StatusItemSelector
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It allows to add items and display them as a tag item with an image and text. It also allows to store and display logical `and` / `or` operators into the list. Inherits \l{https://doc.qt.io/qt-6/qml-qtquick-rectangle.html}{Item}.
+
+   The \c StatusItemSelector is populated with a data model. The data model is commonly a JavaScript array or a ListModel object with specific expected roles.
+
+   Example of how the component looks like:
+   \image status_item_selector.png
+
+   Example of how to use it:
+   \qml
+        StatusItemSelector {
+            icon: Style.svg("contact_verified")
+            title: qsTr("Who holds")
+            defaultItemText: qsTr("Example: 10 SNT")
+            andOperatorText: qsTr("and")
+            orOperatorText: qsTr("or")
+            popupItem: CustomPopup {
+                id: customPopup
+                onAddItem: {
+                    tokensSelector.addItem(itemText, itemImage, operator)
+                    customPopup.close()
+                }
+            }
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
 Rectangle {
     id: root
-
+    /*!
+       \qmlproperty string StatusItemSelector::icon
+       This property holds the icon name for the icon represented on top of the component as a title icon.
+    */
     property string icon
+    /*!
+       \qmlproperty int StatusItemSelector::iconSize
+       This property holds the icon size for the icon represented on top of the component as a title icon.
+    */
     property int iconSize: 18
+    /*!
+       \qmlproperty string StatusItemSelector::title
+       This property holds the titel shown on top of the component.
+    */
     property string title
+    /*!
+       \qmlproperty string StatusItemSelector::defaultItemText
+       This property holds the default item text shown when the list of items is empty.
+    */
     property string defaultItemText
+    /*!
+       \qmlproperty url StatusItemSelector::defaultItemImageSource
+       This property holds the default item icon shown when the list of items is empty.
+    */
+    property url defaultItemImageSource: ""
+    /*!
+       \qmlproperty QC.Popup StatusItemSelector::popupItem
+       This property holds a custom popup item to be opened near the `add` button in order to select new items.
+    */
+    property QC.Popup popupItem
+    /*!
+       \qmlproperty ListModel StatusItemSelector::itemsModel
+       This property holds the data that will be populated in the items selector.
 
-    signal addItem()
+       Here an example of the model roles expected:
+       \qml
+            itemsModel: ListModel {
+            ListElement {
+                text: "Socks"
+                imageSource: "qrc:imports/assets/png/tokens/SOCKS.png"
+                operator: Utils.Operator.None
+            }
+            ListElement {
+                text: "ZRX"
+                imageSource: "qrc:imports/assets/png/tokens/ZRX.png"
+                operator: Utils.Operator.Or
+            }
+        }
+       \endqml
+    */
+    property ListModel itemsModel: ListModel { }
+    /*!
+       \qmlproperty string StatusItemSelector::andOperatorText
+       This property holds the string text representation for an `AND` logical operator.
+    */
+    property string andOperatorText: qsTr("and")
+    /*!
+       \qmlproperty string StatusItemSelector::orOperatorText
+       This property holds the string text representation for an `OR` logical operator.
+    */
+    property string orOperatorText: qsTr("or")
+    /*
+        \qmlmethod StatusItemSelector::addItem()
+        It is used to add new items into the selector control. The expected arguments are:
+        string `text`, url `imageSource` and int `operator` (None = 0, And = 1 and Or = 2)
+    */
+    function addItem(text, imageSource, operator) {
+        itemsModel.insert(itemsModel.count, { "text": text, "imageSource": imageSource.toString(), "operator": operator })
+    }
+
+    QtObject {
+        id: d
+
+        function operatorTextFormat(operator) {
+            switch(operator)
+            {
+            case Utils.Operators.And:
+                return root.andOperatorText
+            case Utils.Operators.Or:
+                return root.orOperatorText
+            case Utils.Operators.None:
+                return ""
+            }
+        }
+    }
 
     color: Theme.palette.baseColor4
-    height: column.implicitHeight + column.anchors.topMargin + column.anchors.bottomMargin
+    implicitHeight: columnLayout.implicitHeight + columnLayout.anchors.topMargin + columnLayout.anchors.bottomMargin
+    implicitWidth: 560
     radius: 16
+    clip: true
+
     ColumnLayout {
-        id: column
+        id: columnLayout
         anchors.top: parent.top
         anchors.topMargin: 12
         anchors.bottomMargin: anchors.topMargin
         anchors.left: parent.left
         anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 16
         spacing: 12
+        clip: true
         RowLayout {
+            id: headerRow
             spacing: 8
             Image {
                 sourceSize.width: width || undefined
@@ -44,28 +162,65 @@ Rectangle {
                 color: Theme.palette.directColor1
                 font.pixelSize: 17
             }
-        }
-        // TODO: Next component iteration - model and selector
-        GridLayout {
-            rowSpacing: 6
-            columnSpacing: 12
+        }        
+        Flow {
+            id: flow
+            Layout.fillWidth: true
+            spacing: 6
+            StatusListItemTag {
+                visible: itemsModel.count === 0
+                title: root.defaultItemText
+                image.source: root.defaultItemImageSource
+                color: Theme.palette.baseColor2
+                closeButtonVisible: false
+                titleText.color: Theme.palette.baseColor1
+                titleText.font.pixelSize: 15
+            }
             Repeater {
-                model: 1
-                StatusListItemTag {
-                    title: root.defaultItemText
-                    color: Theme.palette.baseColor2
-                    closeButtonVisible: false
-                    titleText.color: Theme.palette.baseColor1
-                    titleText.font.pixelSize: 15
+                model: itemsModel
+                RowLayout {
+                    spacing: flow.spacing
+                    StatusBaseText {                        
+                        visible: model.operator !== Utils.Operators.None
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.operatorTextFormat(model.operator)
+                        color: Theme.palette.primaryColor1
+                        font.pixelSize: 17
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                // Switch operator
+                                if(model.operator === Utils.Operators.And)
+                                    model.operator = Utils.Operators.Or
+                                else
+                                    model.operator = Utils.Operators.And
+                            }
+                        }
+                    }
+                    StatusListItemTag {
+                        title: model.text
+                        image.source: model.imageSource
+                        color: Theme.palette.primaryColor3
+                        closeButtonVisible: false
+                        titleText.color: Theme.palette.primaryColor1
+                        titleText.font.pixelSize: 15
+                        //onClicked: // TODO: Open remove or edit dialog
+                    }
                 }
             }
             StatusRoundButton {
+                id: addItemButton
                 implicitHeight: 32
                 implicitWidth: implicitHeight
                 height: width
                 type: StatusRoundButton.Type.Secondary
                 icon.name: "add"
-                onClicked: root.addItem()
+                onClicked: {
+                    root.popupItem.x = addItemButton.x + addItemButton.width + 4 * flow.spacing
+                    root.popupItem.y = addItemButton.y + addItemButton.height
+                    root.popupItem.open()
+                }
             }
         }
     }
diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir
index e405e5e71b..06ccf65ab3 100644
--- a/ui/StatusQ/src/StatusQ/Components/qmldir
+++ b/ui/StatusQ/src/StatusQ/Components/qmldir
@@ -37,4 +37,4 @@ StatusImageCropPanel 0.1 StatusImageCropPanel.qml
 StatusColorSpace 0.0 StatusColorSpace.qml
 StatusCommunityCard 0.1 StatusCommunityCard.qml
 StatusCommunityTags 0.1 StatusCommunityTags.qml
-StatusItemSelector 0.1 StatusItemSelector.qml
\ No newline at end of file
+StatusItemSelector 0.1 StatusItemSelector.qml
diff --git a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
index 46afc422c8..2b8b6b0a9a 100644
--- a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
@@ -3,6 +3,14 @@ pragma Singleton
 import QtQuick 2.13
 
 QtObject {
+
+    // Logical operators
+    enum Operators {
+        None,
+        And,
+        Or
+    }
+
     function getAbsolutePosition(node) {
         var returnPos = {};
         returnPos.x = 0;