From 7b9af7ba15b196f8098792e8c68f3cc410c97e04 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Tue, 12 Jan 2021 15:25:54 +0100 Subject: [PATCH] Implement more patch options for lists and display dummy object if list is empty --- .../static/js/nopaque/lists/CorpusFileList.js | 18 +++-- web/app/static/js/nopaque/lists/CorpusList.js | 2 +- web/app/static/js/nopaque/lists/JobList.js | 4 +- .../js/nopaque/lists/QueryResultList.js | 74 ++++++++++++++++++- .../static/js/nopaque/lists/RessourceList.js | 11 ++- web/app/static/js/nopaque/main.js | 45 +++++------ 6 files changed, 116 insertions(+), 38 deletions(-) diff --git a/web/app/static/js/nopaque/lists/CorpusFileList.js b/web/app/static/js/nopaque/lists/CorpusFileList.js index afd2a42c..478be52e 100644 --- a/web/app/static/js/nopaque/lists/CorpusFileList.js +++ b/web/app/static/js/nopaque/lists/CorpusFileList.js @@ -40,7 +40,7 @@ class CorpusFileList extends RessourceList { window.location.href = this.corpus.files[corpusFileId].download_url; break; case 'view': - window.location.href = this.corpus.files[corpusFileId].url; + if (corpusFileId !== '-1') {window.location.href = this.corpus.files[corpusFileId].url;} break; default: console.error(`Unknown action: "${action}"`); @@ -49,7 +49,7 @@ class CorpusFileList extends RessourceList { } patch(patch) { - let id, match, re; + let id, match, re, valueName; for (let operation of patch) { switch(operation.op) { case 'add': @@ -65,6 +65,14 @@ class CorpusFileList extends RessourceList { this.remove(id); } break; + case 'replace': + // Matches the only paths that should be handled here: /corpora/{corpusId}/{status || description || title} + re = new RegExp('^/corpora/' + this.corpus.id + '/files/(\\d+)/(author|filename|publishing_year|title)$'); + if (re.test(operation.path)) { + [match, id, valueName] = operation.path.match(re); + this.replace(id, valueName, operation.value); + } + break; default: break; } @@ -72,7 +80,7 @@ class CorpusFileList extends RessourceList { } preprocessRessource(corpusFile) { - return {id: corpusFile.id, author: corpusFile.author, filename: corpusFile.filename, 'publishing-year': corpusFile.publishing_year, title: corpusFile.title}; + return {id: corpusFile.id, author: corpusFile.author, filename: corpusFile.filename, publishing_year: corpusFile.publishing_year, title: corpusFile.title}; } } CorpusFileList.options = { @@ -80,12 +88,12 @@ CorpusFileList.options = { - + delete file_download send `, - valueNames: [{data: ['id']}, 'author', 'filename', 'publishing-year', 'title'] + valueNames: [{data: ['id']}, 'author', 'filename', 'publishing_year', 'title'] }; diff --git a/web/app/static/js/nopaque/lists/CorpusList.js b/web/app/static/js/nopaque/lists/CorpusList.js index e9fd392c..a3433411 100644 --- a/web/app/static/js/nopaque/lists/CorpusList.js +++ b/web/app/static/js/nopaque/lists/CorpusList.js @@ -36,7 +36,7 @@ class CorpusList extends RessourceList { deleteModal.open(); break; case 'view': - window.location.href = this.corpora[corpusId].url; + if (corpusId !== '-1') {window.location.href = this.corpora[corpusId].url;} break; default: console.error(`Unknown action: ${action}`); diff --git a/web/app/static/js/nopaque/lists/JobList.js b/web/app/static/js/nopaque/lists/JobList.js index 52d30825..b4cd84ff 100644 --- a/web/app/static/js/nopaque/lists/JobList.js +++ b/web/app/static/js/nopaque/lists/JobList.js @@ -30,7 +30,7 @@ class JobList extends RessourceList { deleteModal.open(); break; case 'view': - window.location.href = this.user.data.jobs[jobId].url; + if (jobId !== '-1') {window.location.href = this.user.data.jobs[jobId].url;} break; default: console.error(`Unknown action: "${action}"`); @@ -57,7 +57,7 @@ class JobList extends RessourceList { break; case 'replace': // Matches the only paths that should be handled here: /jobs/{jobId}/{service || status || description || title} - re = /^\/jobs\/(\d+)\/(status|description|title)$/; + re = /^\/jobs\/(\d+)\/(service|status|description|title)$/; if (re.test(operation.path)) { [match, id, valueName] = operation.path.match(re); this.replace(id, valueName, operation.value); diff --git a/web/app/static/js/nopaque/lists/QueryResultList.js b/web/app/static/js/nopaque/lists/QueryResultList.js index c8cf0771..98f3e7fb 100644 --- a/web/app/static/js/nopaque/lists/QueryResultList.js +++ b/web/app/static/js/nopaque/lists/QueryResultList.js @@ -2,6 +2,79 @@ class QueryResultList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...QueryResultList.options, ...options}); this.user.eventListeners.queryResult.addEventListener((eventType, payload) => this.eventHandler(eventType, payload)); + listElement.addEventListener('click', event => this.onclick(event)); + } + + onclick(event) { + let ressourceElement = event.target.closest('tr'); + if (ressourceElement === null) {return;} + let queryResultId = ressourceElement.dataset.id; + let actionButtonElement = event.target.closest('.action-button'); + let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action; + switch (action) { + case 'delete': + let deleteModalHTML = `
+
+

Confirm query result deletion

+

Do you really want to delete the query result ${this.user.data.query_results[queryResultId].title}? It will be permanently deleted!

+
+
+ Cancel + deleteDelete +
+
`; + let deleteModalParentElement = document.querySelector('main'); + deleteModalParentElement.insertAdjacentHTML('beforeend', deleteModalHTML); + let deleteModalElement = deleteModalParentElement.lastChild; + let deleteModal = M.Modal.init(deleteModalElement, {onCloseEnd: () => {deleteModal.destroy(); deleteModalElement.remove();}}); + deleteModal.open(); + break; + case 'view': + if (queryResultId !== '-1') {window.location.href = this.user.data.query_results[queryResultId].url;} + break; + default: + console.error(`Unknown action: "${action}"`); + break; + } + } + + patch(patch) { + let id, match, re, valueName; + for (let operation of patch) { + switch(operation.op) { + case 'add': + // Matches the only paths that should be handled here: /jobs/{jobId} + re = /^\/query_results\/(\d+)$/; + if (re.test(operation.path)) {this.add(operation.value);} + break; + case 'remove': + // See case add ;) + re = /^\/query_results\/(\d+)$/; + if (re.test(operation.path)) { + [match, id] = operation.path.match(re); + this.remove(id); + } + break; + case 'replace': + // Matches the only paths that should be handled here: /jobs/{jobId}/{service || status || description || title} + re = /^\/query_results\/(\d+)\/(corpus_title|description|query|title)$/; + if (re.test(operation.path)) { + [match, id, valueName] = operation.path.match(re); + this.replace(id, valueName, operation.value); + } + break; + default: + break; + } + } + } + + preprocessRessource(queryResult) { + return {id: queryResult.id, + corpus_title: queryResult.corpus_title, + description: queryResult.description, + query: queryResult.query, + title: queryResult.title}; } } QueryResultList.options = { @@ -11,7 +84,6 @@ QueryResultList.options = { delete send - search `, valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title'] diff --git a/web/app/static/js/nopaque/lists/RessourceList.js b/web/app/static/js/nopaque/lists/RessourceList.js index 3aabfc9d..ec5afa69 100644 --- a/web/app/static/js/nopaque/lists/RessourceList.js +++ b/web/app/static/js/nopaque/lists/RessourceList.js @@ -34,8 +34,8 @@ class RessourceList {
- Preparing data... -

No ressource available (yet).

+ Waiting for data... +

This list is not initialized yet.

`; @@ -59,6 +59,13 @@ class RessourceList { this.list.clear(); this.add(Object.values(ressources)); this.list.sort('id', {order: 'desc'}); + let emptyListElementHTML = ` + + file_downloadNothing here... +

No ressource available.

+ + `; + this.list.list.insertAdjacentHTML('afterbegin', emptyListElementHTML); } patch(patch) { diff --git a/web/app/static/js/nopaque/main.js b/web/app/static/js/nopaque/main.js index 1bf3561c..c8f886be 100644 --- a/web/app/static/js/nopaque/main.js +++ b/web/app/static/js/nopaque/main.js @@ -42,41 +42,32 @@ class User { init(data) { this.data = data; - if (Object.keys(this.data.corpora).length > 0) { - //for (listener of this.eventListeners.corporaInit) {listener(this.data.corpora);} - for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) { - if (corpusId === '*') { - for (let eventListener of eventListeners) {eventListener('init', this.data.corpora);} - } else { - if (corpusId in this.data.corpora) { - for (let eventListener of eventListeners) {eventListener('init', this.data.corpora[corpusId]);} - } + for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) { + if (corpusId === '*') { + for (let eventListener of eventListeners) {eventListener('init', this.data.corpora);} + } else { + if (corpusId in this.data.corpora) { + for (let eventListener of eventListeners) {eventListener('init', this.data.corpora[corpusId]);} } } } - if (Object.keys(this.data.jobs).length > 0) { - //for (listener of this.eventListeners.jobsInit) {listener(this.data.jobs);} - for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) { - if (jobId === '*') { - for (let eventListener of eventListeners) {eventListener('init', this.data.jobs);} - } else { - if (jobId in this.data.jobs) { - for (let eventListener of eventListeners) {eventListener('init', this.data.jobs[jobId]);} - } + for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) { + if (jobId === '*') { + for (let eventListener of eventListeners) {eventListener('init', this.data.jobs);} + } else { + if (jobId in this.data.jobs) { + for (let eventListener of eventListeners) {eventListener('init', this.data.jobs[jobId]);} } } } - if (Object.keys(this.data.query_results).length > 0) { - //for (listener of this.eventListeners.queryResultsInit) {listener(this.data.query_results);} - for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) { - if (queryResultId === '*') { - for (let eventListener of eventListeners) {eventListener('init', this.data.query_results);} - } else { - if (queryResultId in this.data.query_results) { - for (let eventListener of eventListeners) {eventListener('init', this.data.query_results[queryResultId]);} - } + for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) { + if (queryResultId === '*') { + for (let eventListener of eventListeners) {eventListener('init', this.data.query_results);} + } else { + if (queryResultId in this.data.query_results) { + for (let eventListener of eventListeners) {eventListener('init', this.data.query_results[queryResultId]);} } } }