comment out community update code

app/corpora/followers/json_routes.py

@@ -11,65 +11,66 @@ from app.models import (
 from ..decorators import corpus_follower_permission_required
 from . import bp
 
-@bp.route('/<hashid:corpus_id>/followers', methods=['POST'])
-@corpus_follower_permission_required('MANAGE_FOLLOWERS')
-@content_negotiation(consumes='application/json', produces='application/json')
-def create_corpus_followers(corpus_id):
-    usernames = request.json
-    if not (isinstance(usernames, list) or all(isinstance(u, str) for u in usernames)):
-        abort(400)
-    corpus = Corpus.query.get_or_404(corpus_id)
-    for username in usernames:
-        user = User.query.filter_by(username=username, is_public=True).first_or_404()
-        user.follow_corpus(corpus)
-    db.session.commit()
-    response_data = {
-        'message': f'Users are now following "{corpus.title}"',
-        'category': 'corpus'
-    }
-    return response_data, 200
+
+# @bp.route('/<hashid:corpus_id>/followers', methods=['POST'])
+# @corpus_follower_permission_required('MANAGE_FOLLOWERS')
+# @content_negotiation(consumes='application/json', produces='application/json')
+# def create_corpus_followers(corpus_id):
+#     usernames = request.json
+#     if not (isinstance(usernames, list) or all(isinstance(u, str) for u in usernames)):
+#         abort(400)
+#     corpus = Corpus.query.get_or_404(corpus_id)
+#     for username in usernames:
+#         user = User.query.filter_by(username=username, is_public=True).first_or_404()
+#         user.follow_corpus(corpus)
+#     db.session.commit()
+#     response_data = {
+#         'message': f'Users are now following "{corpus.title}"',
+#         'category': 'corpus'
+#     }
+#     return response_data, 200
 
 
-@bp.route('/<hashid:corpus_id>/followers/<hashid:follower_id>/role', methods=['PUT'])
-@corpus_follower_permission_required('MANAGE_FOLLOWERS')
-@content_negotiation(consumes='application/json', produces='application/json')
-def update_corpus_follower_role(corpus_id, follower_id):
-    role_name = request.json
-    if not isinstance(role_name, str):
-        abort(400)
-    cfr = CorpusFollowerRole.query.filter_by(name=role_name).first()
-    if cfr is None:
-        abort(400)
-    cfa = CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=follower_id).first_or_404()
-    cfa.role = cfr
-    db.session.commit()
-    response_data = {
-        'message': f'User "{cfa.follower.username}" is now {cfa.role.name}',
-        'category': 'corpus'
-    }
-    return response_data, 200
+# @bp.route('/<hashid:corpus_id>/followers/<hashid:follower_id>/role', methods=['PUT'])
+# @corpus_follower_permission_required('MANAGE_FOLLOWERS')
+# @content_negotiation(consumes='application/json', produces='application/json')
+# def update_corpus_follower_role(corpus_id, follower_id):
+#     role_name = request.json
+#     if not isinstance(role_name, str):
+#         abort(400)
+#     cfr = CorpusFollowerRole.query.filter_by(name=role_name).first()
+#     if cfr is None:
+#         abort(400)
+#     cfa = CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=follower_id).first_or_404()
+#     cfa.role = cfr
+#     db.session.commit()
+#     response_data = {
+#         'message': f'User "{cfa.follower.username}" is now {cfa.role.name}',
+#         'category': 'corpus'
+#     }
+#     return response_data, 200
 
 
-@bp.route('/<hashid:corpus_id>/followers/<hashid:follower_id>', methods=['DELETE'])
-def delete_corpus_follower(corpus_id, follower_id):
-    cfa = CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=follower_id).first_or_404()
-    if not (
-        current_user.id == follower_id
-        or current_user == cfa.corpus.user 
-        or CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=current_user.id).first().role.has_permission('MANAGE_FOLLOWERS')
-        or current_user.is_administrator()):
-        abort(403)
-    if current_user.id == follower_id:
-        flash(f'You are no longer following "{cfa.corpus.title}"', 'corpus')
-        response = make_response()
-        response.status_code = 204
-    else:
-        response_data = {
-            'message': f'"{cfa.follower.username}" is not following "{cfa.corpus.title}" anymore',
-            'category': 'corpus'
-        }
-        response = jsonify(response_data)
-        response.status_code = 200
-    cfa.follower.unfollow_corpus(cfa.corpus)
-    db.session.commit()
-    return response
+# @bp.route('/<hashid:corpus_id>/followers/<hashid:follower_id>', methods=['DELETE'])
+# def delete_corpus_follower(corpus_id, follower_id):
+#     cfa = CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=follower_id).first_or_404()
+#     if not (
+#         current_user.id == follower_id
+#         or current_user == cfa.corpus.user 
+#         or CorpusFollowerAssociation.query.filter_by(corpus_id=corpus_id, follower_id=current_user.id).first().role.has_permission('MANAGE_FOLLOWERS')
+#         or current_user.is_administrator()):
+#         abort(403)
+#     if current_user.id == follower_id:
+#         flash(f'You are no longer following "{cfa.corpus.title}"', 'corpus')
+#         response = make_response()
+#         response.status_code = 204
+#     else:
+#         response_data = {
+#             'message': f'"{cfa.follower.username}" is not following "{cfa.corpus.title}" anymore',
+#             'category': 'corpus'
+#         }
+#         response = jsonify(response_data)
+#         response.status_code = 200
+#     cfa.follower.unfollow_corpus(cfa.corpus)
+#     db.session.commit()
+#     return response

