Koala theme Vehicle table view - base-table refactor

packages/modules/web_themes/koala/config.py

@@ -7,11 +7,15 @@
 class KoalaWebThemeConfiguration:
     def __init__(self,
                  history_chart_range: int = 3600,
-                 card_view_breakpoint: int = 4,
-                 table_search_input_field: bool = False) -> None:
+                 chargePoint_card_view_breakpoint: int = 4,
+                 vehicle_card_view_breakpoint: int = 4,
+                 chargePoint_table_search_input_field: bool = False,
+                 vehicle_table_search_input_field: bool = False) -> None:
         self.history_chart_range = history_chart_range
-        self.card_view_breakpoint = card_view_breakpoint
-        self.table_search_input_field = table_search_input_field
+        self.chargePoint_card_view_breakpoint = chargePoint_card_view_breakpoint
+        self.vehicle_card_view_breakpoint = vehicle_card_view_breakpoint
+        self.chargePoint_table_search_input_field = chargePoint_table_search_input_field
+        self.vehicle_table_search_input_field = vehicle_table_search_input_field
 
 
 @auto_str

packages/modules/web_themes/koala/source/src/components/BaseTable.vue

@@ -2,10 +2,10 @@
   <div class="q-pa-md">
     <q-table
       class="sticky-header-table"
-      :rows="rows"
-      :columns="columns"
+      :rows="mappedRows"
+      :columns="mappedColumns"
       row-key="id"
-      :filter="filter"
+      :filter="filterModel"
       :filter-method="customFilterMethod"
       virtual-scroll
       :virtual-scroll-item-size="48"
@@ -48,62 +48,79 @@
   </div>
 </template>
 
-<style scoped>
-.search-field {
-  width: 100%;
-  max-width: 18em;
-}
-</style>
-
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ComputedRef } from 'vue';
 import { QTableColumn, QTableProps } from 'quasar';
-import { BaseRow } from 'src/components/models/base-table-models';
-
-type FilterFunction = NonNullable<QTableProps['filterMethod']>;
 
 const props = defineProps<{
-  rows: BaseRow[];
-  columns: QTableColumn[];
+  items: number[];
+  rowData:
+    | ((item: number) => Record<string, unknown>)
+    | ComputedRef<(item: number) => Record<string, unknown>>;
+  columnConfig: {
+    fields: string[];
+    labels?: Record<string, string>;
+  };
+  rowKey?: string;
   searchInputVisible?: boolean;
   tableHeight?: string;
   filter?: string;
   columnsToSearch?: string[];
 }>();
 
 const emit = defineEmits<{
-  (e: 'row-click', row: BaseRow): void;
+  (e: 'row-click', row: Record<string, unknown>): void;
   (e: 'update:filter', value: string): void;
 }>();
 
 const filterModel = computed({
   get: () => props.filter || '',
-  set: (value) => {
-    emit('update:filter', value);
-  },
+  set: (value) => emit('update:filter', value),
+});
+
+// Data can be passed to basetable as a normal function or computed property
+const rowMapperFn = computed(() =>
+  typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
+);
+
+const mappedRows = computed(() => props.items.map(rowMapperFn.value));
+
+const mappedColumns = computed<QTableColumn[]>(() => {
+  return props.columnConfig.fields.map((field) => ({
+    name: field,
+    label: props.columnConfig.labels?.[field] || field,
+    field,
+    align: 'left',
+    sortable: true,
+    headerStyle: 'font-weight: bold',
+  }));
 });
 
-const customFilterMethod: FilterFunction = (rows, terms, cols) => {
-  if (!terms || terms.trim() === '') {
-    return rows;
-  }
+const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
+  rows,
+  terms,
+  cols,
+) => {
+  if (!terms || terms.trim() === '') return rows;
   const lowerTerms = terms.toLowerCase();
-  const columnsToSearch =
+  const fields =
     props.columnsToSearch ||
     cols.map((col) => (typeof col.field === 'string' ? col.field : ''));
-  return rows.filter((row) => {
-    return columnsToSearch.some((field) => {
-      const val = row[field as keyof typeof row];
-      return (
-        val !== null &&
-        val !== undefined &&
-        String(val).toLowerCase().includes(lowerTerms)
-      );
-    });
-  });
+  return rows.filter((row) =>
+    fields.some((field) => {
+      const val = row[field];
+      return val && String(val).toLowerCase().includes(lowerTerms);
+    }),
+  );
 };
 
-const onRowClick = (evt: Event, row: BaseRow) => {
+const onRowClick = (evt: Event, row: Record<string, unknown>) =>
   emit('row-click', row);
-};
 </script>
+
+<style scoped>
+.search-field {
+  width: 100%;
+  max-width: 18em;
+}
+</style>

packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue

@@ -8,6 +8,12 @@
           <ChargePointStateIcon
             :charge-point-id="Number(props.chargePointId)"
           />
+          <ChargePointTimeCharging
+            :charge-point-id="Number(props.chargePointId)"
+            :readonly="true"
+            :iconSize="'xs'"
+            :toolTip="true"
+          />
         </div>
         <q-icon name="settings" size="sm" @click="settingsVisible = true" />
       </div>
@@ -91,6 +97,7 @@ import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ChargePointManualSocDialog from './ChargePointManualSocDialog.vue';
+import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import { useQuasar } from 'quasar';
 
 const mqttStore = useMqttStore();