description.md

This JavaScript code represents some functionality to dynamically add links to employee goals and company grades added in past meetings on the Taqeela app. Grades and goals are added under one meeting, but the UI requirements we were given called for displaying different sections where these data could be accessed. Had I not taken an object oriented approach, I'd have had to duplicate the same jQuery code for each call.

oo_js_example.js

Loader = {}

Loader.View = function(selector) {
  this.selector = selector;
  this.listType = selector.data('type');
  this.listLength = selector.children().length;
}

Loader.View.prototype = {
  draw: function(value, selector, observableSelector) {
    var view = this;
    if (value.last_two_meetings.length >= 1 ) {
      selector.append("<div class='week'><a class='week-button' href='/meetings/" + value.id + "/"
                       + view.listType + "'>" + $.formatDateTime("MM d", new Date(value.last_two_meetings[0].created_at))
                       + ' - ' + $.formatDateTime("MM d", new Date(value.created_at)) + "</a></div>");
      
    }
    else {
      observableSelector.hide();
      selector.append("<div class='week'><a class='week-button' href='/meetings/" + value.id + "/"
                       + view.listType + "'>" + $.formatDateTime("MM d", new Date(value.created_at)) + "</a></div>");
    }
  }
}

Loader.Controller = function(opts) {
  this.view = opts.view;
  this.observableSelector = opts.observableSelector;
  this.accountId = opts.accountId;
}

Loader.Controller.prototype = {
  initEvents: function() {
    var controller = this;

    $(this.observableSelector)
      .on('click', function(e) {
        e.preventDefault();
        $.post('/accounts/' + controller.accountId + '/get_meetings',
               { list_length: controller.view.listLength, list_type: controller.view.listType })
          .done(function(data) {
            controller.appendDates(controller.view, data.meetings);
            controller.updateListLength(controller.view);
          })
      })
  },

  appendDates: function(view, data) {
    var controller = this;
    $.each(data, function(index, value) {
      controller.view.draw(value, view.selector, controller.observableSelector);
    })
  },

  updateListLength: function(view) {
    var controller = this;

    view.listLength = controller.view.selector.children().length;
  }
}

$(function() {
  if ($('body').hasClass('accounts_show')) {
    accountId = $('.dashboard-wrapper').data('account-id');

    var controller = new Loader.Controller({
      view: new Loader.View($('.company-grades-weeks')),
      observableSelector: $('.grade-weeks'),
      accountId: accountId
    }).initEvents();

    var controller = new Loader.Controller({
      view: new Loader.View($('.individual-goals-weeks')),
      observableSelector: $('.goal-weeks'),
      accountId: accountId
    }).initEvents();
  }
})