MVC Mithril

controller.js

import data from "./data";
import jobModel from "../models/job"

var controller = function() {
  this.jobs = new Array();
  this.selectedCompanies = new Array();
  this.selectedCategories = new Array();
  this.selectedLevels = new Array();
  this.selectedLocations = new Array();
  this.page = m.prop(1);
  this.descending = m.prop(false);
  this.flexible = m.prop(false);

  this.companies = data.companies;
  this.categories = data.categories;
  this.levels = data.levels;
  this.locations = data.locations;

  this.search = function (page) {
    console.log('page: ', page);
    var options = {
      page: this.page(),
      descending: this.descending(),
      flexible: this.flexible()
    };

    if (this.selectedCompanies.length) {
      options.company = this.selectedCompanies;
    }

    if (this.selectedCategories.length) {
      options.category = this.selectedCategories;
    }

    if (this.selectedLevels.length) {
      options.level = this.selectedLevels;
    }

    if (this.selectedLocations.length) {
      options.location = this.selectedLocations;
    }

    console.log('options: ', options);
  }
};

export default controller;

model.js

import config from "../config";

var Job = function(data) {
  this.description = m.prop(data.description);
  this.name = m.prop(data.name);
  this.company = m.prop(data.company);
  this.levels = m.prop(data.levels);
  this.tags = m.prop(data.tags);
  this.locations = m.prop(data.locations);
  this.categories = m.prop(data.categories);
  this.publicationDate = m.prop(data.publicationDate);
  this.slug = m.prop(data.slug);

  this.search = function(options) {
    if (!options) {
      options = {page: 1}
    }

    if (!options.page) {
      options.page = 1;
    }

    options.apiKey = config.apiKey;
    return m.request({method: "GET", url: config.apiUrl + "/jobs" + m.buildQueryString(options)})
      .then(function(data) {
        var resultList = [],
            result = null;

        for (var i = 0; i < data.results.length; i++) {
          result = data.results[i];
          resultList.push(new Job({
            description: result.contents,
            name: result.name,
            company: result.company,
            levels: result.levels,
            tags: result.tags,
            locations: result.locations,
            categories: result.categories,
            publicationDate: result.publication_date,
            slug: result.short_name
          }));
        }

        return resultList;
      });
  }
}

export default Job;

view.js

import select from '../select/select';

var view = function(ctrl) {
  console.log(ctrl);
  return m('div.container-fluid', [
    m('div.row.row-nowrap',[
      m('form.controls', [
        m('div.column-header.controls-header',[
          m('h2', 'Search Criteria')
        ]),
        m('div.column-sub-header', [
          m('h6', '* hold ctrl for multiple selections')
        ]),
        m('div.form-group', [
          m('label', {for: 'companies'}, 'Select Companies'),
          m.component(select, {
            options: function() { return ctrl.companies.sort() },
            className: 'form-control',
            id: 'companies',
            multiple: true
          })
        ]),
        m('div.form-group', [
          m('label', {for: 'categories'}, 'Select Categories'),
          m.component(select, {
            options: function() { return ctrl.categories.sort() },
            className: 'form-control',
            id: 'categories',
            multiple: true
          })
        ]),
        m('div.form-group', [
          m('label', {for: 'levels'}, 'Select Levels'),
          m.component(select, {
            options: function() { return ctrl.levels.sort() },
            className: 'form-control',
            id: 'levels',
            multiple: true
          })
        ]),
        m('div.form-group', [
          m('label', {for: 'locations'}, 'Select Locations'),
          m.component(select, {
            options: function() { return ctrl.locations.sort() },
            id: 'locations',
            className: 'form-control',
            multiple: true
          })
        ]),
        m('div.form-group', [
          m('input[type=checkbox]#flexible', {onclick: m.withAttr('checked', ctrl.flexible), checked: ctrl.flexible}),
          m('label', {for: 'flexible'}, 'Include flexible location roles?')
        ]),
        m('div.btn.btn-primary', {onclick: ctrl.search}, 'Search')
      ]),
      m('div.results', [
        m('div.column-header.results-header',[
          m('h2', 'Search Results')
        ]),
        ctrl.jobs.map(function(job, index) {
          return m('div.job', [
            m('h3.name', job.name()),
            m('div.description', job.description()),
            m('div.company', job.company()),
            m('div.levels', job.levels()),
            m('div.tags', job.tags()),
            m('div.locations', job.locations()),
            m('div.categories', job.categories()),
            m('div.publicationDate', job.publicationDate()),
            m('div.slug', job.slug())
          ]);
        })
      ])
    ]),
    // search results
    // sort order
    // result list
    // pagination
  ])
}

export default view;