Merge pull request #21727 from itisAliRH/btable-to-gtable-export-record-table

Migrate ExportRecordTable from BTable to GTable

Author: davelopez

client/src/components/Common/ExportRecordTable.vue

@@ -8,12 +8,14 @@ import {
     faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BTable } from "bootstrap-vue";
+
+import type { TableField } from "@/components/Common/GTable.types";
 
 import type { ExportRecord } from "./models/exportRecordModel";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
+import GTable from "@/components/Common/GTable.vue";
 
 interface Props {
     records: ExportRecord[];
@@ -26,13 +28,13 @@ const emit = defineEmits<{
     (e: "onCopyDownloadLink", record: ExportRecord): void;
 }>();
 
-const fields = [
+const fields: TableField[] = [
     { key: "elapsedTime", label: "Exported" },
     { key: "format", label: "Format" },
     { key: "expires", label: "Expires" },
-    { key: "isUpToDate", label: "Up to date", class: "text-center" },
-    { key: "isReady", label: "Ready", class: "text-center" },
-    { key: "actions", label: "Actions" },
+    { key: "isUpToDate", label: "Up to date", align: "center" },
+    { key: "isReady", label: "Ready", align: "center" },
+    { key: "actions", label: "Actions", align: "center" },
 ];
 
 async function reimportObject(record: ExportRecord) {
@@ -49,9 +51,9 @@ function copyDownloadLink(record: ExportRecord) {
 </script>
 
 <template>
-    <BTable :items="props.records" :fields="fields">
+    <GTable :items="props.records" :fields="fields">
         <template v-slot:cell(elapsedTime)="row">
-            <span :title="row.item.date">{{ row.value }}</span>
+            <span :title="row.item.date.toLocaleString()">{{ row.value }}</span>
         </template>
 
         <template v-slot:cell(format)="row">
@@ -61,7 +63,7 @@ function copyDownloadLink(record: ExportRecord) {
         <template v-slot:cell(expires)="row">
             <span v-if="row.item.hasExpired">Expired</span>
 
-            <span v-else-if="row.item.expirationDate" :title="row.item.expirationDate">
+            <span v-else-if="row.item.expirationDate" :title="row.item.expirationDate.toLocaleString()">
                 {{ row.item.expirationElapsedTime }}
             </span>
 
@@ -131,5 +133,5 @@ function copyDownloadLink(record: ExportRecord) {
                 </GButton>
             </GButtonGroup>
         </template>
-    </BTable>
+    </GTable>
 </template>

client/src/components/Common/GTable.vue

@@ -155,7 +155,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     id: () => useUid("g-table-").value,
-    actions: () => [],
+    actions: undefined,
     bordered: false,
     clickableRows: false,
     containerClass: "",
@@ -291,7 +291,17 @@ function getCellValue(item: T, field: TableField) {
 }
 
 /**
- * Get alignment class for a field
+ * Get text alignment class for header labels
+ */
+function getTextAlignmentClass(align?: FieldAlignment) {
+    if (!align || align === "left") {
+        return "";
+    }
+    return `text-${align}`;
+}
+
+/**
+ * Get alignment class for body cells
  */
 function getAlignmentClass(align?: FieldAlignment) {
     if (!align || align === "left") {
@@ -378,22 +388,23 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                                 :key="field.key"
                                 :class="[
                                     field.headerClass,
-                                    getAlignmentClass(field.align),
                                     { 'g-table-sortable': field.sortable },
                                     { 'g-table-sorted': sortBy === field.key },
                                     { 'hide-on-small': field.hideOnSmall },
                                 ]"
                                 :style="field.width ? { width: field.width } : undefined"
                                 @click="onHeaderClick(field)">
-                                <div class="d-flex align-items-center justify-content-between">
-                                    <slot :name="`head(${field.key})`" :field="field">
-                                        <span>{{ field.label || field.key }}</span>
-                                    </slot>
+                                <div class="d-flex align-items-center">
+                                    <div class="flex-grow-1" :class="getTextAlignmentClass(field.align)">
+                                        <slot :name="`head(${field.key})`" :field="field">
+                                            {{ field.label || field.key }}
+                                        </slot>
+                                    </div>
                                     <FontAwesomeIcon
                                         v-if="field.sortable && getSortIcon(field)"
                                         :icon="getSortIcon(field)"
                                         :class="{ 'text-muted': sortBy !== field.key }"
-                                        class="ml-1" />
+                                        class="ml-1 flex-shrink-0" />
                                 </div>
                             </th>