4 files changed, 128 insertions, 37 deletions

diff --git a/framework/qml/Icons.qml b/framework/qml/Icons.qml
index 4dfae3d7..79a52046 100644
--- a/framework/qml/Icons.qml
+++ b/framework/qml/Icons.qml
@@ -66,6 +66,7 @@ Item {
     property string key_import_inverted: "view-certificate-import-inverted"
 
     property string addNew: "list-add"
+    property string listRemove: "list-remove"
     property string remove: "kube-list-remove-inverted"
     property string folder: "folder"
     property string save_inverted: "document-save-inverted"
diff --git a/views/people/qml/MailListEditor.qml b/views/people/qml/MailListEditor.qml
new file mode 100644
index 00000000..e9dc76e7
--- /dev/null
+++ b/views/people/qml/MailListEditor.qml
@@ -0,0 +1,62 @@
+/*
+ *  Copyright (C) 2018 Michael Bohlender, <bohlender@kolabsys.com>
+ *  Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsys.com>
+ *
+ *  This program is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License along
+ *  with this program; if not, write to the Free Software Foundation, Inc.,
+ *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.1
+
+import org.kube.framework 1.0 as Kube
+
+Column {
+    id: root
+
+    property variant controller
+
+    spacing: Kube.Units.smallSpacing
+
+    ListView {
+        id: emails
+
+        width: personComposerRoot.width - Kube.Units.largeSpacing
+        height: contentHeight
+
+        model: controller.model
+
+        delegate: Row {
+            height: textField.height + Kube.Units.smallSpacing
+            spacing: Kube.Units.smallSpacing
+            Kube.Label { text: qsTr("(main)") }
+            Kube.TextField {id: textField; width: Kube.Units.gridUnit * 15; text: model.email; backgroundColor: "white" }
+            Kube.IconButton {
+                id: removeButton
+                iconName: Kube.Icons.listRemove
+                onClicked: root.controller.remove(model.id)
+            }
+        }
+    }
+
+    Kube.Button {
+        id: button
+        text: qsTr("Add")
+        focus: true
+        onClicked: {
+            root.controller.add({email: ""});
+        }
+    }
+}
diff --git a/views/people/qml/PersonComposer.qml b/views/people/qml/PersonComposer.qml
index 1d4dfa87..2e0436ed 100644
--- a/views/people/qml/PersonComposer.qml
+++ b/views/people/qml/PersonComposer.qml
@@ -168,24 +168,8 @@ Flickable {
             Kube.Label {
                 text: qsTr("Email")
             }
-            Flow {
-                id: emails
-
-                width: personComposerRoot.width - Kube.Units.largeSpacing
-
-                Repeater {
-                    model: contactController.emails
-
-                    delegate: Row {
-                        spacing: Kube.Units.smallSpacing
-                        Kube.Label { text: qsTr("(main)") }
-                        Kube.TextField { width: Kube.Units.gridUnit * 15; text: modelDatas; color: Kube.Colors.highlightColor; backgroundColor: "white" }
-                        Item { width: Kube.Units.smallSpacing; height: 1 }
-                    }
-                }
-            }
-            Kube.Button {
-                text: qsTr("Add")
+            MailListEditor {
+                controller: contactController.mails
             }
         }
 
@@ -197,25 +181,8 @@ Flickable {
                 text: qsTr("Phone")
             }
 
-            Flow {
-                id: phone
-
-                width: personComposerRoot.width - Kube.Units.largeSpacing
-                spacing: Kube.Units.smallSpacing
-
-                Repeater {
-                    model: contactController.phoneNumbers
-
-                    Row {
-                        spacing: Kube.Units.smallSpacing
-                        Kube.Label { text: qsTr("(main)") }
-                        Kube.TextField { width: Kube.Units.gridUnit * 15; text: modelData; backgroundColor: "white"}
-                        Item { width: Kube.Units.smallSpacing; height: 1 }
-                    }
-                }
-            }
-            Kube.Button {
-                text: qsTr("Add")
+            PhoneListEditor {
+                controller: contactController.phones
             }
         }
 
diff --git a/views/people/qml/PhoneListEditor.qml b/views/people/qml/PhoneListEditor.qml
new file mode 100644
index 00000000..6486e088
--- /dev/null
+++ b/views/people/qml/PhoneListEditor.qml
@@ -0,0 +1,61 @@
+/*
+ *  Copyright (C) 2018 Michael Bohlender, <michael.bohlender@kdemail.net>
+ *
+ *  This program is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License along
+ *  with this program; if not, write to the Free Software Foundation, Inc.,
+ *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+
+import QtQuick 2.7
+import QtQuick.Layouts 1.1
+
+import org.kube.framework 1.0 as Kube
+
+Column {
+    id: root
+
+    property variant controller
+
+    spacing: Kube.Units.smallSpacing
+
+    ListView {
+        id: emails
+
+        width: personComposerRoot.width - Kube.Units.largeSpacing
+        height: contentHeight
+
+        model: controller.model
+
+        delegate: Row {
+            height: textField.height + Kube.Units.smallSpacing
+            spacing: Kube.Units.smallSpacing
+            Kube.Label { text: qsTr("(main)") }
+            Kube.TextField {id: textField; width: Kube.Units.gridUnit * 15; text: model.number; backgroundColor: "white" }
+            Kube.IconButton {
+                id: removeButton
+                iconName: Kube.Icons.listRemove
+                onClicked: root.controller.remove(model.id)
+            }
+        }
+    }
+
+    Kube.Button {
+        id: button
+        text: qsTr("Add")
+        focus: true
+        onClicked: {
+            root.controller.add({number: ""});
+        }
+    }
+}