Role change in table

clr-li · Apr 16, 2024 · 9e65adf · 9e65adf
1 parent ca19b56
commit 9e65adf
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/public/admin.js b/public/admin.js
@@ -1,5 +1,6 @@
 import { Component } from './util/Component.js';
 import { Popup } from './components/Popup.js';
+import { DataTable } from './components/DataTable.js';
 
 // import HTTP methods and add error handling
 import {
@@ -202,7 +203,34 @@ class MembersTable extends Component {
 
         /** @type {DataTable} */
         const table = this.shadowRoot.getElementById('table');
-        table.update(columns, this.users, ['qr'], customColumns);
+        table.update(
+            columns,
+            this.users,
+            ['qr'],
+            customColumns,
+            undefined,
+            (col, row) => {
+                if (col != 'role') return row[col];
+                if (row.role === 'owner') return html`<span>owner</span>`;
+                return html` <label style="position: relative">
+                    <span style="border-bottom: 2px dashed black;">${row[col]}</span>
+                    <br />
+                    <select class="table-dropdown">
+                        <option value="admin" ${row[col] === 'admin' ? 'selected' : ''}>
+                            admin
+                        </option>
+                        <option value="moderator" ${row[col] === 'moderator' ? 'selected' : ''}>
+                            moderator
+                        </option>
+                        <option value="scanner" ${row[col] === 'scanner' ? 'selected' : ''}>
+                            scanner
+                        </option>
+                        <option value="user" ${row[col] === 'user' ? 'selected' : ''}>user</option>
+                    </select>
+                </label>`;
+            },
+            ['change'],
+        );
     }
 
     connectedCallback() {
@@ -239,16 +267,23 @@ class MembersTable extends Component {
             const newRole = changeRole.value;
             const users = table.getSelection();
             await changeRoles(users, newRole);
-            this.update();
             changeRole.value = '';
+            this.update();
         };
-
         // handle edits of custom data
         table.addEventListener('edit', async e => {
             const uid = e.detail.row.id;
             const costumData = { ...e.detail.row.custom_data, [e.detail.col]: e.detail.value };
             await PATCH(`/businesses/${getBusinessId()}/customdata/${uid}`, costumData);
         });
+        // handle role change
+        table.addEventListener('table-change', async e => {
+            if (e.detail.col === 'role') {
+                await changeRoles([e.detail.row], e.detail.value);
+                e.detail.row[e.detail.col] = [e.detail.value];
+                table.update();
+            }
+        });
     }
 }
 window.customElements.define('members-table', MembersTable);
@@ -1262,9 +1297,7 @@ async function loadAttendanceData() {
         return /* html */ `
             <label style="position: relative">
                 ${display}
-                <select
-                    style="opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; cursor: pointer"
-                >
+                <select class="table-dropdown">
                     <option value="${sanitizeText(status)}" selected disabled>${sanitizeText(
                         status,
                     )}</option>

diff --git a/public/styles/tables.css b/public/styles/tables.css
@@ -62,6 +62,18 @@
     border: 1px solid var(--secondary);
 }
 
+.table-dropdown {
+    opacity: 0; 
+    position: absolute; 
+    left: 0; 
+    top: 0; 
+    width: 100%; 
+    height: 100%; 
+    min-width: 0; 
+    min-height: 0; 
+    cursor: pointer;
+}
+
 .table-action-bar {
     display: flex;
     white-space: nowrap;