feat: refs #6897 add time formatting and improve column alignment handling in VnTable

src/components/VnTable/VnColumn.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { markRaw, computed } from 'vue';
-import { QIcon, QCheckbox, QToggle } from 'quasar';
+import { QIcon, QToggle } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
 import VnSelect from 'components/common/VnSelect.vue';

src/components/VnTable/VnTable.vue

@@ -14,10 +14,11 @@ import {
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { useQuasar, date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useFilterParams } from 'src/composables/useFilterParams';
-import { dashIfEmpty } from 'src/filters';
+import { dashIfEmpty, toDate } from 'src/filters';
+import { toTimeFormat } from 'src/filters/date';
 
 import CrudModel from 'src/components/CrudModel.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -527,11 +528,32 @@ function formatColumnValue(col, row, dashIfEmpty) {
         } else {
             return col.format(row, dashIfEmpty);
         }
+    }
+
+    if (col?.component === 'date') return dashIfEmpty(toDate(row[col?.name]));
+
+    if (col?.component === 'time')
+        return row[col?.name] >= 5
+            ? dashIfEmpty(date.formatDate(new Date(row[col?.name]), 'HH:mm'))
+            : row[col?.name];
+
+    if (selectRegex.test(col?.component) && $props.isEditable) {
+        const findBy = find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
+
+        if (col?.attrs.options)
+            return dashIfEmpty(
+                col?.attrs.options.find((option) => option.id === row[col.name])?.name,
+            );
+
+        if (typeof row[findBy] == 'object') {
+            return dashIfEmpty(row[findBy][col?.attrs.optionLabel ?? 'name']);
+        }
+        if (row[findBy]) return dashIfEmpty(row[findBy]);
+        if (!findBy || !row) return;
     } else {
         return dashIfEmpty(row[col?.name]);
     }
 }
-const checkbox = ref(null);
 function cardClick(_, row) {
     if ($props.redirect) router.push({ path: `/${$props.redirect}/${row.id}` });
 }
@@ -730,7 +752,11 @@ function cardClick(_, row) {
                                 <span
                                     v-else
                                     :class="hasEditableFormat(col)"
-                                    :style="col?.style ? col.style(row) : null"
+                                    :style="
+                                        typeof col?.style == 'function'
+                                            ? col.style(row)
+                                            : col?.style
+                                    "
                                     style="bottom: 0"
                                 >
                                     {{ formatColumnValue(col, row, dashIfEmpty) }}

src/composables/getColAlign.js

@@ -7,6 +7,7 @@ export function getColAlign(col) {
         case 'number':
             align = 'right';
             break;
+        case 'time':
         case 'date':
         case 'checkbox':
             align = 'center';