Merge pull request #2718 from benderl/koala

koala fixes

Author: benderl

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

@@ -34,7 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue';
+import {
+  ref,
+  computed,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from 'vue';
 import { Screen } from 'quasar';
 
 const props = defineProps<{ items: number[] }>();
@@ -69,7 +76,6 @@ function measure() {
   });
 }
 
-
 onMounted(() => {
   measure();
   window.addEventListener('resize', measure);
@@ -83,7 +89,13 @@ watch(() => props.items, measure);
 
 const groupSize = computed(() => {
   if (!itemWidth.value || !carouselWidth.value) return 1;
-  const maxGroup = Math.max(1, Math.floor((carouselWidth.value - (showArrows.value ? carouselPadding.value : 50)) / itemWidth.value));
+  const maxGroup = Math.max(
+    1,
+    Math.floor(
+      (carouselWidth.value - (showArrows.value ? carouselPadding.value : 50)) /
+        itemWidth.value,
+    ),
+  );
   // Spezialfall: Alle passen nebeneinander
   if (
     props.items.length > maxGroup &&

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

@@ -15,10 +15,12 @@
     binary-state-sort
     :pagination="{ rowsPerPage: 0 }"
     hide-bottom
+    :dense="props.dense"
+    :square="props.square"
   >
     <!-- search field ------------------------------------------------------->
     <template #top v-if="searchInputVisible">
-      <div class="row full-width items-center q-mb-sm">
+      <div class="row full-width items-center">
         <div class="col">
           <q-input
             v-model="filterModel"
@@ -146,6 +148,8 @@ const props = defineProps<{
   filter?: string;
   columnsToSearch?: string[];
   rowExpandable?: boolean;
+  dense?: boolean;
+  square?: boolean;
 }>();
 
 /* ------------------------------------------------------------------ state */
@@ -211,7 +215,11 @@ const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
 const onRowClick = (evt: Event, row: T) => emit('row-click', row);
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+:deep(.q-table__top) {
+  padding: #{map-get($space-xs, y)} #{map-get($space-xs, x)};
+}
+
 .search-field {
   width: 100%;
   max-width: 18em;

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

@@ -1,8 +1,11 @@
 <template>
   <q-card
     ref="cardRef"
-    class="card-width full-height"
-    :class="{ 'battery-sum': props.batteryId === -1 }"
+    class="card-width"
+    :class="{
+      'battery-sum': props.batteryId === -1,
+      'full-height': props.fullHeight,
+    }"
   >
     <q-card-section class="row items-center justify-between">
       <div class="text-h6 text-bold ellipsis" :title="cardTitle">
@@ -80,6 +83,7 @@ const cardRef = ref<{ $el: HTMLElement } | null>(null);
 
 const props = defineProps<{
   batteryId: number;
+  fullHeight?: boolean;
 }>();
 
 const singleBattery = computed(() => {

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

@@ -1,7 +1,7 @@
 <template>
   <BaseCarousel :items="batteryIds">
     <template #item="{ item }">
-      <BatteryCard :battery-id="item" />
+      <BatteryCard :battery-id="item" full-height />
     </template>
   </BaseCarousel>
 </template>

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

@@ -1,5 +1,9 @@
 <template>
-  <q-card ref="cardRef" class="card-width full-height">
+  <q-card
+    ref="cardRef"
+    class="card-width"
+    :class="{ 'full-height': props.fullHeight }"
+  >
     <q-card-section class="row no-wrap">
       <div class="text-h6 text-bold ellipsis" :title="name">
         {{ name }}
@@ -127,6 +131,7 @@ const $q = useQuasar();
 const props = defineProps<{
   chargePointId: number;
   closeButton?: boolean;
+  fullHeight?: boolean;
 }>();
 
 const vehicleId = computed(() => {

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

@@ -4,23 +4,25 @@
     :items="chargePointIds"
   >
     <template #item="{ item }">
-      <ChargePointCard :charge-point-id="item" />
+      <ChargePointCard :charge-point-id="item" full-height />
     </template>
   </BaseCarousel>
 
   <BaseTable
     v-else
     :items="chargePointIds"
     :row-data="tableRowData"
-    :column-config="compactTable ? tableColumnsMobile : columnConfigDesktop"
+    :column-config="compactTable ? tableColumnsCompact : columnConfig"
+    :dense="compactTable"
+    :square="compactTable"
     :search-input-visible="searchInputVisible"
     :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
     :row-expandable="compactTable"
     @row-click="onRowClick"
   >
-    <!-- desktop view table body slots -->
+    <!-- full view table body slots -->
     <template #body-cell-plugged="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
@@ -54,16 +56,16 @@
         />
       </q-td>
     </template>
-    <!-- mobile view table body slots -->
-    <!-- mobile view charge point name and vehicle name displayed in one field -->
+    <!-- compact view table body slots -->
+    <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         {{ slotProps.row.name }}<br />
         <span class="text-caption">{{ slotProps.row.vehicle }}</span>
       </q-td>
     </template>
 
-    <!-- mobile view charge point charge mode, plug status and time charging displayed in one field -->
+    <!-- compact view charge point charge mode, plug status and time charging displayed in one field -->
     <template #body-cell-modePluggedTimeCharging="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         <div class="items-center">
@@ -83,7 +85,7 @@
     <template #row-expand="slotProps">
       <div class="q-pa-xs column q-gutter-y-xs">
         <div
-          v-for="column in expansionColumnsMobile"
+          v-for="column in expansionColumnsCompact"
           :key="column.field"
           class="row items-start"
         >
@@ -191,7 +193,7 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
   };
 });
 
-const columnConfigDesktop: ColumnConfiguration[] = [
+const columnConfig: ColumnConfiguration[] = [
   { field: 'name', label: 'Ladepunkt' },
   { field: 'vehicle', label: 'Fahrzeug' },
   { field: 'plugged', label: 'Status', align: 'center' },
@@ -202,7 +204,7 @@ const columnConfigDesktop: ColumnConfiguration[] = [
   { field: 'soc', label: 'Ladestand', align: 'right' },
 ];
 
-const columnConfigMobile: ColumnConfiguration[] = [
+const columnConfigCompact: ColumnConfiguration[] = [
   { field: 'nameAndVehicle', label: 'Ladepunkt' },
   { field: 'modePluggedTimeCharging', label: 'Lademodus', align: 'center' },
   {
@@ -214,10 +216,10 @@ const columnConfigMobile: ColumnConfiguration[] = [
   { field: 'soc', label: 'Ladestand', align: 'right', expandField: true },
 ];
 
-const tableColumnsMobile = columnConfigMobile.filter(
+const tableColumnsCompact = columnConfigCompact.filter(
   (column) => !column.expandField,
 );
-const expansionColumnsMobile = columnConfigMobile.filter(
+const expansionColumnsCompact = columnConfigCompact.filter(
   (column) => column.expandField,
 );
 

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

@@ -1,15 +1,17 @@
 <template>
   <div
     :class="[
-      'text-no-wrap items-center q-gutter-xs',
+      'text-no-wrap items-center',
       columnDisplayFormat ? 'column' : 'row inline',
     ]"
   >
     <span>{{ power }}</span>
-    <q-badge rounded color="primary" :label="phaseNumber">
-      <q-tooltip>Phasenanzahl</q-tooltip>
-    </q-badge>
-    <span>{{ current }}</span>
+    <div :class="{ 'q-ml-xs': !columnDisplayFormat }">
+      <q-badge rounded color="primary" :label="phaseNumber" class="q-mr-xs">
+        <q-tooltip>Phasenanzahl</q-tooltip>
+      </q-badge>
+      <span>{{ current }}</span>
+    </div>
   </div>
 </template>
 

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

@@ -1,9 +1,22 @@
 <template>
-  <q-card ref="cardRef" class="card-width full-height">
+  <q-card
+    ref="cardRef"
+    class="card-width"
+    :class="{ 'full-height': props.fullHeight }"
+  >
     <q-card-section class="row">
       <div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
         {{ vehicle?.name }}
       </div>
+      <q-space />
+      <q-btn
+        v-if="props.closeButton"
+        icon="close"
+        flat
+        round
+        dense
+        v-close-popup
+      />
     </q-card-section>
     <q-separator class="q-mt-sm" />
     <q-card-section class="row q-mt-sm">
@@ -57,6 +70,8 @@ const cardRef = ref<{ $el: HTMLElement } | null>(null);
 
 const props = defineProps<{
   vehicleId: number;
+  closeButton?: boolean;
+  fullHeight?: boolean;
 }>();
 
 const mqttStore = useMqttStore();

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

@@ -4,17 +4,19 @@
     :items="vehicleIds"
   >
     <template #item="{ item }">
-      <VehicleCard :vehicle-id="item" />
+      <VehicleCard :vehicle-id="item" full-height />
     </template>
   </BaseCarousel>
 
   <BaseTable
     v-else
     :items="vehicleIds"
     :row-data="tableRowData"
-    :column-config="isMobile ? columnConfigMobile : columnConfigDesktop"
+    :column-config="compactTable ? columnConfigCompact : columnConfig"
+    :dense="compactTable"
+    :square="compactTable"
     :search-input-visible="searchInputVisible"
-    :table-height="isMobile ? '35vh' : '45vh'"
+    :table-height="compactTable ? '35vh' : '45vh'"
     v-model:filter="filter"
     :columns-to-search="['name', 'manufacturer', 'model']"
     :row-expandable="true"
@@ -42,21 +44,16 @@
       <VehicleCard
         v-if="selectedVehicleId !== null"
         :vehicle-id="selectedVehicleId"
-      >
-        <template #card-actions>
-          <q-btn color="primary" flat no-caps v-close-popup size="md">
-            Schließen
-          </q-btn>
-        </template>
-      </VehicleCard>
+        closeButton
+      />
     </div>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { Platform } from 'quasar';
+import { Screen } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import { VehicleRow } from 'src/components/models/table-model';
@@ -66,7 +63,7 @@ import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
-const isMobile = computed(() => Platform.is.mobile);
+const compactTable = computed(() => Screen.lt.md);
 const modalChargeVehicleCardVisible = ref(false);
 const selectedVehicleId = ref<number | null>(null);
 const filter = ref('');
@@ -103,15 +100,15 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
   };
 });
 
-const columnConfigDesktop: ColumnConfiguration[] = [
+const columnConfig: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
   { field: 'manufacturer', label: 'Hersteller' },
   { field: 'model', label: 'Modell' },
   { field: 'plugged', label: 'Status', align: 'center' },
   { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
 ];
 
-const columnConfigMobile: ColumnConfiguration[] = [
+const columnConfigCompact: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
   { field: 'plugged', label: 'Status', align: 'center' },
   { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },