P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

unclean SPARC

Browse Source
This commit is contained in:
STEINNI
2025-08-27 07:03:09 +00:00
commit f308460931
430 changed files with 54426 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/applicants/dialogs/ApplicantMemberDialog.html
+48
View File
@@ -0,0 +1,48 @@
<div class="applicant-member-dialog">
<div eicalert class="status"></div>
<div class="lookup">
<label>Please identify your member</label>
<input eicinput type="search" data-path="" name="search" value="" placeholder="Enter member's EU Login ID or email and press enter" />
</div>
<div class="member-form">
<div class="cols-3">
<input eicinput type="hidden" name="uid" data-type="ignore" value="" class="required" />
<div>
<label>Title</label>
<select eicselect class="required" name="gender" data-path=""></select>
</div>
<div>
<label>Firstname</label>
<input eicinput disabled value="" class="required" data-path="" name="firstname" data-type="ignore" />
</div>
<div>
<label>Lastname</label>
<input eicinput disabled value="" class="required" data-path="" name="lastname" data-type="ignore" />
</div>
</div>
<div class="cols-2">
<div>
<label>Email</label>
<input eicinput disabled type="email" value="" data-path="" name="email" data-type="ignore" />
</div>
<div>
<label>Phone</label>
<input eicinput type="tel" value="" class="" data-path="" name="phone"/>
</div>
</div>
<div>
<label>Position</label>
<select eicselect lookup class="required" class="required" name="position" data-path=""></select>
</div>
<div>
<label>Rights</label>
<select eicselect data-path="" name="admin" data-type="boolean" class="required">
<option value="false">&lt;h5&gt;User Level&lt;/h5&gt; Can view organisation information, request access or be invited as contributor to proposal(s)</option>
<option value="true">&lt;h5&gt;Admin Level&lt;/h5&gt; Can manage organisation members (add, remove and update) and handle membership requests</option>
</select>
</div>
<div eicalert danger class="confirmation">
<input eiccheckbox type="checkbox" name="confirmDelete" data-type="ignore" label="Yes, I want to remove this member from my organisation" />
</div>
</div>
</div>
app/views/applicants/dialogs/ApplicantMemberDialog.js
+268
View File
@@ -0,0 +1,268 @@
class ApplicantMemberDialog extends EICDialogContent {
actions = [
{
label: 'cancel',
onclick: this.cancel.bind(this),
severity: 'secondary',
role: 'cancel'
},
{
label: 'remove',
onclick: this.remove.bind(this),
severity: 'danger',
role: 'delete'
},
{
label: 'add',
onclick: this.create.bind(this),
severity: 'primary',
role: 'create'
},
{
label: 'accept',
onclick: this.accept.bind(this),
severity: 'success',
role: 'accept'
},
{
label: 'reject',
onclick: this.revoke.bind(this),
severity: 'danger',
role: 'reject'
},
{
label: 'update',
onclick: this.update.bind(this),
severity: 'primary',
role: 'update'
},
]
statuses = {
active: {
severity: 'success',
label: 'This user is part of your organisation'
},
pending: {
severity: 'warning',
label: 'This user ask to be part of your organisation'
}
}
async DOMContentLoaded(options) {
this.mode = options.mode ? options.mode: 'read';
app.meta.add('organisation-functions', app.Assets.Store.json['organisation-functions']);
app.meta.add('organisation-genders', app.Assets.Store.json['organisation-genders']);
this.model = options.model;
this.pic = options.pic;
let components = ui.eicfy(this.el);
this.uid = components.find(component => component.el.name == 'uid');
this.uid.value = options.uid || '';
this.firstname = components.find(component => component.el.name == 'firstname');
this.lastname = components.find(component => component.el.name == 'lastname');
this.email = components.find(component => component.el.name == 'email');
this.phone = components.find(component => component.el.name == 'phone');
this.gender = components.find(component => component.el.name == 'gender');
this.position = components.find(component => component.el.name == 'position');
this.admin = components.find(component => component.el.name == 'admin');
this.confirmDelete = components.find(component => component.el.name == 'confirmDelete');
this.confirmation = this.find('.confirmation');
this.lookup = this.find('.lookup');
this.status = this.find('.status');
ui.hide(this.status);
ui.hide(this.lookup);
ui.hide(this.confirmation);
app.meta.toOptions('organisation-genders', null, true).forEach(item => this.gender.el.append(item));
app.meta.toOptions('organisation-functions', null, true).forEach(item => this.position.el.append(item));
this.form = new Form(this.find('.member-form'));
this.searchInput = components.find(component => component.el.name == 'search');
this.searchInput.onQuery = this.onUserSearch.bind(this);
}
DOMContentFocused() {
this.actions.find(o => o.role == 'create').button.hide();
this.actions.find(o => o.role == 'delete').button.hide();
this.actions.find(o => o.role == 'update').button.hide();
this.actions.find(o => o.role == 'reject').button.hide();
this.actions.find(o => o.role == 'accept').button.hide();
if(this.mode != 'create') {
this.model.read(this.pic, this.uid.value)
.then( this.fill.bind(this));
} else {
this.setupMode(this.mode);
}
}
fill(data) {
this.uid.value = data.uid;
this.firstname.value = data.firstname;
this.lastname.value = data.lastname;
this.email.value = data.email;
this.phone.value = data.phone;
this.gender.value = data.gender;
this.position.value = data.position;
this.admin.value = data.admin.toString();
this.gender.disabled = false;
this.phone.disabled = false;
this.position.disabled = false;
this.admin.disabled = false;
let status = this.statuses[data.status];
this.status.setAttribute(status.severity, '');
this.status.innerHTML = status.label;
// switch to review mode if user is pending
if(this.mode == 'edit' && data.status == 'pending') this.mode = 'review';
this.setupMode(this.mode)
}
setupMode(mode) {
switch(this.mode) {
case 'read':
ui.show(this.status);
this.gender.disabled = true;
this.phone.disabled = true;
this.position.disabled = true;
this.admin.disabled = true;
break;
case 'edit':
ui.show(this.status);
if(this.uid.value != app.User.identity.uuid) this.actions.find(o => o.role == 'delete').button.show();
this.actions.find(o => o.role == 'update').button.show();
break;
case 'review':
ui.show(this.status);
this.actions.find(o => o.role == 'reject').button.show();
this.actions.find(o => o.role == 'accept').button.show();
break;
case 'create':
ui.show(this.lookup);
ui.hide(this.confirmation);
ui.hide(this.status);
this.actions.find(o => o.role == 'create').button.show();
break;
}
}
onUserSearch() {
this.searchInput.loading = true;
this.uid.value = '';
this.firstname.value = '';
this.lastname.value = '';
this.email.value = '';
this.phone.value = '';
this.position.clear();
this.gender.clear();
this.model.search(this.searchInput.value).then(
(userList => {
this.searchInput.loading = false;
if(userList.length == 0) return
// TODO better manage if several (take most complete?)
let user = userList[0];
this.uid.value = user.uid;
this.firstname.value = user.given_name;
this.lastname.value = user.family_name;
this.email.value = user.email;
}),
(err) => {
if(err.code!=404) { // 404 is just unknown user, the display message as warning (via EIC-model) is enough then.
ui.growl.append('User lookup service is unavailable', 'danger')
}
this.searchInput.loading = false;
}
);
}
create(event) {
if(this.form.validate()) {
this.actions.find(o => o.role == 'create').button.loading = true;
this.actions.find(o => o.role == 'cancel').button.disabled = true;
this.model.add(this.pic, this.uid.value, this.form.value)
.then( this.onSuccess.bind(this), this.onFailed.bind(this))
}
}
update(event) {
if(this.form.validate()) {
this.actions.find(o => o.role == 'update').button.loading = true;
this.actions.find(o => o.role == 'delete').button.disabled = true;
this.actions.find(o => o.role == 'cancel').button.disabled = true;
this.model.update( this.pic, this.uid.value, this.form.value )
.then( this.onSuccess.bind(this), this.onFailed.bind(this))
}
}
remove(event) {
ui.show(this.confirmation);
if(this.confirmDelete.el.checked) {
this.actions.find(o => o.role == 'update').button.disabled = true;
this.actions.find(o => o.role == 'delete').button.loading = true;
this.actions.find(o => o.role == 'cancel').button.disabled = true;
console.log(this.pic, this.uid.value)
this.model.revoke( this.pic, this.uid.value)
.then( this.onSuccess.bind(this), this.onFailed.bind(this))
}
}
revoke(event) {
ui.hide(this.confirmation);
this.actions.find(o => o.role == 'accept').button.disabled = true;
this.actions.find(o => o.role == 'reject').button.loading = true;
this.actions.find(o => o.role == 'cancel').button.disabled = true;
this.model.revoke( this.pic, this.uid.value)
.then( this.onSuccess.bind(this), this.onFailed.bind(this))
}
accept(event) {
this.actions.find(o => o.role == 'reject').button.disabled = true;
this.actions.find(o => o.role == 'accept').button.loading = true;
this.actions.find(o => o.role == 'cancel').button.disabled = true;
this.model.grant( this.pic, this.uid.value, this.form.value)
.then( this.onSuccess.bind(this), this.onFailed.bind(this))
}
onSuccess() {
this.actions.find(o => o.role == 'create').button.loading = false;
this.actions.find(o => o.role == 'update').button.loading = false;
this.actions.find(o => o.role == 'delete').button.loading = false;
this.actions.find(o => o.role == 'accept').button.loading = false;
this.actions.find(o => o.role == 'reject').button.loading = false;
this.actions.find(o => o.role == 'cancel').button.disabled = false;
this.commit(true);
}
onFailed() {
this.actions.find(o => o.role == 'create').button.loading = false;
this.actions.find(o => o.role == 'update').button.loading = false;
this.actions.find(o => o.role == 'delete').button.loading = false;
this.actions.find(o => o.role == 'accept').button.loading = false;
this.actions.find(o => o.role == 'reject').button.loading = false;
this.actions.find(o => o.role == 'cancel').button.disabled = false;
this.abort();
}
}
app.registerClass('ApplicantMemberDialog', ApplicantMemberDialog);
app/views/applicants/dialogs/ApplicantProposalSearchDialog.html
+22
View File
@@ -0,0 +1,22 @@
<style>
.applicant-proposal-search {
min-width: 40vw;
}
.applicant-proposal-search .list .row {
grid-template-columns: 120px auto 120px 120px 200px;
}
.applicant-proposal-search .list .cell:nth-child(2),
.applicant-proposal-search .list .cell:nth-child(4),
.applicant-proposal-search .list .cell:nth-child(5),
.applicant-proposal-search .list .cell:nth-child(6) {
text-align:center
}
</style>
<div class="applicant-proposal-search">
<div class="search-form">
<input eicinput type="search" name="search" placeholder="search on proposal number or acronym" />
</div>
<div class="search-results">
<div eicdatagrid class="list"></div>
</div>
</div>
app/views/applicants/dialogs/ApplicantProposalSearchDialog.js
+82
View File
@@ -0,0 +1,82 @@
class ApplicantProposalSearchDialog extends EICDialogContent {
actions = [
{
label: 'cancel',
onclick: this.cancel.bind(this),
severity: 'secondary',
role: 'close'
}
]
DOMContentLoaded(options) {
this.components = ui.eicfy(this.el);
this.model = options.model;
this.pic = options.pic;
this.searchInput = this.components.find(component => component.el.name == 'search');
this.searchInput.onQuery = this.search.bind(this);
this.form = new Form(this.find('.search-form'));
this.list = new DataGrid(this.find('.list'), {
height: '240px',
headers: [
{label: 'number'},
{label: 'acronym'},
{label: 'version'},
{label: 'status'},
]
});
this.search();
}
search() {
this.searchInput.loading = true;
this.model.search(this.pic, this.form.value)
.then(this.fill.bind(this));
}
fill(data) {
this.searchInput.loading = false;
this.list.clear();
for(let item of data) {
let row = this.list.addRow(item, [ item.proposalNumber, item.acronym, item.version, item.status ])
switch(item.accessStatus) {
case 'active':
row.querySelector('.cell:last-child').append(ui.create(`<span eicchip small success>contributing</span>`));
break;
case 'pending':
row.querySelector('.cell:last-child').append(ui.create(`<span eicchip small warning>request pending</span>`));
break;
default:
let button = new Button(null, {label: 'request access', size: 'small', severity: 'primary'});
button.el.dataset.number = item.proposalNumber;
button.addEventListener('click', this.requestAccess.bind(this));
row.querySelector('.cell:last-child').append(button.el);
}
}
}
async requestAccess(event) {
event.stopPropagation();
event.preventDefault();
let button = new Button(event.currentTarget);
button.loading = true;
let number = button.el.dataset.number;
this.model.apply(this.pic, number, app.User.identity.uuid)
.then(async payload => {
button.loading = false
this.search();
})
}
}
app.registerClass('ApplicantProposalSearchDialog',ApplicantProposalSearchDialog);