unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,487 @@
|
||||
class ApplicantDashboardView extends EICDomContent {
|
||||
|
||||
constructor() { super(); }
|
||||
|
||||
version = 'r2';
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
|
||||
this.url = options.url;
|
||||
this.pic = options.pic;
|
||||
this.profile = options.profile || { admin: true };
|
||||
|
||||
for(let model in options.models) this[model] = options.models[model];
|
||||
|
||||
let components = ui.eicfy(this.el);
|
||||
|
||||
this.orgSelector = components.find(item => item.el.hasAttribute('eicdropdown'))
|
||||
|
||||
this.memberAdd = components.find(item => item.el.classList.contains('member-add'))
|
||||
this.memberAdd.addEventListener('click', this.onMemberAdd.bind(this))
|
||||
|
||||
this.proposalCreate = components.find(item => item.el.classList.contains('proposal-create'))
|
||||
this.proposalCreate.addEventListener('click', this.onProposalCreate.bind(this));
|
||||
this.proposalSearch = components.find(item => item.el.classList.contains('proposal-search'))
|
||||
this.proposalSearch.addEventListener('click', this.onProposalSearch.bind(this));
|
||||
|
||||
this.fillDashboard(this.pic);
|
||||
|
||||
// registering SP Form event triggering
|
||||
app.events.channel.addEventListener('proposal_updated', this.onProposalUpdate.bind(this))
|
||||
}
|
||||
|
||||
fillDashboard(pic) {
|
||||
|
||||
ui.lock();
|
||||
|
||||
this.pic = pic;
|
||||
this.todos = [];
|
||||
this.memberAdd.disabled = true;
|
||||
this.proposalCreate.disabled = true;
|
||||
|
||||
this.applicant.read(pic).then(this.fill.bind(this));
|
||||
this.myOrganisations.list().then(this.fillOrganisations.bind(this));
|
||||
this.members.list(pic).then(this.fillMembers.bind(this));
|
||||
this.proposals.list(pic).then(this.fillProposals.bind(this));
|
||||
this.coachings.list(pic).then(this.fillCoachings.bind(this));
|
||||
|
||||
ui.unlock();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the registered organisations menu
|
||||
* @param {*} results
|
||||
*/
|
||||
fillOrganisations(results) {
|
||||
let items = [];
|
||||
this.orgSelector.menu.clear();
|
||||
|
||||
results.sort((a,b) => a.legalName.toLowerCase() > b.legalName.toLowerCase() ? 1: -1)
|
||||
|
||||
for(let result of results) {
|
||||
items.push({
|
||||
id: result.pic,
|
||||
label: `${result.legalName} <span class="pic">(${result.pic})</span>`,
|
||||
icon: "icon-company",
|
||||
onclick: this.onCompanySwitch.bind(this,result.pic)
|
||||
});
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: "Register another organisation",
|
||||
icon: "icon-plus",
|
||||
severity: "danger",
|
||||
onclick: this.onCompanyRegister.bind(this)
|
||||
});
|
||||
|
||||
this.orgSelector.menu.parse(items);
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the organisation information
|
||||
* @param {*} data
|
||||
*/
|
||||
fill(data) {
|
||||
this.find('.company-name b').innerHTML = data.legalName;
|
||||
this.find('.company-pic').innerHTML = data.pic;
|
||||
ui.unlock();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the organisation members list
|
||||
* @param {*} data
|
||||
*/
|
||||
fillMembers(data) {
|
||||
let members = this.find('.members ul');
|
||||
members.innerHTML = '';
|
||||
this.find('.members header h2').innerHTML= "";
|
||||
this.memberAdd.disabled = !this.members.hasPrivilege('add');
|
||||
|
||||
let memberMetrics = { active: 0, pending: 0 }
|
||||
this.todos = this.todos.filter(item => item.scope != 'members');
|
||||
|
||||
for(let item of data) {
|
||||
let actions = [];
|
||||
switch(item.status) {
|
||||
case 'active':
|
||||
break;
|
||||
case 'pending':
|
||||
actions.push(new Chip(null, {label:'pending', severity: 'warning', size: 'xsmall'}))
|
||||
break;
|
||||
}
|
||||
|
||||
memberMetrics[item.status]++;
|
||||
|
||||
let li = ui.create(`<li class="cols-2 right middle">
|
||||
<div>
|
||||
<div><b>${item.firstname} ${item.lastname}</b></div>
|
||||
<div xsmall class="props">
|
||||
${item.position}
|
||||
${item.email ? `<a href="mailto:${item.email}">${item.email}</a>`:''}
|
||||
${item.phone ? `<a href="tel:${item.phone}">${item.phone}</a>`:''}
|
||||
</div>
|
||||
</div>
|
||||
<span class="actions"></span>
|
||||
</li>`);
|
||||
|
||||
for(let action of actions)
|
||||
li.querySelector('.actions').append(action.el);
|
||||
|
||||
li.addEventListener('click', this.onMemberDetail.bind(this, item.uid))
|
||||
members.append(li);
|
||||
}
|
||||
|
||||
this.find('.members header h2').innerHTML = '';
|
||||
|
||||
if(memberMetrics.active > 0) {
|
||||
this.find('.members header h2').append((new Chip(null,{ label: `${memberMetrics.active} active`, size: 'xsmall', severity: 'success'})).el)
|
||||
}
|
||||
|
||||
if(memberMetrics.pending > 0) {
|
||||
this.find('.members header h2').append((new Chip(null,{ label: `${memberMetrics.pending} pending`, size: 'xsmall', severity: 'warning'})).el)
|
||||
this.todos.push(
|
||||
{ scope: 'members', message: `${memberMetrics.pending} member${memberMetrics.pending > 1 ? 's':''} requesting access` }
|
||||
)
|
||||
}
|
||||
|
||||
this.fillTodos();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the proposals list
|
||||
* @param {*} data
|
||||
*/
|
||||
fillProposals(data) {
|
||||
/** Proposals list */
|
||||
|
||||
this.find('.proposals > header h2').innerHTML = "";
|
||||
let proposals = this.find('.proposals .list');
|
||||
proposals.innerHTML = '';
|
||||
let proposalMetrics = {submitted: 0, draft: 0, accessRequests: 0 };
|
||||
|
||||
this.todos = this.todos.filter(item => item.scope != 'proposals');
|
||||
|
||||
for(let item of data) {
|
||||
let card = ui.create(`<article eiccard>
|
||||
<header>
|
||||
<h1>${item.acronym || '(unnamed)'}</h1>
|
||||
<h2>
|
||||
${item.proposalNumber}
|
||||
${item.accessRequests > 0 ? `<span eicchip xsmall warning>${item.accessRequests} access request${item.accessRequests > 1 ? 's':''}</span>`:''}
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<span eicchip small primary>short ${item.version}</span>
|
||||
<span eicchip small info>${item.status}</span>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="cols-2 center noflex"></div>
|
||||
</footer>
|
||||
</article>`);
|
||||
|
||||
let button = new Button(null, {label:'view', severity: 'primary', size: 'xsmall'});
|
||||
button.el.addEventListener('click', this.onProposalView.bind(this, item.proposalNumber, item.version))
|
||||
card.querySelector('footer div').append(button.el)
|
||||
|
||||
if(item.version != 'legacy' && item.status == 'draft') {
|
||||
button = new Button(null, {label:'edit', severity: 'primary', size: 'xsmall'});
|
||||
button.el.addEventListener('click', this.onProposalEdit.bind(this, item.proposalNumber, item.version))
|
||||
card.querySelector('footer div').append(button.el)
|
||||
}
|
||||
|
||||
proposalMetrics[item.status]++;
|
||||
proposalMetrics.accessRequests += item.accessRequests;
|
||||
proposals.append(card);
|
||||
}
|
||||
|
||||
if(proposalMetrics.draft > 0) {
|
||||
this.find('.proposals > header h2').append((new Chip(null,{ label: `${proposalMetrics.draft} draft`, size: 'xsmall', severity: 'warning'})).el)
|
||||
this.todos.push(
|
||||
{ scope: 'proposals', message: `${proposalMetrics.draft} draft proposal${proposalMetrics.draft > 1 ? 's':''} to be submitted` }
|
||||
)
|
||||
}
|
||||
|
||||
if(proposalMetrics.accessRequests > 0) {
|
||||
this.todos.push(
|
||||
{ scope: 'proposals', message: `${proposalMetrics.accessRequests} proposal access request${proposalMetrics.accessRequests > 1 ? 's':''} pending` }
|
||||
)
|
||||
}
|
||||
|
||||
this.proposalCreate.disabled = !this.proposals.hasPrivilege('create');
|
||||
|
||||
this.fillTodos();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the proposals list
|
||||
* @param {*} data
|
||||
*/
|
||||
fillCoachings(data) {
|
||||
/** Proposals list */
|
||||
|
||||
// this.find('.coachings > header h2').innerHTML = "";
|
||||
let coachings = this.find('.coachings .list');
|
||||
coachings.innerHTML = '';
|
||||
let coachingMetrics = { };
|
||||
|
||||
this.todos = this.todos.filter(item => item.scope != 'coachings');
|
||||
|
||||
for(let item of data) {
|
||||
let card = ui.create(`<article eiccard>
|
||||
<header>
|
||||
<h1>${item.acronym || '(unnamed)'}</h1>
|
||||
<h2>
|
||||
${item.proposalNumber}
|
||||
</h2>
|
||||
</header>
|
||||
<section>
|
||||
<span eicchip small primary>short ${item.version}</span>
|
||||
<span eicchip small info>${item.status}</span>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="cols-2 center noflex"></div>
|
||||
</footer>
|
||||
</article>`);
|
||||
|
||||
let button = new Button(null, {label:'view', severity: 'primary', size: 'xsmall'});
|
||||
button.el.addEventListener('click', this.onCoachingView.bind(this, item.proposalNumber, item.version))
|
||||
card.querySelector('footer div').append(button.el)
|
||||
|
||||
coachings.append(card);
|
||||
}
|
||||
|
||||
// unused for now
|
||||
//this.fillTodos();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the TODO list
|
||||
*/
|
||||
fillTodos() {
|
||||
let activities = this.find('.activities ul')
|
||||
activities.innerHTML = '';
|
||||
if(this.todos.length > 0) {
|
||||
ui.show(activities);
|
||||
for(let activity of this.todos) {
|
||||
activities.append(ui.create(`<li>${activity.message}</li>`))
|
||||
}
|
||||
} else {
|
||||
ui.hide(activities);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for adding an organisation memnber
|
||||
* @param {*} event
|
||||
*/
|
||||
async onMemberAdd(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let member = await this.openDialog(
|
||||
await this.loadContent(
|
||||
'applicants/dialogs/ApplicantMemberDialog',
|
||||
{ title: 'Add a member' },
|
||||
{
|
||||
model: this.members,
|
||||
mode: 'create',
|
||||
pic: this.pic
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
if(member) {
|
||||
ui.growl.append('member added', 'success');
|
||||
this.members.list(this.pic).then(this.fillMembers.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for getting organisation member details
|
||||
* @param {*} event
|
||||
*/
|
||||
async onMemberDetail(uid, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let member = await this.openDialog(
|
||||
await this.loadContent(
|
||||
'applicants/dialogs/ApplicantMemberDialog',
|
||||
{ title: 'edit a member' },
|
||||
{
|
||||
model: this.members,
|
||||
mode: this.members.hasPrivilege('update') ? 'edit': 'read',
|
||||
pic: this.pic,
|
||||
uid: uid
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
if(member) {
|
||||
if(member.status == 'removed')
|
||||
ui.growl.append('member removed', 'danger');
|
||||
else
|
||||
ui.growl.append('member updated', 'success');
|
||||
|
||||
this.members.list(this.pic).then(this.fillMembers.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for calling short proposal form on edit
|
||||
* @param {*} number
|
||||
* @param {*} version
|
||||
* @param {*} event
|
||||
*/
|
||||
onProposalEdit(number, version, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
app.Router.route(`/organisations/${this.pic}/proposals/${number}`, { mode: 'edit', version: version});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} number
|
||||
* @param {*} version
|
||||
* @param {*} event
|
||||
*/
|
||||
onProposalView(number, version, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
app.Router.route(`/organisations/${this.pic}/proposals/${number}`, { mode: 'read', version: version});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} number
|
||||
* @param {*} version
|
||||
* @param {*} event
|
||||
*/
|
||||
onProposalCreate(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.proposalCreate.loading = true;
|
||||
|
||||
this.proposals.create(this.pic)
|
||||
.then( async payload => {
|
||||
let number = payload.proposalNumber;
|
||||
this.proposalCreate.loading = false;
|
||||
this.proposals.list(this.pic).then(this.fillProposals.bind(this));
|
||||
app.Router.route(`/organisations/${this.pic}/proposals/${number}`, { mode: 'edit'});
|
||||
},
|
||||
(err)=>{ this.proposalCreate.loading = false })
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for getting organisation member details
|
||||
* @param {*} event
|
||||
*/
|
||||
async onProposalSearch(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
await this.openDialog(
|
||||
await this.loadContent(
|
||||
'applicants/dialogs/ApplicantProposalSearchDialog',
|
||||
{ title: 'search for existing proposals' },
|
||||
{
|
||||
model: this.proposals,
|
||||
pic: this.pic
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
onProposalUpdate(event) {
|
||||
this.proposals.list(this.pic).then(this.fillProposals.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} number
|
||||
* @param {*} version
|
||||
* @param {*} event
|
||||
*/
|
||||
onCoachingView(number, version, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.coachings.read();
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for changing organisation profile
|
||||
* @param {*} pic
|
||||
* @param {*} event
|
||||
*/
|
||||
onCompanySwitch(pic, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.orgSelector.collapse();
|
||||
ui.lock();
|
||||
|
||||
app.User.getBusinessPermissions([
|
||||
'/organisations',
|
||||
'/organisations/' + pic,
|
||||
'/organisations/' + pic + '/members',
|
||||
'/organisations/' + pic + '/proposals'
|
||||
], 'Org_Member')
|
||||
.then(async payload => {
|
||||
ui.unlock();
|
||||
|
||||
if(payload['/organisations/' + pic].permissions.includes('read')) {
|
||||
|
||||
this.applicant.setPrivileges('/organisations/{pic}', payload['/organisations/' + pic].permissions);
|
||||
this.myOrganisations.setPrivileges('/organisations', payload['/organisations'].permissions);
|
||||
this.members.setPrivileges('/organisations/{pic}/members', payload['/organisations/' + pic + '/members'].permissions);
|
||||
this.proposals.setPrivileges('/organisations/{pic}/proposals', payload['/organisations/' + pic + '/proposals'].permissions);
|
||||
|
||||
this.fillDashboard(pic);
|
||||
this._controller.changeUrl(this, this.url.replace(':pic', pic))
|
||||
|
||||
} else {
|
||||
|
||||
ui.unlock();
|
||||
ui.growl.append('You don\'t have access to this organisation', 'danger' );
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for registering new organisation
|
||||
* Using the onboarding as applicant scenario
|
||||
* @param {*} event
|
||||
*/
|
||||
async onCompanyRegister(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.orgSelector.collapse();
|
||||
|
||||
app.User.getBusinessPermissions(['/organisations'])
|
||||
.then(async payload => {
|
||||
let membership = await this.openDialog(
|
||||
await this.loadContent(
|
||||
'common/onboarding/dialogs/onboardingApplicantDialog',
|
||||
{ title: 'Register to an organisation' },
|
||||
{
|
||||
models: { user: new onboardingUserModel(payload['/organisations'].permissions) },
|
||||
cancelLabel: 'cancel'
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
if(membership) {
|
||||
ui.growl.append('membership request sent', 'success');
|
||||
}
|
||||
},
|
||||
() => {
|
||||
ui.growl.append('Sorry, you don\'t have access to this feature', 'danger');
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
app.registerClass('ApplicantDashboardView', ApplicantDashboardView);
|
||||
Reference in New Issue
Block a user