~renatofilho/address-book-app/new-designer-contact-list

« back to all changes in this revision

Viewing changes to src/imports/Ubuntu/Contacts/ContactSearchListView.qml

  • Committer: Renato Araujo Oliveira Filho
  • Date: 2014-06-17 00:41:33 UTC
  • mfrom: (169.9.9 staging)
  • Revision ID: renato.filho@canonical.com-20140617004133-m4lm6hbiiyd1zx0w
Staging merged.

Show diffs side-by-side

added added

removed removed

Lines of Context:
1
 
/*
2
 
 * Copyright (C) 2013 Canonical, Ltd.
3
 
 *
4
 
 * This program is free software; you can redistribute it and/or modify
5
 
 * it under the terms of the GNU General Public License as published by
6
 
 * the Free Software Foundation; version 3.
7
 
 *
8
 
 * This program is distributed in the hope that it will be useful,
9
 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10
 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11
 
 * GNU General Public License for more details.
12
 
 *
13
 
 * You should have received a copy of the GNU General Public License
14
 
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
15
 
 */
16
 
 
17
 
import QtQuick 2.2
18
 
import QtContacts 5.0
19
 
import Ubuntu.Components 0.1
20
 
 
21
 
import "Contacts.js" as ContactsJS
22
 
 
23
 
/*!
24
 
    \qmltype ContactSearchListView
25
 
    \inqmlmodule Ubuntu.Contacts 0.1
26
 
    \ingroup ubuntu
27
 
    \brief The ContactSearchListView provides a simple contact list view
28
 
 
29
 
    The ContactSearchListView provide a easy way to show the contact list view
30
 
    with all default visuals defined by Ubuntu system.
31
 
 
32
 
    Example:
33
 
    \qml
34
 
        import Ubuntu.Contacts 0.1
35
 
 
36
 
        ContactSearchListView {
37
 
            anchors {
38
 
                top: parent.top
39
 
                left: parent.left
40
 
                right: parent.right
41
 
            }
42
 
            onContactClicked: console.debug("Contact ID:" + contactId)
43
 
        }
44
 
    \endqml
45
 
*/
46
 
 
47
 
