Implement Quick Filters

Gui/AddNewObject.qml

@@ -16,7 +16,7 @@ GridLayout
 
     Label
     {
-        text: qsTr("Straße")
+        text: qsTr("Straße*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -27,13 +27,11 @@ GridLayout
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignVCenter
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
 
     Label
     {
-        text: qsTr("Nr.")
+        text: qsTr("Nr.*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -44,8 +42,6 @@ GridLayout
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignVCenter
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
 
     // New grid row
@@ -197,7 +193,7 @@ GridLayout
 
     Label
     {
-        text: qsTr("Reinigungsmittel wo?")
+        text: qsTr("Reinigungsmittel wo?*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -206,8 +202,6 @@ GridLayout
         property string name: "cleaningproducts"
         id: cleaningproducts
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         onTextChanged: checkFields()
     }
     Item

Gui/ApplicantPersonalData.qml

@@ -37,7 +37,7 @@ GridLayout
     }
     Label
     {
-        text: qsTr("Vorname")
+        text: qsTr("Vorname*")
         Layout.alignment: Qt.AlignRight
     }
     TextField
@@ -45,14 +45,12 @@ GridLayout
         property string name: "firstname"
         id: firstname
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         onTextChanged: checkFields()
         Layout.columnSpan: 3
     }
     Label
     {
-        text: qsTr("Nachname")
+        text: qsTr("Nachname*")
         Layout.alignment: Qt.AlignRight
     }
     TextField
@@ -60,8 +58,6 @@ GridLayout
         property string name: "lastname"
         id: lastname
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         onTextChanged: checkFields()
         Layout.columnSpan: 3
     }
@@ -164,7 +160,7 @@ GridLayout
     }
     Label
     {
-        text: qsTr("Geburtsdatum")
+        text: qsTr("Geburtsdatum*")
         Layout.alignment: Qt.AlignRight
         visible: radio.children[1].checked
     }
@@ -173,8 +169,6 @@ GridLayout
         property string name: "birthday"
         id: birthday
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         onTextChanged: checkFields()
         Layout.columnSpan: 3
         visible: radio.children[1].checked
@@ -195,7 +189,7 @@ GridLayout
 
     Label
     {
-        text: qsTr("Geburtsort")
+        text: qsTr("Geburtsort*")
         Layout.alignment: Qt.AlignRight
         visible: radio.children[1].checked
     }
@@ -204,8 +198,6 @@ GridLayout
         property string name: "placeofbirth"
         id: placeofbirth
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         onTextChanged: checkFields()
         Layout.columnSpan: 3
         visible: radio.children[1].checked

Gui/CustomerView.qml

@@ -16,7 +16,7 @@ GridLayout
     Label
     {
         id: lblFirmenName
-        text: qsTr("Firmenname")
+        text: qsTr("Firmenname*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
 
     }
@@ -28,34 +28,26 @@ GridLayout
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignVCenter
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         Layout.columnSpan: 3
-
-
     }
 
     Label
     {
-        text: qsTr("Straße")
+        text: qsTr("Straße*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
-
-
     TextField
     {
         property string name: "street"
         id: streetid
         Layout.fillWidth: true
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
 
     Label
     {
-        text: qsTr("Nr.")
+        text: qsTr("Nr.*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -65,8 +57,6 @@ GridLayout
         id: housenoid
         Layout.fillWidth: true
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
         validator: RegularExpressionValidator
         {
             regularExpression: /([0-9a-zA-Z\-]{1,6})/

Gui/CustomersTable.qml

@@ -3,78 +3,69 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import Qt.labs.qmlmodels
 
-Item {
+ColumnLayout {
     function viewCriterion(criterion) {
         business_model.viewCriterion(criterion.text);
     }
 
+    anchors.fill: parent
+
     Component.onCompleted: customersStack.pop()
 
-    SearchBar {
+    RowLayout {
-        id: searchBar
+        Layout.fillWidth: true
+        Layout.horizontalStretchFactor: 1
+        spacing: Dimensions.l
 
-        anchors.margins: 9
+        SearchBar {
-    }
+        }
 
-    Button {
+        QuickFilter {
-        id: addCustomer
+            onSelectedChanged: (name) => {
+                business_model.viewCriterion(name)
+            }
 
-        anchors.right: parent.right
+            model: ListModel {
-        icon.source: "qrc:/images/PlusCircle.svg"
+                ListElement {
-        text: qsTr("Kunde hinzufügen")
+                    name: "Alle"
+                    text: qsTr("Alle")
+                    selected: true
+                }
+                ListElement {
+                    name: "showProvider"
+                    text: qsTr("Interessent")
+                    selected: false
+                }
+                ListElement {
+                    name: "showClientele"
+                    text: qsTr("Kunde")
+                    selected: false
+                }
+                ListElement {
+                    name: "showProvider"
+                    text: qsTr("Lieferant")
+                    selected: false
+                }
+                ListElement {
+                    name: "showFinished"
+                    text: qsTr("Erledigt")
+                    selected: false
+                }
+            }
+        }
+        Button {
+            id: addCustomer
 
-        onClicked: appLoader.source = "AddCustomer.qml"
+            Layout.alignment: Qt.AlignRight
+            icon.source: "qrc:/images/PlusCircle.svg"
+            text: qsTr("Kunde Hinzufügen")
+
+            onClicked: appLoader.source = "AddCustomer.qml"
+        }
     }
     ColumnLayout {
-        id: tableColumn
-
         clip: true
 
-        anchors {
-            bottom: parent.bottom
-            left: parent.left
-            right: parent.right
-            top: searchBar.bottom
-        }
-        RowLayout {
-            id: sortView
-
-            RadioButton {
-                id: showAll
-
-                checked: true
-                text: qsTr("Alle")
-
-                onClicked: viewCriterion(showAll)
-            }
-            RadioButton {
-                id: showInterested
-
-                text: qsTr("Interessent")
-
-                onClicked: viewCriterion(showInterested)
-            }
-            RadioButton {
-                id: showClientele
-
-                text: qsTr("Kunden")
-                onClicked: viewCriterion(showClientele)
-            }
-            RadioButton {
-                id: showProvider
-
-                text: qsTr("Lieferant")
-
-                onClicked: viewCriterion(showProvider)
-            }
-            RadioButton {
-                id: showFinished
-
-                text: qsTr("Erledigt")
-
-                onClicked: viewCriterion(showFinished)
-            }
-        }
         HorizontalHeaderView {
             id: horizontalHeader
 
@@ -107,7 +98,6 @@ Item {
             property real newWidth: 0
 
             Layout.fillHeight: true
-            //height: tableColumn.height - (sortView.height + horizontalHeader.height)
             Layout.fillWidth: true
             alternatingRows: true
             columnSpacing: 1

Gui/ObjectAddOnContactPerson.qml

@@ -35,71 +35,45 @@ GridLayout
     }
     Label
     {
-        text: qsTr("Vorname")
+        text: qsTr("Vorname*")
         Layout.alignment: Qt.AlignRight
     }
     TextField
     {
         id: firstname
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     //     onTextChanged: checkContactFields()
     }
     Label
     {
-        text: qsTr("Nachname")
+        text: qsTr("Nachname*")
         Layout.alignment: Qt.AlignRight
     }
     TextField
     {
         id: lastname
         Layout.fillWidth: true
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
     Label
     {
-        text: qsTr("Telefonnummer")
+        text: mobile.text ? qsTr("Telefonnummer") : qsTr("Telefonnummer*")
         Layout.alignment: Qt.AlignRight
     }
     TextField
     {
         id: phonenumber
         Layout.fillWidth: true
-        placeholderText: mobile.text ? "" : "Pflichtfeld"
-        placeholderTextColor: "red"
-
-
-
     }
     Label
     {
-        text: qsTr("Mobil")
+        text: phonenumber.text ? qsTr("Mobil") : qsTr("Mobil*")
         Layout.alignment: Qt.AlignRight
     }
     TextField
     {
         id: mobile
         Layout.fillWidth: true
-        placeholderText: phonenumber.text ? "" : "Pflichtfeld"
-        placeholderTextColor: "red"
-
-
-
     }
-    // Label
-    // {
-    //     text: qsTr("Position")
-    //     Layout.alignment: Qt.AlignRight
-    // }
-    // TextField
-    // {
-    //     id: posizion
-    //     Layout.fillWidth: true
-    //     placeholderText: "Pflichtfeld"
-    //     placeholderTextColor: "red"
-    // }
 
     RowLayout
     {

Gui/ObjectView.qml

@@ -27,7 +27,7 @@ GridLayout
 
     Label
     {
-        text: qsTr("Straße")
+        text: qsTr("Straße*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -38,12 +38,10 @@ GridLayout
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignVCenter
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
     Label
     {
-        text: qsTr("Nr.")
+        text: qsTr("Nr.*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -54,13 +52,11 @@ GridLayout
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignVCenter
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
 
     Label
     {
-        text: qsTr("PLZ")
+        text: qsTr("PLZ*")
         Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
     }
 
@@ -70,8 +66,6 @@ GridLayout
         id: postcode
         Layout.fillWidth: true
         onTextChanged: checkFields()
-        placeholderText: "Pflichtfeld"
-        placeholderTextColor: "red"
     }
     Label
     {

Gui/SearchBar.qml

@@ -2,79 +2,12 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+TextField {
+    Layout.preferredWidth: 300
+    placeholderText: qsTr("Suche")
 
-RowLayout
+    Button {
-{
+        icon.source: "qrc:/images/MagnifyingGlass.svg"
-    id: searchBar
+        isFieldButton: true
-
-
-    TextField
-    {
-        id: searchField
-        placeholderText: qsTr("Suche")
-        leftPadding: 3
-        rightPadding: 3
-        Layout.preferredWidth: 300
-
-        Button
-        {
-            icon.source: "qrc:/images/MagnifyingGlass.svg"
-            x: parent.x + parent.width - width
-            height: parent.height
-            flat: true
-        }
-
-
-        Button
-        {
-            id: filterBtn
-            icon.source: "qrc:/images/Funnel.svg"
-            x: parent.x + parent.width
-            height: searchField.height
-            flat: true
-            onClicked: filterPopup.open()
-        }
-    }
-
-    Popup
-    {
-        id: filterPopup
-        x: filterBtn.x + filterBtn.width
-        y: filterBtn.y
-        width: 100
-        height: 150
-        modal: true
-        focus: true
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-        contentItem: Item
-        {
-            ColumnLayout
-            {
-                anchors.fill: parent
-                //id: filterContent
-
-                Repeater
-                {
-                    model: availableFilters
-
-                    CheckBox
-                    {
-                        text: model.modelData
-                        onClicked:
-                        {
-                            setFilter(text, checkState)
-                        }
-                    }
-
-                }
-            }
-        }
-    }
-
-    function setFilter(filter,activated)
-    {
-        console.log(filter)
-        console.log(activated)
-
     }
 }

Gui/main.qml

@@ -53,14 +53,11 @@ ApplicationWindow
 
         anchors
         {
-            left: parent.left
+            fill: parent
-            right: parent.right
+            topMargin: Dimensions.l
-            top: topBar.bottom
+            bottomMargin: Dimensions.l
-            bottom: parent.bottom
+            rightMargin: Dimensions.l
-            topMargin: 0
+            leftMargin: Dimensions.l
-            bottomMargin: 5
-            rightMargin: 9
-            leftMargin: 9
         }
 
         property alias window: appWindow

TeroStyle/Button.qml

@@ -6,37 +6,55 @@ import QtQuick.Templates as T
 T.Button {
     id: control
 
+    /**
+     * Set true when the button is supposed to be displayed in e.g. a TextField.
+     * You want to do this when this button is directly related to the TextField
+     * and the primary and only action for the TextField.
+     * Usually, you'd only want to display an icon in this button.
+     * If true, automatically sets height, width and position.
+     *
+     * ```qml
+     * TextField {
+     *   placeholderText: "Search..."
+     *   Button {
+     *     icon.source: "qrc:/images/MagnifyingGlass.svg"
+     *     isFieldButton: true
+     *   }
+     * }
+     * ```
+     */
+    property bool isFieldButton: false
 
+    height: isFieldButton ? parent.height : null
     icon.color: Colors.primaryContrast
     icon.height: 21
     icon.width: 21
-    implicitHeight: Math.max(
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)
-        implicitBackgroundHeight + topInset + bottomInset,
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
-        implicitContentHeight + topPadding + bottomPadding
+    /**
-    )
+     * Icon is slightly larger than Text, so we need to reduce the padding a
-    implicitWidth: Math.max(
+     * tiny bit to make sure all Buttons are still the same height.
-        implicitBackgroundWidth + leftInset + rightInset,
+     */
-        implicitContentWidth + leftPadding + rightPadding
+    padding: Dimensions.m - (icon.source.toString() === "" ? 0 : 1)
-    )
+    x: isFieldButton ? parent.x + parent.width - width : null
-    padding: Dimensions.s - (icon.source.toString() === "" ? 0 : 1)
 
     background: Rectangle {
         anchors.fill: parent
+        border.color: Colors.interactive
+        border.width: isFieldButton ? 1 : 0
+        bottomLeftRadius: topLeftRadius
         color: Colors.primary
         radius: Dimensions.radius
+        topLeftRadius: isFieldButton ? 0 : radius
     }
     contentItem: I.IconLabel {
-        spacing: Dimensions.s
-        mirrored: control.mirrored
-        display: control.display
-        icon: control.icon
-        text: control.text
-        font: control.font
         color: Colors.primaryContrast
-    }
+        display: control.display
-
+        font: control.font
-    onIconChanged: () => {
+        icon: control.icon
-        // console.log("ICON '" + JSON.stringify(icon.source) + "' " + (icon.source.toString() === "") + " ");
+        mirrored: control.mirrored
+        spacing: Dimensions.s
+        text: control.text
     }
 
     MouseArea {

TeroStyle/Colors.qml

@@ -15,6 +15,7 @@ QtObject {
     readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
     readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"
     readonly property color error: theme === dark ? "#ff2264" : "#ff004b"
+    readonly property color transparent: "transparent"
 
     readonly property double highlightOpacity: .3
 }

TeroStyle/QuickFilter.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import QtCore
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    required property ListModel model
+
+    signal selectedChanged(string name)
+
+    spacing: Dimensions.m
+
+    Repeater {
+        model: root.model
+
+        Item {
+            id: item
+
+            required property int index
+            required property var modelData
+            property real padding: Dimensions.m
+
+            height: text.height + padding * 2
+            width: text.width + padding * 2
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: modelData.selected ? Colors.transparent : Colors.foreground
+                border.width: 2
+                color: modelData.selected ? Colors.primary : Colors.transparent
+                radius: parent.height
+            }
+            Text {
+                id: text
+
+                color: Colors.foreground
+                font: Typography.body
+                text: modelData.text
+                x: parent.padding
+                y: parent.padding
+            }
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+
+                onPressed: {
+                    if (item.modelData.selected)
+                        return;
+                    const model = root.model;
+                    for (let i = 0; i < model.count; i++) {
+                        model.setProperty(i, "selected", false);
+                    }
+                    model.setProperty(item.index, "selected", true);
+                    selectedChanged(item.modelData.name)
+                }
+            }
+        }
+    }
+}

TeroStyle/TextField.qml

@@ -17,4 +17,22 @@ T.TextField {
     placeholderTextColor: Colors.interactive
     font: Typography.body
     padding: Dimensions.m
+
+    /**
+     * Placeholder
+     */
+    Text {
+        x: control.leftPadding
+        y: control.topPadding
+        width: control.width - (control.leftPadding + control.rightPadding)
+        height: control.height - (control.topPadding + control.bottomPadding)
+
+        font: control.font
+        text: control.placeholderText
+        color: control.placeholderTextColor
+        verticalAlignment: control.verticalAlignment
+        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+        elide: Text.ElideRight
+        renderType: control.renderType
+    }
 }

TeroStyle/qmldir

@@ -6,4 +6,5 @@ Button Button.qml
 ComboBox ComboBox.qml
 Field Field.qml
 Label Label.qml
+QuickFilter QuickFilter.qml
 TextField TextField.qml

lib/DB/BusinessDAO.py

@@ -11,7 +11,6 @@ class BusinessDAO(QObject):
     __all_cols = None
 
     def __init__(self):
-        #print(f"*** File: {__file__}, init()")
         super().__init__()
         self.__con = DbManager().getConnection()
         if self.__con:
@@ -22,7 +21,7 @@ class BusinessDAO(QObject):
             if self.__cur:
                 self.__cur.callproc("getCustomerView", (enc_key, criterion,))
                 self.__all_cols = [desc[0] for desc in self.__cur.description]
-                return  self.__cur.fetchall(), self.__all_cols
+                return self.__cur.fetchall(), self.__all_cols
             else:
                 return None, None
         except mariadb.Error as e:

qml.qrc

@@ -56,6 +56,7 @@
         <file>TeroStyle/Field.qml</file>
         <file>TeroStyle/Label.qml</file>
         <file>TeroStyle/qmldir</file>
+        <file>TeroStyle/QuickFilter.qml</file>
         <file>TeroStyle/TextField.qml</file>
         <file>TeroStyle/Typography.qml</file>
     </qresource>

requirements.txt

@@ -7,7 +7,3 @@ mariadb
 soundfile
 sounddevice
 reportlab
-
-
-
-