Improvements in PTable

Cadiducho · Feb 19, 2024 · 32a9b89 · 32a9b89
1 parent b502cde
commit 32a9b89
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/src/components/lib/Pagination.vue b/src/components/lib/Pagination.vue
@@ -11,7 +11,7 @@
                     Mostrando de
                     <span class="font-medium"> {{ ((current - 1) * perPage) + 1}}</span>
                     a
-                    <span class="font-medium">{{ (current * perPage) }}</span>
+                    <span class="font-medium">{{ maxElementInThisPage }}</span>
                     de un total de
                     <span class="font-medium">{{ total }}</span>
                     resultados
@@ -131,6 +131,12 @@ export default defineComponent({
             }
             return pages
         },
+        /**
+         *
+         */
+        maxElementInThisPage() {
+            return Math.min(this.current * this.perPage, this.total)
+        }
     },
     methods: {
         updatePage(page: number) {

diff --git a/src/components/lib/table/PTable.vue b/src/components/lib/table/PTable.vue
@@ -20,7 +20,22 @@
         <tbody>
         <tr v-for="(row, index) in visibleData" :class="getRowStyle(index)">
             <td v-for="col in columns" :class="getTdStyle()">
-                {{ row[col.field] }}
+                <template v-if="col.type === 'boolean'">
+                    <span v-if="row[col.field] === true" class="px-3 py-1 text-sm text-white font-semibold rounded-full bg-green-500">Sí</span>
+                    <span v-else class="px-3 py-1 text-sm text-white font-semibold rounded-full bg-red-500">No</span>
+                </template>
+                <template v-else-if="col.type === 'date'">
+                    {{ humanDate(row[col.field]) }}
+                </template>
+                <template v-else-if="col.type === 'datetime'">
+                    {{ humanDateTime(row[col.field]) }}
+                </template>
+                <template v-else-if="col.type === 'datediff'">
+                    {{ dateDiff(row[col.field]) }}
+                </template>
+                <template v-else>
+                    {{ row[col.field] }}
+                </template>
             </td>
             <td v-if="hasActions" :class="getTdStyle()" class="!text-right">
                 <slot name="actions" :row="row" :index="index">
@@ -40,6 +55,12 @@
 <script setup lang="ts" generic="T">
 import {computed, ref} from "vue";
 import Pagination from "@/components/lib/Pagination.vue";
+import {useDayjs} from "@/composables/useDayjs";
+
+const dayjs = useDayjs();
+const dateDiff = dayjs.dateDiff;
+const humanDateTime = dayjs.humanDateTime;
+const humanDate = dayjs.humanDate;
 
 export interface Props<T> {
     columns: Array<Column>;
@@ -104,10 +125,6 @@ const visibleData = computed(() => {
     return filteredRows.value.slice(start, end);
 });
 
-const sortBy = (column: Column) => {
-    console.log("sort by " + column.label);
-}
-
 const hasActions = computed(() => {
     return props.hasViewButton || props.hasEditButton || props.hasDeleteButton;
 });

diff --git a/src/components/lib/table/table.ts b/src/components/lib/table/table.ts
@@ -1,5 +1,7 @@
+type ColumType = 'text' | 'number' | 'date' | 'datetime' | 'datediff' | 'boolean';
 
 interface Column {
     label: string;
     field: string;
+    type: ColumType;
 }