From 9cdcd7fc5ab4e6f7f943ee7916490c31b2b0440d Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Thu, 29 Aug 2024 08:43:41 +0200
Subject: [PATCH] feat(date): allow dates to be sorted and add dates to
 analysis table

---
 components/analysis/AnalysesTable.vue         | 28 ++++++++++++-
 .../tables/DetailedAnalysisTable.vue          |  2 +
 .../tables/DetailedDataStoreTable.vue         | 23 +++++++++--
 .../tables/DetailedProjectTable.vue           |  8 +++-
 components/projects/ProjectTable.vue          | 41 +++++++++++++------
 components/projects/ProposalTable.vue         | 12 +++++-
 6 files changed, 93 insertions(+), 21 deletions(-)

diff --git a/components/analysis/AnalysesTable.vue b/components/analysis/AnalysesTable.vue
index 493b933..8422da6 100644
--- a/components/analysis/AnalysesTable.vue
+++ b/components/analysis/AnalysesTable.vue
@@ -10,7 +10,7 @@ import SearchBar from "~/components/table/SearchBar.vue";
 const expandedRows = ref();
 const analyses = ref();
 
-const expandRowEntries = ["project_id", "node_id", "created_at", "updated_at"];
+const expandRowEntries = ["project_id", "node_id"];
 
 const { data: response, status, error } = await getAnalysisNodes();
 
