Change the user session SocketIO Logic

app/templates/users/users.html.j2

@@ -0,0 +1,69 @@
+{% extends "base.html.j2" %}
+
+{% block page_content %}
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <h1 id="title">{{ title }}</h1>
+    </div>
+
+    <div class="col s12">
+      <div class="card">
+        <div class="card-content">
+          <table class="" id="users"></table>
+        </div>
+      </div>
+    </div>
+  </div>
+</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'));
+</script>
+{% endblock scripts %}