Integrate CorpusFollowerRoles

This commit is contained in:
Patrick Jentsch
2023-02-23 13:05:04 +01:00
parent 1be8a449fe
commit 38d09a3490
7 changed files with 284 additions and 126 deletions

View File

@ -7,6 +7,9 @@ class CorpusFollowerList extends ResourceList {
constructor(listContainerElement, options = {}) {
super(listContainerElement, options);
this.listjs.on('updated', () => {
M.FormSelect.init(this.listjs.list.querySelectorAll('.list-item select'));
});
this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
this.isInitialized = false;
@ -28,30 +31,21 @@ class CorpusFollowerList extends ResourceList {
return (values) => {
return `
<tr class="list-item clickable hoverable">
<td><img alt="user-image" class="circle responsive-img avatar" style="width:50%"></td>
<td><b class="username"><b></td>
<td><span class="full-name"></span><br><i class="about-me"></i></td>
<td><img alt="follower-avatar" class="circle responsive-img follower-avatar" style="width:50%"></td>
<td><b class="follower-username"><b></td>
<td>
<span class="disable-on-click">
<label>
<input ${values['permission-can-VIEW'] ? 'checked' : ''} class="permission-can-VIEW list-action-trigger" data-list-action="toggle-permission" data-permission="VIEW" type="checkbox">
<span>View</span>
</label>
</span>
<span class="follower-full-name"></span>
<br>
<span class="disable-on-click">
<label>
<input ${values['permission-can-CONTRIBUTE'] ? 'checked' : ''} class="permission-can-CONTRIBUTE list-action-trigger" data-list-action="toggle-permission" data-permission="CONTRIBUTE" type="checkbox">
<span>Contribute</span>
</label>
</span>
<br>
<span class="disable-on-click">
<label>
<input ${values['permission-can-ADMINISTRATE'] ? 'checked' : ''} class="permission-can-ADMINISTRATE list-action-trigger" data-list-action="toggle-permission" data-permission="ADMINISTRATE" type="checkbox">
<span>Administrate</span>
</label>
</span>
<i class="follower-about-me"></i>
</td>
<td>
<div class="input-field disable-on-click list-action-trigger" data-list-action="update-role">
<select>
<option value="Viewer" ${values['role.name'] === 'Viewer' ? 'selected' : ''}>Viewer</option>
<option value="Contributor" ${values['role.name'] === 'Contributor' ? 'selected' : ''}>Contributor</option>
<option value="Administrator" ${values['role.name'] === 'Administrator' ? 'selected' : ''}>Administrator</option>
</select>
</div>
</td>
<td class="right-align">
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="unfollow-request"><i class="material-icons">delete</i></a>
@ -66,10 +60,10 @@ class CorpusFollowerList extends ResourceList {
return [
{data: ['id']},
{data: ['follower-id']},
{name: 'avatar', attr: 'src'},
'username',
'about-me',
'full-name'
{name: 'follower-avatar', attr: 'src'},
'follower-username',
'follower-about-me',
'follower-full-name'
];
}
@ -90,7 +84,7 @@ class CorpusFollowerList extends ResourceList {
<th style="width:15%;"></th>
<th>Username</th>
<th>User details</th>
<th>Permissions</th>
<th>Role</th>
<th></th>
</tr>
</thead>
@ -104,13 +98,11 @@ class CorpusFollowerList extends ResourceList {
return {
'id': corpusFollowerAssociation.id,
'follower-id': corpusFollowerAssociation.follower.id,
'avatar': corpusFollowerAssociation.follower.avatar ? `/users/${corpusFollowerAssociation.follower.id}/avatar` : '/static/images/user_avatar.png',
'username': corpusFollowerAssociation.follower.username,
'full-name': corpusFollowerAssociation.follower.full_name ? corpusFollowerAssociation.follower.full_name : '',
'about-me': corpusFollowerAssociation.follower.about_me ? corpusFollowerAssociation.follower.about_me : '',
'permission-can-VIEW': corpusFollowerAssociation.permissions.includes('VIEW'),
'permission-can-CONTRIBUTE': corpusFollowerAssociation.permissions.includes('CONTRIBUTE'),
'permission-can-ADMINISTRATE': corpusFollowerAssociation.permissions.includes('ADMINISTRATE')
'follower-avatar': corpusFollowerAssociation.follower.avatar ? `/users/${corpusFollowerAssociation.follower.id}/avatar` : '/static/images/user_avatar.png',
'follower-username': corpusFollowerAssociation.follower.username,
'follower-full-name': corpusFollowerAssociation.follower.full_name ? corpusFollowerAssociation.follower.full_name : '',
'follower-about-me': corpusFollowerAssociation.follower.about_me ? corpusFollowerAssociation.follower.about_me : '',
'role-name': corpusFollowerAssociation.role.name
};
}
@ -119,7 +111,7 @@ class CorpusFollowerList extends ResourceList {
}
onChange(event) {
if (event.target.tagName !== 'INPUT') {return;}
console.log(event.target.tagName);
let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id;
@ -127,16 +119,10 @@ class CorpusFollowerList extends ResourceList {
if (listActionElement === null) {return;}
let listAction = listActionElement.dataset.listAction;
switch (listAction) {
case 'toggle-permission': {
case 'update-role': {
let followerId = listItemElement.dataset.followerId;
let permission = listActionElement.dataset.permission;
if (event.target.checked) {
Utils.addCorpusFollowerPermissionRequest(this.corpusId, followerId, permission)
.catch((error) => {event.target.checked = !event.target.checked;});
} else {
Utils.removeCorpusFollowerPermissionRequest(this.corpusId, followerId, permission)
.catch((error) => {event.target.checked = !event.target.checked;});
}
let roleName = event.target.value;
Utils.updateCorpusFollowerRole(this.corpusId, followerId, roleName);
break;
}
default: {
@ -188,11 +174,11 @@ class CorpusFollowerList extends ResourceList {
break;
}
case 'replace': {
// let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)/(service|status|description|title)$`);
// if (re.test(operation.path)) {
// let [match, jobId, valueName] = operation.path.match(re);
// this.replace(jobId, valueName, operation.value);
// }
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)/role$`);
if (re.test(operation.path)) {
let [match, jobId, valueName] = operation.path.match(re);
this.replace(jobId, valueName, operation.value);
}
break;
}
default: {