| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title></title> |
| <script src="../webcomponentsjs/webcomponents.js"></script> |
| <link rel="import" href="ag-data-grid.html"> |
| <style> |
| body { |
| font-family: sans-serif; |
| font-size: 14pt; |
| color: rgba(0, 0, 0, 0.87); |
| } |
| ::shadow /deep/ .phoneNum, ::shadow /deep/ .email { |
| text-decoration: none; |
| font-size: 0.9em; |
| } |
| ::shadow /deep/ .phoneNum { |
| color: #ff4080; |
| } |
| ::shadow /deep/ .email { |
| color: #5C6BC0; |
| } |
| ::shadow /deep/ .lastName { |
| font-size: 1.2em; |
| text-transform: uppercase; |
| color: rgba(0, 0, 0, 0.54); |
| } |
| ::shadow /deep/ .online { |
| color: #4CAF50; |
| } |
| ::shadow /deep/ .away { |
| color: #FFEB3B; |
| } |
| ::shadow /deep/ .offline { |
| color: #BDBDBD; |
| } |
| </style> |
| </head> |
| <body> |
| <ag-data-grid id="contactsGrid" |
| summary="Displays your contacts in a tabular format" |
| pageSize=10 |
| responsiveWidth="1200" |
| defaultSortKey="lastName" |
| defaultSortAscending> |
| |
| <!-- Search contacts--> |
| <ag-data-grid-search label="Search Contacts"></ag-data-grid-search> |
| |
| <!-- Filter for circles --> |
| <ag-data-grid-filter-select multiple key="status" label="Show contacts that are"> |
| <ag-data-grid-filter-select-item checked label="Online" value="online"></ag-data-grid-filter-select-item> |
| <ag-data-grid-filter-select-item checked label="Away" value="away"></ag-data-grid-filter-select-item> |
| <ag-data-grid-filter-select-item checked label="Offline" value="offline"></ag-data-grid-filter-select-item> |
| </ag-data-grid-filter-select> |
| |
| <!-- Toggle to allow filtering by online mode--> |
| <ag-data-grid-filter-toggle key="withPhone" label="Only show contacts that have a phone number" ></ag-data-grid-filter-toggle> |
| |
| <!-- Columns, sorting and cell templates --> |
| <ag-data-grid-column sortable label="First Name" key="firstName" |
| minFlex="3" flex="4" priority="3"/> |
| <template>{{ item.firstName }}</template> |
| </ag-data-grid-column> |
| |
| <ag-data-grid-column sortable label="Last Name" key="lastName" minFlex="4" flex="5" priority="1"/> |
| <template> |
| <span class="lastName"> |
| {{ item.lastName }} |
| </span> |
| </template> |
| </ag-data-grid-column> |
| |
| <ag-data-grid-column label="Phone Number" key="phone" |
| minFlex= "3" flex="4" priority="2" align="center"/> |
| <template if="{{ item.phone !== ''}}"> |
| <a class='phoneNum' href="tel://{{item.phone}}">{{ item.phone }}</a> |
| </template> |
| </ag-data-grid-column> |
| |
| <ag-data-grid-column label="Email" key="email" |
| minFlex= "6" flex="6" priority="5" align="left"/> |
| <template if="{{ item.email !== ''}}"> |
| <a class='email' href="mailto://{{item.email}}">{{ item.email }}</a> |
| </template> |
| </ag-data-grid-column> |
| |
| <ag-data-grid-column sortable label="Status" key="status" |
| minFlex="1" flex="3" priority="4" align="center"/> |
| <template> |
| <template if="{{item.status === 'online'}}"> |
| <core-icon gridOnly class="online" icon="radio-button-on" alt="{{ item.firstName }} {{ item.lastName }} is online" title="online"></core-icon> |
| <span moreInfoOnly> {{ item.status }} </span> |
| </template> |
| <template if="{{item.status === 'away'}}"> |
| <core-icon gridOnly class="away" icon="schedule" alt="{{ item.firstName }} {{ item.lastName }} is away" title="away"></core-icon> |
| <span moreInfoOnly> {{ item.status }} </span> |
| </template> |
| <template if="{{item.status === 'offline'}}"> |
| <core-icon gridOnly class="offline" icon="block" alt="{{ item.firstName }} {{ item.lastName }} is offline" title="offline"></core-icon> |
| <span moreInfoOnly> {{ item.status }} </span> |
| </template> |
| </template> |
| </ag-data-grid-column> |
| </ag-data-grid> |
| |
| <script type="text/javascript"> |
| |
| // Add the data source to the grid |
| window.addEventListener('polymer-ready', function(e) { |
| var grid = document.getElementById('contactsGrid'); |
| grid.dataSource = { |
| // This method is expected by the data-grid. It is responsible for |
| // searching, filtering and sorting the data when user takes an action |
| // such as changing the filters or searching. |
| // This is also called on the initial load to populate the grid. |
| fetch: function(search, sort, filters) { |
| return filterAndSortContacts(search, sort, filters); |
| } |
| }; |
| |
| var contacts = generateContacts(100); |
| function filterAndSortContacts(search, sort, filters) { |
| var filtered = contacts.filter(function(c) { |
| var isMatch = true; |
| |
| // Search keyword |
| var keyword = search.keyword; |
| if (keyword) { |
| isMatch = contains(c.firstName, keyword) || |
| contains(c.lastName, keyword) || |
| contains(c.phone, keyword); |
| } |
| |
| // Status filter |
| var statusFilterValues = filters['status']; // status is the "key" defined on the filter |
| if (statusFilterValues) { |
| isMatch = isMatch && statusFilterValues.indexOf(c.status) > -1; |
| } |
| |
| // Only with phone number filter |
| var onlyShowWithPhoeNumber = filters['withPhone']; // withPhone is the "key" defined on the filter |
| if (onlyShowWithPhoeNumber) { |
| isMatch = isMatch && !!c.phone; |
| } |
| |
| return isMatch; |
| }); |
| |
| // Sort |
| return filtered.sort(sorter); |
| |
| function sorter(item1, item2) { |
| var key = sort.key; |
| var ascending = sort.ascending; |
| var first = item1[key]; |
| var second = item2[key]; |
| if (!ascending) { |
| first = item2[key]; |
| second = item1[key]; |
| } |
| |
| var statusPriority = { |
| 'online': 3, |
| 'away': 2, |
| 'offline': 1 |
| }; |
| |
| if (key === 'status') { |
| first = statusPriority[first]; |
| second = statusPriority[second]; |
| return (first - second); |
| } |
| if (key === 'firstName' || key === 'lastName') { |
| return first.localeCompare(second); |
| } |
| } |
| } |
| |
| // Helpers |
| function generateContacts(n) { |
| var firstNames = ['Isabella', 'Sophia', 'Emma', 'Olivia', 'Isabella', 'Mia', 'Ava', 'Lily', 'Zoe', 'Emily', 'Chloe', 'Layla', 'Madison', 'Madelyn', 'Abigail', 'Aubrey', 'Charlotte', 'Amelia', 'Ella', 'Kaylee', 'Avery', 'Aaliyah', 'Hailey', 'Hannah', 'Addison', 'Riley', 'Harper', 'Aria', 'Arianna', 'Mackenzie', 'Lila', 'Evelyn', 'Adalyn', 'Grace', 'Brooklyn', 'Ellie', 'Anna', 'Kaitlyn', 'Isabelle', 'Sophie', 'Scarlett', 'Natalie', 'Leah', 'Sarah', 'Nora', 'Mila', 'Elizabeth', 'Lillian', 'Kylie', 'Audrey', 'Lucy', 'Maya', 'Annabelle', 'Makayla', 'Gabriella'] |
| var lastNames = ['McDonald', 'Howard-Kelly', 'Brown', 'Wilson', 'RodrÃguez', 'Diaz', 'Jones', 'Anderson', 'Lee', 'Robinson', 'Cooper-Brown', 'Sanchez', 'Campbell', 'Collins-Edwards', 'Campbell-Diaz', 'Parker', 'Cruz', 'Torres-Bell', ]; |
| var firstNameCursor = 0; |
| var lastNameCursor = 0; |
| |
| var results = []; |
| for (var i = 0; i < n; i++) { |
| var fname = getFirstName(); |
| var lname = getLastName(); |
| results.push({ |
| firstName: fname, |
| lastName: lname, |
| phone: createPhone(), |
| email: fname + '.' + lname + '@example.org', |
| status: getStatus() |
| }) |
| } |
| |
| return results; |
| |
| function rand(min, max) { |
| return Math.floor(Math.random() * (max - min + 1) + min); |
| } |
| |
| function getStatus() { |
| var tri = rand(0, 2); |
| if (tri === 0) { |
| return 'online'; |
| } |
| if (tri === 1) { |
| return 'away'; |
| } |
| if (tri === 2) { |
| return 'offline'; |
| } |
| } |
| |
| function createPhone() { |
| // not everyone has a phone number |
| if (rand(0, 1) == 1) { |
| return ''; |
| } |
| return rand(100, 999) + '-' + rand(100, 999) + '-' + rand(1000, 9999); |
| } |
| |
| function getFirstName() { |
| if (firstNameCursor === firstNames.length) { |
| firstNameCursor = 0; |
| } |
| var name = firstNames[firstNameCursor]; |
| firstNameCursor++; |
| return name; |
| } |
| |
| function getLastName() { |
| if (lastNameCursor === lastNames.length) { |
| lastNameCursor = 0; |
| } |
| var name = lastNames[lastNameCursor]; |
| lastNameCursor++; |
| return name; |
| } |
| } |
| }); |
| |
| function contains(str, s) { |
| return str.toLowerCase().indexOf(s.toLowerCase()) > -1; |
| } |
| </script> |
| </body> |
| </html> |
