#15 Add "DB order" sorting to the tab with properties of an entity

assets/js/components/tables/EntityPropsTable.js

@@ -9,7 +9,7 @@ import { searchString } from "../../utils/strings";
 export const EntityPropsTable = ({ fieldsData, search }) => {
   const [ ui, setUI ] = useState({
     sorting: {
-      column: "key",
+      column: "db_order",
       dir: "asc",
     },
   });
@@ -49,7 +49,7 @@ export const EntityPropsTable = ({ fieldsData, search }) => {
     fieldsSorted = fieldsSorted.filter((field) => {
       let contains = false;
 
-      ['key', 'value'].forEach((field_name) => {
+      ['db_order', 'key', 'value'].forEach((field_name) => {
         let value = Number.isInteger(field[field_name]) ? field[field_name].toString(10) : String(field[field_name]);
 
         if (! contains && searchString(search, value)) {
@@ -69,6 +69,14 @@ export const EntityPropsTable = ({ fieldsData, search }) => {
     <table className="vsm-table">
       <thead>
       <tr>
+        <th
+          className="vsm-table__column vsm-table__column_sortable"
+          onClick={() => sortFields("db_order")}
+        >
+          {str("th_db_order")}
+          <SortingArrow show={ui.sorting.column === "db_order"} dir={ui.sorting.dir} />
+        </th>
+
         <th
           className="vsm-table__column vsm-table__column_sortable"
           onClick={() => sortFields("key")}
@@ -88,6 +96,11 @@ export const EntityPropsTable = ({ fieldsData, search }) => {
         return (
           <tr key={item.key} className="vsm-table__row">
 
+            {/* The empty column for "DB order" sorting */}
+            <td className="vsm-table__column vsm-table__column_type_td vsm-table__column_content_db-order">
+              {item.db_order + 1}
+            </td>
+
             <td className="vsm-table__column vsm-table__column_type_td">
               <CellContent value={item.key} search={search} />
             </td>
@@ -116,6 +129,7 @@ export const EntityPropsTable = ({ fieldsData, search }) => {
                 </div>
               )}
             </td>
+
           </tr>
         );
       })}

assets/styles/main.scss

@@ -172,6 +172,10 @@
 
         &_value {
         }
+
+        &_db-order {
+            opacity: 0.3;
+        }
     }
 }
 

inc/logic.php

@@ -38,6 +38,7 @@ function show_metabox(object $item): void
                 'th_id' => esc_html__('Meta id', 'entity-viewer'),
                 'th_key' => esc_html__('Key', 'entity-viewer'),
                 'th_value' => esc_html__('Value', 'entity-viewer'),
+                'th_db_order' => esc_html__('DB Order', 'entity-viewer'),
                 'incorrect_response' => esc_html__('Incorrect response, see dev-tools (console) for details', 'entity-viewer'),
                 'http_error' => esc_html__('HTTP error: {{status}}, see dev-tools (console) for details', 'entity-viewer'),
                 'loading_initial_state' => esc_html__('The initial state is loading...', 'entity-viewer'),

src/Fetcher/EntityFetcher.php

@@ -20,12 +20,15 @@ public static function getData(string $entity_name, int $item_id)
         }
 
         $fields = [];
+        $index = 0;
 
         foreach ($data as $key => $value) {
             $fields[] = [
                 'key' => $key,
                 'value' => $value,
+                'db_order' => $index,
             ];
+            ++$index;
         }
 
         return [