unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,97 @@
|
||||
<style>
|
||||
.coaching-admin-dashboard .filter { min-height: 380px; }
|
||||
.coaching-admin-dashboard .metrics { min-width: 240px; }
|
||||
.coaching-admin-dashboard .coachings .row { grid-template-columns: 106px 1fr 3fr 3fr 2fr 1fr 1fr 88px; }
|
||||
.coaching-admin-dashboard .organisations .row { grid-template-columns: 1fr 5fr 1fr 48px; }
|
||||
.coaching-admin-dashboard .organisations .sublist .row { grid-template-columns: 106px 3fr 1fr 2fr 1fr 1fr 88px; }
|
||||
.coaching-admin-dashboard .coaches .row { grid-template-columns: 1fr 4fr 4fr 1fr 1fr 48px; }
|
||||
.coaching-admin-dashboard .coachings .row .cell:nth-child(3),
|
||||
.coaching-admin-dashboard .coachings .row .cell:nth-child(6),
|
||||
.coaching-admin-dashboard .coachings .row .cell:nth-child(7),
|
||||
.coaching-admin-dashboard .coachings .row .cell:nth-child(8)
|
||||
{ text-align: center; }
|
||||
.coaching-admin-dashboard .organisations .row .cell:nth-child(4)
|
||||
{ text-align: center; }
|
||||
.coaching-admin-dashboard .organisations .sublist header .row { background: none;}
|
||||
.coaching-admin-dashboard .organisations .sublist .row .cell:nth-child(4),
|
||||
.coaching-admin-dashboard .organisations .sublist .row .cell:nth-child(5),
|
||||
.coaching-admin-dashboard .organisations .sublist .row .cell:nth-child(6),
|
||||
.coaching-admin-dashboard .organisations .sublist .row .cell:nth-child(7)
|
||||
{ text-align: center; }
|
||||
.coaching-admin-dashboard .coaches .row .cell:nth-child(5),
|
||||
.coaching-admin-dashboard .coaches .row .cell:nth-child(6)
|
||||
{ text-align: center; }
|
||||
</style>
|
||||
<article eiccard class="coaching-admin-dashboard">
|
||||
<header>
|
||||
<h1>Coaching Activities Monitoring</h1>
|
||||
<h2>(for admins)</h2>
|
||||
</header>
|
||||
<section>
|
||||
|
||||
<article eiccard class="filter chart">
|
||||
<section>
|
||||
<div class="cols-2 right top">
|
||||
<div eicnodemap></div>
|
||||
<button eicbutton small rounded primary class="menu icon-search"></button>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article eiccard class="filter search">
|
||||
<section>
|
||||
<div class="cols-2 left top">
|
||||
<button eicbutton small rounded primary class="menu icon-angle-left"></button>
|
||||
<div>
|
||||
<input eicinput type="search" name="q" placeholder="free search" />
|
||||
<div class="cols-4">
|
||||
<div>
|
||||
<label small>cutoff</label>
|
||||
<select eicselect></select>
|
||||
</div>
|
||||
<div>
|
||||
<label small>status</label>
|
||||
<select eicselect></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
<div class="cols-2 left">
|
||||
<div class="metrics">
|
||||
<article eiccard danger>
|
||||
<header>
|
||||
<h1>TODO List</h1>
|
||||
</header>
|
||||
<section>
|
||||
<ul bulleted xsmall>
|
||||
<li>Plans need approval</li>
|
||||
<li>Coaching requests</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<article eiccard >
|
||||
<section>
|
||||
<div class="result-menu tabs-extended">
|
||||
<menu eictab small badges>
|
||||
<li>Coachings<span xxsmall eicbadge danger>2</span></li>
|
||||
<li>Organisations<span xxsmall eicbadge danger>2</span></li>
|
||||
<li>Coaches<span xxsmall eicbadge danger>1</span></li>
|
||||
</menu>
|
||||
</div>
|
||||
<div class="result coachings">
|
||||
<div eicdatagrid></div>
|
||||
</div>
|
||||
<div class="result organisations">
|
||||
<div eicdatagrid></div>
|
||||
</div>
|
||||
<div class="result coaches">
|
||||
<div eicdatagrid></div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
@@ -0,0 +1,227 @@
|
||||
class CoachingAdminDashboardView extends EICDomContent {
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
|
||||
for(let model in options.models) this[model] = options.models[model];
|
||||
|
||||
ui.eicfy(this.el);
|
||||
|
||||
this.workflow = new NodeMap(this.find('[eicnodemap]'), {
|
||||
"orientation": "radial",
|
||||
"resizable": true,
|
||||
"allowDrag": true,
|
||||
"entity": {
|
||||
"width": 150,
|
||||
"height": 50,
|
||||
"gap": 30
|
||||
}
|
||||
});
|
||||
|
||||
app.Assets.loadJson({name:'workflows/wf-coaching-admin.json'})
|
||||
.then(this.setupWorflow.bind(this));
|
||||
|
||||
//this.workflow.click = this.testBadge.bind(this)
|
||||
|
||||
this.filters = new Tab();
|
||||
this.filters.addTabs(Array.prototype.slice.call(this.findAll('.filter button.menu')).reverse(), this.findAll('.filter'));
|
||||
|
||||
this.results = new Tab();
|
||||
this.results.addTabs(this.findAll('.result-menu li'), this.findAll('.result'));
|
||||
|
||||
this.coachingList = new DataGrid(this.find('.coachings [eicdatagrid]'), {
|
||||
headers: [
|
||||
{label: 'number', filter: 'text'},
|
||||
{label: 'type', filter: 'list'},
|
||||
{label: 'project', filter: 'text'},
|
||||
{label: 'owner', filter: 'text'},
|
||||
{label: 'status', filter: 'list'},
|
||||
{label: 'credits used'},
|
||||
{label: 'credits left'},
|
||||
{label: ''}
|
||||
]
|
||||
});
|
||||
this.coachingList.onRowClick = this.onCoachingSelect.bind(this);
|
||||
|
||||
this.organisationList = new DataGrid(this.find('.organisations [eicdatagrid]'), {
|
||||
headers: [
|
||||
{label: 'pic', filter: 'text'},
|
||||
{label: 'name', filter: 'text', sortable: true},
|
||||
{label: 'projects', sortable: true},
|
||||
{label: ''}
|
||||
]
|
||||
});
|
||||
this.organisationList.onRowClick = this.onOrganisationSelect.bind(this);
|
||||
|
||||
|
||||
this.coachList = new DataGrid(this.find('.coaches [eicdatagrid]'), {
|
||||
headers: [
|
||||
{label: 'eu login', filter: 'text'},
|
||||
{label: 'name', filter: 'text'},
|
||||
{label: 'email', filter: 'text'},
|
||||
{label: 'invitations'},
|
||||
{label: 'coachings'},
|
||||
{label: ''}
|
||||
]
|
||||
});
|
||||
this.coachList.onRowClick = this.onCoachSelect.bind(this);
|
||||
|
||||
this.coachings.getCoachings().then(this.fillCoachings.bind(this));
|
||||
this.coachings.getCompanies().then(this.fillCompanies.bind(this));
|
||||
this.coachings.getCoaches().then(this.fillCoaches.bind(this));
|
||||
}
|
||||
|
||||
setupWorflow(data) {
|
||||
console.log(data)
|
||||
this.workflow.data = data;
|
||||
}
|
||||
|
||||
fillCoachings(list) {
|
||||
this.coachingList.clear();
|
||||
|
||||
for(let item of list) {
|
||||
|
||||
let row = this.coachingList.addRow( item.reference, [
|
||||
item.number,
|
||||
item.type,
|
||||
item.acronym,
|
||||
item.organisation,
|
||||
item.status,
|
||||
item.creditsUsed,
|
||||
item.creditsLeft,
|
||||
''
|
||||
]);
|
||||
|
||||
let button = new Button(null, { label: 'refill', severity: 'primary', size: 'xsmall' })
|
||||
button.el.addEventListener('click', this.onCreditsAdd.bind(this))
|
||||
row.querySelector('.cell:nth-child(9)').append(button.el)
|
||||
}
|
||||
}
|
||||
|
||||
fillCompanies(list) {
|
||||
this.organisationList.clear();
|
||||
|
||||
for(let item of list) {
|
||||
|
||||
let row = this.organisationList.addRow( item.pic, [
|
||||
item.pic,
|
||||
item.legalname,
|
||||
item.projects.length
|
||||
]);
|
||||
|
||||
let button = new Button(null, { icon: 'icon-angle-down', size: 'xsmall', rounded: true })
|
||||
button.addEventListener('click', this.onOrganisationProjects.bind(this))
|
||||
row.querySelector('.cell:nth-child(5)').append(button.el)
|
||||
}
|
||||
}
|
||||
|
||||
fillCoaches(list) {
|
||||
this.coachList.clear();
|
||||
|
||||
for(let item of list) {
|
||||
|
||||
let row = this.coachList.addRow( item.id, [
|
||||
item.uid,
|
||||
item.lastname + ' ' + item.firstname,
|
||||
item.email,
|
||||
item.invitations,
|
||||
item.coachings
|
||||
]);
|
||||
|
||||
let button = new Button(null, { icon: 'icon-angle-down', size: 'xsmall', rounded: true })
|
||||
row.querySelector('.cell:nth-child(7)').append(button.el)
|
||||
}
|
||||
}
|
||||
|
||||
async onCreditsAdd(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let result = await this.openDialog(
|
||||
await this.loadContent(
|
||||
'coachings/admin/dialogs/CoachingCreditsDialog',
|
||||
{ title: 'Add coaching credits' },
|
||||
{ models: { } }
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
onCoachingSelect(row, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
let id = row.dataset.id;
|
||||
|
||||
app.Router.route(`/coachings/coaching/${id}`, { });
|
||||
}
|
||||
|
||||
onOrganisationProjects(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let row = event.currentTarget.closest('.row');
|
||||
|
||||
|
||||
if(this.currentOrganisationProjects) {
|
||||
this.currentOrganisationProjects.remove();
|
||||
}
|
||||
|
||||
let projects = ui.create(`
|
||||
<article eiccard class="sublist" primary>
|
||||
<section>
|
||||
<div eicdatagrid footer="hidden"></div>
|
||||
</section>
|
||||
</article>
|
||||
`);
|
||||
|
||||
let grid = new DataGrid(projects.querySelector('[eicdatagrid]'), {
|
||||
headers: [
|
||||
{label: 'number'},
|
||||
{label: 'acronym'},
|
||||
{label: 'type'},
|
||||
{label: 'status'},
|
||||
{label: 'credits used'},
|
||||
{label: 'credits left'},
|
||||
{label: ''},
|
||||
]
|
||||
});
|
||||
|
||||
let organisation = this.coachings.getOrganisation(row.dataset.id);
|
||||
|
||||
for(let item of organisation.projects) {
|
||||
console.log(item)
|
||||
let row2 = grid.addRow( item.reference, [
|
||||
item.number,
|
||||
item.acronym,
|
||||
item.type,
|
||||
item.status,
|
||||
item.creditsUsed,
|
||||
item.creditsLeft,
|
||||
''
|
||||
]);
|
||||
|
||||
let button = new Button(null, { label: 'refill', severity: 'primary', size: 'xsmall' })
|
||||
button.el.addEventListener('click', this.onCreditsAdd.bind(this))
|
||||
row2.querySelector('.cell:nth-child(8)').append(button.el)
|
||||
}
|
||||
|
||||
row.after(projects);
|
||||
|
||||
this.currentOrganisationProjects = projects;
|
||||
}
|
||||
|
||||
onOrganisationSelect(row, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
onCoachSelect(row, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
let id = row.dataset.id
|
||||
|
||||
app.Router.route(`/coachings/coaches/${id}`, { });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('CoachingAdminDashboardView', CoachingAdminDashboardView);
|
||||
@@ -0,0 +1,71 @@
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<article eiccard class="coaching-admin-activity">
|
||||
<header>
|
||||
<h1>Coaching for [Project name]</h1>
|
||||
<h2><span eicchip primary>[status]</span></h2>
|
||||
</header>
|
||||
<section>
|
||||
<div class="cols-2 left">
|
||||
<div>
|
||||
<article eicarticle>
|
||||
<header>
|
||||
<h1>Project owner</h1>
|
||||
</header>
|
||||
<section>
|
||||
<span small>[company pic]</span>
|
||||
<span large>[company name]</span>
|
||||
</section>
|
||||
</article>
|
||||
<article eicarticle>
|
||||
<header>
|
||||
<h1>Coaching</h1>
|
||||
</header>
|
||||
<section>
|
||||
<label>reference</label>
|
||||
<span>[coaching id]</span>
|
||||
<label>selected coach</label>
|
||||
<span>[coach name]</span>
|
||||
<label>started</label>
|
||||
<span>[start date]</span>
|
||||
<label>status</label>
|
||||
<span>[coaching status]</span>
|
||||
<label>credits assigned</label>
|
||||
<span>[credits]</span>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tabs-extended">
|
||||
<menu>
|
||||
<li>priorities</li>
|
||||
<li>plan</li>
|
||||
<li>timesheet</li>
|
||||
<li>feedback</li>
|
||||
</menu>
|
||||
<section class="panel">
|
||||
<label>challenge</label>
|
||||
<div></div>
|
||||
<label>topics</label>
|
||||
<div></div>
|
||||
<label>remarks</label>
|
||||
<div></div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<label>objectives</label>
|
||||
<div></div>
|
||||
<label>activities</label>
|
||||
<div></div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
|
||||
</section>
|
||||
<section class="panel">
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
@@ -0,0 +1,12 @@
|
||||
class CoachingAdminView extends EICDomContent {
|
||||
|
||||
DOMContentLoaded() {
|
||||
ui.eicfy(this.el);
|
||||
|
||||
this.tabs = new Tab();
|
||||
this.tabs.addTabs(this.findAll('menu li'), this.findAll('.panel'));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('CoachingAdminView', CoachingAdminView);
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="cols-2">
|
||||
<div>
|
||||
<label small>Amount of credits</label>
|
||||
<select eicselect>
|
||||
<option value="3">3 credits</option>
|
||||
<option value="6">6 credits</option>
|
||||
<option value="9">9 credits</option>
|
||||
<option value="15">15 credits</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label small>Granularity</label>
|
||||
<select eicselect>
|
||||
<option value="3">3 credits</option>
|
||||
<option value="6">6 credits</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
class CoachingCreditsDialog extends EICDialogContent {
|
||||
|
||||
actions = [
|
||||
{
|
||||
label: 'cancel',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
label: 'add',
|
||||
onclick: this.create.bind(this),
|
||||
severity: 'primary',
|
||||
role: 'create'
|
||||
}
|
||||
]
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
ui.eicfy(this.el);
|
||||
}
|
||||
|
||||
|
||||
|
||||
create() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('CoachingCreditsDialog', CoachingCreditsDialog);
|
||||
Reference in New Issue
Block a user