corporate-frontend-mithril/src/components/uos-explorer/uos-explorer.js

Corporate frontend MithrilJS modules

const FPO = require('fpo');
const ArtsConstant = require('./../constant/arts-constant');
const Button = require('./../../blocks/button/button');
const Spinner = require('./../../blocks/spinner/spinner');
const LinkListStd = require('./../../blocks/link-list-std/link-list-std');
const Dropdown = require('./../dropdown/dropdown');
const UnitDetails = require('./unit-details/unit-details');
const ViewModel = require('./uos-explorer-vm');

module.exports = function() {
    let vm = ViewModel();

    let view = function() {
        return m('.b-uos-explorer-view.b-component', [
            m('.grid', [
                m('.1/2--tablet-up.grid__cell', [
                    m('.b-component--tight', [
                        m(Dropdown, {
                            title: 'Department',
                            options: ArtsConstant.DEPARTMENT_OPTIONS,
                            placeholder: 'Select a department',
                            limitHeight: true,
                            nextFn: FPO.partial({fn: vm.selectedOpt, args: {key: ArtsConstant.kEY_DEPARTMENT}}),
                        }),
                    ]),
                ]),
                m('.1/2--tablet-up.grid__cell', [
                    m('.b-component--tight', [
                        m(Dropdown, {
                            title: 'Semester',
                            options: ArtsConstant.SEMESTERS_OPTIONS,
                            placeholder: 'Select a semester',
                            nextFn: FPO.partial({fn: vm.selectedOpt, args: {key: ArtsConstant.KEY_SEMESTER}}),
                        }),
                    ]),
                ]),
                m('.1/2--tablet-up.grid__cell', [
                    m('.b-component--tight', [ 
                        m(Dropdown, {
                            title: 'Level',
                            options: ArtsConstant.LEVELS_OPTIONS,
                            placeholder: 'Select a level',
                            nextFn: FPO.partial({fn: vm.selectedOpt, args: {key: ArtsConstant.KEY_LEVEL}}),
                        }),
                    ]),
                ]),
            ]),
            m('.b-component', [
                m(Button, {
                    text: 'Search',
                    type: 'search',
                    nextFn: vm.fetchUnitList,
                }),
            ]),
            m('h3.b-title.b-title--first.b-title--h3', 'Results'),
            vm.isLoading && m('.grid', [
                m('.1/2.grid__cell', [
                    m(Spinner),
                ]),
            ]),
            vm.noResults && m('p.b-component', [
                m('span', 'There were no results for your selection. Please try again, or '),
                m('a',{
                    href: 'https://sydney.edu.au/arts/about/contact-us.html',
                }, 'contact the Faculty of Arts and Social Sciences'),
                m('span', ' .'),
            ]),
            m(LinkListStd, {
                list: vm.unitList,
                nextFn: vm.showUnitDetails,
            }),
            m(UnitDetails, vm.unitDetails),
        ]);
    };

    return {
        view,
    };

};