address book entries can now be sorted

furiousteam · Feb 12, 2019 · fb65b63 · fb65b63
1 parent f550c8b
commit fb65b63
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 9 deletions.
diff --git a/src/css/common.css b/src/css/common.css
@@ -1495,6 +1495,40 @@ input.path-input-button{
 	font-size: 14px;
 	opacity: .5;
 }
+#section-addressbook .title-container{
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	column-gap: 24px;
+}
+#section-addressbook .title-left{
+	grid-column-start: 1;
+	grid-column-end: 5;
+}
+#section-addressbook .title-right{
+	grid-column-start: 5;
+	grid-column-end: 13;
+	text-align: right;
+	margin-right: 65px;
+	padding-top: 15px;
+}
+#section-addressbook .title-right select {
+	font-size: 14px;
+	color: #fff;
+	background-color: #021136;
+	border: none;
+	border-radius: 4px;
+	padding: 9px 22px;
+	outline: 0;
+}
+#section-addressbook .title-right select:focus {
+	outline: 0;
+	border-radius: 4px;
+	border: 1px solid #5A97BA;
+}
+#section-addressbook .title-right select option {
+	border: 1px solid #5A97BA;
+}
+
 .div-addressbook-outer {
 	height: 410px;
 	margin-right: 75px;

diff --git a/src/html/address_book.html b/src/html/address_book.html
@@ -1,9 +1,20 @@
 <template>
 	<section class="section" id="section-addressbook">
-		<div class="div-title clearfix">
-			<img src="../assets/addressbook/title.png" />
-			<h2 class="title">Address book</h2>
-			<div class="subtitle">Contacts</div>
+		<div class="title-container">
+			<div class="title-left">
+				<div class="div-title clearfix">
+					<img src="../assets/addressbook/title.png" />
+					<h2 class="title">Address book</h2>
+					<div class="subtitle">Contacts</div>
+				</div>
+			</div>
+			<div class="title-right">
+				<select id="button-addressbook-order">
+					<option>Sort the contact</option>
+					<option value="name">Label</option>
+					<option value="address">Wallet address</option>
+				</select>
+			</div>
 		</div>
 
 		<div class="div-addressbook-outer" id="addressbook-container">

diff --git a/src/js/wsui_main.js b/src/js/wsui_main.js
@@ -66,6 +66,7 @@ let addressBookInputWallet;
 let addressBookInputPaymentId;
 let addressBookInputUpdate;
 let addressBookButtonSave;
+let addressBookSelectOrder;
 // open wallet page
 let walletOpenInputPath;
 let walletOpenInputPassword;
@@ -158,6 +159,7 @@ function populateElementVars(){
 	addressBookInputPaymentId = document.getElementById('input-addressbook-paymentid');
 	addressBookInputUpdate = document.getElementById('input-addressbook-update');
 	addressBookButtonSave = document.getElementById('button-addressbook-save');
+	addressBookSelectOrder = document.getElementById('button-addressbook-order');
 
 	// open wallet page
 	walletOpenInputPath = document.getElementById('input-load-path');
@@ -1425,21 +1427,22 @@ function listenToAddressBookEvents() {
 		});
 	});
 }
-function listAddressBook(force){
+function listAddressBook(force, sortBy){
 	force = force || false;
+	sortBy = sortBy || '';
 	insertSampleAddresses();
 	let currentLength = document.querySelectorAll('.div-addressbook-item').length;
 	let abookLength = abook.size;
 
 	if (currentLength == abookLength  && !force) return;
 
 	let i = 1;
-	let itemAddressBook = function(key, item) {
+	let itemAddressBook = function(item) {
 		let cont_start = (i === 1) || ((i - 1) % 4 == 0) ? '<div class="div-addressbook-items">' : '';
 		let cont_end = (i % 4 == 0) || (i === abookLength) ? '</div>' : '';
 		i++;
 		return `${cont_start}
-			<div class="item div-addressbook-item" data-key="${key}" data-name="${item.name}" data-address="${item.address}" data-paymentid="${item.paymentId}">
+			<div class="item div-addressbook-item" data-key="${item.key}" data-name="${item.name}" data-address="${item.address}" data-paymentid="${item.paymentId}">
 				<div class="user">${item.name}</div>
 				<div class="address">${item.address}</div>
 				<div class="actions">
@@ -1452,10 +1455,30 @@ function listAddressBook(force){
 			</div>
 		${cont_end}`;
 	};
-	let html = '';
+
+	// get the array
+	let addressBookEntries = [];
 	Object.keys(abook.get()).forEach((key) => {
 		let et = abook.get(key);
-		html += itemAddressBook(key, et);
+		et['key'] = key;
+		addressBookEntries.push(et);
+	});
+
+	// sort the elements
+	if (sortBy != '') {
+		addressBookEntries.sort(function(a, b) {
+			let first = a[sortBy].toLowerCase();
+			let second = b[sortBy].toLowerCase();
+			if(first < second) return -1;
+			if(first > second) return 1;
+			return 0;
+		});
+	}
+
+	// render the entries
+	let html = '';
+	addressBookEntries.forEach((item) => {
+		html += itemAddressBook(item);
 	});
 	document.querySelector('#addressbook-container').innerHTML = html;
 	listenToAddressBookEvents();
@@ -1516,6 +1539,17 @@ function handleAddressBook() {
 		listAddressBook(true);
 	});
 
+	// order by button
+	addressBookSelectOrder.addEventListener('click', () => {
+		if (addressBookSelectOrder.value == 'name') {
+			listAddressBook(true, 'name');
+		} else if (addressBookSelectOrder.value == 'address') {
+			listAddressBook(true, 'address');
+		} else {
+			listAddressBook(true);
+		}
+	});
+
 	listAddressBook();
 }