From 89f518fe3855769841df14337ce0820328f02e02 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Fri, 3 Dec 2021 12:01:50 +0100 Subject: [PATCH] Sort lists by ressources creation date. CSS and HTML cleanup --- app/static/css/nopaque.css | 58 ------------ .../nopaque/RessourceLists/CorpusFileList.js | 31 ++++--- .../js/nopaque/RessourceLists/CorpusList.js | 28 +++--- .../js/nopaque/RessourceLists/JobInputList.js | 18 ++-- .../js/nopaque/RessourceLists/JobList.js | 41 ++++++--- .../nopaque/RessourceLists/JobResultList.js | 55 ++++++----- .../nopaque/RessourceLists/QueryResultList.js | 31 ++++--- .../nopaque/RessourceLists/RessourceList.js | 29 ++++-- .../js/nopaque/RessourceLists/UserList.js | 34 ++++--- app/templates/admin/user.html.j2 | 92 +++++++++---------- app/templates/admin/users.html.j2 | 10 +- app/templates/corpora/corpus.html.j2 | 8 +- app/templates/jobs/job.html.j2 | 2 +- app/templates/main/dashboard.html.j2 | 35 ++----- 14 files changed, 226 insertions(+), 246 deletions(-) diff --git a/app/static/css/nopaque.css b/app/static/css/nopaque.css index 41dfd628..381c2f40 100644 --- a/app/static/css/nopaque.css +++ b/app/static/css/nopaque.css @@ -31,68 +31,10 @@ height: 30px !important; } -/* flat-interaction addition to show background color */ - -.flat-interaction { - background-color: #DCDCDC; - width: 100%; - margin-bottom: 3px; - text-transform: capitalize; -} - -.flat-interaction:hover { - background-color: #E6E6FA !important; -} - -/* CSS for clickable th elements in tables. Needed for sortable table data with -list js. On click on th header elements will be sorted accordingly. Also a caret -indicator will show up how the column is sorted right now.; */ -.sort { - cursor: pointer; -} -.sort:after { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid transparent; - content:""; - position: relative; - top:-10px; - right:-5px; -} -.sort.asc:after { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; - content:""; - position: relative; - top:13px; - right:-5px; -} -.sort.desc:after { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; - content:""; - position: relative; - top:-10px; - right:-5px; -} - .show-if-only-child:not(:only-child) { display: none !important; } -/* class for expert view */ -.expert-view { - cursor: pointer; -} - .btn-scale-x2 { transform: scale(2); } diff --git a/app/static/js/nopaque/RessourceLists/CorpusFileList.js b/app/static/js/nopaque/RessourceLists/CorpusFileList.js index a7a663b3..282488de 100644 --- a/app/static/js/nopaque/RessourceLists/CorpusFileList.js +++ b/app/static/js/nopaque/RessourceLists/CorpusFileList.js @@ -13,7 +13,25 @@ class CorpusFileList extends RessourceList { `.trim(), - valueNames: [{data: ['id']}, 'author', 'filename', 'publishing_year', 'title'] + ressourceMapper: corpusFile => { + return { + id: corpusFile.id, + author: corpusFile.author, + creationDate: corpusFile.creation_date, + filename: corpusFile.filename, + publishingYear: corpusFile.publishing_year, + title: corpusFile.title + }; + }, + sortValueName: 'creationDate', + valueNames: [ + {data: ['id']}, + {data: ['creationDate']}, + 'author', + 'filename', + 'publishingYear', + 'title' + ] }; @@ -115,15 +133,4 @@ class CorpusFileList extends RessourceList { } } } - - preprocessRessource(corpusFile) { - return { - id: corpusFile.id, - author: corpusFile.author, - creationDate: corpusFile.creation_date, - filename: corpusFile.filename, - publishing_year: corpusFile.publishing_year, - title: corpusFile.title - }; - } } diff --git a/app/static/js/nopaque/RessourceLists/CorpusList.js b/app/static/js/nopaque/RessourceLists/CorpusList.js index 749ee73f..66175a12 100644 --- a/app/static/js/nopaque/RessourceLists/CorpusList.js +++ b/app/static/js/nopaque/RessourceLists/CorpusList.js @@ -11,7 +11,23 @@ class CorpusList extends RessourceList { `.trim(), - valueNames: [{data: ['id']}, {name: 'status', attr: 'data-status'}, 'description', 'title'] + ressourceMapper: corpus => { + return { + id: corpus.id, + creationDate: corpus.creation_date, + description: corpus.description, + status: corpus.status, + title: corpus.title + }; + }, + sortValueName: 'creationDate', + valueNames: [ + {data: ['id']}, + {data: ['creationDate']}, + {name: 'status', attr: 'data-status'}, + 'description', + 'title' + ] }; @@ -107,14 +123,4 @@ class CorpusList extends RessourceList { } } } - - preprocessRessource(corpus) { - return { - id: corpus.id, - creationDate: corpus.creation_date, - description: corpus.description, - status: corpus.status, - title: corpus.title - }; - } } diff --git a/app/static/js/nopaque/RessourceLists/JobInputList.js b/app/static/js/nopaque/RessourceLists/JobInputList.js index d537a797..aaece35b 100644 --- a/app/static/js/nopaque/RessourceLists/JobInputList.js +++ b/app/static/js/nopaque/RessourceLists/JobInputList.js @@ -8,7 +8,15 @@ class JobInputList extends RessourceList { `.trim(), - valueNames: [{data: ['id']}, 'filename'] + ressourceMapper: jobInput => { + return { + id: jobInput.id, + creationDate: jobInput.creation_date, + filename: jobInput.filename + }; + }, + sortValueName: 'creationDate', + valueNames: [{data: ['id']}, {data: ['creationDate']}, 'filename'] }; @@ -43,12 +51,4 @@ class JobInputList extends RessourceList { } usersPatchHandler(patch) {return;} - - preprocessRessource(jobInput) { - return { - id: jobInput.id, - creationDate: jobInput.creation_date, - filename: jobInput.filename - }; - } } diff --git a/app/static/js/nopaque/RessourceLists/JobList.js b/app/static/js/nopaque/RessourceLists/JobList.js index 6562d072..dc0478f7 100644 --- a/app/static/js/nopaque/RessourceLists/JobList.js +++ b/app/static/js/nopaque/RessourceLists/JobList.js @@ -1,17 +1,39 @@ class JobList extends RessourceList { static options = { item: ` - - + +
delete - send + send `.trim(), - valueNames: [{data: ['id']}, {name: 'service', attr: 'data-service'}, {name: 'status', attr: 'data-status'}, 'description', 'title'] + ressourceMapper: job => { + return { + id: job.id, + creationDate: job.creation_date, + description: job.description, + service: job.service, + serviceDuplicate1: job.service, + serviceDuplicate2: job.service, + status: job.status, + title: job.title + }; + }, + sortValueName: 'creationDate', + valueNames: [ + {data: ['id']}, + {data: ['creationDate']}, + {data: ['service']}, + {name: 'serviceDuplicate1', attr: 'data-service'}, + {name: 'serviceDuplicate2', attr: 'data-service'}, + {name: 'status', attr: 'data-status'}, + 'description', + 'title' + ] }; @@ -109,15 +131,4 @@ class JobList extends RessourceList { } } } - - preprocessRessource(job) { - return { - id: job.id, - creationDate: job.creation_date, - description: job.description, - service: job.service, - status: job.status, - title: job.title - }; - } } diff --git a/app/static/js/nopaque/RessourceLists/JobResultList.js b/app/static/js/nopaque/RessourceLists/JobResultList.js index 4413b30d..bb496c87 100644 --- a/app/static/js/nopaque/RessourceLists/JobResultList.js +++ b/app/static/js/nopaque/RessourceLists/JobResultList.js @@ -9,7 +9,36 @@ class JobResultList extends RessourceList { `.trim(), - valueNames: [{data: ['id']}, 'description', 'filename'] + ressourceMapper: jobResult => { + let description; + + if (jobResult.filename.endsWith('.pdf.zip')) { + description = 'PDF files with text layer'; + } else if (jobResult.filename.endsWith('.txt.zip')) { + description = 'Raw text files'; + } else if (jobResult.filename.endsWith('.vrt.zip')) { + description = 'VRT compliant files including the NLP data'; + } else if (jobResult.filename.endsWith('.xml.zip')) { + description = 'TEI compliant files'; + } else if (jobResult.filename.endsWith('.poco.zip')) { + description = 'HOCR and image files for post correction (PoCo)'; + } else { + description = 'All result files created during this job'; + } + return { + id: jobResult.id, + creationDate: jobResult.creation_date, + description: description, + filename: jobResult.filename + }; + }, + sortValueName: 'creationDate', + valueNames: [ + {data: ['id']}, + {data: ['creationDate']}, + 'description', + 'filename' + ] }; @@ -63,28 +92,4 @@ class JobResultList extends RessourceList { } } } - - preprocessRessource(jobResult) { - let description; - - if (jobResult.filename.endsWith('.pdf.zip')) { - description = 'PDF files with text layer'; - } else if (jobResult.filename.endsWith('.txt.zip')) { - description = 'Raw text files'; - } else if (jobResult.filename.endsWith('.vrt.zip')) { - description = 'VRT compliant files including the NLP data'; - } else if (jobResult.filename.endsWith('.xml.zip')) { - description = 'TEI compliant files'; - } else if (jobResult.filename.endsWith('.poco.zip')) { - description = 'HOCR and image files for post correction (PoCo)'; - } else { - description = 'All result files created during this job'; - } - return { - id: jobResult.id, - creationDate: jobResult.creation_date, - description: description, - filename: jobResult.filename - }; - } } diff --git a/app/static/js/nopaque/RessourceLists/QueryResultList.js b/app/static/js/nopaque/RessourceLists/QueryResultList.js index 43baafeb..f91818d6 100644 --- a/app/static/js/nopaque/RessourceLists/QueryResultList.js +++ b/app/static/js/nopaque/RessourceLists/QueryResultList.js @@ -10,7 +10,25 @@ class QueryResultList extends RessourceList { `.trim(), - valueNames: [{data: ['id']}, 'corpus_title', 'description', 'query', 'title'] + ressourceMapper: queryResult => { + return { + id: queryResult.id, + corpusTitle: queryResult.corpus_title, + creationDate: queryResult.creation_date, + description: queryResult.description, + query: queryResult.query, + title: queryResult.title + }; + }, + sortValueName: 'creationDate', + valueNames: [ + {data: ['id']}, + {data: ['creationDate']}, + 'corpusTitle', + 'description', + 'query', + 'title' + ] }; @@ -108,15 +126,4 @@ class QueryResultList extends RessourceList { } } } - - preprocessRessource(queryResult) { - return { - id: queryResult.id, - corpus_title: queryResult.corpus_title, - creationDate: queryResult.creation_date, - description: queryResult.description, - query: queryResult.query, - title: queryResult.title - }; - } } diff --git a/app/static/js/nopaque/RessourceLists/RessourceList.js b/app/static/js/nopaque/RessourceLists/RessourceList.js index f5bebd76..e05431ab 100644 --- a/app/static/js/nopaque/RessourceLists/RessourceList.js +++ b/app/static/js/nopaque/RessourceLists/RessourceList.js @@ -35,7 +35,7 @@ class RessourceList { } } } - static options = {page: 5, pagination: [{innerWindow: 4, outerWindow: 1}]}; + static options = {page: 5, pagination: {innerWindow: 4, outerWindow: 1}}; constructor(listElement, options = {}) { @@ -48,6 +48,18 @@ class RessourceList { break; } } + options = { + ...{pagination: {item: `
    • `}}, + ...options + } + if ('ressourceMapper' in options) { + this.ressourceMapper = options.ressourceMapper; + delete options.ressourceMapper; + } + if ('sortValueName' in options) { + this.sortValueName = options.sortValueName; + delete options.sortValueName; + } this.listjs = new List(listElement, {...RessourceList.options, ...options}); this.listjs.list.innerHTML = ` @@ -107,11 +119,16 @@ class RessourceList { preprocessRessource() {throw 'Not implemented'} - add(values) { - let ressources = Array.isArray(values) ? values : [values]; - ressources = ressources.map(ressource => this.preprocessRessource(ressource)); - this.listjs.add(ressources, () => { - this.listjs.sort('id', {order: 'desc'}); + add(ressources) { + let values = Array.isArray(ressources) ? ressources : [ressources]; + + if ('ressourceMapper' in this) { + values = values.map(value => this.ressourceMapper(value)); + } + this.listjs.add(values, () => { + if ('sortValueName' in this) { + this.listjs.sort(this.sortValueName, {order: 'desc'}); + } }); } diff --git a/app/static/js/nopaque/RessourceLists/UserList.js b/app/static/js/nopaque/RessourceLists/UserList.js index 37d3f4ed..a39e580c 100644 --- a/app/static/js/nopaque/RessourceLists/UserList.js +++ b/app/static/js/nopaque/RessourceLists/UserList.js @@ -2,7 +2,7 @@ class UserList extends RessourceList { static options = { item: ` - + @@ -14,7 +14,26 @@ class UserList extends RessourceList { `.trim(), - valueNames: [{data: ['id']}, 'id_', 'username', 'email', 'last_seen', 'role'] + ressourceMapper: user => { + return { + id: user.id, + idDuplicate: user.id, + username: user.username, + email: user.email, + last_seen: new Date(user.last_seen).toLocaleString("en-US"), + role: user.role.name + }; + }, + sortValueName: 'memberSince', + valueNames: [ + {data: ['id']}, + {data: ['memberSince']}, + 'email', + 'idDuplicate', + 'last_seen', + 'role', + 'username' + ] }; @@ -78,15 +97,4 @@ class UserList extends RessourceList { break; } } - - preprocessRessource(user) { - return { - id: user.id, - id_: user.id, - username: user.username, - email: user.email, - last_seen: new Date(user.last_seen).toLocaleString("en-US"), - role: user.role.name - }; - } } diff --git a/app/templates/admin/user.html.j2 b/app/templates/admin/user.html.j2 index a7dcfe80..136cf278 100644 --- a/app/templates/admin/user.html.j2 +++ b/app/templates/admin/user.html.j2 @@ -37,58 +37,54 @@ -
    -

    Corpora

    -
    -
    -
    - search - - +
    +

    Corpora

    +
    +
    +
    + search + + +
    + + + + + + + + + + +
    Title and DescriptionStatus
    +
      +
      - - - - - - - - - - -
      - Title - Description - Status
      -
        -
        -
        -
        -

        Jobs

        -
        -
        -
        - search - - +
        +

        Jobs

        +
        +
        +
        + search + + +
        + + + + + + + + + + +
        ServiceTitle and DescriptionStatus
        +
          +
          - - - - - - - - - - -
          Service - Title - Description - Status
          -
            diff --git a/app/templates/admin/users.html.j2 b/app/templates/admin/users.html.j2 index 57df8862..43d1f3d9 100644 --- a/app/templates/admin/users.html.j2 +++ b/app/templates/admin/users.html.j2 @@ -19,11 +19,11 @@ - - - - - + + + + + diff --git a/app/templates/corpora/corpus.html.j2 b/app/templates/corpora/corpus.html.j2 index e98e5b06..ab1ccd3b 100644 --- a/app/templates/corpora/corpus.html.j2 +++ b/app/templates/corpora/corpus.html.j2 @@ -84,10 +84,10 @@
            IdUsernameEmailLast seenRoleIdUsernameEmailLast seenRole
            - - - - + + + + diff --git a/app/templates/jobs/job.html.j2 b/app/templates/jobs/job.html.j2 index 43796238..f8849b67 100644 --- a/app/templates/jobs/job.html.j2 +++ b/app/templates/jobs/job.html.j2 @@ -99,7 +99,7 @@
            FilenameAuthorTitlePublishing yearFilenameAuthorTitlePublishing year
            - + diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2 index 8e5804ad..9dc51017 100644 --- a/app/templates/main/dashboard.html.j2 +++ b/app/templates/main/dashboard.html.j2 @@ -30,11 +30,8 @@ - - + + @@ -59,25 +56,12 @@
            FilenameFilename
            - Title - Description - StatusTitle and DescriptionStatus
            - - + + - - - - - +
            - Title and
            - Description -             		- Corpus and
            - Query -             		Title and DescriptionCorpus and Query
            - folderNothing here... -

            No query results yet imported.

            -
              @@ -102,12 +86,9 @@ - - - + + +
              Service - Title - Description - StatusServiceTitle and DescriptionStatus