Add CorpusFollowerList and functions

app/static/js/ResourceLists/CorpusFollowerList.js

@@ -0,0 +1,158 @@
+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].following_user_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>
+            <label>
+              <input ${values['permissions-can-VIEW'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission-view" type="checkbox">
+              <span>View</span>
+            </label>
+            <br>
+            <label>
+              <input ${values['permissions-can-CONTRIBUTE'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission-contribute" type="checkbox">
+              <span>Contribute</span>
+            </label>
+            <br>
+            <label>
+              <input ${values['permissions-can-ADMINISTRATE'] ? 'checked' : ''} class="list-action-trigger" data-list-action="toggle-permission-administrate" type="checkbox">
+              <span>Administrate</span>
+            </label>
+          </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 darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
+          </td>
+        </tr>
+      `.trim();
+    }
+  }
+
+  get valueNames() {
+    return [
+      {data: ['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) {
+    let user = corpusFollowerAssociation.following_user;
+    return {
+      'id': corpusFollowerAssociation.id,
+      'avatar': user.avatar ? `/users/${user.id}/avatar` : '/static/images/user_avatar.png',
+      'username': user.username,
+      'full-name': user.full_name ? user.full_name : '',
+      'about-me': user.about_me ? user.about_me : '',
+      'permissions-can-VIEW': corpusFollowerAssociation.permissions.includes('VIEW'),
+      'permissions-can-CONTRIBUTE': corpusFollowerAssociation.permissions.includes('CONTRIBUTE'),
+      'permissions-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-view': {
+        if (event.target.checked) {
+          Utils.addCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'VIEW');
+        } else {
+          Utils.removeCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'VIEW');
+        }
+        break;
+      }
+      case 'toggle-permission-contribute': {
+        if (event.target.checked) {
+          Utils.addCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'CONTRIBUTE');
+        } else {
+          Utils.removeCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'CONTRIBUTE');
+        }
+        break;
+      }
+      case 'toggle-permission-administrate': {
+        if (event.target.checked) {
+          Utils.addCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'ADMINISTRATE');
+        } else {
+          Utils.removeCorpusFollowerPermissionRequest(this.userId, this.corpusId, itemId, 'ADMINISTRATE');
+        }
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+  
+  onClick(event) {
+
+  }
+
+  onPatch(patch) {}
+}

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/Utils.js

@@ -69,9 +69,9 @@ class Utils {
     return Utils.mergeObjectsDeep(mergedObject, ...objects.slice(2));
   }
 
-  static addCorpusFollowerPermissionRequest(corpusId, followerId, permission) {
+  static addCorpusFollowerPermissionRequest(userId, corpusId, corpusFollowerAssociationId, 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/${corpusFollowerAssociationId}/permissions/${permission}/add`, {method: 'POST', headers: {Accept: 'application/json'}})
         .then(
           (response) => {
             if (response.status === 400) {app.flash('Bad Request', 'error'); reject(response);}
@@ -88,9 +88,9 @@ class Utils {
     });
   }
 
-  static removeCorpusFollowerPermissionRequest(corpusId, followerId, permission) {
+  static removeCorpusFollowerPermissionRequest(userId, corpusId, corpusFollowerAssociationId, 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/${corpusFollowerAssociationId}/permissions/${permission}/remove`, {method: 'POST', headers: {Accept: 'application/json'}})
         .then(
           (response) => {
             if (response.status === 400) {app.flash('Bad Request', 'error'); reject(response);}
@@ -104,7 +104,7 @@ class Utils {
             reject(response);
           }
         );
-    });
+    }); 
   }
 
   static enableCorpusIsPublicRequest(userId, corpusId) {
@@ -145,7 +145,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 +173,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);}

app/static/js_new/App.js

@@ -0,0 +1,10 @@
+import DataStore from './DataStore';
+import EventBroker from './EventBroker';
+
+
+const dataStore = new DataStore();
+const eventBroker = new EventBroker();
+const socket = io({transports: ['websocket'], upgrade: false});
+
+
+export {eventBroker, socket};