Integrate CorpusFollowerRoles

app/static/js/ResourceLists/CorpusFollowerList.js

@@ -7,6 +7,9 @@ class CorpusFollowerList extends ResourceList {
 
   constructor(listContainerElement, options = {}) {
     super(listContainerElement, options);
+    this.listjs.on('updated', () => {
+      M.FormSelect.init(this.listjs.list.querySelectorAll('.list-item select'));
+    });
     this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
     this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
     this.isInitialized = false;
@@ -28,30 +31,21 @@ class CorpusFollowerList extends ResourceList {
     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><img alt="follower-avatar" class="circle responsive-img follower-avatar" style="width:50%"></td>
+          <td><b class="follower-username"><b></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>
+            <span class="follower-full-name"></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>
+            <i class="follower-about-me"></i>
+          </td>
+          <td>
+            <div class="input-field disable-on-click list-action-trigger" data-list-action="update-role">
+              <select>
+                <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>
+              </select>
+            </div>
           </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>
@@ -66,10 +60,10 @@ class CorpusFollowerList extends ResourceList {
     return [
       {data: ['id']},
       {data: ['follower-id']},
-      {name: 'avatar', attr: 'src'},
-      'username',
-      'about-me',
-      'full-name'
+      {name: 'follower-avatar', attr: 'src'},
+      'follower-username',
+      'follower-about-me',
+      'follower-full-name'
     ];
   }
 
@@ -90,7 +84,7 @@ class CorpusFollowerList extends ResourceList {
             <th style="width:15%;"></th>
             <th>Username</th>
             <th>User details</th>
-            <th>Permissions</th>
+            <th>Role</th>
             <th></th>
           </tr>
         </thead>
@@ -104,13 +98,11 @@ class CorpusFollowerList extends ResourceList {
     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')
+      'follower-avatar': corpusFollowerAssociation.follower.avatar ? `/users/${corpusFollowerAssociation.follower.id}/avatar` : '/static/images/user_avatar.png',
+      'follower-username': corpusFollowerAssociation.follower.username,
+      'follower-full-name': corpusFollowerAssociation.follower.full_name ? corpusFollowerAssociation.follower.full_name : '',
+      'follower-about-me': corpusFollowerAssociation.follower.about_me ? corpusFollowerAssociation.follower.about_me : '',
+      'role-name': corpusFollowerAssociation.role.name
     };
   }
 
@@ -119,7 +111,7 @@ class CorpusFollowerList extends ResourceList {
   }
 
   onChange(event) {
-    if (event.target.tagName !== 'INPUT') {return;}
+    console.log(event.target.tagName);
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;
@@ -127,16 +119,10 @@ class CorpusFollowerList extends ResourceList {
     if (listActionElement === null) {return;}
     let listAction = listActionElement.dataset.listAction;
     switch (listAction) {
-      case 'toggle-permission': {
+      case 'update-role': {
         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;});
-        }
+        let roleName = event.target.value;
+        Utils.updateCorpusFollowerRole(this.corpusId, followerId, roleName);
         break;
       }
       default: {
@@ -188,11 +174,11 @@ class CorpusFollowerList extends ResourceList {
           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);
-          // }
+          let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)/role$`);
+          if (re.test(operation.path)) {
+            let [match, jobId, valueName] = operation.path.match(re);
+            this.replace(jobId, valueName, operation.value);
+          }
           break;
         }
         default: {