Localstorage example: Follow coding conventions better

- Use let/const instead of var, when possible.
- Removed all warnings generated by qmllint.
- Better null checks with null coalescing operator

Pick-to: 6.5 6.5.0
Change-Id: I4b1b3826ee01cb591cf4a92fef68957964554641
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

4 files changed, 58 insertions, 52 deletions

diff --git a/examples/quick/localstorage/Database.js b/examples/quick/localstorage/Database.js
index 18bf4a25cd..dd66ce8246 100644
--- a/examples/quick/localstorage/Database.js
+++ b/examples/quick/localstorage/Database.js
@@ -3,7 +3,7 @@
 
 function dbInit()
 {
-    var db = LocalStorage.openDatabaseSync("Activity_Tracker_DB", "", "Track exercise", 1000000)
+    let db = LocalStorage.openDatabaseSync("Activity_Tracker_DB", "", "Track exercise", 1000000)
     try {
         db.transaction(function (tx) {
             tx.executeSql('CREATE TABLE IF NOT EXISTS trip_log (date text,trip_desc text,distance numeric)')
@@ -26,12 +26,12 @@ function dbGetHandle()
 
 function dbInsert(Pdate, Pdesc, Pdistance)
 {
-    var db = dbGetHandle()
-    var rowid = 0;
+    let db = dbGetHandle()
+    let rowid = 0;
     db.transaction(function (tx) {
         tx.executeSql('INSERT INTO trip_log VALUES(?, ?, ?)',
                       [Pdate, Pdesc, Pdistance])
-        var result = tx.executeSql('SELECT last_insert_rowid()')
+        let result = tx.executeSql('SELECT last_insert_rowid()')
         rowid = result.insertId
     })
     return rowid;
@@ -39,11 +39,11 @@ function dbInsert(Pdate, Pdesc, Pdistance)
 
 function dbReadAll()
 {
-    var db = dbGetHandle()
+    let db = dbGetHandle()
     db.transaction(function (tx) {
-        var results = tx.executeSql(
-                    'SELECT rowid,date,trip_desc,distance FROM trip_log order by rowid desc')
-        for (var i = 0; i < results.rows.length; i++) {
+        let results = tx.executeSql(
+                'SELECT rowid,date,trip_desc,distance FROM trip_log order by rowid desc')
+        for (let i = 0; i < results.rows.length; i++) {
             listModel.append({
                                  id: results.rows.item(i).rowid,
                                  checked: " ",
@@ -57,7 +57,7 @@ function dbReadAll()
 
 function dbUpdate(Pdate, Pdesc, Pdistance, Prowid)
 {
-    var db = dbGetHandle()
+    let db = dbGetHandle()
     db.transaction(function (tx) {
         tx.executeSql(
                     'update trip_log set date=?, trip_desc=?, distance=? where rowid = ?', [Pdate, Pdesc, Pdistance, Prowid])
@@ -66,7 +66,7 @@ function dbUpdate(Pdate, Pdesc, Pdistance, Prowid)
 
 function dbDeleteRow(Prowid)
 {
-    var db = dbGetHandle()
+    let db = dbGetHandle()
     db.transaction(function (tx) {
         tx.executeSql('delete from trip_log where rowid = ?', [Prowid])
     })
diff --git a/examples/quick/localstorage/Header.qml b/examples/quick/localstorage/Header.qml
index 2274747564..047e49a839 100644
--- a/examples/quick/localstorage/Header.qml
+++ b/examples/quick/localstorage/Header.qml
@@ -8,15 +8,15 @@ import "Database.js" as JS
 
 Item {
     id: root
-    width: Screen.width / 2
-    height: Screen.height / 7
-
     required property ListView listView
     signal statusMessage(string msg)
+
+    width: Screen.width / 2
+    height: Screen.height / 7
     enabled: false
 
     function insertrec() {
-        var rowid = parseInt(JS.dbInsert(dateInput.text, descInput.text, distInput.text), 10)
+        const rowid = parseInt(JS.dbInsert(dateInput.text, descInput.text, distInput.text), 10)
         if (rowid) {
             listView.model.setProperty(listView.currentIndex, "id", rowid)
             listView.forceLayout()
@@ -101,11 +101,10 @@ Item {
                         activeFocusOnTab: true
 
                         ToolTip {
-                            parent: dateInput
                             x: parent.width + 3
                             y: (parent.height - height) / 2
                             text: qsTr("Date format = 'YYYY-MM-DD'")
-                            visible: parent.enabled && parent.hovered
+                            visible: dateInput.enabled && dateInput.hovered
                             delay: 1000
                         }
 
@@ -113,13 +112,13 @@ Item {
                             regularExpression: /\d{4}[,.:/-]\d\d?[,.:/-]\d\d?/
                         }
 
-                        onFocusChanged: ()=> {
+                        onFocusChanged: function() {
                             if (!dateInput.focus && !acceptableInput && root.enabled)
                                 root.statusMessage(qsTr("Please fill in the date"));
                         }
 
-                        onEditingFinished: ()=> {
-                            let regex = /(\d+)[,.:/-](\d+)[,.:/-](\d+)/
+                        onEditingFinished: function() {
+                            const regex = /(\d+)[,.:/-](\d+)[,.:/-](\d+)/
                             if (dateInput.text.match(regex))
                                 dateInput.text = dateInput.text.replace(regex, '$1-$2-$3')
                         }
@@ -127,29 +126,29 @@ Item {
 
                     TextField {
                         id: descInput
+                        property string oldString
                         font.pixelSize: 22
                         activeFocusOnPress: true
                         activeFocusOnTab: true
-                        property string oldString
-                        onFocusChanged: ()=> { if (focus) oldString = descInput.text; }
-                        onEditingFinished: ()=> {
-                            if (descInput.text.length < 8  && descInput.text != descInput.oldString && root.enabled)
+                        onFocusChanged: if (focus) oldString = descInput.text
+                        onEditingFinished: function() {
+                            if (descInput.text.length < 8 && descInput.text !== descInput.oldString && root.enabled)
                                 root.statusMessage(qsTr("Enter a description of minimum 8 characters"))
                         }
                     }
 
                     TextField {
                         id: distInput
+                        property string oldString
                         font.pixelSize: 22
                         activeFocusOnPress: true
                         activeFocusOnTab: true
                         validator: RegularExpressionValidator {
                             regularExpression: /\d{1,3}/
                         }
-                        property string oldString
-                        onFocusChanged: ()=> { if (focus) oldString = distInput.text; }
-                        onEditingFinished: ()=> {
-                            if (distInput.text == "" && distInput.text != distInput.oldString && root.enabled)
+                        onFocusChanged: if (focus) oldString = distInput.text
+                        onEditingFinished: function() {
+                            if (distInput.text === "" && distInput.text !== distInput.oldString && root.enabled)
                                 root.statusMessage(qsTr("Please fill in the distance"))
                         }
                     }
diff --git a/examples/quick/localstorage/MyDelegate.qml b/examples/quick/localstorage/MyDelegate.qml
index 30ccd77749..94f78b5ed6 100644
--- a/examples/quick/localstorage/MyDelegate.qml
+++ b/examples/quick/localstorage/MyDelegate.qml
@@ -4,15 +4,10 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import QtQuick.LocalStorage
-import "Database.js" as JS
 
 Item {
     id: delegate
 
-    width: ListView.view.width
-    implicitHeight: rDate.implicitHeight * 1.5
-
     required property int index
     required property int distance
     required property string trip_desc
@@ -20,13 +15,18 @@ Item {
 
     signal clicked()
 
+    width: ListView.view.width
+    implicitHeight: rDate.implicitHeight * 1.5
+
     Rectangle {
         id: baseRec
         anchors.fill: parent
         opacity: 0.8
         color: delegate.index % 2 ? "lightgrey" : "grey"
-        border.width: 2
-        border.color: Qt.lighter(color)
+        border {
+            width: 2
+            color: Qt.lighter(color)
+        }
         radius: 5
 
         MouseArea {
diff --git a/examples/quick/localstorage/localstorage.qml b/examples/quick/localstorage/localstorage.qml
index 1f8ef79db7..77bf63adf0 100644
--- a/examples/quick/localstorage/localstorage.qml
+++ b/examples/quick/localstorage/localstorage.qml
@@ -7,16 +7,19 @@ import QtQuick.Layouts
 import QtQuick.LocalStorage
 import "Database.js" as JS
 
+pragma ComponentBehavior: Bound
+
 Window {
     id: window
+
+    property bool creatingNewEntry: false
+    property bool editingEntry: false
+
     visible: true
     width: Screen.width / 2
     height: Screen.height / 1.8
     color: "#161616"
 
-    property bool creatingNewEntry: false
-    property bool editingEntry: false
-
     Rectangle {
         anchors.fill: parent
 
@@ -42,10 +45,10 @@ Window {
                 }
                 Button {
                     id: saveButton
-                    enabled: (window.creatingNewEntry || window.editingEntry) && listView.currentIndex != -1
+                    enabled: (window.creatingNewEntry || window.editingEntry) && listView.currentIndex !== -1
                     text: qsTr("Save")
                     onClicked: {
-                        var insertedRow = false;
+                        let insertedRow = false;
                         if (listView.model.get(listView.currentIndex).id < 1) {
                             //insert mode
                             if (input.insertrec()) {
@@ -76,7 +79,7 @@ Window {
                 Button {
                     id: editButton
                     text: qsTr("Edit")
-                    enabled: !window.creatingNewEntry && !window.editingEntry && listView.currentIndex != -1
+                    enabled: !window.creatingNewEntry && !window.editingEntry && listView.currentIndex !== -1
                     onClicked: {
                         input.editrec(listView.model.get(listView.currentIndex).date,
                                       listView.model.get(listView.currentIndex).trip_desc,
@@ -89,11 +92,11 @@ Window {
                 Button {
                     id: deleteButton
                     text: qsTr("Delete")
-                    enabled: !window.creatingNewEntry && listView.currentIndex != -1
+                    enabled: !window.creatingNewEntry && listView.currentIndex !== -1
                     onClicked: {
                         JS.dbDeleteRow(listView.model.get(listView.currentIndex).id)
                         listView.model.remove(listView.currentIndex, 1)
-                        if (listView.count == 0) {
+                        if (listView.count === 0) {
                             // ListView doesn't automatically set its currentIndex to -1
                             // when the count becomes 0.
                             listView.currentIndex = -1
@@ -103,7 +106,7 @@ Window {
                 Button {
                     id: cancelButton
                     text: qsTr("Cancel")
-                    enabled: (window.creatingNewEntry || window.editingEntry) && listView.currentIndex != -1
+                    enabled: (window.creatingNewEntry || window.editingEntry) && listView.currentIndex !== -1
                     onClicked: {
                         if (listView.model.get(listView.currentIndex).id === 0) {
                             // This entry had an id of 0, which means it was being created and hadn't
@@ -123,7 +126,7 @@ Window {
             }
             Item {
                 Layout.fillWidth: true
-                height: 5
+                Layout.preferredHeight: 5
             }
             Label {
                 Layout.alignment: Qt.AlignCenter
@@ -133,8 +136,8 @@ Window {
             Component {
                 id: highlightBar
                 Rectangle {
-                    width: listView.currentItem !== null ? listView.currentItem.width : implicitWidth
-                    height: listView.currentItem !== null ? listView.currentItem.height : implicitHeight
+                    width: listView.currentItem?.width ?? implicitWidth
+                    height: listView.currentItem?.height ?? implicitHeight
                     color: "lightgreen"
                 }
             }
@@ -157,19 +160,23 @@ Window {
 
                 header: Component {
                     RowLayout {
-                        property var headerTitles: [qsTr("Date"), qsTr("Description"), qsTr("Distance")]
                         width: ListView.view.width
                         Repeater {
-                            model: headerTitles
+                            model: [qsTr("Date"), qsTr("Description"), qsTr("Distance")]
                             delegate: Label {
                                 id: headerTitleDelegate
+
+                                required property string modelData
+
                                 Layout.fillWidth: true
                                 Layout.fillHeight: true
                                 Layout.preferredWidth: 1
                                 text: modelData
-                                font.pointSize: 15
-                                font.bold: true
-                                font.underline: true
+                                font {
+                                    pointSize: 15
+                                    bold: true
+                                    underline: true
+                                }
                                 padding: 12
                                 horizontalAlignment: Label.AlignHCenter
                             }
@@ -183,7 +190,7 @@ Window {
                 font.bold: true
                 font.pointSize: 20
                 opacity: 0.0
-                visible: opacity !== 0 // properly cull item if effectively invisible
+                visible: opacity > 0 // properly cull item if effectively invisible
                 Layout.alignment: Layout.Center
 
                 function displayWarning(text) {