#### Repository https://github.com/nirvanaitsolutions/swapsteem #### New Features #### Feature 1 - This contribution is related to utopian [Task Request](https://steemit.com/utopian-io/@aneilpatel/task-request--swapsteem--complete-the-search-feature-on-swapsteem-coq4aeoy). As a solution to this Issue, I had to implement Search Feature In Buy and Sell Tables - Search criteria : - Search From Trade type('BUY', 'SELL') - Search From Currency('INR', 'USD', 'KRW') - Search From Coin Type('STEEM', 'SBD') - Search From Payment Method('Bank Transfer', 'In Cash', 'PayPal') // Payment Method not yet implemented but code is there we will use this code we have multiple Payment Method Option To complete this feature, I have implemented a cool (Observable & Subscriber ) feature of Rxjs Library in Service and the Seller and buyer component ```js private filterCurrency = new BehaviorSubject(false); currenyFilter = this.filterCurrency.asObservable(); private filterAdCoin = new BehaviorSubject(false); adCoinFilter = this.filterAdCoin.asObservable(); private filterPaymentMethod = new BehaviorSubject(false); paymentMethodFilter = this.filterPaymentMethod.asObservable(); private filterAdType = new BehaviorSubject(false); adTypeFilter = this.filterAdType.asObservable(); changefilter(ad_type, currency, ad_coin, payment_methods) { // Change Value for all Observable this.filterCurrency.next(currency); this.filterAdCoin.next(ad_coin); this.filterPaymentMethod.next(payment_methods); this.filterAdType.next(ad_type); } ``` In the above code, I have declared some Observable with BehaviorSubject and changefilter() function whichis called when we apply filter this function usin Rxjx Next() feature of Observable to call Observable subscriber ```js // Added suscribe for all filter(Observable) for real time data change this.adverstisementService.currenyFilter.subscribe(filter => this.currenyFilter = filter) this.adverstisementService.adCoinFilter.subscribe(filter => this.adCoinFilter = filter) this.adverstisementService.paymentMethodFilter.subscribe(filter => this.paymentMethodFilter = filter) this.adverstisementService.adTypeFilter.subscribe(filter => this.adTypeFilter = filter) showElement(sellSteem) { // Hack for show hide data In Table according to filter if (this.adTypeFilter && this.adTypeFilter !== 'SELL') { return true; } if (this.currenyFilter && sellSteem.currency !== this.currenyFilter) { return false; } if (this.adCoinFilter && sellSteem.ad_coin !== this.adCoinFilter) { return false; } if (this.paymentMethodFilter && sellSteem.payment_methods.indexOf(this.paymentMethodFilter) === -1) { return false; } return true; } ``` Inside the Search component, I have subscribed all the Observable of service and use One showElement() function for show hide data in a table ``` js currency_options = ['INR', 'USD', 'KRW']; ad_coin_options = ['STEEM', 'SBD']; payment_methods_options = ['Bank Transfer', 'In Cash', 'PayPal']; ad_type_options = ['BUY', 'SELL']; searchResult(ad_type, ad_coin, currency, payment_methods) { if (ad_type === 'SELL') { this.router.navigate(['/sell-online']) } else if (ad_type === 'BUY') { this.router.navigate(['/buy-online']) } this.adverstisementService.changefilter(ad_type, currency, ad_coin, payment_methods) } ``` In the above code, I have declared some Options for search and and function which is called when we click on Search Button. You can test the search feature on www.swapsteem.online or refer to below screen shot. ![Screenshot from 2019-01-25 01-52-45.png](https://ipfs.busy.org/ipfs/QmYrxM3TVkP8dxXYL2Ler8Q1xvGXD5euQBfTPECskYB2Jc) ![Screenshot from 2019-01-25 01-52-45.png](https://ipfs.busy.org/ipfs/QmYrxM3TVkP8dxXYL2Ler8Q1xvGXD5euQBfTPECskYB2Jc) #### Feature 2 This feature is related to Adding new Font to our site and add Font-awesome support in Our site. So as a solution of this feature I have added CDN for the both in index.html file ``` ``` New Fonts of site looks Preety Cool and yeah, we can add Icons here as well. You can Check the new fonts throught the app. #### Feature 3 This feature is related to Add Pagination in Tables, so as a solution to this feature, I have added `ngx-pagination` Library from angular to all the applicable tables. ```

Seller	Payment	Coin	Fiat	Limits	Price/Coin
{{sellSteem.createdby}}	{{sellSteem.payment_methods}}	{{sellSteem.ad_coin}}	{{sellSteem.currency}}	{{sellSteem.limit_from}} - {{sellSteem.limit_to}}	{{calculatePrice(sellSteem.ad_coin,sellSteem.currency, sellSteem.margin)}}

``` You can see the pagination implemented in below scronshot. ![Screenshot from 2019-01-25 02-00-36.png](https://ipfs.busy.org/ipfs/QmbYUvZ1aCmyG1it9C1cjjS57LV5G5RWSNZkHESDLnHqhq) #### Feature 4 This Feature is related to Improve Ux for the user. We had to add loader when we hit an API request so we can tell them we are fetching Data from our server. As a solution for this feature i have added a library from angular called `ngx-ui-loader` which is pretty awesome library for showing Loader and has lots of feature which we add in future according to our requirments. The loader has been implemented for all the API asynchronous operations by calling the ngxService.start() and stop() methods as shown in below code snippets. ``` this.ngxService.start(); this.sellDetails = this.purchaseSer.getSellAds(); this.sellDetails.subscribe((data) => { this.ngxService.stop(); }) ``` You can see the loader in action in below screenshot. ![Screenshot from 2019-01-25 02-02-39.png](https://ipfs.busy.org/ipfs/QmZzgaso1dszwNWNhsySApuGTYCwyK6UCCahWKL1CJ9fjW) #### Feature 5 This contribution is related to display users a message when there is no data in the table. I have added a Simple message there. ``` this.openAds.subscribe((data) => { // Hack for check data existance if (data.length === 0) { this.noAds = true; } else { this.noAds = false; } })

No Data! Go play Around to see something here

Post a trade

``` You can see the message in empty tables as given in the following screenshot. ![Screenshot from 2019-01-25 02-04-56.png](https://ipfs.busy.org/ipfs/QmcWrnFrigRtAjoWfMx4vwxhszDBrzgUcjdXpBejiDv6nX) #### Bug Fixes - API Response error handling and varius small bug Fixes #### Relevant PRs and Commits - [Search Functionality Added ](https://github.com/nirvanaitsolutions/swapsteem/pull/32) - [UI Tweaks](https://github.com/nirvanaitsolutions/swapsteem/pull/37) #### GitHub Account https://github.com/bunyy