@@ -119,6 +119,32 @@ const updateFilters = (filterText: string) => {
             header="Project"
             :sortable="true"
           />
+          <Column
+            header="Created On"
+            field="created_at.long"
+            filterField="created_at.date"
+            dataType="date"
+            :sortable="true"
+          >
+            <template #body="{ data }">
+              <p v-tooltip.top="data.created_at.long">
+                {{ data.created_at.short }}
+              </p>
+            </template>
+          </Column>
+          <Column
+            header="Last Updated"
+            field="updated_at.long"
+            filterField="updated_at.date"
+            dataType="date"
+            :sortable="true"
+          >
+            <template #body="{ data }">
+              <p v-tooltip.top="data.updated_at.long">
+                {{ data.updated_at.short }}
+              </p>
+            </template>
+          </Column>
           <Column field="node.name" header="Node" :sortable="true" />
           <Column
             field="expand.id"
diff --git a/components/data-stores/tables/DetailedAnalysisTable.vue b/components/data-stores/tables/DetailedAnalysisTable.vue
index a21760d..4b4a10e 100644
--- a/components/data-stores/tables/DetailedAnalysisTable.vue
+++ b/components/data-stores/tables/DetailedAnalysisTable.vue
@@ -196,8 +196,10 @@ const updateFilters = (filterText: string) => {
       ></Column>
       <Column
         header="Created On"
+        field="kongProjCreatedAt.long"
         filterField="kongAnalysisCreatedAt.long"
         dataType="date"
+        :sortable="true"
       >
         <template #body="{ data }">
           <p v-tooltip.top="data.kongAnalysisCreatedAt.long">
diff --git a/components/data-stores/tables/DetailedDataStoreTable.vue b/components/data-stores/tables/DetailedDataStoreTable.vue
index 2d01c52..ae53a09 100644
--- a/components/data-stores/tables/DetailedDataStoreTable.vue
+++ b/components/data-stores/tables/DetailedDataStoreTable.vue
@@ -104,19 +104,36 @@ const updateFilters = (filterText: string) => {
           />
         </div>
       </template>
-      <Column field="name" header="Name" :sortable="true"></Column>
+      <Column
+        field="name"
+        header="Name"
+        :sortable="true"
+        style="width: 30rem"
+      ></Column>
       <Column field="path" header="Path"></Column>
       <Column field="host" header="Host" :sortable="true"></Column>
       <Column field="port" header="Port"></Column>
       <Column field="protocol" header="Protocol" :sortable="true"></Column>
-      <Column header="Created On" filterField="created_at.long" dataType="date">
+      <Column
+        header="Created On"
+        field="created_at.long"
+        filterField="created_at.date"
+        dataType="date"
+        :sortable="true"
+      >
         <template #body="{ data }">
           <p v-tooltip.top="data.created_at.long">
             {{ data.created_at.short }}
           </p>
         </template>
       </Column>
-      <Column header="Last Updated" filterField="date" dataType="date">
+      <Column
+        header="Last Updated"
+        field="updated_at.long"
+        filterField="updated_at.date"
+        dataType="date"
+        :sortable="true"
+      >
         <template #body="{ data }">
           <p v-tooltip.top="data.updated_at.long">
             {{ data.updated_at.short }}
diff --git a/components/data-stores/tables/DetailedProjectTable.vue b/components/data-stores/tables/DetailedProjectTable.vue
index 4d14898..ad6f757 100644
--- a/components/data-stores/tables/DetailedProjectTable.vue
+++ b/components/data-stores/tables/DetailedProjectTable.vue
@@ -160,8 +160,10 @@ const updateFilters = (filterText: string) => {
       <Column field="dataStore" header="Data Store" :sortable="true"></Column>
       <Column
         header="Created On"
-        filterField="kongProjCreatedAt.short"
+        field="kongProjCreatedAt.long"
+        filterField="kongProjCreatedAt.date"
         dataType="date"
+        :sortable="true"
       >
         <template #body="{ data }">
           <p v-tooltip.top="data.kongProjCreatedAt.long">
@@ -171,8 +173,10 @@ const updateFilters = (filterText: string) => {
       </Column>
       <Column
         header="Last Updated"
-        filterField="kongProjUpdatedAt.short"
+        field="kongProjUpdatedAt.long"
+        filterField="kongProjUpdatedAt.date"
         dataType="date"
+        :sortable="true"
       >
         <template #body="{ data }">
           <p v-tooltip.top="data.kongProjUpdatedAt.long">
diff --git a/components/projects/ProjectTable.vue b/components/projects/ProjectTable.vue
index 2ff338b..d6fe126 100644
--- a/components/projects/ProjectTable.vue
+++ b/components/projects/ProjectTable.vue
@@ -25,8 +25,11 @@ if (status.value === "success") {
 // Table filters
 const defaultFilters = {
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-  "created_at.short": { value: null, matchMode: FilterMatchMode.DATE_IS },
-  "updated_at.short": { value: null, matchMode: FilterMatchMode.DATE_IS },
+  "created_at.date": {
+    value: null,
+    matchMode: FilterMatchMode.DATE_IS | FilterMatchMode.DATE_BEFORE,
+  },
+  "updated_at.date": { value: null, matchMode: FilterMatchMode.DATE_IS },
 };
 
 const filters = ref(defaultFilters);
@@ -72,27 +75,39 @@ const updateFilters = (filterText: string) => {
               />
             </div>
           </template>
-          <Column field="name" header="Name" :sortable="true"></Column>
+          <Column
+            field="name"
+            header="Name"
+            :sortable="true"
+            style="width: 30rem"
+          ></Column>
           <Column
             header="Created On"
-            filterField="created_at.long"
+            field="created_at.long"
+            filterField="created_at.date"
             dataType="date"
+            :sortable="true"
           >
             <template #body="{ data }">
               <p v-tooltip.top="data.created_at.long">
                 {{ data.created_at.short }}
               </p>
             </template>
-            <template #filter="{ filterModel }">
-              <Calendar
-                v-model="filterModel.value"
-                dateFormat="dd.mm.yyyy"
-                placeholder="dd.mm.yyyy"
-                mask="99/99/9999"
-              />
-            </template>
+            <!--            <template #filter="{ filterModel }">-->
+            <!--              <Calendar-->
+            <!--                v-model="filterModel.value"-->
+            <!--                dateFormat="dd.mm.yyyy"-->
+            <!--                placeholder="dd.mm.yyyy"-->
+            <!--              />-->
+            <!--            </template>-->
           </Column>
-          <Column header="Last Updated" filterField="date" dataType="date">
+          <Column
+            header="Last Updated"
+            field="updated_at.long"
+            filterField="updated_at.date"
+            dataType="date"
+            :sortable="true"
+          >
             <template #body="{ data }">
               <p v-tooltip.top="data.updated_at.long">
                 {{ data.updated_at.short }}
diff --git a/components/projects/ProposalTable.vue b/components/projects/ProposalTable.vue
index 83ae921..6e58edf 100644
--- a/components/projects/ProposalTable.vue
+++ b/components/projects/ProposalTable.vue
@@ -110,8 +110,10 @@ const updateFilters = (filterText: string) => {
           ></Column>
           <Column
             header="Created On"
-            filterField="created_at.long"
+            field="created_at.long"
+            filterField="created_at.date"
             dataType="date"
+            :sortable="true"
           >
             <template #body="{ data }">
               <p v-tooltip.top="data.created_at.long">
@@ -119,7 +121,13 @@ const updateFilters = (filterText: string) => {
               </p>
             </template>
           </Column>
-          <Column header="Last Updated" filterField="date" dataType="date">
+          <Column
+            header="Last Updated"
+            field="updated_at.long"
+            filterField="updated_at.date"
+            dataType="date"
+            :sortable="true"
+          >
             <template #body="{ data }">
               <p v-tooltip.top="data.updated_at.long">
                 {{ data.updated_at.short }}