filter option

android/app/capacitor.build.gradle

@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-camera')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
     implementation "androidx.core:core:1.6.+"
 }

android/capacitor.settings.gradle

@@ -14,5 +14,8 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

capacitor.config.ts

@@ -6,6 +6,18 @@ const config: CapacitorConfig = {
   webDir: 'www',
   server: {
     androidScheme: 'https'
+  },
+  plugins:{
+    SplashScreen:{
+      launchShowDuration:2000,
+      backgroundColor:"#fff",
+      showSpinner:false,
+      androidSpinnerStyle:"small",
+      iosSpinnerStyle:"small",
+      splashFullScreen:true,
+      splashImmersive:true,
+
+    }
   }
 };
 

src/app/authencation/login/login.component.ts

@@ -7,6 +7,7 @@ import { PdtriggerService } from 'src/providers/pdtrigger/pdtrigger.service';
 import { environment } from 'src/environments/environment';
 import { ToastService } from 'src/providers/common-provider/toast.service';
 import { OtpComponent } from '../otp/otp/otp.component';
+import { PdAdvanceFilterComponent } from 'src/app/pages/pd-list/pd-advance-filter/pd-advance-filter.component';
 
 @Component({
   selector: 'app-login',
@@ -198,6 +199,8 @@ getCommonSettings(){
     const email = this.loginForm.get('email').value;
     const password = this.loginForm.get('password').value;
     return !email && !password;
-}
+  }
+
+
 
 }

src/app/pages/page.module.ts

@@ -5,14 +5,19 @@ import { PageRoutingModule } from './page-routing.module';
 import { PdListComponent } from './pd-list/pd-list.component';
 import { IonicModule } from '@ionic/angular';
 import { SharedModule } from 'src/shared/shared.module';
+import { PdAdvanceFilterComponent } from './pd-list/pd-advance-filter/pd-advance-filter.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatNativeDateModule } from '@angular/material/core';
  
 
 @NgModule({
-  declarations: [PdListComponent],
+  declarations: [PdListComponent,PdAdvanceFilterComponent],
   imports: [
     CommonModule,
     PageRoutingModule,
     SharedModule,
+    ReactiveFormsModule,
+    MatNativeDateModule,
     IonicModule.forRoot(),
   ]
 })

src/app/pages/pd-list/pd-advance-filter/pd-advance-filter.component.html

@@ -0,0 +1,82 @@
+<!--
+  Generated template for the AdvanceFilterPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+  <ion-toolbar>
+    <ion-title><ion-icon name="options" style="font-size: 18px;"></ion-icon> &nbsp;Advanced Filter</ion-title>
+    <ion-buttons slot="end">
+      <ion-button clear (click)="closeModal()">
+        <ion-icon name="close" style="font-size: 20px;"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header> 
+
+
+<ion-content padding> 
+  <mat-card class="cardUI">
+    <form [formGroup]="searchForm" fxLayout="row wrap" fxFlex="100%" fxLayoutGap="35px" fxLayoutAlign="flex-start stretch">
+      <mat-form-field style="width: 100%" *ngIf="from_page != 'complete_list'">
+        <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+          <mat-option *ngFor="let status of pdStatus" [value]="status.pd_status_name">{{status.pd_status_name}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field> 
+      <mat-form-field style="width:100%">
+        <input matInput [matDatepicker]="picker"  [max]="todaydate"
+          formControlName="pd_from_date" placeholder="Choose a From date">
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field style="width:100%">
+        <input matInput [matDatepicker]="picker1" [min]="searchForm.get('pd_from_date').value" [max]="todaydate"
+          formControlName="pd_to_date" placeholder="Choose a To date">
+        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field style="width:100%">
+        <mat-select multiple formControlName="pd_products" placeholder="Products">
+          <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.abbr}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <!-- <mat-form-field style="width:100%">
+              <mat-select multiple formControlName="pd_city" placeholder="City">
+                  <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+              </mat-select>
+          </mat-form-field> &nbsp; &nbsp; -->
+       <!-- <mat-form-field style="width:100%">
+        <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+          <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+        </mat-select>
+      </mat-form-field>  -->
+      <mat-form-field style="width:100%">
+        <input matInput type="text" formControlName="pd_applicant_name" placeholder="Applicant Name">
+      </mat-form-field> 
+      <!-- <mat-form-field style="width: 100%">
+        <input matInput type="text" formControlName="pd_officer" placeholder="PD Officer Name">
+      </mat-form-field> -->
+      <!-- <div fxLayout="row wrap">
+                  <div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex="45%">
+                      <mat-checkbox class="example-margin" color="primary" formControlName="is_include_archived">Include Archived</mat-checkbox>
+                  </div>
+              </div> --> 
+            </form> 
+          </mat-card>
+            
+</ion-content>
+<ion-footer>
+  <ion-row>
+    <ion-col class="ion-text-end">
+      <ion-button (click)="onReset()">
+        <ion-icon name="refresh" style="font-size: 18px; color: #fff;"></ion-icon>
+      </ion-button> 
+  
+      <ion-button (click)="searchItem()">
+        <ion-icon name="search" style="font-size: 18px; color: #fff;"></ion-icon>
+      </ion-button> 
+    </ion-col>
+  </ion-row>  
+ </ion-footer>

