framework/qml/EntitySelector.qml

0001 /*
0002  *  Copyright (C) 2018 Michael Bohlender, <bohlender@kolabsys.com>
0003  *  Copyright (C) 2019 Christian Mollekopf, <mollekopf@kolabsys.com>
0004  *
0005  *  This program is free software; you can redistribute it and/or modify
0006  *  it under the terms of the GNU General Public License as published by
0007  *  the Free Software Foundation; either version 2 of the License, or
0008  *  (at your option) any later version.
0009  *
0010  *  This program is distributed in the hope that it will be useful,
0011  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
0012  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0013  *  GNU General Public License for more details.
0014  *
0015  *  You should have received a copy of the GNU General Public License along
0016  *  with this program; if not, write to the Free Software Foundation, Inc.,
0017  *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0018  */
0019
0020 import QtQuick 2.9
0021 import QtQuick.Controls 2
0022 import QtQuick.Layouts 1.2
0023
0024 import org.kube.framework 1.0 as Kube
0025
0026 Kube.InlineAccountSwitcher {
0027     id: root
0028
0029     property bool selectionEnabled: false
0030     property string entityType
0031     property var roles
0032     property string sortRole
0033     property var filter: ({})
0034
0035     property alias enabledEntities: entityFilterCollector.checkedEntities
0036     property var currentEntityIdentifier: null
0037     property var currentEntity: null
0038
0039     signal entityCreated(var text, var accountId)
0040     signal entityRemoved(var entity)
0041
0042     function clearSelection() {
0043         if (root.currentDelegate) {
0044             root.currentDelegate.clearSelection()
0045         }
0046     }
0047
0048     function selectEntity(entity) {
0049         root.currentDelegate.selectEntity(entity)
0050     }
0051
0052     Kube.CheckedEntities {
0053         id: entityFilterCollector
0054     }
0055
0056     delegate: Kube.ListView {
0057         id: listView
0058
0059         property bool editMode: false
0060
0061         function clearSelection() {
0062             listView.currentIndex = -1
0063         }
0064
0065         function selectEntity(entity) {
0066             if (entity) {
0067                 var foundIndex = checkableModel.findIndex("object", entity)
0068                 if (foundIndex >= 0) {
0069                     listView.currentIndex = foundIndex;
0070                 }
0071             } else {
0072                 listView.currentIndex = -1;
0073             }
0074         }
0075
0076         function currentChanged(isCurrent) {
0077             if (isCurrent) {
0078                 //Necessary to re-select folder on account change (so the tasklist is updated)
0079                 if (currentItem) {
0080                     root.currentEntityIdentifier = currentItem.currentData.identifier
0081                     root.currentEntity = currentItem.currentData.object
0082                 }
0083             }
0084         }
0085
0086         property Component buttonDelegate: Kube.IconButton {
0087             height: Kube.Units.gridUnit
0088             padding: 0
0089             iconName: Kube.Icons.overflowMenu_inverted
0090             onClicked: listView.editMode = !listView.editMode;
0091             checkable: true
0092             checked: listView.editMode
0093         }
0094
0095         footer: Component {
0096             FocusScope {
0097                 height: Kube.Units.gridUnit +  Kube.Units.smallSpacing * 2
0098                 width: parent.width
0099                 visible: listView.editMode
0100
0101                 Kube.TextButton {
0102                     id: button
0103                     text: "+ " + qsTr("Add")
0104                     textColor: Kube.Colors.highlightColor
0105                     focus: true
0106                     onClicked: {
0107                         lineEdit.visible = true
0108                         lineEdit.forceActiveFocus()
0109                     }
0110                 }
0111
0112                 Kube.TextField {
0113                     id: lineEdit
0114                     anchors {
0115                         left: parent.left
0116                         right: parent.right
0117                     }
0118                     visible: false
0119
0120                     signal aborted()
0121
0122                     selectByMouse: true
0123
0124                     onEditingFinished: {
0125                         accepted()
0126                     }
0127
0128                     validator: RegExpValidator { regExp: /.+/ }
0129
0130                     Keys.onReturnPressed: {
0131                         if (acceptableInput) {
0132                             accepted()
0133                         } else {
0134                             aborted()
0135                         }
0136                     }
0137
0138                     Keys.onEscapePressed: {
0139                         aborted()
0140                     }
0141
0142                     placeholderText: button.text
0143
0144                     onAccepted: {
0145                         root.entityCreated(text, listView.parent.accountId)
0146                         clear()
0147                         visible = false
0148                         button.forceActiveFocus(Qt.TabFocusReason)
0149                     }
0150                     onAborted: {
0151                         clear()
0152                         visible = false
0153                         button.forceActiveFocus(Qt.TabFocusReason)
0154                     }
0155                 }
0156             }
0157
0158         }
0159         footerPositioning: ListView.InlineFooter
0160
0161         currentIndex: -1
0162
0163         Layout.fillWidth: true
0164         Layout.maximumHeight: Math.min(contentHeight, parent.height - Kube.Units.gridUnit)
0165         Layout.preferredHeight: contentHeight
0166
0167         onCurrentItemChanged: {
0168             if (currentItem) {
0169                 root.currentEntityIdentifier = currentItem.currentData.identifier
0170                 root.currentEntity = currentItem.currentData.object
0171             }
0172         }
0173
0174         model: Kube.CheckableEntityModel {
0175             id: checkableModel
0176             type: root.entityType
0177             roles: root.roles
0178             sortRole: root.sortRole
0179             filter: (listView.editMode ? root.filter : Object.assign({}, root.filter, {enabled: true}))
0180             accountId: listView.parent.accountId
0181             checkedEntities: entityFilterCollector
0182             onInitialItemsLoaded: {
0183                 //Automatically enable edit mode if no entities are enabled
0184                 if (rowCount() == 0) {
0185                     listView.editMode = true;
0186                 }
0187             }
0188
0189         }
0190         delegate: Kube.ListDelegate {
0191             id: delegate
0192
0193             selectionEnabled: root.selectionEnabled
0194
0195             width: listView.availableWidth
0196             height: Kube.Units.gridUnit * 1.5
0197             hoverEnabled: true
0198             property bool isActive: listView.currentIndex === index
0199             property color color: !!model.color ? model.color : Kube.Colors.textColor
0200             property bool showColorIndicator: !!model.color
0201
0202             DropArea {
0203                 id: dropArea
0204                 //Allows the source to find the target folder id on a drop event
0205                 property var targetId: model.identifier
0206                 anchors.fill: parent
0207
0208                 Rectangle {
0209                     anchors.fill: parent
0210                     color: Kube.Colors.highlightColor
0211                     opacity: 0.3
0212                     visible: parent.containsDrag
0213                 }
0214
0215                 onDropped: drop.accept(Qt.MoveAction)
0216             }
0217
0218             background: Kube.DelegateBackground {
0219                 anchors.fill: parent
0220                 color: Kube.Colors.textColor
0221                 focused: delegate.activeFocus || delegate.hovered
0222                 selected: isActive
0223             }
0224
0225             RowLayout {
0226                 anchors {
0227                     fill: parent
0228                     leftMargin: Kube.Units.smallSpacing
0229                     rightMargin: Kube.Units.smallSpacing
0230                 }
0231                 spacing: Kube.Units.smallSpacing
0232                 Kube.CheckBox {
0233                     id: checkBox
0234                     opacity: 0.9
0235                     visible: listView.editMode
0236                     checked: model.checked || model.enabled
0237                     onCheckedChanged: {
0238                         model.checked = checked
0239                         model.enabled = checked
0240                     }
0241
0242                     indicator: Rectangle {
0243                         width: Kube.Units.gridUnit * 0.8
0244                         height: Kube.Units.gridUnit * 0.8
0245
0246                         color: delegate.color
0247
0248                         //Add a border because we don't have a background
0249                         border.color: Kube.Colors.backgroundColor
0250                         border.width: !delegate.showColorIndicator ? 1 : 0
0251
0252                         Rectangle {
0253                             id: highlight
0254                             anchors.fill: parent
0255                             visible: checkBox.hovered || checkBox.visualFocus
0256                             color: Kube.Colors.highlightColor
0257                             opacity: 0.4
0258                         }
0259
0260                         Kube.Icon {
0261                             anchors.centerIn: parent
0262                             height: Kube.Units.gridUnit - 4
0263                             width: Kube.Units.gridUnit - 4
0264                             visible: checkBox.checked
0265                             iconName: Kube.Icons.checkbox_inverted
0266                         }
0267                     }
0268
0269                 }
0270                 Kube.Label {
0271                     id: label
0272                     Layout.fillWidth: true
0273                     text: model.name
0274                     color: Kube.Colors.highlightedTextColor
0275                     elide: Text.ElideLeft
0276                     clip: true
0277                 }
0278                 Rectangle {
0279                     visible: delegate.showColorIndicator && !listView.editMode
0280                     width: Kube.Units.gridUnit * 0.8
0281                     height: Kube.Units.gridUnit * 0.8
0282                     radius: width / 2
0283                     color: delegate.color
0284                 }
0285                 Kube.IconButton {
0286                     id: removeButton
0287
0288                     visible: listView.editMode
0289                     onClicked: root.entityRemoved(model.object)
0290                     padding: 0
0291                     iconName: Kube.Icons.remove
0292                 }
0293                 ToolTip {
0294                     id: toolTipItem
0295                     visible: delegate.hovered && label.truncated
0296                     text: label.text
0297                 }
0298             }
0299         }
0300     }
0301 }