Merge pull request #902 from LiskHQ/901-filter-presets

Add filter presets - Closes #901

src/assets/styles/common.css

@@ -1424,18 +1424,7 @@ a.sort-order span.reverse:after {
   font-size: 15px;
   font-weight: 500;
   line-height: 28px;
-  margin: 16px 10px 16px 0;
-}
-
-.transactions-filter-header button:disabled {
-  border-bottom: 2px solid #3c5068;
-  color: #3c5068;
-}
-
-.transactions-filter-header,
-.transactions-filter-header.disabled:hover {
-  -webkit-transition: all ease 300ms;
-  transition: all ease 300ms;
+  margin: 0 10px 16px 0;
 }
 
 .best-productivity {

src/components/address/address.component.js

@@ -26,6 +26,19 @@ const AddressConstructor = function (
 ) {
 	const vm = this;
 
+	const defaultFilterPresets = {
+		senderId: null,
+		recipientId: null,
+		type: null,
+		page: 1,
+		senderPublicKey: null,
+		recipientPublicKey: null,
+		minAmount: null,
+		maxAmount: null,
+		height: null,
+		blockId: null,
+	};
+
 	const addAccountTypeDescription = (d) => {
 		if (vm.isMultisig && vm.isDelegate) {
 			vm.accountType = 'Multisignature delegate account';
@@ -123,6 +136,18 @@ const AddressConstructor = function (
 		$state.go($state.current.component, { page: pageNumber });
 	};
 
+	vm.loadPreset = (preset) => {
+		const addressPresets = {
+			sent: { senderId: vm.address.address, type: 0 },
+			received: { recipientId: vm.address.address, type: 0 },
+			typeZero: { type: 0 },
+			multiSig: { type: 4 },
+			voting: { type: 3 },
+		};
+		$state.go($state.current.component,
+			Object.assign({}, defaultFilterPresets, addressPresets[preset]));
+	};
+
 	vm.applySort = (predicate) => {
 		const direction = (predicate === vm.activeSort.predicate && vm.activeSort.direction === 'asc') ? 'desc' : 'asc';
 		$state.go($state.current.component, { sort: `${predicate}:${direction}` });

src/components/address/address.html

@@ -102,6 +102,14 @@ <h1>
 			<uib-tab-heading><span class="glyphicon glyphicon glyphicon-book"></span> Transactions</uib-tab-heading>
 			<div data-ng-if="vm.address.balance" data-ng-init="vm.txs.loadData()">
 				<transactions-filter data-txs="vm.txs" data-address="vm.address.address"></transactions-filter>
+				<div class="transactions-filter-header horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l double" role="group"
+					aria-label="All/Sent/Received Transactions">
+						<button data-ng-click="vm.loadPreset('all');">Show all</button>
+						<button data-ng-click="vm.loadPreset('typeZero');">Transfers</button>
+						<button data-ng-click="vm.loadPreset('sent')">Sent</button>
+						<button data-ng-click="vm.loadPreset('received');">Received</button>
+						<button data-ng-click="vm.loadPreset('voting');" class="hidden-xs">Voting</button>
+				</div>
 				<transactions-list data-txs="vm.txs" data-address="vm.address.address"></transactions-list>
 			</div>
 		</uib-tab>