Add unfollow and view function to corpusfollowerlist

This commit is contained in:
Patrick Jentsch
2023-02-20 16:15:17 +01:00
parent 2dc41fd387
commit 8168a2384f
6 changed files with 130 additions and 90 deletions

View File

@ -33,22 +33,22 @@ class CorpusFollowerList extends ResourceList {
<td><span class="full-name"></span><br><i class="about-me"></i></td>
<td>
<label>
<input ${values['permissions-can-VIEW'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission-view" type="checkbox">
<input ${values['permission-can-VIEW'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission" data-permission="VIEW" type="checkbox">
<span>View</span>
</label>
<br>
<label>
<input ${values['permissions-can-CONTRIBUTE'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission-contribute" type="checkbox">
<input ${values['permission-can-CONTRIBUTE'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission" data-permission="CONTRIBUTE" type="checkbox">
<span>Contribute</span>
</label>
<br>
<label>
<input ${values['permissions-can-ADMINISTRATE'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission-administrate" type="checkbox">
<input ${values['permission-can-ADMINISTRATE'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission" data-permission="ADMINISTRATE" type="checkbox">
<span>Administrate</span>
</label>
</td>
<td class="right-align">
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="unfollow-request"><i class="material-icons">delete</i></a>
<a class="list-action-trigger btn-floating darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
@ -59,6 +59,7 @@ class CorpusFollowerList extends ResourceList {
get valueNames() {
return [
{data: ['id']},
{data: ['follower-id']},
{name: 'avatar', attr: 'src'},
'username',
'about-me',
@ -97,13 +98,14 @@ class CorpusFollowerList extends ResourceList {
let user = corpusFollowerAssociation.following_user;
return {
'id': corpusFollowerAssociation.id,
'follower-id': user.id,
'avatar': user.avatar ? `/users/${user.id}/avatar` : '/static/images/user_avatar.png',
'username': user.username,
'full-name': user.full_name ? user.full_name : '',
'about-me': user.about_me ? user.about_me : '',
'permissions-can-VIEW': corpusFollowerAssociation.permissions.includes('VIEW'),
'permissions-can-CONTRIBUTE': corpusFollowerAssociation.permissions.includes('CONTRIBUTE'),
'permissions-can-ADMINISTRATE': corpusFollowerAssociation.permissions.includes('ADMINISTRATE')
'permission-can-VIEW': corpusFollowerAssociation.permissions.includes('VIEW'),
'permission-can-CONTRIBUTE': corpusFollowerAssociation.permissions.includes('CONTRIBUTE'),
'permission-can-ADMINISTRATE': corpusFollowerAssociation.permissions.includes('ADMINISTRATE')
};
}
@ -120,27 +122,15 @@ class CorpusFollowerList extends ResourceList {
if (listActionElement === null) {return;}
let listAction = listActionElement.dataset.listAction;
switch (listAction) {
case 'toggle-permission-view': {
case 'toggle-permission': {
let followerId = listItemElement.dataset.followerId;
let permission = listActionElement.dataset.permission;
if (event.target.checked) {
Utils.addCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'VIEW');
Utils.addCorpusFollowerPermissionRequest(this.corpusId, followerId, permission)
.catch((error) => {event.target.checked = !event.target.checked;});
} else {
Utils.removeCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'VIEW');
}
break;
}
case 'toggle-permission-contribute': {
if (event.target.checked) {
Utils.addCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'CONTRIBUTE');
} else {
Utils.removeCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'CONTRIBUTE');
}
break;
}
case 'toggle-permission-administrate': {
if (event.target.checked) {
Utils.addCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'ADMINISTRATE');
} else {
Utils.removeCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'ADMINISTRATE');
Utils.removeCorpusFollowerPermissionRequest(this.corpusId, followerId, permission)
.catch((error) => {event.target.checked = !event.target.checked;});
}
break;
}
@ -151,7 +141,26 @@ class CorpusFollowerList extends ResourceList {
}
onClick(event) {
let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id;
let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
let listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
switch (listAction) {
case 'unfollow-request': {
let followerId = listItemElement.dataset.followerId;
Utils.unfollowCorpusRequest(this.corpusId, followerId);
break;
}
case 'view': {
let followerId = listItemElement.dataset.followerId;
window.location.href = `/users/${followerId}`;
break;
}
default: {
break;
}
}
}
onPatch(patch) {}

View File

@ -69,16 +69,19 @@ class Utils {
return Utils.mergeObjectsDeep(mergedObject, ...objects.slice(2));
}
static addCorpusFollowerPermissionRequest(userId, corpusId, corpusFollowerAssociationId, permission) {
static addCorpusFollowerPermissionRequest(corpusId, followerId, permission) {
return new Promise((resolve, reject) => {
fetch(`/corpora/${corpusId}/followers/${corpusFollowerAssociationId}/permissions/${permission}/add`, {method: 'POST', headers: {Accept: 'application/json'}})
fetch(`/corpora/${corpusId}/followers/${followerId}/permissions/${permission}/add`, {method: 'POST', headers: {Accept: 'application/json'}})
.then(
(response) => {
if (response.status === 400) {app.flash('Bad Request', 'error'); reject(response);}
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
app.flash(`Permission added`, 'corpus');
resolve(response);
if (response.ok) {
app.flash(`Permission added`, 'corpus');
resolve(response);
return;
} else {
app.flash(`${response.statusText}`, 'error');
reject(response);
}
},
(response) => {
app.flash('Something went wrong', 'error');
@ -88,16 +91,18 @@ class Utils {
});
}
static removeCorpusFollowerPermissionRequest(userId, corpusId, corpusFollowerAssociationId, permission) {
static removeCorpusFollowerPermissionRequest(corpusId, followerId, permission) {
return new Promise((resolve, reject) => {
fetch(`/corpora/${corpusId}/followers/${corpusFollowerAssociationId}/permissions/${permission}/remove`, {method: 'POST', headers: {Accept: 'application/json'}})
fetch(`/corpora/${corpusId}/followers/${followerId}/permissions/${permission}/remove`, {method: 'POST', headers: {Accept: 'application/json'}})
.then(
(response) => {
if (response.status === 400) {app.flash('Bad Request', 'error'); reject(response);}
if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
app.flash(`Permission removed`, 'corpus');
resolve(response);
if (response.ok) {
app.flash(`Permission removed`, 'corpus');
resolve(response);
} else {
app.flash(`${response.statusText}`, 'error');
reject(response);
}
},
(response) => {
app.flash('Something went wrong', 'error');
@ -215,6 +220,27 @@ class Utils {
});
}
static unfollowCorpusRequest(corpusId, followerId) {
return new Promise((resolve, reject) => {
fetch(`/corpora/${corpusId}/followers/${followerId}/unfollow`, {method: 'POST', headers: {Accept: 'application/json'}})
.then(
(response) => {
if (response.ok) {
app.flash(`User unfollowed from Corpus`, 'corpus');
resolve(response);
} else {
app.flash(`${response.statusText}`, 'error');
reject(response);
}
},
(response) => {
app.flash('Something went wrong', 'error');
reject(response);
}
);
});
}
static deleteCorpusRequest(userId, corpusId) {
return new Promise((resolve, reject) => {
let corpus;

View File

@ -1,10 +0,0 @@
import DataStore from './DataStore';
import EventBroker from './EventBroker';
const dataStore = new DataStore();
const eventBroker = new EventBroker();
const socket = io({transports: ['websocket'], upgrade: false});
export {eventBroker, socket};