Merge pull request #360 from valantic/feature/#322_e-table-enhancements

#322 e-table enhancements
valantic · Apr 17, 2024 · 639af5f · 639af5f
2 parents e9b791f + 997a574
commit 639af5f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git a/src/elements/e-table.vue b/src/elements/e-table.vue
@@ -79,8 +79,8 @@
         </th>
       </tr>
     </slot>
-    <template v-for="(item, itemIndex) in itemsSorted" :key="itemIndex">
 
+    <template v-for="(item, itemIndex) in itemsSorted" :key="item[itemIdentifier] || itemIndex">
       <tr :class="b('data-row', { disabled: item.disabled })">
         <td v-if="selectable"
             :class="b('data-cell')"
@@ -117,7 +117,7 @@
                 :column="column"
                 name="date"
           >
-            {{ $dayjs(item[column.key] as Date).format('DD.MM.YYYY') }}
+            {{ $dayjs(item[column.key] as Date).format(DateFormat.DD_MM_YYYY) }}
           </slot>
           <!-- @slot Use this dynamic slot to add custom templates to the cells -->
           <slot
@@ -161,14 +161,15 @@
         </td>
       </tr>
     </template>
+
     <!-- @slot Allows to display a customized 'no results' row. -->
     <slot v-if="!itemsSorted.length" name="noResults" :columns="columns">
       <tr>
         <td
           :colspan="columns.length"
           :class="b('no-results')"
         >
-          {{ $t('e-table.noResults') }}
+          {{ $t('globalMessages.noResults') }}
         </td>
       </tr>
     </slot>
@@ -192,6 +193,7 @@
     Ref,
     ref,
   } from 'vue';
+  import { DateFormat } from '@/plugins/dayjs';
   import eIcon from '@/elements/e-icon.vue';
   import eCheckbox from '@/elements/e-checkbox.vue';
   import useUuid, { Uuid } from '@/compositions/uuid';
@@ -207,9 +209,9 @@
   export type TableColumn = {
     title: string | (() => string);
     key: string;
-    align: 'left' | 'center' | 'right';
-    slotName: string;
-    sortable: boolean;
+    align?: 'left' | 'center' | 'right';
+    slotName?: string;
+    sortable?: boolean;
     nowrap?: boolean;
     titleHidden?: boolean | (() => boolean);
     onClick?(item: TableItem, column: TableColumn, event?: Event): void;
@@ -222,6 +224,7 @@
   }
 
   type Setup = Uuid & {
+    DateFormat: typeof DateFormat;
     toggleButton: Ref<HTMLButtonElement>;
   }
 
@@ -352,6 +355,7 @@
 
       return {
         ...useUuid(),
+        DateFormat,
         toggleButton,
       };
     },
@@ -660,14 +664,14 @@
       /**
        * Callback for the tables mousedown event.
        */
-      onMouseDown() { // All browsers
+      onMouseDown(): void { // All browsers
         this.hasSelection = !!window.getSelection()?.toString();
       },
 
       /**
        * Callback for the tables contextmenu event.
        */
-      onContextMenu() { // Chromium, webkit: mousedown, contextmenu
+      onContextMenu(): void { // Chromium, webkit: mousedown, contextmenu
         this.enableRowLink();
 
         setTimeout(() => {
@@ -892,6 +896,7 @@
       // https://sonepar-suisse.atlassian.net/browse/WF-5573
       background-clip: padding-box;
       text-align: right;
+      vertical-align: middle;
 
       @include mixins.media(sm) {
         display: table-cell;

diff --git a/src/styleguide/routes/components/r-table.vue b/src/styleguide/routes/components/r-table.vue
@@ -39,43 +39,37 @@
           {
             title: 'City',
             key: 'city',
-            align: 'left',
             slotName: 'city',
             sortable: true,
           },
           {
             title: 'Firstname',
             key: 'firstName',
-            align: 'left',
             slotName: 'firstname',
-            sortable: true,
           },
           {
             title: 'Lastname',
             key: 'lastName',
-            align: 'left',
             titleHidden: true,
             slotName: 'lastname',
             sortable: false,
           },
           {
             title: 'Birthdate',
             key: 'birthDate',
-            align: 'left',
             slotName: 'date',
-            sortable: true,
           },
           {
             title: 'Company',
             key: 'company',
-            align: 'left',
+            align: 'center',
             slotName: 'company',
             sortable: false,
           },
           {
             title: 'Children',
             key: 'children',
-            align: 'left',
+            align: 'right',
             slotName: 'children',
             sortable: false,
           },
@@ -94,11 +88,11 @@
         return new Array(40)
           .fill(null)
           .map((item, index) => ({
-            id: index,
+            id: index + 1,
             isComplete: index === 5,
             firstName: faker.person.firstName(),
             lastName: faker.person.lastName(),
-            birthDate: '2018-08-20 18:15:09.587786',
+            birthDate: faker.date.anytime(),
             city: faker.location.city(),
             company: faker.company.name(),
             children: 3,

diff --git a/src/translations/de.json b/src/translations/de.json
@@ -1,6 +1,7 @@
 {
   "globalMessages": {
-    "unknownApiError": "Es ist ein unbekannter Fehler aufgetreten."
+    "unknownApiError": "Es ist ein unbekannter Fehler aufgetreten.",
+    "noResults": "Keine Ergebnisse gefunden."
   },
   "e-logo": {
     "linkTitle": "zur Startseite"
@@ -14,7 +15,6 @@
     "selectItem": "Auswählen",
     "showDetailsHeader": "Details anzeigen",
     "sort": "Nach {name} sortieren",
-    "noResults": "Keine Ergebnisse für die aktuelle Auswahl.",
     "toggleSortingOptions": "Sortierung"
   },
   "e-progress": {

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -1,6 +1,7 @@
 {
   "globalMessages": {
-    "unknownApiError": "Une erreur inconnue s'est produite."
+    "unknownApiError": "Une erreur inconnue s'est produite.",
+    "noResults": "Aucun résultat."
   },
   "e-logo": {
     "linkTitle": "à la page d'accueil"
@@ -10,7 +11,6 @@
   },
   "e-table": {
     "sort": "Trier par {name}",
-    "noResults": "Aucun résultat pour la sélection actuelle."
   },
   "e-progress": {
     "loading": "Charge …"