QmlDesigner: Add row id to the collection table

Task-number: QDS-10621
Change-Id: Ib41f7b9a8ce8d19c24b7580887f7c44a7f87fbdc
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/collectionEditorQmlSource/SingleCollectionView.qml

@@ -3,6 +3,7 @@
 
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import HelperWidgets 2.0 as HelperWidgets
 import StudioTheme 1.0 as StudioTheme
 import StudioControls 1.0 as StudioControls
@@ -12,19 +13,19 @@ Rectangle {
 
     required property var model
 
-    property alias leftPadding: topRow.leftPadding
-    property real rightPadding: topRow.rightPadding
-
     color: StudioTheme.Values.themeBackgroundColorAlternate
 
-    Column {
+    ColumnLayout {
         id: topRow
 
         spacing: 0
-        width: parent.width
-        leftPadding: 20
-        rightPadding: 20
-        topPadding: 5
+        anchors {
+            fill: parent
+            topMargin: 10
+            leftMargin: 15
+            rightMargin: 15
+            bottomMargin: 10
+        }
 
         Text {
             id: collectionNameText
@@ -52,10 +53,8 @@ Rectangle {
         }
 
         CollectionDetailsToolbar {
-            property real availableWidth: parent.width - parent.leftPadding - parent.rightPadding
-
             model: root.model
-            width: Math.max(availableWidth, implicitWidth)
+            Layout.fillWidth: true
         }
 
         Item { // spacer
@@ -63,186 +62,236 @@ Rectangle {
             height: 5
         }
 
-        HorizontalHeaderView {
-            id: headerView
+        GridLayout {
+            columns: 2
+            rowSpacing: 1
+            columnSpacing: 1
 
-            property real topPadding: 5
-            property real bottomPadding: 5
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
-            height: headerMetrics.height + topPadding + bottomPadding
-
-            syncView: tableView
-            clip: true
-
-            delegate: Rectangle {
-                id: headerItem
-                implicitWidth: 100
-                implicitHeight: headerText.height
-                border.width: 2
-                border.color: StudioTheme.Values.themeControlOutline
+            Rectangle {
                 clip: true
+                visible: root.model.isEmpty === false
+                color: StudioTheme.Values.themeControlBackground
+                border.color: StudioTheme.Values.themeControlOutline
+                border.width: 2
+
+                Layout.preferredWidth: rowIdView.width
+                Layout.preferredHeight: headerView.height
 
                 Text {
-                    id: headerText
-
-                    topPadding: headerView.topPadding
-                    bottomPadding: headerView.bottomPadding
-                    leftPadding: 5
-                    rightPadding: 5
-                    text: display
-                    font: headerMetrics.font
+                    anchors.fill: parent
+                    font: headerTextMetrics.font
+                    text: "#"
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-                    anchors.centerIn: parent
-                    elide: Text.ElideRight
+                    color: StudioTheme.Values.themeTextColor
                 }
-
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.LeftButton | Qt.RightButton
-                    onClicked: (mouse) => {
-                        root.model.selectColumn(index)
-
-                        if (mouse.button === Qt.RightButton)
-                            headerMenu.popIndex(index)
-
-                        mouse.accepted = true
-                    }
-                }
-
-                states: [
-                    State {
-                        name: "default"
-                        when: index !== root.model.selectedColumn
-                        PropertyChanges {
-                            target: headerItem
-                            color: StudioTheme.Values.themeControlBackground
-                        }
-
-                        PropertyChanges {
-                            target: headerText
-                            color: StudioTheme.Values.themeIdleGreen
-                        }
-                    },
-                    State {
-                        name: "selected"
-                        when: index === root.model.selectedColumn
-
-                        PropertyChanges {
-                            target: headerItem
-                            color: StudioTheme.Values.themeControlBackgroundInteraction
-                        }
-
-                        PropertyChanges {
-                            target: headerText
-                            color: StudioTheme.Values.themeRunningGreen
-                        }
-                    }
-                ]
             }
 
-            TextMetrics {
-                id: headerMetrics
+            HorizontalHeaderView {
+                id: headerView
 
-                font.pixelSize: StudioTheme.Values.baseFontSize
-                text: "Xq"
+                property real topPadding: 5
+                property real bottomPadding: 5
+
+                Layout.preferredHeight: headerTextMetrics.height + topPadding + bottomPadding
+                Layout.fillWidth: true
+                syncView: tableView
+                clip: true
+
+                delegate: Rectangle {
+                    id: headerItem
+                    implicitWidth: 100
+                    implicitHeight: headerText.height
+                    border.width: 2
+                    border.color: StudioTheme.Values.themeControlOutline
+                    clip: true
+
+                    Text {
+                        id: headerText
+
+                        topPadding: headerView.topPadding
+                        bottomPadding: headerView.bottomPadding
+                        leftPadding: 5
+                        rightPadding: 5
+                        text: display
+                        font: headerTextMetrics.font
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        anchors.centerIn: parent
+                        elide: Text.ElideRight
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        acceptedButtons: Qt.LeftButton | Qt.RightButton
+                        onClicked: (mouse) => {
+                            root.model.selectColumn(index)
+
+                            if (mouse.button === Qt.RightButton)
+                                headerMenu.popIndex(index)
+
+                            mouse.accepted = true
+                        }
+                    }
+
+                    states: [
+                        State {
+                            name: "default"
+                            when: index !== root.model.selectedColumn
+                            PropertyChanges {
+                                target: headerItem
+                                color: StudioTheme.Values.themeControlBackground
+                            }
+
+                            PropertyChanges {
+                                target: headerText
+                                color: StudioTheme.Values.themeIdleGreen
+                            }
+                        },
+                        State {
+                            name: "selected"
+                            when: index === root.model.selectedColumn
+
+                            PropertyChanges {
+                                target: headerItem
+                                color: StudioTheme.Values.themeControlBackgroundInteraction
+                            }
+
+                            PropertyChanges {
+                                target: headerText
+                                color: StudioTheme.Values.themeRunningGreen
+                            }
+                        }
+                    ]
+                }
+
+                StudioControls.Menu {
+                    id: headerMenu
+
+                    property int clickedHeader: -1
+
+                    function popIndex(clickedIndex)
+                    {
+                        headerMenu.clickedHeader = clickedIndex
+                        headerMenu.popup()
+                    }
+
+                    onClosed: {
+                        headerMenu.clickedHeader = -1
+                    }
+
+                    StudioControls.MenuItem {
+                        text: qsTr("Edit")
+                        onTriggered: editProperyDialog.editProperty(headerMenu.clickedHeader)
+                    }
+
+                    StudioControls.MenuItem {
+                        text: qsTr("Delete")
+                        onTriggered: deleteColumnDialog.popUp(headerMenu.clickedHeader)
+                    }
+                }
             }
 
-            StudioControls.Menu {
-                id: headerMenu
+            VerticalHeaderView {
+                id: rowIdView
 
-                property int clickedHeader: -1
+                syncView: tableView
+                clip: true
 
-                function popIndex(clickedIndex)
-                {
-                    headerMenu.clickedHeader = clickedIndex
-                    headerMenu.popup()
+                Layout.fillHeight: true
+
+                delegate: Rectangle {
+                    color: StudioTheme.Values.themeControlBackground
+                    border.color: StudioTheme.Values.themeControlOutline
+                    border.width: 2
+                    implicitWidth: idText.width
+
+                    Text {
+                        id: idText
+                        text: display
+                        leftPadding: 5
+                        rightPadding: 5
+                        topPadding: 5
+                        color: StudioTheme.Values.themeTextColor
+                        font: headerTextMetrics.font
+                    }
                 }
+            }
 
-                onClosed: {
-                    headerMenu.clickedHeader = -1
-                }
+            TableView {
+                id: tableView
 
-                StudioControls.MenuItem {
-                    text: qsTr("Edit")
-                    onTriggered: editProperyDialog.editProperty(headerMenu.clickedHeader)
-                }
+                model: root.model
+                clip: true
 
-                StudioControls.MenuItem {
-                    text: qsTr("Delete")
-                    onTriggered: deleteColumnDialog.popUp(headerMenu.clickedHeader)
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                delegate: Rectangle {
+                    id: itemCell
+                    implicitWidth: 100
+                    implicitHeight: itemText.height
+                    border.width: 1
+                    border.color: StudioTheme.Values.themeControlOutline
+
+                    Text {
+                        id: itemText
+
+                        text: display ? display : ""
+
+                        width: parent.width
+                        leftPadding: 5
+                        topPadding: 3
+                        bottomPadding: 3
+                        font.pixelSize: StudioTheme.Values.baseFontSize
+                        horizontalAlignment: Text.AlignLeft
+                        verticalAlignment: Text.AlignVCenter
+                        elide: Text.ElideRight
+                    }
+
+                    states: [
+                        State {
+                            name: "default"
+                            when: !itemSelected
+
+                            PropertyChanges {
+                                target: itemCell
+                                color: StudioTheme.Values.themeControlBackground
+                            }
+
+                            PropertyChanges {
+                                target: itemText
+                                color: StudioTheme.Values.themeTextColor
+                            }
+                        },
+                        State {
+                            name: "selected"
+                            when: itemSelected
+
+                            PropertyChanges {
+                                target: itemCell
+                                color: StudioTheme.Values.themeControlBackgroundInteraction
+                            }
+
+                            PropertyChanges {
+                                target: itemText
+                                color: StudioTheme.Values.themeInteraction
+                            }
+                        }
+                    ]
                 }
             }
         }
     }
 
-    TableView {
-        id: tableView
+    TextMetrics {
+        id: headerTextMetrics
 
-        anchors {
-            top: topRow.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            leftMargin: root.leftPadding
-            rightMargin: root.rightPadding
-        }
-
-        model: root.model
-
-        delegate: Rectangle {
-            id: itemCell
-            implicitWidth: 100
-            implicitHeight: itemText.height
-            border.width: 1
-            border.color: StudioTheme.Values.themeControlOutline
-
-            Text {
-                id: itemText
-
-                text: display ? display : ""
-
-                width: parent.width
-                leftPadding: 5
-                topPadding: 3
-                bottomPadding: 3
-                font.pixelSize: StudioTheme.Values.baseFontSize
-                horizontalAlignment: Text.AlignLeft
-                verticalAlignment: Text.AlignVCenter
-                elide: Text.ElideRight
-            }
-
-            states: [
-                State {
-                    name: "default"
-                    when: !itemSelected
-
-                    PropertyChanges {
-                        target: itemCell
-                        color: StudioTheme.Values.themeControlBackground
-                    }
-
-                    PropertyChanges {
-                        target: itemText
-                        color: StudioTheme.Values.themeTextColor
-                    }
-                },
-                State {
-                    name: "selected"
-                    when: itemSelected
-
-                    PropertyChanges {
-                        target: itemCell
-                        color: StudioTheme.Values.themeControlBackgroundInteraction
-                    }
-
-                    PropertyChanges {
-                        target: itemText
-                        color: StudioTheme.Values.themeInteraction
-                    }
-                }
-            ]
-        }
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        text: "Xq"
     }
 
     EditPropertyDialog {

src/plugins/qmldesigner/components/collectioneditor/singlecollectionmodel.cpp

@@ -36,7 +36,9 @@ namespace QmlDesigner {
 
 SingleCollectionModel::SingleCollectionModel(QObject *parent)
     : QAbstractTableModel(parent)
-{}
+{
+    connect(this, &SingleCollectionModel::modelReset, this, &SingleCollectionModel::updateEmpty);
+}
 
 QHash<int, QByteArray> SingleCollectionModel::roleNames() const
 {
@@ -117,6 +119,9 @@ QVariant SingleCollectionModel::headerData(int section,
     if (orientation == Qt::Horizontal)
         return m_currentCollection.headerAt(section);
 
+    if (orientation == Qt::Vertical)
+        return section + 1;
+
     return {};
 }
 
@@ -203,6 +208,15 @@ void SingleCollectionModel::loadCollection(const ModelNode &sourceNode, const QS
     }
 }
 
+void SingleCollectionModel::updateEmpty()
+{
+    bool isEmptyNow = rowCount() == 0;
+    if (m_isEmpty != isEmptyNow) {
+        m_isEmpty = isEmptyNow;
+        emit isEmptyChanged(m_isEmpty);
+    }
+}
+
 void SingleCollectionModel::switchToCollection(const CollectionReference &collection)
 {
     if (m_currentCollection.reference() == collection)

src/plugins/qmldesigner/components/collectioneditor/singlecollectionmodel.h

@@ -18,6 +18,7 @@ class SingleCollectionModel : public QAbstractTableModel
 
     Q_PROPERTY(QString collectionName MEMBER m_collectionName NOTIFY collectionNameChanged)
     Q_PROPERTY(int selectedColumn READ selectedColumn WRITE selectColumn NOTIFY selectedColumnChanged)
+    Q_PROPERTY(bool isEmpty MEMBER m_isEmpty NOTIFY isEmptyChanged)
 
 public:
     enum DataRoles { SelectedRole = Qt::UserRole + 1 };
@@ -51,6 +52,10 @@ public:
 signals:
     void collectionNameChanged(const QString &collectionName);
     void selectedColumnChanged(int);
+    void isEmptyChanged(bool);
+
+private slots:
+    void updateEmpty();
 
 private:
     void switchToCollection(const CollectionReference &collection);
@@ -63,6 +68,7 @@ private:
 
     QHash<CollectionReference, CollectionDetails> m_openedCollections;
     CollectionDetails m_currentCollection;
+    bool m_isEmpty = true;
     int m_selectedColumn = -1;
 
     QString m_collectionName;