app/corpora/routes.py

@@ -71,6 +71,7 @@ def corpus(corpus_id):
             users = users
         )
     if (current_user.is_following_corpus(corpus) or corpus.is_public):
+        abort(403)
         cfas = CorpusFollowerAssociation.query.filter(Corpus.id == corpus_id, CorpusFollowerAssociation.follower_id != corpus.user.id).all()
         print(cfas)
         return render_template(
@@ -98,14 +99,14 @@ def analysis(corpus_id):
     )
 
 
-@bp.route('/<hashid:corpus_id>/follow/<token>')
-def follow_corpus(corpus_id, token):
-    corpus = Corpus.query.get_or_404(corpus_id)
-    if current_user.follow_corpus_by_token(token):
-        db.session.commit()
-        flash(f'You are following "{corpus.title}" now', category='corpus')
-        return redirect(url_for('corpora.corpus', corpus_id=corpus_id))
-    abort(403)
+# @bp.route('/<hashid:corpus_id>/follow/<token>')
+# def follow_corpus(corpus_id, token):
+#     corpus = Corpus.query.get_or_404(corpus_id)
+#     if current_user.follow_corpus_by_token(token):
+#         db.session.commit()
+#         flash(f'You are following "{corpus.title}" now', category='corpus')
+#         return redirect(url_for('corpora.corpus', corpus_id=corpus_id))
+#     abort(403)
 
 
 @bp.route('/import', methods=['GET', 'POST'])

app/static/js/ResourceLists/CorpusFileList.js

