My First contribution to Utopian - SwapSteem - Added Features

Repository

https://github.com/nirvanaitsolutions/swapsteem

New Features

Feature 1

• This contribution is related to utopian Task Request. 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

  private filterCurrency = new BehaviorSubject<any>(false);
  currenyFilter = this.filterCurrency.asObservable();
  private filterAdCoin = new BehaviorSubject<any>(false);
  adCoinFilter = this.filterAdCoin.asObservable();
  private filterPaymentMethod = new BehaviorSubject<any>(false);
  paymentMethodFilter = this.filterPaymentMethod.asObservable();
  private filterAdType = new BehaviorSubject<any>(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

    // 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

  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.

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

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700' />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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.

<table class="table table-striped" *ngIf="emptySell === false">
      <tr>
        <th class="">Seller</th>
        <th class="">Payment</th>
        <th class="">Coin</th>
        <th class="">Fiat</th>
        <th class="">Limits</th>
        <th class="">Price/Coin</th>
        <th></th>
      </tr>
      <tr *ngFor="let sellSteem of sellDetails | async  | tradePipe: 'ad_status' : 'pause' | paginate: {id: 'foo', itemsPerPage: 5, currentPage: q }">
        <td *ngIf="showElement(sellSteem)">{{sellSteem.createdby}}</td>
        <td *ngIf="showElement(sellSteem)">{{sellSteem.payment_methods}}</td>
        <td *ngIf="showElement(sellSteem)">{{sellSteem.ad_coin}}</td>
        <td *ngIf="showElement(sellSteem)">{{sellSteem.currency}}</td>
        <td *ngIf="showElement(sellSteem)">{{sellSteem.limit_from}} - {{sellSteem.limit_to}}</td>
        <td *ngIf="showElement(sellSteem)">
          <span>{{calculatePrice(sellSteem.ad_coin,sellSteem.currency, sellSteem.margin)}}</span>
        </td>
        <td *ngIf="showElement(sellSteem)">
          <button type="button" class="btn btn-danger btn-sm badge badge-pill" (click)="sellTrade(sellSteem)">SELL</button>
        </td>
      </tr>
    </table>
    (html comment removed:  Using Id for different Pagination on different Table)
    <pagination-controls *ngIf="emptySell === false"  id="foo" (pageChange)="q = $event" class="page-controls"></pagination-controls>

You can see the pagination implemented in below scronshot.

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.

<ngx-ui-loader></ngx-ui-loader>
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.

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;
        }
      })
    
     <div *ngIf="noAds" class="no-data">
        <p>No Data! Go play Around to see something here</p>
        <a routerLink="/post-trade">Post a trade</a>
      </div>

You can see the message in empty tables as given in the following screenshot.

Bug Fixes

• API Response error handling and varius small bug Fixes

Relevant PRs and Commits

• Search Functionality Added
• UI Tweaks

GitHub Account

https://github.com/bunyy