ListView {
48
 
    id: contactListView
49
 
 
50
 
    /*!
51
 
      \qmlproperty int titleDetail
52
 
 
53
 
      This property holds the contact detail which will be used to display the contact title in the delegate
54
 
      By default this is set to ContactDetail.Name.
55
 
    */
56
 
    property int titleDetail: ContactDetail.Name
57
 
    /*!
58
 
      \qmlproperty list<int> titleFields
59
 
 
60
 
      This property holds the list of all fields which will be used to display the contact title in the delegate
61
 
      By default this is set to [ Name.FirstName, Name.LastName ]
62
 
    */
63
 
    property variant titleFields: [ Name.FirstName, Name.LastName ]
64
 
    /*!
65
 
      \qmlproperty list<SortOrder> sortOrders
66
 
 
67
 
      This property holds a list of sort orders used by the contacts model.
68
 
      \sa SortOrder
69
 
    */
70
 
    property alias sortOrders: contactsModel.sortOrders
71
 
    /*!
72
 
      \qmlproperty FetchHint fetchHint
73
 
 
74
 
      This property holds the fetch hint instance used by the contact model.
75
 
 
76
 
      \sa FetchHint
77
 
    */
78
 
    property alias fetchHint: contactsModel.fetchHint
79
 
    /*!
80
 
      \qmlproperty Filter filter
81
 
 
82
 
      This property holds the filter instance used by the contact model.
83
 
 
84
 
      \sa Filter
85
 
    */
86
 
    property alias filter: contactsModel.filter
87
 
    /*!
88
 
      \qmlproperty string defaultAvatarImage
89
 
 
90
 
      This property holds the default image url to be used when the current contact does
91
 
      not contains a photo
92
 
    */
93
 
    property string defaultAvatarImageUrl: "image://gicon/avatar-default"
94
 
    /*!
95
 
      \qmlproperty int currentOperation
96
 
 
97
 
      This property holds the current fetch request index
98
 
    */
99
 
    property int currentOperation: -1
100
 
    /*!
101
 
      \qmlproperty int detailToPick
102
 
 
103
 
      This property holds the detail type to be picked
104
 
    */
105
 
    property int detailToPick: Contact.PhoneNumber
106
 
    /*!
107
 
      \qmlproperty list<int> detailFieldsToDisplay
108
 
 
109
 
      This property holds the list of all fields which will be used to display the contact subtitle in the delegate
110
 
      By default this is set to [ PhoneNumber.Number ]
111
 
    */
112
 
    property variant detailFieldsToDisplay: [ PhoneNumber.Number ]
113
 
    /*!
114
 
      \qmlproperty string manager
115
 
 
116
 
      This property holds the manager uri of the contact backend engine.
117
 
      By default this is set to "galera"
118
 
    */
119
 
    property alias manager: contactsModel.manager
120
 
    /*!
121
 
      \internal \qmlproperty variant ___selectedDetail
122
 
    */
123
 
    property variant ___selectedDetail: null
124
 
    /*!
125
 
      This handler is called when any error occurs in the contact model
126
 
    */
127
 
    signal error(string message)
128
 
    /*!
129
 
      This handler is called when any contact int the list receives a click.
130
 
    */
131
 
    signal contactClicked(QtObject contact)
132
 
    /*!
133
 
      This handler is called when any contact detail in the list receives a click
134
 
    */
135
 
    signal detailClicked(QtObject contact, QtObject detail)
136
 
 
137
 
    clip: true
138
 
    snapMode: ListView.NoSnap
139
 
    orientation: ListView.Horizontal
140
 
    height: units.gu(12)
141
 
    spacing: units.gu(1)
142
 
 
143
 
    model: contactsModel
144
 
    delegate: contactSearchDelegate
145
 
 
146
 
    ContactModel {
147
 
        id: contactsModel
148
 
 
149
 
        manager: "galera"
150
 
        sortOrders: [
151
 
            SortOrder {
152
 
                id: sortOrder
153
 
 
154
 
                detail: ContactDetail.Tag
155
 
                field: Tag.Name
156
 
                direction: Qt.AscendingOrder
157
 
            }
158
 
        ]
159
 
 
160
 
        fetchHint: FetchHint {
161
 
            detailTypesHint: contactListView.detailToPick != 0 ?
162
 
                                 [contactListView.titleDetail, ContactDetail.Avatar, contactListView.detailToPick] :
163
 
                                 [contactListView.titleDetail, ContactDetail.Avatar]
164
 
        }
165
 
 
166
 
        onErrorChanged: {
167
 
            if (error) {
168
 
                contactListView.error(error)
169
 
            }
170
 
        }
171
 
 
172
 
    }
173
 
 
174
 
    Connections {
175
 
        target: model
176
 
        onContactsFetched: {
177
 
            if (requestId == contactListView.currentOperation) {
178
 
                contactListView.currentOperation = -1
179
 
                // this fetch request can only return one contact
180
 
                if(fetchedContacts.length !== 1)
181
 
                    return
182
 
 
183
 
                if (contactListView.detailToPick == 0)
184
 
                    contactListView.contactClicked(fetchedContacts[0])
185
 
                else if (___selectedDetail != "")
186
 
                    contactListView.detailClicked(fetchedContacts[0], ___selectedDetail)
187
 
            }
188
 
        }
189
 
    }
190
 
 
191
 
    Component {
192
 
        id: contactSearchDelegate
193
 
        Row {
194
 
            anchors {
195
 
                top: parent.top
196
 
                topMargin: units.gu(1)
197
 
            }
198
 
            height: childrenRect.height
199
 
            width: childrenRect.width
200
 
            spacing: units.gu(1)
201
 
 
202
 
            // if we are picking the details, repeat one entry per detail
203
 
            // but if we are only picking the contact itself,
204
 
            Repeater {
205
 
                id: numberRepeater
206
 
                model: (contactListView.detailToPick != 0  && contact.details(contactListView.detailToPick).length > 0) ?
207
 
                           contact.details(contactListView.detailToPick) : [""]
208
 
                UbuntuShape {
209
 
                    id: img
210
 
 
211
 
                    anchors.top: parent.top
212
 
                    width: units.gu(10)
213
 
                    height: units.gu(10)
214
 
 
215
 
                    image: Image {
216
 
                        fillMode: Image.PreserveAspectCrop
217
 
                        source: (contact.avatar && contact.avatar.imageUrl != "") ?
218
 
                                    Qt.resolvedUrl(contact.avatar.imageUrl) :
219
 
                                    defaultAvatarImageUrl
220
 
                        asynchronous: true
221
 
                    }
222
 
 
223
 
                    Rectangle {
224
 
                        id: bgLabel
225
 
 
226
 
                        anchors {
227
 
                            left: parent.left
228
 
                            right: parent.right
229
 
                            bottom: parent.bottom
230
 
                        }
231
 
                        height: units.gu(5)
232
 
                        color: "black"
233
 
                        opacity: 0.7
234
 
                    }
235
 
 
236
 
                    Label {
237
 
                        id: titleLabel
238
 
 
239
 
                        anchors {
240
 
                            left: bgLabel.left
241
 
                            leftMargin: units.gu(1.0)
242
 
                            top: bgLabel.top
243
 
                            topMargin: units.gu(0.5)
244
 
                            right: bgLabel.right
245
 
                        }
246
 
                        height: units.gu(2.5)
247
 
                        verticalAlignment: Text.AlignVCenter
248
 
                        text: ContactsJS.formatToDisplay(contact, titleDetail, titleFields)
249
 
                        elide: Text.ElideRight
250
 
                        color: "white"
251
 
                        fontSize: "medium"
252
 
                    }
253
 
 
254
 
                    Label {
255
 
                        id: subTitleLabel
256
 
 
257
 
                        anchors {
258
 
                            left: titleLabel.left
259
 
                            top: titleLabel.bottom
260
 
                            right: titleLabel.right
261
 
                        }
262
 
                        height: units.gu(1)
263
 
                        verticalAlignment:  Text.AlignVCenter
264
 
                        text: modelData === "" ? modelData : ContactsJS.formatToDisplay(contact, detailToPick, detailFieldsToDisplay, modelData)
265
 
                        elide: Text.ElideRight
266
 
                        fontSize: "x-small"
267
 
                        color: "white"
268
 
                    }
269
 
 
270
 
                    MouseArea {
271
 
                        anchors.fill: parent
272
 
 
273
 
                        onClicked: {
274
 
                            if (contactListView.currentOperation !== -1) {
275
 
                                return;
276
 
                            }
277
 
 
278
 
                            if (detailToPick !== 0) {
279
 
                                ___selectedDetail = modelData;
280
 
                            }
281
 
 
282
 
                            contactListView.currentIndex = index
283
 
                            contactListView.currentOperation = contactsModel.fetchContacts(contact.contactId)
284
 
                        }
285
 
                    }
286
 
                }
287
 
            }
288
 
        }
289
 
 
290
 
    }
291
 
}