corporate-frontend-mithril
Version:
Corporate frontend MithrilJS modules
238 lines (221 loc) • 11.2 kB
JavaScript
const ViewModel = require('./advanced-search-form-vm');
const FormInput = require('./../../../blocks/form-input/form-input');
const FormCheckbox = require('./../../../blocks/form-checkbox/form-checkbox');
const FormRadio = require('./../../../blocks/form-radio/form-radio');
const Dropdown = require('./../../dropdown/dropdown');
const Button = require('./../../../blocks/button/button');
const Spinner = require('./../../../blocks/spinner/spinner');
const FPO = require('fpo');
const util = require('./advance-search-util');
const config = require('../advanced-search-form/advanced-search-form-constant');
module.exports = function() {
let vm = new ViewModel();
const dataset = document.querySelector(config.ADVANCED_SEARCH_ID).dataset;
const pageType = dataset.pageType || config.PAGE_TYPE_ADVANCED_SEARCH;
const faculty = {'domainId': parseInt(dataset.domainId), 'orgUnitCode': dataset.orgUnitCode} || config.FACULTIES[0];
console.log('pageType', pageType);
console.log('faculty', faculty);
vm.pageType = pageType;
vm.faculty = faculty;
let view = function() {
return m('.b-component', [
// Form
m('form.b-form.b-component', [
m('.grid.grid--center', [
m('.grid__cell', [
m(FormInput, {
label: 'Search term(s)',
name: 'Search terms',
required: 'true',
vFn: vm.searchTerms,
}),
]),
]),
// search types
m('.b-component--tight'),
m('.grid', [
m('.4/4--mobile-up.grid__cell', [
m(FormRadio, {
options: vm.searchType,
groupName: 'searchType',
vFn: FPO.partial({fn: vm.selectOptions, args: {queryKey: 'searchType'}}),
}),
]),
]),
// themes
vm.visible(vm.theme.visible) && m('.grid', [
m('.1/4--mobile-up.grid__cell', [
m('p.b-form-control__label', vm.theme.label),
]),
m('.2/4--mobile-up.grid__cell', [
m(Dropdown, {
options: vm.theme.options,
nextFn: FPO.partial({fn: vm.selectOptions, args: {queryKey: vm.theme.queryKey}}),
}),
]),
]),
m('.b-component--tighter'),
// keywords
vm.visible(vm.keyword.visible) && m('.grid', [
m('.1/4--mobile-up.grid__cell', [
m('p.b-form-control__label', vm.keyword.label),
]),
m('.2/4--mobile-up.grid__cell', [
m(Dropdown, {
options: vm.keyword.options,
limitHeight: vm.approach.options && vm.approach.options.length > 7,
nextFn: FPO.partial({fn: vm.selectOptions, args: {queryKey: vm.keyword.queryKey}}),
}),
]),
]),
m('.b-component--tighter'),
// clinical specialty
vm.visible(vm.clinicalspecialty.visible) && m('.grid', [
m('.1/4--mobile-up.grid__cell', [
m('p.b-form-control__label', vm.clinicalspecialty.label),
]),
m('.2/4--mobile-up.grid__cell', [
m(Dropdown, {
options: vm.clinicalspecialty.options,
limitHeight: vm.clinicalspecialty.options && vm.clinicalspecialty.options.length > 7,
nextFn: FPO.partial({fn: vm.selectOptions, args: {queryKey: vm.clinicalspecialty.queryKey}}),
}),
]),
]),
m('.b-component--tighter'),
// approach
vm.visible(vm.approach.visible) && m('.grid', [
m('.1/4--mobile-up.grid__cell', [
m('p.b-form-control__label', vm.approach.label),
]),
m('.2/4--mobile-up.grid__cell', [
m(Dropdown, {
options: vm.approach.options,
limitHeight: vm.approach.options && vm.approach.options.length > 7,
nextFn: FPO.partial({fn: vm.selectOptions, args: {queryKey: vm.approach.queryKey}}),
}),
]),
]),
m('.b-component--tighter'),
// international linkage
vm.visible(vm.internationallinkage.visible) && m('.grid', [
m('.1/4--mobile-up.grid__cell', [
m('p.b-form-control__label', vm.internationallinkage.label),
]),
m('.2/4--mobile-up.grid__cell', [
m(Dropdown, {
options: vm.internationallinkage.options,
limitHeight: vm.internationallinkage.options && vm.internationallinkage.options.length > 7,
nextFn: FPO.partial({fn: vm.selectOptions, args: {queryKey: vm.internationallinkage.queryKey}}),
}),
]),
]),
// add more dropdowns here and update 'advanced-search-service.js' constant called 'formDropDowns' accordingly with the webservice and page type visibility
// profile type
m('.b-component--tighter'),
m('.grid', [
m('.1/4--mobile-up.grid__cell', [
m('p.b-form-control__label', 'Profile Type'),
]),
m('.2/4--mobile-up.grid__cell', [
m('.grid', vm.profiletype.map(function(profile) {
return m('.2/4--mobile-up.grid__cell', [
m(FormCheckbox, {
label: profile.name,
name: profile.value,
checked: profile.checked,
vFn: FPO.partial({
fn: vm.selectProfile,
args: { queryKey: profile.name, profile }}),
}),
]);
})),
]),
]),
]),
// search Button
m('.b-component', [
m(Button, {
text: 'Search',
type: 'search',
nextFn: vm.submit,
}),
]),
// loading spinner
vm.formState == vm.formStateLoading && m('.grid', [
m('.1/2.1/3--mobile-up.1/4--tablet-up.grid__cell', [
m(Spinner),
]),
]),
// search result
vm.formState == vm.formStateResult && m('.grid__cell', [
m('.grid', [
m('.3/4--mobile-up.grid__cell', [
m('h3.b-title.b-title--h3', 'Search Result'),
m('h4.b-title.b-title--h4', `${vm.totalMatch} results match your search sorted by ${vm.sortedBy}`),
]),
// sort by
m('.1/4--mobile-up.grid__cell', [
m('h4.b-title.b-title--h4', 'Sort By'),
m(Dropdown, {
options: vm.sortByList,
nextFn: FPO.partial({fn: vm.selectSort, args: {queryKey: 'sortBy'}}),
}),
]),
m('hr.b-horizontal-line b-horizontal-line--heavy'),
]),
m('grid__cell', vm.responseSearchResult.map(function(profile) {
return m('.grid',
m('.4/5--mobile-up.grid__cell', [
m('a.b-fact-tile', {
href: profile.profileUrl,
target: '_blank',
}, [
m('.b-icon-link__wrapper', [
m('h3.b-text--bold b-icon-link--standard b-title--first b-title--h4', `${profile.salutation} ${profile.staffName}`),
]),
]),
m('', [
m('.b-text--size-base b-text b-text--colour-dark', profile.title),
]),
m('.b-box--padding-top', [
m('.b-text--size-base b-text b-text--colour-dark', 'Telephone: ', [
m('a', { href: `tel:${util.unescape(profile.phoneNumber)}`, innerHTML: util.unescape(profile.phoneNumber) }),
]),
m('.b-text--size-base b-text b-text--colour-dark', 'Email: ', [
m('a', { href: `mailto:${profile.email}`, innerHTML: profile.email }),
]),
]),
m('.b-box--padding-xs-top', [
m('.b-box--padding-sm-top', profile.bio),
]),
]),
m('.1/5--mobile-up.grid__cell', [
m('img.b-image__image', {
src: profile.doesHavePhoto == 'true' ? `http://api.profiles.sydney.edu.au/AcademicProfiles/profile/resource?urlid=${profile.urlId}`: '',
}),
]),
m('hr.b-horizontal-line b-horizontal-line--heavy')
);
})),
// pagination
m('.grid', vm.lastPage > 1 && [
m('.4/4--mobile-up.grid__cell', [
m('a.pagination__item.pagination__item--highlight.pagination__item--previous', {
onclick: () => vm.moveToPage(vm.currentPage - 1),
style: 'cursor: pointer;',
}),
vm.generatePageLinks(),
m('a.pagination__item.pagination__item--highlight.pagination__item--next', {
onclick: () => vm.moveToPage(vm.currentPage + 1),
style: 'cursor: pointer;',
}),
]),
]),
]),
]);
};
return {
view,
};
};