Merge branch 'public-corpus' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into public-corpus

app/static/js/ResourceLists/CorpusFollowerList.js

@@ -0,0 +1,204 @@
+class CorpusFollowerList extends ResourceList {
+  static autoInit() {
+    for (let corpusFollowerListElement of document.querySelectorAll('.corpus-follower-list:not(.no-autoinit)')) {
+      new CorpusFollowerList(corpusFollowerListElement);
+    }
+  }
+
+  constructor(listContainerElement, options = {}) {
+    super(listContainerElement, options);
+    this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
+    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
+    this.isInitialized = false;
+    this.userId = listContainerElement.dataset.userId;
+    this.corpusId = listContainerElement.dataset.corpusId;
+    if (this.userId === undefined || this.corpusId === undefined) {return;}
+    app.subscribeUser(this.userId).then((response) => {
+      app.socket.on('PATCH', (patch) => {
+        if (this.isInitialized) {this.onPatch(patch);}
+      });
+    });
+    app.getUser(this.userId).then((user) => {
+      this.add(Object.values(user.corpora[this.corpusId].corpus_follower_associations));
+      this.isInitialized = true;
+    });
+  }
+
+  get item() {
+    return (values) => {
+      return `
+        <tr class="list-item clickable hoverable">
+          <td><img alt="user-image" class="circle responsive-img avatar" style="width:50%"></td>
+          <td><b class="username"><b></td>
+          <td><span class="full-name"></span><br><i class="about-me"></i></td>
+          <td>
+            <span class="disable-on-click">
+              <label>
+                <input ${values['permission-can-VIEW'] ? 'checked' : ''} class="permission-can-VIEW list-action-trigger" data-list-action="toggle-permission" data-permission="VIEW" type="checkbox">
+                <span>View</span>
+              </label>
+            </span>
+            <br>
+            <span class="disable-on-click">
+              <label>
+                <input ${values['permission-can-CONTRIBUTE'] ? 'checked' : ''} class="permission-can-CONTRIBUTE list-action-trigger" data-list-action="toggle-permission" data-permission="CONTRIBUTE" type="checkbox">
+                <span>Contribute</span>
+              </label>
+            </span>
+            <br>
+            <span class="disable-on-click">
+              <label>
+                <input ${values['permission-can-ADMINISTRATE'] ? 'checked' : ''} class="permission-can-ADMINISTRATE list-action-trigger" data-list-action="toggle-permission" data-permission="ADMINISTRATE" type="checkbox">
+                <span>Administrate</span>
+              </label>
+            </span>
+          </td>
+          <td class="right-align">
+            <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>
+      `.trim();
+    }
+  }
+
+  get valueNames() {
+    return [
+      {data: ['id']},
+      {data: ['follower-id']},
+      {name: 'avatar', attr: 'src'},
+      'username',
+      'about-me',
+      'full-name'
+    ];
+  }
+
+  initListContainerElement() {
+    if (!this.listContainerElement.hasAttribute('id')) {
+      this.listContainerElement.id = Utils.generateElementId('corpus-follower-list-');
+    }
+    let listSearchElementId = Utils.generateElementId(`${this.listContainerElement.id}-search-`);
+    this.listContainerElement.innerHTML = `
+      <div class="input-field">
+        <i class="material-icons prefix">search</i>
+        <input id="${listSearchElementId}" class="search" type="text"></input>
+        <label for="${listSearchElementId}">Search corpus follower</label>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th style="width:15%;"></th>
+            <th>Username</th>
+            <th>User details</th>
+            <th>Permissions</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody class="list"></tbody>
+      </table>
+      <ul class="pagination"></ul>
+    `.trim();
+  }
+
+  mapResourceToValue(corpusFollowerAssociation) {
+    return {
+      'id': corpusFollowerAssociation.id,
+      'follower-id': corpusFollowerAssociation.follower.id,
+      'avatar': corpusFollowerAssociation.follower.avatar ? `/users/${corpusFollowerAssociation.follower.id}/avatar` : '/static/images/user_avatar.png',
+      'username': corpusFollowerAssociation.follower.username,
+      'full-name': corpusFollowerAssociation.follower.full_name ? corpusFollowerAssociation.follower.full_name : '',
+      'about-me': corpusFollowerAssociation.follower.about_me ? corpusFollowerAssociation.follower.about_me : '',
+      'permission-can-VIEW': corpusFollowerAssociation.permissions.includes('VIEW'),
+      'permission-can-CONTRIBUTE': corpusFollowerAssociation.permissions.includes('CONTRIBUTE'),
+      'permission-can-ADMINISTRATE': corpusFollowerAssociation.permissions.includes('ADMINISTRATE')
+    };
+  }
+
+  sort() {
+    this.listjs.sort('username', {order: 'desc'});
+  }
+
+  onChange(event) {
+    if (event.target.tagName !== 'INPUT') {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]');
+    if (listActionElement === null) {return;}
+    let listAction = listActionElement.dataset.listAction;
+    switch (listAction) {
+      case 'toggle-permission': {
+        let followerId = listItemElement.dataset.followerId;
+        let permission = listActionElement.dataset.permission;
+        if (event.target.checked) {
+          Utils.addCorpusFollowerPermissionRequest(this.corpusId, followerId, permission)
+            .catch((error) => {event.target.checked = !event.target.checked;});
+        } else {
+          Utils.removeCorpusFollowerPermissionRequest(this.corpusId, followerId, permission)
+            .catch((error) => {event.target.checked = !event.target.checked;});
+        }
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+  
+  onClick(event) {
+    if (event.target.closest('.disable-on-click') !== null) {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]');
+    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) {
+    let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([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}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)$`);
+          // if (re.test(operation.path)) {this.add(operation.value);}
+          break;
+        }
+        case 'remove': {
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)$`);
+          if (re.test(operation.path)) {
+            let [match, jobId] = operation.path.match(re);
+            this.remove(jobId);
+          }
+          break;
+        }
+        case 'replace': {
+          // let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)/(service|status|description|title)$`);
+          // if (re.test(operation.path)) {
+          //   let [match, jobId, valueName] = operation.path.match(re);
+          //   this.replace(jobId, valueName, operation.value);
+          // }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    }
+  }
+}

app/static/js/ResourceLists/ResourceList.js

@@ -14,6 +14,7 @@ class ResourceList {
     TesseractOCRPipelineModelList.autoInit();
     UserList.autoInit();
     AdminUserList.autoInit();
+    CorpusFollowerList.autoInit();
   }
 
   static defaultOptions = {

app/static/js/ResourceLists/SpacyNLPPipelineModelList.js

@@ -30,14 +30,12 @@ class SpaCyNLPPipelineModelList extends ResourceList {
           <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>
+            <span class="disable-on-click">
               <label>
-                <input class="is-public" ${values['is-public'] ? 'checked' : ''} type="checkbox">
-                <span class="lever"></span>
-                public
+                <input ${values['is-public'] ? 'checked' : ''} class="is-public list-action-trigger" data-list-action="toggle-is-public" type="checkbox">
+                <span>Public</span>
               </label>
-            </div>
+            </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>
@@ -80,6 +78,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
           <tr>
             <th>Title and Description</th>
             <th>Publisher</th>
+            <th>Availability</th>
             <th></th>
           </tr>
         </thead>
@@ -111,6 +110,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
   }
 
   onChange(event) {
+    if (event.target.tagName !== 'INPUT') {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;
@@ -118,7 +118,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
     if (listActionElement === null) {return;}
     let listAction = listActionElement.dataset.listAction;
     switch (listAction) {
-      case 'share-request': {
+      case 'toggle-is-public': {
         Utils.spaCyNLPPipelineModelToggleIsPublicRequest(this.userId, itemId);
         break;
       }
@@ -129,15 +129,11 @@ class SpaCyNLPPipelineModelList extends ResourceList {
   }
 
   onClick(event) {
+    if (event.target.closest('.disable-on-click') !== null) {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 listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
     switch (listAction) {
       case 'delete-request': {

app/static/js/ResourceLists/TesseractOCRPipelineModelList.js

@@ -38,14 +38,12 @@ class TesseractOCRPipelineModelList extends ResourceList {
           <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>
+            <span class="disable-on-click">
               <label>
-                <input ${values['is-public'] ? 'checked' : ''} class="is-public" type="checkbox">
-                <span class="lever"></span>
-                public
+                <input ${values['is-public'] ? 'checked' : ''} class="is-public list-action-trigger" data-list-action="toggle-is-public" type="checkbox">
+                <span>Public</span>
               </label>
-            </div>
+            </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>
@@ -89,6 +87,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
           <tr>
             <th>Title and Description</th>
             <th>Publisher</th>
+            <th>Availability</th>
             <th></th>
           </tr>
         </thead>
@@ -120,6 +119,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
   }
 
   onChange(event) {
+    if (event.target.tagName !== 'INPUT') {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;
@@ -127,7 +127,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
     if (listActionElement === null) {return;}
     let listAction = listActionElement.dataset.listAction;
     switch (listAction) {
-      case 'share-request': {
+      case 'toggle-is-public': {
         Utils.tesseractOCRPipelineModelToggleIsPublicRequest(this.userId, itemId);
         break;
       }
@@ -138,6 +138,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
   }
 
   onClick(event) {
+    if (event.target.closest('.disable-on-click') !== null) {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;

app/static/js/Utils.js

@@ -71,14 +71,17 @@ class Utils {
 
   static addCorpusFollowerPermissionRequest(corpusId, followerId, permission) {
     return new Promise((resolve, reject) => {
-      fetch(`/corpora/${corpusId}/followers/${followerId}/add_permission?permission=${permission}`, {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');
@@ -90,21 +93,23 @@ class Utils {
 
   static removeCorpusFollowerPermissionRequest(corpusId, followerId, permission) {
     return new Promise((resolve, reject) => {
-      fetch(`/corpora/${corpusId}/followers/${followerId}/remove_permission?permission=${permission}`, {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');
             reject(response);
           }
         );
-    });
+    }); 
   }
 
   static enableCorpusIsPublicRequest(userId, corpusId) {
@@ -145,7 +150,7 @@ class Utils {
       let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
       confirmElement.addEventListener('click', (event) => {
         let corpusTitle = corpus?.title;
-        fetch(`/corpora/${corpusId}/enable_is_public`, {method: 'POST', headers: {Accept: 'application/json'}})
+        fetch(`/corpora/${corpusId}/is_public/enable`, {method: 'POST', headers: {Accept: 'application/json'}})
           .then(
             (response) => {
               if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
@@ -173,7 +178,7 @@ class Utils {
       }
 
       let corpusTitle = corpus?.title;
-      fetch(`/corpora/${corpusId}/disable_is_public`, {method: 'POST', headers: {Accept: 'application/json'}})
+      fetch(`/corpora/${corpusId}/is_public/disable`, {method: 'POST', headers: {Accept: 'application/json'}})
         .then(
           (response) => {
             if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
@@ -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;