Change the Subscription Logic for Socket.IO Data exchange

app/templates/_scripts.html.j2

@@ -32,11 +32,7 @@
   const jobStatusNotifier = new JobStatusNotifier(currentUserId);
 
   // Initialize components for current user
-  app.subscribeUser(currentUserId)
-    .then(
-      (user) => {return;},
-      (error) => {throw JSON.stringify(error);}
-    );
+  app.subscribeUser(currentUserId).catch((error) => {throw JSON.stringify(error);});
   {%- endif %}
 
   // Disable all option elements with no value

app/templates/jobs/_breadcrumbs.html.j2

@@ -1,8 +1,8 @@
 {% set breadcrumbs %}
 <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
 <li class="tab"><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" target="_self">My jobs</a></li>
-<li class="tab disabled"><i class="material-icons">navigate_next</i></li>
 {% if request.path == url_for('.job', job_id=job.id) %}
+<li class="tab disabled"><i class="material-icons">navigate_next</i></li>
 <li class="tab"><a class="active" href="{{ url_for('.job', job_id=job.id) }}" target="_self">{{ job.title }}</a></li>
 {% endif %}
 {% endset %}

app/templates/users/users.html.j2

@@ -7,10 +7,28 @@
       <h1 id="title">{{ title }}</h1>
     </div>
 
-    <div class="col s12">
+    <div class="col s12 nopaque-ressource-list no-autoinit" data-ressource-type="User" id="users">
       <div class="card">
         <div class="card-content">
-          <table class="" id="users"></table>
+          <div class="input-field">
+            <i class="material-icons prefix">search</i>
+            <input id="search-user" class="search" type="text"></input>
+            <label for="search-user">Search user</label>
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th>Id</th>
+                <th>Username</th>
+                <th>Email</th>
+                <th>Last seen</th>
+                <th>Role</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody class="list"></tbody>
+          </table>
+          <ul class="pagination"></ul>
         </div>
       </div>
     </div>
@@ -18,52 +36,10 @@
 </div>
 {% endblock page_content %}
 
-
 {% block scripts %}
 {{ super() }}
-<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
 <script>
-  const updateUrl = (prev, query) => {
-    return prev + (prev.indexOf('?') >= 0 ? '&' : '?') + new URLSearchParams(query).toString();
-  };
-
-  new gridjs.Grid({
-    columns: [
-      { id: 'username', name: 'Username' },
-      { id: 'email', name: 'Email' },
-    ],
-    server: {
-      url: '/users/api_users',
-      then: results => results.data,
-      total: results => results.total,
-    },
-    search: {
-      enabled: true,
-      server: {
-        url: (prev, search) => {
-          return updateUrl(prev, {search});
-        },
-      },
-    },
-    sort: {
-      enabled: true,
-      multiColumn: true,
-      server: {
-        url: (prev, columns) => {
-          const columnIds = ['username', 'email'];
-          const sort = columns.map(col => (col.direction === 1 ? '+' : '-') + columnIds[col.index]);
-          return updateUrl(prev, {sort});
-        },
-      },
-    },
-    pagination: {
-      enabled: true,
-      server: {
-        url: (prev, page, limit) => {
-          return updateUrl(prev, {offset: page * limit, limit: limit});
-        },
-      },
-    }
-  }).render(document.getElementById('users'));
+  let userList = new UserList(document.querySelector('#users'));
+  userList.init({{ dict_users|tojson }});
 </script>
 {% endblock scripts %}