src/app/pages/pd-list/pd-advance-filter/pd-advance-filter.component.scss

@@ -0,0 +1,33 @@
+@import '../../../../theme/filter-modal.scss';
+
+ 
+::ng-deep .toolbar-background{
+    --background: none; /* Set it to none to clear the background */ 
+      border-color: #b2b2b2 ;
+      background: #fff !important;
+      
+  }
+  .toolbar-title-md{
+    color: #fff !important;
+  }
+
+ ::ng-deep .filterModal {
+    --width: 82% !important;
+    --height: 80% !important;
+    --max-width: 52vh !important;
+    --max-height: 77vh !important;
+    --border-radius: 10px;
+}
+.mt{
+    margin-top: 2rem;
+}
+
+.cardUI{
+    padding: 1rem;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    background-color: #ffffff61;
+    // border-radius: 10px;
+}
+::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) {
+    background-color: unset !important;
+}

src/app/pages/pd-list/pd-advance-filter/pd-advance-filter.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PdAdvanceFilterComponent } from './pd-advance-filter.component';
+
+describe('PdAdvanceFilterComponent', () => {
+  let component: PdAdvanceFilterComponent;
+  let fixture: ComponentFixture<PdAdvanceFilterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PdAdvanceFilterComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PdAdvanceFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/pd-list/pd-advance-filter/pd-advance-filter.component.ts

@@ -0,0 +1,141 @@
+import { DatePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ModalController, NavController, NavParams } from '@ionic/angular';
+import { AuthService } from 'src/app/authencation/auth-service/auth.service';
+import { LoadingService } from 'src/providers/common-provider/loading.service';
+import { ToastService } from 'src/providers/common-provider/toast.service';
+import { PdtriggerService } from 'src/providers/pdtrigger/pdtrigger.service';
+
+@Component({
+  selector: 'app-pd-advance-filter',
+  templateUrl: './pd-advance-filter.component.html',
+  styleUrls: ['./pd-advance-filter.component.scss'],
+})
+export class PdAdvanceFilterComponent  implements OnInit {
+  todaydate: Date;
+  from_page: any;
+  drop_down_datas: any;
+  searchForm:FormGroup | any;
+  PRODUCTS: any=[];
+  pdStatus: any;
+  ENTITY: any=[];
+  xpandStatus: boolean = false;
+  pipe=new DatePipe('en-US');
+
+  constructor(private pdTriggerProvider:PdtriggerService,private _fb:FormBuilder,private modalController: ModalController,public navCtrl: NavController, public navParams: NavParams,public aws: AuthService,private toastProvider:ToastService,private loaderProvider:LoadingService) { 
+    this.todaydate = new Date();
+     this.getDropdown();
+    this.from_page = this.navParams.get('FormDet');
+    console.log(this.from_page);
+    if(this.from_page){
+      this.from_page =this.from_page.from_page
+    }
+  }
+
+  ngOnInit() {
+    let users:any = localStorage.getItem('user_details')
+    let local:any = JSON.parse(users);
+    console.log('local****',local);
+    this.drop_down_datas = this.navParams.get('drop_down_datas');
+    console.log(this.drop_down_datas)
+    this.setDropDownDatas()
+    console.log(this.drop_down_datas);
+    this.searchForm = this._fb.group({
+      pd_status:[''],
+      pd_from_date:[''],
+      pd_to_date:[''],
+      pd_products:[''],
+      pd_lender:[local.fk_entity_id],
+      pd_applicant_name:[''],
+      // pd_officer:[''],
+      // pd_officer_id:[''],
+      // pd_type:[''],    
+      // pd_name:[null],
+      // pd_applicant_id:[null],
+    })
+    console.log(this.drop_down_datas)
+  }
+
+  getDropdown(){
+    this.pdTriggerProvider.getAllMasterDatas('PRODUCTS').subscribe((res:any)=>{
+      if(res.dataStatus==true)
+      {
+        this.PRODUCTS = res.records.filter((pro:any)=>pro.isactive==1);
+      }
+    });
+    this.pdTriggerProvider.getAllMasterDatas("PDSTATUS").subscribe((res:any)=>{
+      if(res.dataStatus==true)
+      {
+        this.pdStatus = res.records.filter((pro:any)=>(pro.isactive==1));
+      }
+    });
+  }
+
+  setDropDownDatas(){
+    console.log(this.drop_down_datas)
+    if(this.drop_down_datas != undefined){
+      this.pdStatus=this.drop_down_datas.pd_status
+      if(this.ENTITY.length != 0) {
+        this.entityCheck()
+      }
+      else{
+        setTimeout(()=>{this.entityCheck()},500)
+      }
+      if(this.PRODUCTS.length != 0) {
+        this.productCheck()
+      }
+      else{
+        setTimeout(()=>{this.productCheck()},500)
+      }
+    }
+  }
+  productCheck(){
+    this.PRODUCTS=this.PRODUCTS.filter((val:any)=>{
+      if(this.drop_down_datas.product_ids.filter((dp:any)=>dp == val.product_id).length > 0){
+        return val
+      }
+    })
+  }
+
+  entityCheck(){
+    this.ENTITY=this.ENTITY.filter((val:any)=>{
+      if(this.drop_down_datas.lender_ids.filter((dp:any)=>dp == val.entity_id).length > 0){
+        return val
+      }
+    })
+  }
+
+  searchItem(){
+    this.loaderProvider.pdloader('fetching data')
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date,'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date,'yyyy-MM-dd');
+    // console.log(JSON.stringifythis.searchForm.value);
+    this.xpandStatus=true;
+    this.pdTriggerProvider.advancedFilter(this.searchForm.value).subscribe(res=>{
+      if(res.dataStatus){
+        console.log(res);  
+        this.loaderProvider.dismissLoader();
+        this.modalController.dismiss(res['records']);
+      }
+      else{
+        // this.filteredlistData.emit(res)
+        this.loaderProvider.dismissLoader()
+        this.toastProvider.lenderappmessage('No Records Found...!')
+      }
+    })
+  }
+
+  onReset(){
+    this.searchForm.reset();   
+    let users:any = localStorage.getItem('user_details')
+    let local:any = JSON.parse(users);
+    local=local.fk_entity_id
+    this.searchForm.controls['pd_lender'].setValue(local);
+  }
+
+  closeModal() {
+    this.modalController.dismiss();
+  }
+
+}

src/app/pages/pd-list/pd-list.component.html

@@ -5,10 +5,10 @@
     </ion-buttons>
     <ion-title>Sales PD List</ion-title>
     <!-- <ion-buttons slot="end">
-      <ion-button (click)="advancefilter()">
+      <ion-button (click)="openFilterModal()">
         <ion-icon name="options" style="font-size: 23px;"></ion-icon>
       </ion-button>
-    </ion-buttons> -->
+    </ion-buttons>
     <ion-buttons slot="end">
       <ion-button (click)="takePicture()">
         <ion-icon name="camera-outline"  style="font-size: 23px;"></ion-icon>
@@ -18,14 +18,36 @@
       <ion-button (click)="logout()">
         <ion-icon name="exit-outline"  style="font-size: 23px;"></ion-icon>
       </ion-button>
-    </ion-buttons>
+    </ion-buttons> -->
   </ion-toolbar>
 </ion-header>
 
 <ion-content padding >
+  <ion-fab slot="fixed" vertical="top" horizontal="end" [edge]="true">
+    <ion-fab-button size="small">
+      <ion-icon name="chevron-down-circle"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="bottom">
+      <ion-fab-button (click)="openFilterModal()">
+        <ion-icon name="options"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button (click)="takePicture()">
+        <ion-icon name="camera-outline"></ion-icon> 
+      </ion-fab-button>
+      <ion-fab-button (click)="newForm()" *ngIf="is_sales_login"> 
+        <ion-icon name="add"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button (click)="logout()">
+        <ion-icon name="exit-outline"></ion-icon> 
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
+
   <!-- <div class="pdf_source">
     <pdf-viewer [src]="reportSrc" [render-text]="true" [original-size]="false" [autoresize]="true" style="display: block;"></pdf-viewer>
   </div> -->
@@ -73,9 +95,9 @@
       </ion-item-options>
     </ion-item-sliding>
   </ion-list> 
-  <ion-fab slot="fixed" vertical="bottom" horizontal="end" (click)="newForm()" *ngIf="is_sales_login">
+  <!-- <ion-fab slot="fixed" vertical="bottom" horizontal="end" (click)="newForm()" *ngIf="is_sales_login">
     <ion-fab-button size="small">
       <ion-icon name="add"></ion-icon>
     </ion-fab-button> 
-  </ion-fab> 
+  </ion-fab>  -->
 </ion-content>

src/app/pages/pd-list/pd-list.component.ts

@@ -7,6 +7,7 @@ import { IonicStorageService } from 'src/providers/ionic-storage/ionic-storage.s
 import { SalesPdService } from '../providers/sales-pd/sales-pd.service';
 import { environment } from 'src/environments/environment';
 import { Camera, CameraResultType } from '@capacitor/camera';
+import { PdAdvanceFilterComponent } from './pd-advance-filter/pd-advance-filter.component';
 
 
 const pd_key ='local_sales_PDs'
@@ -29,8 +30,16 @@ export class PdListComponent  implements OnInit {
   visibleItems: any[] = []; // Items to display in the current view
   itemsPerView = 10; // Number of items to display at a time
   startIndex = 0; // Start index of the visible range
+  pdlistaccess:boolean = false;
+  pdinprogress: any=[];
+  pdlistdetails: any=[];
+  searchinprogress: any;
+  searchpast: any;
+  bgColor: any=[];
+  status: any;
+  bgColorPast: any=[];
 
-  constructor(public Menu:MenuController,public aws:AuthService,public actionSheetCtrl: ActionSheetController,public navCtrl: NavController,private toastProvider:ToastService,private loaderProvider:LoadingService,private modalCtrl:ModalController,
+  constructor(private modalController: ModalController,public Menu:MenuController,public aws:AuthService,public actionSheetCtrl: ActionSheetController,public navCtrl: NavController,private toastProvider:ToastService,private loaderProvider:LoadingService,private modalCtrl:ModalController,
     private ionicStorageService:IonicStorageService,public salesPDService:SalesPdService) {
 
     let userDetails:any = localStorage.getItem('user_details');
@@ -320,4 +329,79 @@ export class PdListComponent  implements OnInit {
     const theActualPicture = image.dataUrl;
   }
 
+  async openFilterModal() {
+    const modalOption = {
+      cssClass: 'filterModal'
+    };
+
+    const modal = await this.modalController.create({ 
+      component: PdAdvanceFilterComponent,
+      componentProps: { 'drop_down_datas': this.filter_drop_down_data },
+      ...modalOption
+    });
+
+    await modal.present();
+
+    const { data } = await modal.onDidDismiss();
+
+    if (data) {
+      // this.sales_displayValue = data;
+      this.filterMsg=false
+      this.loader_access=false
+      this.pdlistaccess = true;
+      this.pdinprogress =  data.filter((past:any)=>past.pd_status !="QC_COMPLETED");
+      this.searchinprogress =  this.pdinprogress; 
+      this.pdlistdetails = data.filter((past:any)=>past.pd_status =="QC_COMPLETED");
+      this.searchpast = this.pdlistdetails;
+
+     //FOR SPLITTING THE VALUE OF pd_sno
+      this.pdinprogress.length >0 ?
+      this.pdinprogress.forEach((value:any)=>{
+        let original=value.pd_sno
+        if(original != null){
+        value.pd_sno_split={lender_name:original.replace(/[^a-z]/gi, ''),serial_no:original.match(/(\d+)/)[0]}
+        }
+        else{
+          value.pd_sno_split={lender_name:'',serial_no:''}
+        }
+      }) : this.pdinprogress
+
+     this.pdlistdetails.length >0 ?
+     this.pdlistdetails.forEach((value:any)=>{
+        let original=value.pd_sno
+        if(original != null){
+        value.pd_sno_split={lender_name:original.replace(/[^a-z]/gi, ''),serial_no:original.match(/(\d+)/)[0]}
+        }
+        else{
+          value.pd_sno_split={lender_name:'',serial_no:''}
+        }
+     }) : this.pdlistdetails
+
+      console.log("ingp",this.pdinprogress);
+      this.random_bg_color();
+      this.random_ng_past();
+    }
+  }
+
+  random_bg_color() {
+    for(let id of this.pdinprogress){
+      var x = Math.floor(Math.random() * 256);
+      var y = Math.floor(Math.random() * 256);
+      var z = Math.floor(Math.random() * 256);
+      this.bgColor.push("rgb(" + x + "," + y + "," + z + ")");
+    }  
+    return this.bgColor;
+  }
+
+  random_ng_past(){
+    for(let id of this.pdlistdetails){
+      this.status = id.pd_status.replace("_"," ");      
+      var x = Math.floor(Math.random() * 256);
+      var y = Math.floor(Math.random() * 256);
+      var z = Math.floor(Math.random() * 256);
+      this.bgColorPast.push("rgb(" + x + "," + y + "," + z + ")");
+      
+    }
+  }
+
 }

src/providers/pdtrigger/pdtrigger.service.ts

@@ -91,5 +91,15 @@ export class PdtriggerService {
     
   }
 
+  getAllMasterDatas(TableName: string): Observable<any> {
+    return this.http.post(this.apiUrl + 'getListOfMaster', { "master_name": TableName })
+        .pipe(
+        // catchError(this.handleError('role', []))
+        )
+  }
+  advancedFilter(params:any): Observable<any>{
+    return this.http.post(this.apiUrl+'filterPDList',{"records":params})
+  }
+
  
 }

src/shared/shared.module.ts

@@ -12,6 +12,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatListModule } from '@angular/material/list';
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatSelectModule } from '@angular/material/select'
 
 
 
@@ -28,7 +30,7 @@ import { MatListModule } from '@angular/material/list';
     MatCheckboxModule,    
     MatChipsModule,
     MatTableModule,
-    // MatDatepickerModule,
+    MatDatepickerModule,
     // MatDialogModule,
     // MatDividerModule,
     // MatExpansionModule,
@@ -42,7 +44,7 @@ import { MatListModule } from '@angular/material/list';
     // MatProgressSpinnerModule,
     // MatRadioModule,
     // MatRippleModule,
-    // MatSelectModule,
+    MatSelectModule,
     // MatSidenavModule,
     // MatSlideToggleModule,
     // MatSliderModule,
@@ -72,7 +74,7 @@ import { MatListModule } from '@angular/material/list';
     MatCheckboxModule,    
     MatChipsModule,
     MatTableModule,
-    // MatDatepickerModule,
+    MatDatepickerModule,
     // MatDialogModule,
     // MatDividerModule,
     // MatExpansionModule,
@@ -86,7 +88,7 @@ import { MatListModule } from '@angular/material/list';
     // MatProgressSpinnerModule,
     // MatRadioModule,
     // MatRippleModule,
-    // MatSelectModule,
+    MatSelectModule,
     // MatSidenavModule,
     // MatSlideToggleModule,
     // MatSliderModule,

src/theme/variables.scss

@@ -197,7 +197,7 @@
    */
 
   .md body {
-    --ion-background-color: #ccc;
+    --ion-background-color: #ffffff;
     --ion-background-color-rgb: 18,18,18;
 
     --ion-text-color: #ffffff;
@@ -231,7 +231,7 @@
 
     --ion-tab-bar-background: #ff0000;
 
-    --ion-card-background: #1e1e1e;
+    --ion-card-background: #1e1e1e; 
   }
 }