@@ -81,7 +81,7 @@ class CorpusFileList extends ResourceList {
             <th>
               <label class="selection-action-trigger ${this.listContainerElement.dataset?.hasPermissionView == 'true' ? '' : 'hide'}" data-selection-action="select-all">
                 <input class="select-all-checkbox" type="checkbox">
-                <span></span>
+                <span class="disable-on-click"></span>
               </label>
             </th>
             <th>Filename</th>
@@ -89,8 +89,8 @@ class CorpusFileList extends ResourceList {
             <th>Title</th>
             <th>Publishing year</th>
             <th class="right-align">
-            <a class="selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
-            <a class="selection-action-trigger btn-floating service-color darken waves-effect waves-light hide" data-selection-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
+              <a class="selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
+              <a class="selection-action-trigger btn-floating service-color darken waves-effect waves-light hide" data-selection-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
             </th>
           </tr>
         </thead>
@@ -173,13 +173,13 @@ class CorpusFileList extends ResourceList {
         break;
       }
       case 'select': {
-
         if (event.target.checked) {
           this.selectedItemIds.add(itemId);
         } else {
           this.selectedItemIds.delete(itemId);
         }
         this.renderingItemSelection();
+        break;
       }
       default: {
         break;
@@ -199,15 +199,16 @@ class CorpusFileList extends ResourceList {
       case 'select-all': {
         let selectedIds = new Set(Array.from(items)
           .map(item => item.values().id))
-        if (event.target.checked) {
-          selectableItems.forEach(selectableItem => selectableItem.checked = true);
-          this.selectedItemIds = selectedIds;
-        } else {
-          selectableItems.forEach(checkbox => checkbox.checked = false);
-          this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
-
+        if (event.target.checked !== undefined) {
+          if (event.target.checked) {
+            selectableItems.forEach(selectableItem => selectableItem.checked = true);
+            this.selectedItemIds = selectedIds;
+          } else {
+            selectableItems.forEach(checkbox => checkbox.checked = false);
+            this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
+          }
+          this.renderingItemSelection();
         }
-        this.renderingItemSelection();
         break;
       }
       case 'delete': {
@@ -326,6 +327,14 @@ class CorpusFileList extends ResourceList {
         actionButton.classList.remove('hide');
       });
     }
+
+    // Check select all checkbox if all items are selected
+    let selectAllCheckbox = document.querySelector('.select-all-checkbox[type="checkbox"]');
+    if (selectableItems.length === this.selectedItemIds.size && selectAllCheckbox.checked === false) {
+      selectAllCheckbox.checked = true;
+    } else if (selectableItems.length !== this.selectedItemIds.size && selectAllCheckbox.checked === true) {
+      selectAllCheckbox.checked = false;
+    }
   }
 
   onPatch(patch) {

app/static/js/ResourceLists/CorpusFollowerList.js

@@ -43,7 +43,7 @@ class CorpusFollowerList extends ResourceList {
           </td>
           <td>
             <div class="input-field disable-on-click list-action-trigger" data-list-action="update-role">
-              <select ${values['user_id'] === currentUserId ? 'disabled' : ''}>
+              <select ${values['follower-id'] === currentUserId ? 'disabled' : ''}>
                 <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>

app/static/js/ResourceLists/CorpusList.js

@@ -8,7 +8,11 @@ class CorpusList extends ResourceList {
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
     this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
+    document.querySelectorAll('.corpus-list-selection-action-trigger[data-selection-action]').forEach((element) => {
+      element.addEventListener('click', (event) => {this.onSelectionAction(event)});
+    });
     this.isInitialized = false
+    this.selectedItemIds = new Set();
     this.userId = listContainerElement.dataset.userId;
     if (this.userId === undefined) {return;}
     app.subscribeUser(this.userId).then((response) => {
@@ -22,13 +26,18 @@ class CorpusList extends ResourceList {
   get item() {
     return (values) => {
       return `
-        <tr class="${values['is-owner'] ? '' : 'deep-purple lighten-5'} list-item clickable hoverable">
-          <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
+        <tr class="${values['is-owner'] ? '' : 'deep-purple lighten-5'} list-item">
+          <td>
+            <label class="list-action-trigger ${values['is-owner'] ? '' : 'hide'}" data-list-action="select">
+              <input class="select-checkbox" type="checkbox">
+              <span class="disable-on-click"></span>
+            </label>
+          </td>
           <td><b class="title"></b><br><i class="description"></i></td>
           <td><span class="owner"></span></td>
           <td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></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 ${values['is-owner'] ? '' : 'hide'}" 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" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
           </td>
         </tr>
@@ -61,11 +70,18 @@ class CorpusList extends ResourceList {
       <table>
         <thead>
           <tr>
-            <th></th>
+            <th>
+              <label class="corpus-list-selection-action-trigger" data-selection-action="select-all">
+                <input class="corpus-list-select-all-checkbox" type="checkbox">
+                <span></span>
+              </label>
+            </th>
             <th>Title and Description</th>
             <th>Owner</th>
             <th>Status</th>
-            <th></th>
+            <th class="right-align">
+              <a class="corpus-list-selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
+            </th>
           </tr>
         </thead>
         <tbody class="list"></tbody>
@@ -95,7 +111,7 @@ class CorpusList extends ResourceList {
     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;
+    let listAction = listActionElement === null ? '' : listActionElement.dataset.listAction;
     switch (listAction) {
       case 'delete-request': {
         let values = this.listjs.get('id', itemId)[0].values();
@@ -135,12 +151,149 @@ class CorpusList extends ResourceList {
         window.location.href = `/corpora/${itemId}`;
         break;
       }
+      case 'select': {
+
+        if (event.target.checked) {
+          this.selectedItemIds.add(itemId);
+        } else {
+          this.selectedItemIds.delete(itemId);
+        }
+        this.renderingItemSelection();
+      }
       default: {
         break;
       }
     }
   }
 
+  onSelectionAction(event) {
+    let selectionActionElement = event.target.closest('.corpus-list-selection-action-trigger[data-selection-action]');
+    let selectionAction = selectionActionElement.dataset.selectionAction;
+    let items = Array.from(this.listjs.items).filter(item => item._values["is-owner"] === true);
+    let selectableItems = Array.from(items)
+      .filter(item => item.elm)
+      .map(item => item.elm.querySelector('.select-checkbox[type="checkbox"]'));
+
+    switch (selectionAction) {
+      case 'select-all': {
+        let selectedIds = new Set(Array.from(items)
+          .map(item => item.values().id))
+        if (event.target.checked !== undefined) {
+          if (event.target.checked) {
+            selectableItems.forEach(selectableItem => selectableItem.checked = true);
+            this.selectedItemIds = selectedIds;
+          } else {
+            selectableItems.forEach(checkbox => checkbox.checked = false);
+            this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
+          }
+          this.renderingItemSelection();
+        }
+        break;
+      }
+      case 'delete': {
+        let modalElement = Utils.HTMLToElement(
+          `
+            <div class="modal">
+              <div class="modal-content">
+                <h4>Confirm Corpus File deletion</h4>
+                <p>Do you really want to delete this Corpora?</p>
+                  <ul id="selected-items-list"></ul>
+                <p>All corpora will be permanently deleted!</p>
+              </div>
+              <div class="modal-footer">
+                <a class="btn modal-close waves-effect waves-light">Cancel</a>
+                <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+              </div>
+            </div>
+          `
+        );
+        document.querySelector('#modals').appendChild(modalElement);
+        let itemList = document.querySelector('#selected-items-list');
+        this.selectedItemIds.forEach(selectedItemId => {
+          let listItem = this.listjs.get('id', selectedItemId)[0].elm;
+          let values = this.listjs.get('id', listItem.dataset.id)[0].values();
+          let itemElement = Utils.HTMLToElement(`<li> - ${values.title}</li>`);
+          itemList.appendChild(itemElement);
+        });
+        let modal = M.Modal.init(
+          modalElement,
+          {
+            dismissible: false,
+            onCloseEnd: () => {
+              modal.destroy();
+              modalElement.remove();
+            }
+          }
+        );
+        let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+        confirmElement.addEventListener('click', (event) => {
+          this.selectedItemIds.forEach(selectedItemId => {
+            Requests.corpora.entity.delete(selectedItemId);
+          });
+          this.selectedItemIds.clear();
+          this.renderingItemSelection();
+        });
+        modal.open();
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  renderingItemSelection() {
+    let selectionActionButtons = document.querySelectorAll('.corpus-list-selection-action-trigger:not([data-selection-action="select-all"])');
+    let selectableItems = this.listjs.items;
+    let actionButtons = [];
+
+    Object.values(selectableItems).forEach(selectableItem => {
+      if (selectableItem._values["is-owner"] === false && this.selectedItemIds.size > 0) {
+        selectableItem.elm.classList.add('hide');
+      } else if (selectableItem._values["is-owner"] === false && this.selectedItemIds.size === 0) {
+        selectableItem.elm.classList.remove('hide');
+      } else {
+        if (selectableItem.elm) {
+          let checkbox = selectableItem.elm.querySelector('.select-checkbox[type="checkbox"]');
+          if (checkbox.checked) {
+            selectableItem.elm.classList.add('grey', 'lighten-3');
+          } else {
+            selectableItem.elm.classList.remove('grey', 'lighten-3');
+          }
+          let itemActionButtons = selectableItem.elm.querySelectorAll('.list-action-trigger:not([data-list-action="select"])');
+          itemActionButtons.forEach(itemActionButton => {
+            actionButtons.push(itemActionButton);
+          });
+        }
+      }
+    });
+    // Hide item action buttons if > 0 item is selected and show selection action buttons
+    if (this.selectedItemIds.size > 0) {
+      selectionActionButtons.forEach(selectionActionButton => {
+        selectionActionButton.classList.remove('hide');
+      });
+      actionButtons.forEach(actionButton => {
+        actionButton.classList.add('hide');
+      });
+    } else {
+      selectionActionButtons.forEach(selectionActionButton => {
+        selectionActionButton.classList.add('hide');
+      });
+      actionButtons.forEach(actionButton => {
+        actionButton.classList.remove('hide');
+      });
+    }
+
+    // Check select all checkbox if all items are selected
+    let filteredItems = Object.values(selectableItems).filter(item => item._values["is-owner"] === true)
+    let selectAllCheckbox = document.querySelector('.corpus-list-select-all-checkbox[type="checkbox"]');
+    if (filteredItems.length === this.selectedItemIds.size && selectAllCheckbox.checked === false) {
+      selectAllCheckbox.checked = true;
+    } else if (filteredItems.length !== this.selectedItemIds.size && selectAllCheckbox.checked === true) {
+      selectAllCheckbox.checked = false;
+    }
+  }
+
   onPatch(patch) {
     let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)`);
     let filteredPatch = patch.filter(operation => re.test(operation.path));

app/static/js/ResourceLists/JobList.js

@@ -7,8 +7,13 @@ class JobList extends ResourceList {
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
+    this.documentJobArea = document.querySelector('#jobs');
     this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
+    document.querySelectorAll('.job-list-selection-action-trigger[data-selection-action]').forEach((element) => {
+      element.addEventListener('click', (event) => {this.onSelectionAction(event)});
+    });
     this.isInitialized = false;
+    this.selectedItemIds = new Set();
     this.userId = listContainerElement.dataset.userId;
     if (this.userId === undefined) {return;}
     app.subscribeUser(this.userId).then((response) => {
@@ -24,7 +29,13 @@ class JobList extends ResourceList {
 
   get item() {
     return `
-      <tr class="list-item clickable hoverable service-scheme">
+      <tr class="list-item service-scheme">
+        <td>
+          <label class="list-action-trigger" data-list-action="select">
+            <input class="select-checkbox" type="checkbox">
+            <span class="disable-on-click"></span>
+          </label>
+        </td>
         <td><a class="btn-floating"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
         <td><b class="title"></b><br><i class="description"></i></td>
         <td><span class="badge new job-status-color job-status-text status" data-badge-caption=""></span></td>
@@ -61,10 +72,18 @@ class JobList extends ResourceList {
       <table>
         <thead>
           <tr>
+            <th>
+              <label class="job-list-selection-action-trigger" data-selection-action="select-all">
+                <input class="job-list-select-all-checkbox" type="checkbox">
+                <span class="disable-on-click"></span>
+              </label>
+            </th>
             <th>Service</th>
             <th>Title and Description</th>
             <th>Status</th>
-            <th></th>
+            <th class="right-align">
+              <a class="job-list-selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
+            </th>
           </tr>
         </thead>
         <tbody class="list"></tbody>
@@ -93,7 +112,7 @@ class JobList extends ResourceList {
     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;
+    let listAction = listActionElement === null ? '' : listActionElement.dataset.listAction;
     switch (listAction) {
       case 'delete-request': {
         let values = this.listjs.get('id', itemId)[0].values();
@@ -133,12 +152,145 @@ class JobList extends ResourceList {
         window.location.href = `/jobs/${itemId}`;
         break;
       }
+      case 'select': {
+        if (event.target.checked) {
+          this.selectedItemIds.add(itemId);
+        } else {
+          this.selectedItemIds.delete(itemId);
+        }
+        this.renderingItemSelection();
+        break;
+      }
       default: {
         break;
       }
     }
   }
 
+  onSelectionAction(event) {
+    let selectionActionElement = event.target.closest('.job-list-selection-action-trigger[data-selection-action]');
+    let selectionAction = selectionActionElement.dataset.selectionAction;
+    let items = this.listjs.items;
+    let selectableItems = Array.from(items)
+      .filter(item => item.elm)
+      .map(item => item.elm.querySelector('.select-checkbox[type="checkbox"]'));
+    switch (selectionAction) {
+      case 'select-all': {
+        let selectedIds = new Set(Array.from(items)
+          .map(item => item.values().id))
+        if (event.target.checked !== undefined) {
+          if (event.target.checked) {
+            selectableItems.forEach(selectableItem => selectableItem.checked = true);
+            this.selectedItemIds = selectedIds;
+          } else {
+            selectableItems.forEach(checkbox => checkbox.checked = false);
+            this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
+          }
+          this.renderingItemSelection();
+        }
+        break;
+      }
+      case 'delete': {
+        let modalElement = Utils.HTMLToElement(
+          `
+            <div class="modal">
+              <div class="modal-content">
+                <h4>Confirm Corpus File deletion</h4>
+                <p>Do you really want to delete the Jobs?</p>
+                  <ul id="selected-items-list"></ul>
+                <p>All files will be permanently deleted!</p>
+              </div>
+              <div class="modal-footer">
+                <a class="btn modal-close waves-effect waves-light">Cancel</a>
+                <a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
+              </div>
+            </div>
+          `
+        );
+        document.querySelector('#modals').appendChild(modalElement);
+        let itemList = document.querySelector('#selected-items-list');
+        this.selectedItemIds.forEach(selectedItemId => {
+          let listItem = this.listjs.get('id', selectedItemId)[0].elm;
+          let values = this.listjs.get('id', listItem.dataset.id)[0].values();
+          let itemElement = Utils.HTMLToElement(`<li> - ${values.title}</li>`);
+          itemList.appendChild(itemElement);
+        });
+        let modal = M.Modal.init(
+          modalElement,
+          {
+            dismissible: false,
+            onCloseEnd: () => {
+              modal.destroy();
+              modalElement.remove();
+            }
+          }
+        );
+        let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
+        confirmElement.addEventListener('click', (event) => {
+          this.selectedItemIds.forEach(selectedItemId => {
+            Requests.jobs.entity.delete(selectedItemId);
+          });
+          this.selectedItemIds.clear();
+          this.renderingItemSelection();
+        });
+        modal.open();
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  renderingItemSelection() {
+    let selectionActionButtons = document.querySelectorAll('.job-list-selection-action-trigger:not([data-selection-action="select-all"])');
+    let selectableItems = this.listjs.items;
+    let actionButtons = [];
+
+    Object.values(selectableItems).forEach(selectableItem => {
+      if (selectableItem.elm) {
+        let checkbox = selectableItem.elm.querySelector('.select-checkbox[type="checkbox"]');
+        if (checkbox.checked) {
+          selectableItem.elm.classList.add('grey', 'lighten-3');
+        } else {
+          selectableItem.elm.classList.remove('grey', 'lighten-3');
+        }
+        let itemActionButtons = selectableItem.elm.querySelectorAll('.list-action-trigger:not([data-list-action="select"])');
+        itemActionButtons.forEach(itemActionButton => {
+          actionButtons.push(itemActionButton);
+        });
+      }
+    });
+
+
+
+    // Hide item action buttons if > 0 item is selected and show selection action buttons
+    if (this.selectedItemIds.size > 0) {
+      selectionActionButtons.forEach(selectionActionButton => {
+        selectionActionButton.classList.remove('hide');
+      });
+      actionButtons.forEach(actionButton => {
+        actionButton.classList.add('hide');
+      });
+    } else {
+      selectionActionButtons.forEach(selectionActionButton => {
+        selectionActionButton.classList.add('hide');
+      });
+      actionButtons.forEach(actionButton => {
+        actionButton.classList.remove('hide');
+      });
+    }
+
+    // Check select all checkbox if all items are selected
+    let selectAllCheckbox = document.querySelector('.job-list-select-all-checkbox[type="checkbox"]');
+    if (selectableItems.length === this.selectedItemIds.size && selectAllCheckbox.checked === false) {
+      selectAllCheckbox.checked = true;
+    } else if (selectableItems.length !== this.selectedItemIds.size && selectAllCheckbox.checked === true) {
+      selectAllCheckbox.checked = false;
+    }
+
+  }
+
   onPatch(patch) {
     let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)`);
     let filteredPatch = patch.filter(operation => re.test(operation.path));

app/templates/corpora/public_corpus.html.j2

@@ -8,9 +8,6 @@
   <div class="row">
     <div class="col s12">
       <h1>{{ corpus.title }}</h1>
-      {% for cfa in cfas %}
-      {{ cfa.follower.username|tojson }},
-      {% endfor %}
     </div>
     <div class="col s12 l7">
       <div class="card service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">