Remove the Table component

src/gui/src/UI/Components/Table.js

@@ -1,103 +0,0 @@
-/**
- * Copyright (C) 2024-present Puter Technologies Inc.
- *
- * This file is part of Puter.
- *
- * Puter is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published
- * by the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-
-const Component = use('util.Component');
-
-/**
- * A table with a sticky header
- */
-export default def(class Table extends Component {
-    static ID = 'ui.component.Table';
-
-    static PROPERTIES = {
-        headings: { value: [] },
-        scale: { value: '2pt' },
-        rows: { value: [] },
-    }
-
-    static CSS = /*css*/`
-        table {
-            box-sizing: border-box;
-            border-collapse: collapse;
-            width: 100%;
-        }
-        
-        thead th {
-            box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
-            backdrop-filter: blur(2px);
-            position: sticky;
-            z-index: 100;
-            padding:
-                calc(10 * var(--scale))
-                calc(2.5 * var(--scale))
-                calc(5 * var(--scale))
-                calc(2.5 * var(--scale));
-            top: 0;
-            background-color: hsla(0, 0%, 100%, 0.8);
-            text-align: left;
-            border-bottom: 1px solid #e0e0e0;
-        }
-        
-        thead th:not(:last-of-type) {
-            /* we set borders on this span because */
-            /* borders fly away from sticky headers */
-            border-right: 1px solid #e0e0e0;
-        }
-        
-        tbody > * {
-            border-bottom: 1px solid #e0e0e0;
-            padding: 0 calc(2.5 * var(--scale));
-            vertical-align: middle;
-        }
-    `;
-
-    create_template ({ template }) {
-        $(template).html(`
-            <table>
-                <thead>
-                    <tr class="headings"></tr>
-                </thead>
-                <tbody>
-                    <slot name="rows"></slot>
-                </tbody>      
-            </table>
-        `);
-    }
-
-    on_ready ({ listen }) {
-        listen('headings', headings => {
-            $(this.dom_).find('.headings')
-                .html(headings.map(heading => `<th><span>${heading}</span></th>`).join(''))
-        });
-
-        listen('scale', scale => {
-            $(this.dom_).css('--scale', scale);
-        });
-
-        listen('rows', rows => {
-            const tbody = $(this.dom_).find('tbody')[0];
-            $(tbody).find('[slot=rows]').detach();
-            for (const row of rows) {
-                row.setAttribute('slot', 'rows');
-                row.attach(tbody);
-            }
-        });
-    }
-});

src/gui/src/UI/UIWindowTaskManager.js

@@ -21,7 +21,6 @@ import UIAlert from "./UIAlert.js";
 import UIContextMenu from "./UIContextMenu.js";
 import { Component, defineComponent } from '../util/Component.js';
 import UIComponentWindow from './UIComponentWindow.js';
-import Table from './Components/Table.js';
 
 const end_process = async (uuid, force) => {
     const svc_process = globalThis.services.get('process');
@@ -78,49 +77,68 @@ class TaskManagerTable extends Component {
             border: 2px inset rgba(127, 127, 127, 0.3);
             overflow: auto;
         }
+
+        table {
+            box-sizing: border-box;
+            border-collapse: collapse;
+            width: 100%;
+        }
+        
+        thead th {
+            box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
+            backdrop-filter: blur(2px);
+            position: sticky;
+            z-index: 100;
+            padding:
+                calc(10 * var(--scale))
+                calc(2.5 * var(--scale))
+                calc(5 * var(--scale))
+                calc(2.5 * var(--scale));
+            top: 0;
+            background-color: hsla(0, 0%, 100%, 0.8);
+            text-align: left;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        thead th:not(:last-of-type) {
+            border-right: 1px solid #e0e0e0;
+        }
+        
+        tbody > tr > td {
+            border-bottom: 1px solid #e0e0e0;
+            padding: 0 calc(2.5 * var(--scale));
+            vertical-align: middle;
+        }
     `;
 
     #svc_process = globalThis.services.get('process');
 
     create_template ({ template }) {
         $(template).html(`
-            <div class="taskmgr-taskarea"></div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>${i18n('taskmgr_header_name')}</th>
+                        <th>${i18n('taskmgr_header_type')}</th>
+                        <th>${i18n('taskmgr_header_status')}</th>
+                    </tr>
+                </thead>
+                <tbody class="taskmgr-taskarea">
+                </tbody>
+            </table>
         `);
     }
 
     on_ready ({ listen }) {
-        this.table = new Table({
-            headings: [
-                i18n('taskmgr_header_name'),
-                i18n('taskmgr_header_type'),
-                i18n('taskmgr_header_status'),
-            ]
-        });
-        this.table.attach(this.dom_.querySelector('.taskmgr-taskarea'));
-
         listen('tasks', tasks => {
             const row_data = this.#iter_tasks(tasks, { indent_level: 0, is_last_item_stack: [] });
-            const new_uuids = row_data.map(it => it.uuid);
+            const tbody = $(this.dom_).find('.taskmgr-taskarea');
+            tbody.empty();
 
-            const old_rows = this.table.get('rows');
-
-            const rows = [];
             for (const data of row_data) {
-                // Try to reuse old row
-                const old_row = old_rows.find(it => data.uuid === it.get('uuid'));
-                if (old_row) {
-                    for (const property in data) {
-                        old_row.set(property, data[property]);
-                    }
-                    rows.push(old_row);
-                    continue;
-                }
-
-                // Create a new row
-                rows.push(new TaskManagerRow(data));
+                const row = new TaskManagerRow(data);
+                row.attach(tbody[0]);
             }
-
-            this.table.set('rows', rows);
         });
     }