Filter

 avatar
unknown
plain_text
2 years ago
9.4 kB
4
Indexable
<% 

let input1="  " 
let groupInput = " "
let componentHeight = ""

let selectItems = " "
let financialyear=" "


if( page==="holdings" ) { 
  input1="Demat ID" 
  groupInput = " "
  selectItems = " "
  componentHeight = '71%'
  financialyear=`<div class="mb-3"><label class="form-label">Financial Year</label><select class="form-select" style="padding: 0.9rem;"><option>Select</option><option>Large select</option><option>Small select</option></select></div>`
} 

if(page==="ledger" ){ 
  input1="" 
  componentHeight = '71%'
  groupInput = " "
  selectItems = " "
  financialyear=``
  
}

if(page==="bill"){
  input1="Wallet"
  componentHeight = '78%' 
  groupInput = ''
  selectItems = ""
  financialyear=""
} 

if(page==="trade" ){ 
  input1="Segment" 
  componentHeight = '71%'
  groupInput = " "
  selectItems = '<option>Equity</option>     <option>FNO</option>      <option>CD</option>     <option>Commodity</option>'   
  financialyear=`<div class="mb-3"><label class="form-label">Financial Year</label><select class="form-select" style="padding: 0.9rem;"><option>Select</option><option>Large select</option><option>Small select</option></select></div>`
}
%>

<style>
  .button-block {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: #007bff;
    border: 1px solid #007bff;
    border-radius: 2.25rem;
    transition: background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
  }

  .center {
    display: flex;
    align-items: center;
    
  }       
</style>
<div class="col-lg-12">
  <!-- <div class="card"> -->
    <!-- <div class="card-body"> -->
      <!-- <div class="d-flex flex-wrap gap-2">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom"
          aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
      </div> -->
      <!-- bottom offcanvas -->
      <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"
      style="border-radius: 20px 20px 0px 0px; height:90%">
        <div class="offcanvas-header">
          <h5>Filter </h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" style="padding: 0px 0px 0px 0px!important; display: flex;flex-direction: column;">
              <div class="card-body ">
                <div class="row">
                  <div class="col-lg-6">
                    <div class="mt-3 mt-lg-0">
                      <% if(input1 !=""){ %>
                        <div class="mb-3">

                          <label class="form-label"><%- input1%></label>
                          
                          <select class="form-select" style="padding: 0.9rem;"> 
                            <%- selectItems %> 
                          </select>
                        </div>
                      <% }%>
                      
                      <%- groupInput %>
                      <div class="mb-3 row">
                        <label class="form-label mb-2">Date</label>                    
                        <div style="margin-bottom: 1rem;display: flex; gap: 0.5rem;flex-wrap: wrap;">
                          <button type="button" class="btn btn-outline-secondary" style="border-radius: 20px;" onclick="setLast30Days()">Last 30 days</button>
                          <button type="button" class="btn btn-outline-secondary" style="border-radius: 20px;" onclick="setLast60Days()">Last 60 days</button>
                          <button type="button" class="btn btn-outline-secondary" style="border-radius: 20px;" onclick="setLast90Days()">Last 90 days</button>
                        </div>                     
                        <div class="col">
                          <input class="form-control" type="date" id="start-date" style="padding: 0.9rem;" name="start-date" placeholder="Start date" onchange="validateDate()">
                        </div>
                        <div class="col">    
                          <input class="form-control" type="date" id="end-date" style="padding: 0.9rem;" name="end-date" placeholder="End date" onchange="validateDate()">
                        </div>
                      </div>                   
                      <div class="mb-3" style="display: flex;">
                        <div class="form-check" style="  padding-bottom: 10px; padding-top: 10px;">
                          <input type="checkbox" class="form-check-input" style="padding: 0.5rem ;" id="invalidCheck1" name="filter[]" value="M" >
                          <label class="form-check-label" for="invalidCheck"> &nbsp;Enable Margin</label>
                        </div>
                        <div class="form-check " style="margin-left: 10px;  padding-bottom: 10px; padding-top: 10px;">
                          <input type="checkbox" class="form-check-input" style="padding: 0.5rem ;" id="invalidCheck2" name="filter[]" value="L">
                          <label class="form-check-label" for="invalidCheck"> &nbsp;Enable MTF</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btnDivFooter" style="margin-top: auto;padding: 0rem 20px;padding-bottom: 1rem;">
                
                <button class="btn btn-primary btn-lg button-block" type="submit" data-bs-dismiss="offcanvas" style="height: 50px;margin-top: auto;display: flex;align-items: center;justify-content: center;" onclick="getLedgerDetailsFilter()">Show Results</button>
              </div>
      </div>
    </div>
    <script>
      function getLedgerDetailsFilter(){
          let client_code = $("#ClientCode").val()
          let type_filter = $("#type_filter").val()
          let from_date = $("#start-date").val()
          let to_date = $("#end-date").val()
          var filter = $('input[name="filter[]"]:checked')
          .map(function () {
            return this.value;
          })
          .get();
          var formData = {
              client_code: client_code,
              from_date: from_date.replaceAll("-", ""),
              to_date: to_date.replaceAll("-", ""),
              filter: filter,
              type_filter: type_filter,
          };
          console.log(formData);
  
          $.ajax({
              type: "POST",
              url: "/get-filter-ledger-detail",
              data: JSON.stringify(formData),
              contentType: "application/json",
              Accept: "application/text",
              dataType: "text",
              beforeSend: function () {
                  $("#loader").removeClass("hidden");
              },
              success: function (data) {
                  
                  $("#all").html(data);
              },
              error: function (err) {
                  console.log("Error  ");
                  console.log(err);
              },
              complete: function () {
                  $("#loader").addClass("hidden");
              },
          });
      }
      </script>

















<script>
  function setLast30Days() {
    var endDate = new Date();
    var startDate = new Date();
    startDate.setDate(endDate.getDate() - 30);

    document.getElementById("start-date").value = formatDate(startDate);
    document.getElementById("end-date").value = formatDate(endDate);
  }

  function setLast60Days() {
    var endDate = new Date();
    var startDate = new Date();
    startDate.setDate(endDate.getDate() - 60);

    document.getElementById("start-date").value = formatDate(startDate);
    document.getElementById("end-date").value = formatDate(endDate);
  }
  function setLast90Days() {
    var endDate = new Date();
    var startDate = new Date();
    startDate.setDate(endDate.getDate() - 90);

    document.getElementById("start-date").value = formatDate(startDate);
    document.getElementById("end-date").value = formatDate(endDate);
  }

  function validateDate() {
    var startDateStr = document.getElementById("start-date").value;
    var endDateStr = document.getElementById("end-date").value;

    // Check that both input fields have a value
    if (!startDateStr || !endDateStr) {
      return;
    }

    // Convert the date strings to Date objects
    var startDate = new Date(startDateStr);
    var endDate = new Date(endDateStr);

    if (startDate > endDate) {
      // Swap the dates
      var temp = startDate;
      startDate = endDate;
      endDate = temp;
      document.getElementById("start-date").value = formatDate(startDate);
      document.getElementById("end-date").value = formatDate(endDate);
    }
  }

  function formatDate(date) {
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
  }
</script>
Editor is loading...