Fix contributionslists share toggle

This commit is contained in:
Patrick Jentsch
2023-01-11 13:29:47 +01:00
parent 632aab258b
commit f972c13b81
4 changed files with 196 additions and 128 deletions

View File

@ -18,39 +18,33 @@ class SpaCyNLPPipelineModelList extends ResourceList {
});
app.getUser(this.userId).then((user) => {
this.add(Object.values(user.spacy_nlp_pipeline_models));
for (let uncheckedCheckbox of this.listjs.list.querySelectorAll('input[data-checked="True"]')) {
uncheckedCheckbox.setAttribute('checked', '');
}
if (user.role.name !== ('Administrator' || 'Contributor')) {
for (let switchElement of this.listjs.list.querySelectorAll('.is_public')) {
switchElement.setAttribute('disabled', '');
}
}
this.isInitialized = true;
});
}
get item() {
return `
<tr class="list-item clickable hoverable">
<td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
<td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
<td>
<div class="list-action-trigger switch center-align" data-list-action="share-request">
<span class="share"></span>
<label>
<input type="checkbox" class="is_public">
<span class="lever"></span>
public
</label>
</div>
</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 service-color darken waves-effect waves-light service-2" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();
return (values) => {
return `
<tr class="list-item clickable hoverable">
<td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
<td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url publishing-url-2"></a></td>
<td>
<div class="list-action-trigger switch center-align" data-list-action="share-request">
<span class="share"></span>
<label>
<input class="is-public" ${values['is-public'] ? 'checked' : ''} type="checkbox">
<span class="lever"></span>
public
</label>
</div>
</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 service-color darken waves-effect waves-light service-2" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();
};
}
get valueNames() {
@ -65,8 +59,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
'publishing-year',
'title',
'title-2',
'version',
{name: 'is_public', attr: 'data-checked'}
'version'
];
}
@ -96,6 +89,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
}
mapResourceToValue(spaCyNLPPipelineModel) {
console.log(spaCyNLPPipelineModel);
return {
'id': spaCyNLPPipelineModel.id,
'creation-date': spaCyNLPPipelineModel.creation_date,
@ -108,7 +102,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
'title': spaCyNLPPipelineModel.title,
'title-2': spaCyNLPPipelineModel.title,
'version': spaCyNLPPipelineModel.version,
'is_public': spaCyNLPPipelineModel.is_public ? 'True' : 'False'
'is-public': spaCyNLPPipelineModel.is_public
};
}
@ -117,14 +111,15 @@ class SpaCyNLPPipelineModelList extends ResourceList {
}
onChange(event) {
let actionSwitchElement = event.target.closest('.list-action-trigger');
let action = actionSwitchElement.dataset.listAction;
let spaCyNLPPipelineModelElement = event.target.closest('tr');
let spaCyNLPPipelineModelId = spaCyNLPPipelineModelElement.dataset.id;
switch (action) {
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]');
if (listActionElement === null) {return;}
let listAction = listActionElement.dataset.listAction;
switch (listAction) {
case 'share-request': {
let is_public = actionSwitchElement.querySelector('input').checked;
Utils.shareSpaCyNLPPipelineModelRequest(this.userId, spaCyNLPPipelineModelId, is_public);
Utils.spaCyNLPPipelineModelToggleIsPublicRequest(this.userId, itemId);
break;
}
default: {
@ -134,24 +129,23 @@ class SpaCyNLPPipelineModelList extends ResourceList {
}
onClick(event) {
if (event.target.closest('.action-switch')) {
let userRole = app.data.users[this.userId].role.name;
if (userRole !== ('Administrator' || 'Contributor')) {
app.flash('You need the "Contributor" or "Administrator" role to perform this action.', 'error');
}
return;
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]');
// ignore switch clicks, handle them by the onChange method instead
if (listActionElement.classList.contains('switch')) {
event.preventDefault();
this.onChange(event);
}
let actionButtonElement = event.target.closest('.list-action-trigger');
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.listAction;
let spaCyNLPPipelineModelElement = event.target.closest('tr');
let spaCyNLPPipelineModelId = spaCyNLPPipelineModelElement.dataset.id;
switch (action) {
let listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
switch (listAction) {
case 'delete-request': {
Utils.deleteSpaCyNLPPipelineModelRequest(this.userId, spaCyNLPPipelineModelId);
Utils.deleteSpaCyNLPPipelineModelRequest(this.userId, itemId);
break;
}
case 'view': {
window.location.href = `/contributions/spacy-nlp-pipeline-models/${spaCyNLPPipelineModelId}`;
window.location.href = `/contributions/spacy-nlp-pipeline-models/${itemId}`;
break;
}
default: {
@ -159,4 +153,41 @@ class SpaCyNLPPipelineModelList extends ResourceList {
}
}
}
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'add': {
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {this.add(operation.value);}
break;
}
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
let [match, itemId] = operation.path.match(re);
this.remove(itemId);
}
break;
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)/(is_public)$`);
if (re.test(operation.path)) {
let [match, itemId, valueName] = operation.path.match(re);
if (valueName === 'is_public') {
this.listjs.list.querySelector(`.list-item[data-id="${itemId}"] .is-public`).checked = operation.value;
valueName = 'is-public';
}
this.replace(itemId, valueName, operation.value);
}
break;
}
default: {
break;
}
}
}
}
}

View File

@ -31,26 +31,28 @@ class TesseractOCRPipelineModelList extends ResourceList {
}
get item() {
return `
<tr class="list-item clickable hoverable">
<td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
<td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
<td>
<div class="list-action-trigger switch center-align" data-list-action="share-request">
<span class="share"></span>
<label>
<input type="checkbox" class="is_public">
<span class="lever"></span>
public
</label>
</div>
</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 service-color darken waves-effect waves-light service-2" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();
return (values) => {
return `
<tr class="list-item clickable hoverable">
<td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
<td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
<td>
<div class="list-action-trigger switch center-align" data-list-action="share-request">
<span class="share"></span>
<label>
<input ${values['is-public'] ? 'checked' : ''} class="is-public" type="checkbox">
<span class="lever"></span>
public
</label>
</div>
</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 service-color darken waves-effect waves-light service-2" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();
};
}
get valueNames() {
@ -108,7 +110,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
'title': tesseractOCRPipelineModel.title,
'title-2': tesseractOCRPipelineModel.title,
'version': tesseractOCRPipelineModel.version,
'is_public': tesseractOCRPipelineModel.is_public ? 'True' : 'False'
'is-public': tesseractOCRPipelineModel.is_public
};
}
@ -117,14 +119,15 @@ class TesseractOCRPipelineModelList extends ResourceList {
}
onChange(event) {
let actionSwitchElement = event.target.closest('.list-action-trigger');
let action = actionSwitchElement.dataset.listAction;
let tesseractOCRPipelineModelElement = event.target.closest('tr');
let tesseractOCRPipelineModelId = tesseractOCRPipelineModelElement.dataset.id;
switch (action) {
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]');
if (listActionElement === null) {return;}
let listAction = listActionElement.dataset.listAction;
switch (listAction) {
case 'share-request': {
let is_public = actionSwitchElement.querySelector('input').checked;
Utils.shareTesseractOCRPipelineModelRequest(this.userId, tesseractOCRPipelineModelId, is_public);
Utils.tesseractOCRPipelineModelToggleIsPublicRequest(this.userId, itemId);
break;
}
default: {
@ -134,24 +137,23 @@ class TesseractOCRPipelineModelList extends ResourceList {
}
onClick(event) {
if (event.target.closest('.action-switch')) {
let userRole = app.data.users[this.userId].role.name;
if (userRole !== ('Administrator' || 'Contributor')) {
app.flash('You need the "Contributor" or "Administrator" role to perform this action.', 'error');
}
return;
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]');
// ignore switch clicks, handle them by the onChange method instead
if (listActionElement.classList.contains('switch')) {
event.preventDefault();
this.onChange(event);
}
let actionButtonElement = event.target.closest('.list-action-trigger');
let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.listAction;
let tesseractOCRPipelineModelElement = event.target.closest('tr');
let tesseractOCRPipelineModelId = tesseractOCRPipelineModelElement.dataset.id;
switch (action) {
let listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
switch (listAction) {
case 'delete-request': {
Utils.deleteTesseractOCRPipelineModelRequest(this.userId, tesseractOCRPipelineModelId);
Utils.deleteTesseractOCRPipelineModelRequest(this.userId, itemId);
break;
}
case 'view': {
window.location.href = `/contributions/tesseract-ocr-pipeline-models/${tesseractOCRPipelineModelId}`;
window.location.href = `/contributions/tesseract-ocr-pipeline-models/${itemId}`;
break;
}
default: {
@ -159,4 +161,41 @@ class TesseractOCRPipelineModelList extends ResourceList {
}
}
}
onPatch(patch) {
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)`);
let filteredPatch = patch.filter(operation => re.test(operation.path));
for (let operation of filteredPatch) {
switch(operation.op) {
case 'add': {
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {this.add(operation.value);}
break;
}
case 'remove': {
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)$`);
if (re.test(operation.path)) {
let [match, itemId] = operation.path.match(re);
this.remove(itemId);
}
break;
}
case 'replace': {
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)/(is_public)$`);
if (re.test(operation.path)) {
let [match, itemId, valueName] = operation.path.match(re);
if (valueName === 'is_public') {
this.listjs.list.querySelector(`.list-item[data-id="${itemId}"] .is-public`).checked = operation.value;
valueName = 'is-public';
}
this.replace(itemId, valueName, operation.value);
}
break;
}
default: {
break;
}
}
}
}
}