LookupFilter.js

/**  Assuming na ang data sa backend ay gaya ng porma sa db.json,
    ganito ko i-foformat ung paghandle natin ng data
**/

var companies = [],
    departments = [],
    locations = [],
    employees = [];


// On Document Ready
$(document).ready(function () {
    console.log('Attendance Report Document Ready');

    // our global store
    var selection = {};

    //$.Common.renderInitialData();
    //console.log($.Common.fetchAPIData())

    // Render our initial payload - company, department, location and employee

    // Get companies
    $.Common.fetchAPIData('', 'GET', 'http://localhost:3000/companies').done(function (companies) {

      // need to modify the object based on select2 requirements - https://select2.org/data-sources/formats#transforming-data-into-the-required-format

       var tmp = $.map(companies, function (obj) {
         obj.id = obj.id;
         obj.text = obj.company_name;
         return obj;
       });

       $.Common.renderSingleSelect('.company', tmp);
    });

    // Get departments
    $.Common.fetchAPIData('', 'GET', 'http://localhost:3000/departments').done(function (departments) {

       var tmp = $.map(departments, function (obj) {
         obj.id = obj.id;
         obj.text = obj.department_name;
         return obj;
       });

       $.Common.renderMultiSelect('.multiselect_department', tmp, 'department', $.Common.renderedSelectOptions);
    });

    // Get locations
    $.Common.fetchAPIData('', 'GET', 'http://localhost:3000/locations').done(function (locations) {

       var tmp = $.map(locations, function (obj) {
         obj.id = obj.id;
         obj.text = obj.location_name;
         return obj;
       });

       $.Common.renderMultiSelect('.multiselect_location', tmp, 'location', $.Common.renderedSelectOptions);
    });

    // Get employees
    $.Common.fetchAPIData('', 'GET', 'http://localhost:3000/employees').done(function (employees) {

       var tmp = $.map(employees, function (obj) {
         obj.id = obj.id;
         obj.text = obj.first_name + ' ' + obj.last_name;
         return obj;
       });

       $.Common.renderSingleSelect('.employee', tmp);
    });



    /** ---- This section handles our event handlers and listeners --------------**/

    // on change company - Ideally we want to POST to server based on companyId parameter then re-render our select2 component for department and locations
    $(document).on('change', '#ddlcompany', function(e) {
      selection.companyId = $(this).val();
      // console.log($(this).val());
      console.log(selection);
    })

    // Will fetch values here for employees based on the selected item
    $(document).on('change', '.multiselect_department', function(e) {

        selection.departmentIds = $(this).val();

        //console.log(selection.departmentIds);

        // console.log(selection);
        // console.log($(this).select2('data'));
    });

    // Will fetch values here for employees based on the selected item
    $(document).on('change', '.multiselect_location', function(e) {

      selection.locationIds = $(this).val();

      // console.log(selection.locationIds);
      // console.log(selection);
    })

    // on change employee - i think wala na gagawin dito
    $(document).on('change', '#ddlemployee', function(e) {
      selection.employeeId = $(this).val();
      // console.log($(this).val());
      // console.log(selection);
    })

    // Generate Button New
    $(document).on('click', '#generateAttendanceReport', function(e) {
      e.preventDefault();

      // selection on initial load and generate button has been clicked
      selection.DateFrom = $('#dateFrom').val();
      selection.DateTo = $('#dateTo').val();
      selection.companyId = $('#ddlcompany').val();
      selection.employeeId = $('#ddlemployee').val();

      console.log(selection);

      // post data on server once API available
      $.ajax({
          data: JSON.stringify(selection),
          dataType: 'json',
          type: 'POST',
          url: 'http://localhost:3000/api/url_to_post_server', // endpoint here
          success: function(e) {
              // map our data on UI
          }
      });


      alert(JSON.stringify(selection)) // pakita natin data na pupunta sa backend kung ano itsura
    })

});