Angular Global Same Logic Functions Refactoring

Question

I am trying to atleast clean the component.ts using services or somthing in my angular i have many repetitive code that i trying to fix and refactor. I am trying to apply DRY as possible can i have a suggestion on how approach its hard since its a many declared variables

getSearch(){
    this.option = 2
    this.spinner.show();
    const params = {
        dateFrom: this.form.controls.dateFrom.value,
        dateTo: this.form.controls.dateTo.value,
        sortBy: {
          [this.sort_column]: this.sort_type
        }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter = [];
    this.request.post(Urls.transactionsOverview + '?page=' + this.current_page_filter + '&size=' + this.size_filter, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter = response.result.data;
        this.filterFields = response.result.filterFields
        console.log(this.itemLists_filter)
        console.log(this.filterFields)
        this.selectedOption = "getSearch";
        console.log(this.selectedOption)
          if (this.current_page_filter  === 0  ){
            this.pages_array_filter = [];
            for (let i = this.current_page_filter; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == response.result.totalPages){
            for (let i = this.current_page_filter - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else{
            for (let i = this.current_page_filter - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }
          this.total_pages_filter = parseInt(response.result.totalPages);
          this.current_page_filter = response.result.currentPage;
          this.total_filter = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
    this.form.reset();
  }

  get_search_list(){
    this.option = 2
    this.spinner.show();
    const params = {
      dateFrom: this.filterFields.dateFrom,
      dateTo: this.filterFields.dateTo,
      search: this.search_keyword_filter,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter = [];
    console.log(params)
    this.request.post(Urls.transactionsOverview + '?page=' + this.current_page_filter + '&size=' + this.size_filter, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter = response.result.data;
        this.filterFields = response.result.filterFields
        this.selectedOption = "getSearch";
        console.log(this.selectedOption)
          if (this.current_page_filter  === 0  ){
            this.pages_array_filter = [];
            for (let i = this.current_page_filter; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == response.result.totalPages){
            for (let i = this.current_page_filter - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else{
            for (let i = this.current_page_filter - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }
          this.total_pages_filter = parseInt(response.result.totalPages);
          this.current_page_filter = response.result.currentPage;
          this.total_filter = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
  }

  getSearch2(){
    this.option = 3
    this.spinner.show();
    const params = {
      dateFrom: this.form.controls.dateFrom.value,
      dateTo: this.form.controls.dateTo.value,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter2 = [];
    this.request.post(Urls.transactionsOverview + '?page=' + this.current_page_filter2 + '&size=' + this.size_filter2, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter2 = response.result.data;
        this.filterFields2 = response.result.filterFields
        console.log(this.itemLists_filter2)
        console.log(this.filterFields2)
        this.selectedOption = "getSearch2";
        console.log(this.selectedOption)
          if (this.current_page_filter2  === 0  ){
            this.pages_array_filter2 = [];
            for (let i = this.current_page_filter2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == response.result.totalPages){
            for (let i = this.current_page_filter2 - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else{
            for (let i = this.current_page_filter2 - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }
          this.total_pages_filter2 = parseInt(response.result.totalPages);
          this.current_page_filter2 = response.result.currentPage;
          this.total_filter2 = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
    this.form.reset();
  }

  get_search_list2(){
    this.option = 3
    this.spinner.show();
    const params = {
      dateFrom: this.filterFields2.dateFrom,
      dateTo: this.filterFields2.dateTo,
      search: this.search_keyword_filter2,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter2 = [];
    console.log(params)
    this.request.post(Urls.transactionsOverview + '?page=' + this.current_page_filter2 + '&size=' + this.size_filter2, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter2 = response.result.data;
        this.filterFields2 = response.result.filterFields
        console.log(this.filterFields2)
        this.selectedOption = "getSearch2";
        console.log(this.selectedOption)
          if (this.current_page_filter2  === 0  ){
            this.pages_array_filter2 = [];
            for (let i = this.current_page_filter2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == response.result.totalPages){
            for (let i = this.current_page_filter2 - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else{
            for (let i = this.current_page_filter2 - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }
          this.total_pages_filter2 = parseInt(response.result.totalPages);
          this.current_page_filter2 = response.result.currentPage;
          this.total_filter2 = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
         }
      }).finally(() => {
    });
  }

full reference of the code:

import { Component, OnInit ,  VERSION} from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
import { RequestsService } from 'src/app/core/services/http/requests.service';
import { Urls } from 'src/app/lib/urls';
import { DebounceService } from 'src/app/core/services/debounce.service';
import { NgxSpinnerService } from "ngx-spinner";
// import { ToastrService } from 'ngx-toastr';
// import { DialogService } from 'src/app/services/dialog.service';
// import * as XLSX from 'xlsx';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-cash-in',
  templateUrl: './cash-in.component.html',
  styleUrls: ['./cash-in.component.scss']
})
export class CashInComponent implements OnInit {
  public form: UntypedFormGroup;
  isLoading: boolean;
  itemLists: any;
  search: any;
  tabId: any;
  fileName: any;
  url: any;
  params = {
    search: '',
  }

  // pagination
  page = 1;
  size = 10;
  total_pages: any;
  current_page = 1;
  pages_array = [
  ];
  total: any;
  item: any;
  lastPage: any;

  // paginationfilter
  page_filter = 1;
  size_filter = 10;
  total_pages_filter: any;
  current_page_filter = 1;
  pages_array_filter = [
  ];
  total_filter: any;
  item_filter: any;
  lastPage_filter: any;
  itemLists_filter: any;

  // paginationfilter2
  page_filter2 = 1;
  size_filter2 = 10;
  total_pages_filter2: any;
  current_page_filter2 = 1;
  pages_array_filter2 = [
  ];
  total_filter2: any;
  item_filter2: any;
  lastPage_filter2: any;
  itemLists_filter2: any;

   // search
   searchKey: any = null;
   searchForm : UntypedFormGroup;
   search_keyword = '';

   // searchfilter
   searchKey_filter: any = null;
   searchForm_filter : UntypedFormGroup;
   search_keyword_filter = '';

    // searchfilter2
    searchKey_filter2: any = null;
    searchForm_filter2 : UntypedFormGroup;
    search_keyword_filter2 = '';

   // selection viewALL or search
   option = 0
   selectedOption: any;

   // limit
   limitKey: any = null;
   limitForm : UntypedFormGroup;

   // limitFilter
   limitKey_filter: any = null;
   limitForm_filter: UntypedFormGroup;

    // limitFilter
    limitKey_filter2: any = null;
    limitForm_filter2: UntypedFormGroup;

  // null with default
  name = 'Angular ' + VERSION.major;

  // filterfields
  filterFields: any;
  filterFields2: any;

  // payment method
  paymentMethodType_text: any;
  paymentMethod: any;

  // account type
  statusType_text: any;
  status: number;

  // sorting
  sort_column = "dateTime";
  sort_type = "ASC";

  submitted = false;

  constructor(
    private fb : UntypedFormBuilder,
    public debounce: DebounceService,
    private request: RequestsService,
    private spinner: NgxSpinnerService,
    private apiService: ApiService
  ) {
    this.initializeForm();
  }

  ngOnInit(): void {
    const tableHeader = document.getElementsByTagName("th");
    for (let i = 0; i < tableHeader.length; i++) {
      tableHeader[i].classList.add("headerSortDown");
    }
    this.get_List();
    this.testGetCashInTransactions();
  }
  getSearch(){
    this.option = 2
    this.spinner.show();
    const params = {
      transactionId: this.form.controls.transactionId.value,
      firstName: this.form.controls.firstName.value,
      middleName: this.form.controls.middleName.value,
      lastName: this.form.controls.lastName.value,
      phoneNumber: this.form.controls.phoneNumber.value,
      dateFrom: this.form.controls.dateFrom.value,
      dateTo: this.form.controls.dateTo.value,
      paymentMethod: this.paymentMethod,
      status: this.status,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter = [];
    this.request.post(Urls.transactionsCashin + '?page=' + this.current_page_filter + '&size=' + this.size_filter, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter = response.result.data;
        this.filterFields = response.result.filterFields
        console.log(this.itemLists_filter)
        console.log(this.filterFields)
        this.selectedOption = "getSearch";
        console.log(this.selectedOption)
          if (this.current_page_filter  === 0  ){
            this.pages_array_filter = [];
            for (let i = this.current_page_filter; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == response.result.totalPages){
            for (let i = this.current_page_filter - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else{
            for (let i = this.current_page_filter - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }
          this.total_pages_filter = parseInt(response.result.totalPages);
          this.current_page_filter = response.result.currentPage;
          this.total_filter = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
    this.form.reset();
    this.paymentMethod = null;
    this.status = null;
    this.paymentMethodType_text = null;
    this.statusType_text = null;
  }

  get_search_list(){
    this.option = 2
    this.spinner.show();
    const params = {
      transactionId: this.filterFields.transactionId,
      firstName: this.filterFields.firstName,
      middleName: this.filterFields.middleName,
      lastName: this.filterFields.lastName,
      phoneNumber: this.filterFields.phoneNumber,
      dateFrom: this.filterFields.dateFrom,
      dateTo: this.filterFields.dateTo,
      paymentMethod: this.filterFields.paymentMethod,
      status: this.filterFields.status,
      search: this.search_keyword_filter,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter = [];
    console.log(params)
    this.request.post(Urls.transactionsCashin + '?page=' + this.current_page_filter + '&size=' + this.size_filter, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter = response.result.data;
        this.filterFields = response.result.filterFields
        this.selectedOption = "getSearch";
        console.log(this.selectedOption)
          if (this.current_page_filter  === 0  ){
            this.pages_array_filter = [];
            for (let i = this.current_page_filter; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else if (this.current_page_filter == response.result.totalPages){
            for (let i = this.current_page_filter - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }else{
            for (let i = this.current_page_filter - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter.push(i);
            };
          }
          this.total_pages_filter = parseInt(response.result.totalPages);
          this.current_page_filter = response.result.currentPage;
          this.total_filter = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
  }

  getSearch2(){
    this.option = 3
    this.spinner.show();
    const params = {
      transactionId: this.form.controls.transactionId.value,
      firstName: this.form.controls.firstName.value,
      middleName: this.form.controls.middleName.value,
      lastName: this.form.controls.lastName.value,
      phoneNumber: this.form.controls.phoneNumber.value,
      dateFrom: this.form.controls.dateFrom.value,
      dateTo: this.form.controls.dateTo.value,
      paymentMethod: this.paymentMethod,
      status: this.status,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter2 = [];
    this.request.post(Urls.transactionsCashin + '?page=' + this.current_page_filter2 + '&size=' + this.size_filter2, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter2 = response.result.data;
        this.filterFields2 = response.result.filterFields
        console.log(this.itemLists_filter2)
        console.log(this.filterFields2)
        this.selectedOption = "getSearch2";
        console.log(this.selectedOption)
          if (this.current_page_filter2  === 0  ){
            this.pages_array_filter2 = [];
            for (let i = this.current_page_filter2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == response.result.totalPages){
            for (let i = this.current_page_filter2 - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else{
            for (let i = this.current_page_filter2 - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }
          this.total_pages_filter2 = parseInt(response.result.totalPages);
          this.current_page_filter2 = response.result.currentPage;
          this.total_filter2 = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
    this.form.reset();
    this.paymentMethod = null;
    this.status = null;
    this.paymentMethodType_text = null;
    this.statusType_text = null;
  }

  get_search_list2(){
    this.spinner.show();
    const params = {
      transactionId: this.filterFields2.transactionId,
      firstName: this.filterFields2.firstName,
      middleName: this.filterFields2.middleName,
      lastName: this.filterFields2.lastName,
      phoneNumber: this.filterFields2.phoneNumber,
      dateFrom: this.filterFields2.dateFrom,
      dateTo: this.filterFields2.dateTo,
      paymentMethod: this.filterFields2.paymentMethod,
      status: this.filterFields2.status,
      search: this.search_keyword_filter2,
      sortBy: {
        [this.sort_column]: this.sort_type
      }
    }
    localStorage.setItem('itemLists', JSON.stringify(params));
    this.pages_array_filter2 = [];
    console.log(params)
    this.request.post(Urls.transactionsCashin + '?page=' + this.current_page_filter2 + '&size=' + this.size_filter2, params).then(response => {
      if (response.status == 200){
        this.itemLists_filter2 = response.result.data;
        this.filterFields2 = response.result.filterFields
        console.log(this.filterFields2)
        this.selectedOption = "getSearch2";
        console.log(this.selectedOption)
          if (this.current_page_filter2  === 0  ){
            this.pages_array_filter2 = [];
            for (let i = this.current_page_filter2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else if (this.current_page_filter2 == response.result.totalPages){
            for (let i = this.current_page_filter2 - 2; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }else{
            for (let i = this.current_page_filter2 - 1; i <= response.result.totalPages; i++){
              this.pages_array_filter2.push(i);
            };
          }
          this.total_pages_filter2 = parseInt(response.result.totalPages);
          this.current_page_filter2 = response.result.currentPage;
          this.total_filter2 = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
  }

  get_List(){
      this.option = 1
      this.spinner.show();
      const params = {
        search : this.search_keyword,
        sortBy: {
          [this.sort_column]: this.sort_type
        }
      }
      this.pages_array = [];
      localStorage.setItem('itemLists', JSON.stringify(params));
      this.request.post(Urls.transactionsCashin + '?page=' + this.current_page + '&size=' + this.size, params).then(response => {
      this.itemLists = response.result.data;
        if (response.status == 200){
          if (this.current_page  === 0  ){
            this.pages_array = [];
            for (let i = this.current_page; i <= response.result.totalPages; i++){
              this.pages_array.push(i);
            };
          }else if (this.current_page == 1){
            for (let i = 1; i <= response.result.totalPages; i++){
              this.pages_array.push(i);
            };
          }else if (this.current_page == response.result.totalPages){
            for (let i = this.current_page - 2; i <= response.result.totalPages; i++){
              this.pages_array.push(i);
            };
          }else{
            for (let i = this.current_page - 1; i <= response.result.totalPages; i++){
              this.pages_array.push(i);
            };
          }
          this.total_pages = parseInt(response.result.totalPages);
          this.current_page = response.result.currentPage;
          this.total = parseInt(response.result.totalItems);
          setTimeout(() => {
            this.spinner.hide();
          }, 500);
        }
      }).finally(() => {
    });
  }

refactor and non repetitive code as possible using service or other approach that i can use.

Collectives™ on Stack Overflow

Angular Global Same Logic Functions Refactoring

0

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest