Угловой фильтр по 2 датам - PullRequest
3 голосов
/ 30 мая 2019

Мне нужно добавить фильтр диапазона дат.Значит мне нужно показывать только те данные, которые пользователь вводит от даты и до даты.У меня есть массив данных, в котором отображается только одна дата.Но я хочу отфильтровать его так, как этот пользователь вводит любые 2 даты (От и До) И в массиве я показываю только те данные, которые находятся между датами ввода.

   <div class="row">
   <div class="col-12">
     <div class="content-header">Claims Status</div>
       <p class="content-sub-header">Claims Settled 23</p>
   </div>
  </div>

 <section id="extended">

   <div class="row">
     <div class="col-sm-12">
       <div class="card">

    <div class="row" >
     <div class="col-sm bg-primary text-white" style="text-align: center;" ><div>Claims<br>(settled)</div><div *ngIf="statusunsettledcc">  {{statusunsettledcc}}</div></div>
    <div class="col-sm bg-success text-white" style="text-align: center;"><div>Claim Ammount<br>(settled)</div><div *ngIf="statusunsettledammount">{{statusunsettledammount | number : fractionSize}}</div></div>
    <div class="col-sm bg-danger text-white" style="text-align: center;" ><div>Claims<br>(unsettled)</div><div *ngIf="status2settledcc">{{status2settledcc}}</div></div>
    <div class="col-sm bg-warning text-white" style="text-align: center;"><div>Claim Ammount<br>(unsettled)</div><div *ngIf="status2settledammount">{{status2settledammount | number : fractionSize}}</div></div>
    </div>


  <div class="card-header">
    <div class="card-title-wrap bar-success">
      <h4 class="card-title">Claims</h4>
    </div>
  </div>
  <div class="card-body">
    <div class="card-block">

      <div class="row">
        <div class="col-md-3">
          <div class="form-group" >
            <label for="">Search Name</label>

            <input type="text" class="form-control" [(ngModel)]="userFilter.member_name" placeholder="Search name" name="search">
          </div>
        </div>

        <div class="col-md-3">
          <div class="form-group" >
            <label for="">Search Claim No</label>
            <input type="search"
            class="form-control" placeholder="Claim No" [(ngModel)]="userFilter.claim_no">
          </div>
        </div>

   <div class="col-md-3 form-group">
        <input type="date" class="form-control" [(ngModel)]="from"> //From date
    </div>
    <div class="col-md-3 form-group">
        <input type="date" class="form-control" [(ngModel)]="to"> //To Date
    </div>


        <div class="col-md-3" *ngIf="company">
          <div class="form-group">
            <label for="">Company</label>
            <select class="form-control" [(ngModel)]="userFilter.company_id" (change)="getClaims()">
              <option value='' >All</option>
              <option value="999">Airlink Communication</option>
              <option value="637">Ascertia (Pvt) Ltd</option>
              <option value="1053">Frontier Works Organization</option>
              <option value="1174">Ebryx (pvt) Ltd</option>
              <option value="274">HY Enterprises (Pvt) Limited</option>
              <option value="459">Naimat Saleem trust NST (US GROUP)</option>
              <option value="659">Samad Rubber Works (Pvt) Ltd</option>
              <option value="56">Sundry Clients</option>
              <option value="620">TIMEXPERTS (PRIVATE) Limited</option>
              <option value="39">US Apparel & Textile (Pvt) Limited</option>
              <option value="40">US Denim Mills (Pvt) Limited</option>
            </select>
          </div>
        </div>

        <div class="col-md-3">
          <div class="form-group">
            <label for="">Claim Status</label>
            <select class="form-control" [(ngModel)]="userFilter.status">
              <option value='' >All</option>

              <option value="submitted">Submitted</option>
              <option value="approved">Approved</option>
              <option value="cancel">Objection Claim</option>
              <option value="settled">Settled</option>
              <option value="rejected">Rejected</option>
              <option value="CLOSED">Closed</option>
              <option value="OUTSTANDING">Outstanding</option>



            </select>
          </div>
        </div>

        <div class="col-md-3" *ngIf="policyclaim">
          <div class="form-group">
           <label for="">Policy</label>
           <select class="form-control" [(ngModel)]="userFilter.policy_id" (change)="getClaims()" style="width: 400px" >
             <option value='' >Select Policy No</option>

             <option *ngFor="let policy of policynumbers" value="{{policy.policy_id}}">{{policy.policy_id}}</option>

           </select>
         </div>
       </div>

        <div class="col-md-3" *ngIf="policysamad">
          <div class="form-group">
           <label for="">Policy</label>
           <select class="form-control" [(ngModel)]="userFilter.policy_id" (change)="getSamad()" style="width: 400px" >
             <option value='' >Select Policy No</option>

             <option *ngFor="let policy of policynumbers" value="{{policy.policy_id}}">{{policy.policy_id}}</option>

           </select>
         </div>
       </div>


     </div>



     <table class="table table-responsive-md text-center">
      <thead>
        <tr>
          <th>STATUS</th>
          <th>Name</th>
          <th>Patient Name</th>
          <th>Approved Ammount</th>
          <th>Claimed Ammount</th>
          <th>Company</th>
          <th>Submitted By</th>
          <th>Claim No</th>
          <!-- <th>Website URL</th> -->

        </tr>
      </thead>
      <tbody *ngIf="data1">



        <tr *ngFor="let x of data1 | filterBy: userFilter" (click)="openDeal(deletecontent, x)" >





          <td>
            <span class="text-success" *ngIf="x.status == 'submitted'">Submitted</span>
            <span class="text-primary" *ngIf="x.status == 'settled'">Settled</span>
            <span class="text-warning" *ngIf="x.status == 'rejected'">Rejected</span>
            <span class="text-danger" *ngIf="x.status == 'Approved'">Approved</span>
            <span class="text-danger" *ngIf="x.status == 'ojection claim'">Objection claim</span>


          </td>
          <td >
            <div style="text-align: left;">
              <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
              {{x.member_name}}
            </div>
          </td>
          <td style="text-align: left;">{{x.patient_name}}</td>
          <td>{{x.approved_value}}</td>
          <td>{{x.claimed_value}}</td>
          <td>                                      



            <span  class="text-success" *ngIf="x.company_id == '999'" >Airlink Communication</span>
            <span class="text-success" *ngIf="x.company_id == '637'">Ascertia (Pvt) Ltd</span>
            <span *ngIf="x.company_id == '1053'" class="text-success">Frontier Works Organization</span>
            <span *ngIf="x.company_id == '1174'" class="text-success">Ebryx (pvt) Ltd</span>
            <span  *ngIf="x.company_id == '274'" class="text-success">HY Enterprises (Pvt) Limited</span>
            <span *ngIf="x.company_id == '459'" class="text-success">Naimat Saleem trust NST (US GROUP)</span>
            <span *ngIf="x.company_id == '659'" class="text-success">Samad Rubber Works (Pvt) Ltd</span>
            <span *ngIf="x.company_id == '56'" class="text-success">Sundry Clients</span>
            <span *ngIf="x.company_id == '620'" class="text-success">TIMEXPERTS (PRIVATE) Limited</span>
            <span *ngIf="x.company_id == '39'" class="text-success">US Apparel & Textile (Pvt) Limited</span>
            <span *ngIf="x.company_id == '40'" class="text-success">US Denim Mills (Pvt) Limited</span>


          </td>

          <td>{{x.submitted_at || 'not-defined'}}

          </td>
          <td>{{x.claim_no}}</td>

        </tr>
       </tbody>
      </table>
    </div>
   </div>
  </div>
</div>
</div>
</section>

.ts

getClaims(){

this.policyclaim = true;


if(this.userFilter.company_id){
this.url = 'url='+this.userFilter.company_id;

this.httpClient.get<any>('url'+this.userFilter.company_id).subscribe(statuses => {
  console.log(statuses);
  console.log(statuses.records[0].Amount);
  this.statusunsettledammount = statuses.records[0].Amount;
  console.log(this.statusunsettledammount);
    console.log(statuses.records[0].cc);
    this.statusunsettledcc = statuses.records[0].cc;

});

this.httpClient.get<any>('url'+this.userFilter.company_id).subscribe(statuses2 => {
  console.log(statuses2);
    console.log(statuses2.records[0].Amount);
    this.status2settledammount = statuses2.records[0].Amount;
    console.log(this.status2settledammount);
    console.log(statuses2.records[0].cc);
    this.status2settledcc = statuses2.records[0].cc;
    console.log(this.status2settledcc);
});

this.httpClient.get<any>('url'+this.userFilter.company_id).subscribe(policyinfo => {
  console.log(policyinfo);
  this.policynumbers = policyinfo.records;
  console.log(this.policynumbers);
});


}

  if (this.from && this.to) {
    const fromDate = new Date(this.from.split(/\D/));
    const toDate = new Date(this.to.split(/\D/));
    this.data1.filter(obj => new Date(obj.date) > fromDate && new Date(obj.date) < toDate);
    console.log(this.data1);
  }


else 
{
this.url = 'url/get_claims.php?offset=0&limit=50';

this.httpClient.get<any>('http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims_amt.php?cstatus=OUTSTANDING').subscribe(statuses => {
  console.log(statuses);
  console.log(statuses.records[0].Amount);
  this.statusunsettledammount = statuses.records[0].Amount;
  console.log(this.statusunsettledammount);
    console.log(statuses.records[0].cc);
    this.statusunsettledcc = statuses.records[0].cc;

});

this.httpClient.get<any>('url/get_claims_amt.php?cstatus=CLOSED').subscribe(statuses2 => {
  console.log(statuses2);
    console.log(statuses2.records[0].Amount);
    this.status2settledammount = statuses2.records[0].Amount;
    console.log(this.status2settledammount);
    console.log(statuses2.records[0].cc);
    this.status2settledcc = statuses2.records[0].cc;
    console.log(this.status2settledcc);
});


this.httpClient.get<any>('url/insurance-api/get_company_policy.php?').subscribe(policyinfo => {
  console.log(policyinfo);
  this.policynumbers = policyinfo.records;
  console.log(this.policynumbers);
});


}

this.clientData = this.httpClient.get<any>(this.url).
subscribe(data => {
console.log(data);
this.spinner.hide();

this.data1 = data.records;
this.data1.forEach(d => this.policy_id.add(d.policy_id));
console.log(this.userFilter.policy_id);




if(this.userFilter.policy_id){

let vv = this.data1.filter(v => v.policy_id === this.userFilter.policy_id);
console.log(vv);

this.httpClient.get<any>('http://url='+this.userFilter.policy_id).subscribe(statuses => {
  console.log(statuses);
  console.log(statuses.records[0].Amount);
  this.statusunsettledammount = statuses.records[0].Amount;
  console.log(this.statusunsettledammount);
    console.log(statuses.records[0].cc);
    this.statusunsettledcc = statuses.records[0].cc;

});

this.httpClient.get<any>('url='+this.userFilter.policy_id).subscribe(statuses2 => {
  console.log(statuses2);
    console.log(statuses2.records[0].Amount);
    this.status2settledammount = statuses2.records[0].Amount;
    console.log(this.status2settledammount);
    console.log(statuses2.records[0].cc);
    this.status2settledcc = statuses2.records[0].cc;
    console.log(this.status2settledcc);
});



this.httpClient.get<any>('http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_company_policy.php?company_id='+this.company_id).subscribe(policyinfo => {
  console.log(policyinfo);
  this.policynumbers = policyinfo.records;
  console.log(this.policynumbers);
});

this.url = 'url/get_claims.php?';

this.clientData = this.httpClient.get<any>(this.url,
{
params: {
policy_id: this.userFilter.policy_id     
 },

}).
subscribe(data => {
console.log(data);
this.spinner.hide();

this.data1 = data.records;
this.data1.forEach(d => this.policy_id.add(d.policy_id));
console.log(this.userFilter.policy_id);

});





//const sum1 = vv.filter(item => item.status === 'settled')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum1);
//this.sum1 = sum1;

//const sum2 = vv.filter(item => item.status === 'submitted')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum2);
//this.sum2 = sum2;

//var status = 'settled';
//var status2 = 'submitted';

//var countsettled = vv.filter((obj) => obj.status === status).length;
//var countunsettled = vv.filter((obj) => obj.status === status2).length;

//console.log(countsettled);
//this.countsettled = countsettled;
//console.log(countunsettled);
//this.countunsettled = countunsettled;



}
//else{


//const sum1 = this.data1.filter(item => item.status === 'settled')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum1);
//this.sum1 = sum1;

//const sum2 = this.data1.filter(item => item.status === 'submitted')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum2);
//this.sum2 = sum2;

//var status = 'settled';
//var status2 = 'submitted';

//var countsettled = this.data1.filter((obj) => obj.status === status).length;
//var countunsettled = this.data1.filter((obj) => obj.status === status2).length;

//console.log(countsettled);
//this.countsettled = countsettled;
//console.log(countunsettled);
//this.countunsettled = countunsettled;



//}


});



}

Ответы [ 3 ]

0 голосов
/ 30 мая 2019

Вот примерный набросок того, как вы можете решить эту проблему. Вероятно, это не сработает, если вы копируете и вставляете напрямую, но это должно подтолкнуть вас в правильном направлении.

Вы можете фильтровать данные, используя привязку события ngModelChange к обоим вводам даты.

<div class="col-md-3 form-group">
    <input type="date" class="form-control" (ngModelChange)="onDateSelection($event)" [(ngModel)]="from"> //From date
</div>
<div class="col-md-3 form-group">
    <input type="date" class="form-control" (ngModelChange)="onDateSelection($event)" [(ngModel)]="to"> //To Date
</div>

А в ваших Component.ts вы можете создать поверхностную копию ваших данных, чтобы мы могли использовать эту копию для целей фильтрации. Затем мы определяем метод onDateSelection(). Мы декодируем входные данные даты и конвертируем их в объект Date javascript. Затем мы фильтруем их соответственно.

ngOnInit() {
  this.temp = [...this.data1];
}

onDateSelection() {
  if (this.from && this.to) {
    const fromDate = new Date(this.from.split(/\D/));
    const toDate = new Date(this.to.split(/\D/));
    this.data1 = this.temp.filter(obj => new Date(obj.date) > fromDate && new Date(obj.date) < toDate);
  }
}
0 голосов
/ 30 мая 2019

Сначала преобразуйте ваши «data1», добавив свойство «date», которое было строкой даты в формате YYYYmmdd.Вы можете использовать эту функцию, чтобы добавить свойства: companyName и statusName, чтобы избежать вашего * ngIf.Я не доказываю, но это может быть похоже на

companies=[{id:999,name:"Airlink Communication"},{id:637,name:"Ascertia (Pvt) Ltd"},..]

const months=[{month:"00",name:"ENE"},{month:"01",name:"FEB"}...]
dataFormated=data.map(x=>{
   const company=companies.find(c=>c.id==x.company_id);
   const status=x.status.substring(0,1).toUpperCase()+x.status.substr(1)
   const datepart=x.submitted_at.split('-');
   const date=''+datepart[2]+month.find(m=>m.name==datepart[1]).month+datepart[0]
   //date becomes, e.g. "180611" for x.submited_at "11-JUL-18"

   return 
     {
         ...x,
         companyName:company?company.name:'',
         status:status
         date:date
     }
})

Ну, тогда вы можете фильтровать, используя новое свойство "date" - это строка, вы можете использовать фильтр или if-

Обновлено фильтр становится как

if (this.from && this.to) {
    //first convert this.from and this.to to string of form YYmmdd
    //your'e using simply html input type date that return a string
    //I suggested you use mat-datepicker or ng-datepicker, but in your case
    const fromDate = new Date(this.from.split(/\D/));
    const toDate = new Date(this.to.split(/\D/));

    //see how convert a number in string with 2 digits using slice(-2), 
    //e.g. ('0'+2).slice(-2) is "02"
    const fromDateTxt=''+(fromDate.getFullYear()%100)+
      ('0'+fromDate.getMonth()+1).slice(-2)+
      ('0'+fromDate.getDate()).slice(-2)

    const toDateTxt=''+(toDate.getFullYear()%100)+
      ('0'+toDate.getMonth()+1).slice(-2)+
      ('0'+toDate.getDate()).slice(-2)

    this.data1=dataFormated.filter(
          obj => obj.date >= fromDateTxt && obj.date< toDateTxt);
    console.log(this.data1);
}
0 голосов
/ 30 мая 2019

фильтрует ваш массив на основе пользовательских дат. предпочитайте любые средства выбора даты на входе для и от, чтобы выбрать объекты даты и избегая дополнительных издержек. Я предпочитаю момент для сравнения дат и фильтрации. для более быстрой фильтрации данных также см. перекрестный фильтр . Это слишком быстро, чем обычная фильтрация, несмотря на любую длину массива.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...