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
+        anchors {
-        leftPadding: 20
+            fill: parent
-        rightPadding: 20
+            topMargin: 10
-        topPadding: 5
+            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,14 +62,42 @@ Rectangle {
             height: 5
         }
 
+        GridLayout {
+            columns: 2
+            rowSpacing: 1
+            columnSpacing: 1
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            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 {
+                    anchors.fill: parent
+                    font: headerTextMetrics.font
+                    text: "#"
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    color: StudioTheme.Values.themeTextColor
+                }
+            }
+
             HorizontalHeaderView {
                 id: headerView
 
                 property real topPadding: 5
                 property real bottomPadding: 5
 
-            height: headerMetrics.height + topPadding + bottomPadding
+                Layout.preferredHeight: headerTextMetrics.height + topPadding + bottomPadding
-
+                Layout.fillWidth: true
                 syncView: tableView
                 clip: true
 
@@ -90,7 +117,7 @@ Rectangle {
                         leftPadding: 5
                         rightPadding: 5
                         text: display
-                    font: headerMetrics.font
+                        font: headerTextMetrics.font
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
                         anchors.centerIn: parent
@@ -141,13 +168,6 @@ Rectangle {
                     ]
                 }
 
-            TextMetrics {
-                id: headerMetrics
-
-                font.pixelSize: StudioTheme.Values.baseFontSize
-                text: "Xq"
-            }
-
                 StudioControls.Menu {
                     id: headerMenu
 
@@ -174,21 +194,41 @@ Rectangle {
                     }
                 }
             }
+
+            VerticalHeaderView {
+                id: rowIdView
+
+                syncView: tableView
+                clip: true
+
+                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
+                    }
+                }
             }
 
             TableView {
                 id: tableView
 
-        anchors {
-            top: topRow.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            leftMargin: root.leftPadding
-            rightMargin: root.rightPadding
-        }
-
                 model: root.model
+                clip: true
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
 
                 delegate: Rectangle {
                     id: itemCell
@@ -244,6 +284,15 @@ Rectangle {
                     ]
                 }
             }
+        }
+    }
+
+    TextMetrics {
+        id: headerTextMetrics
+
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        text: "Xq"
+    }
 
     EditPropertyDialog {
         id: editProperyDialog

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;