feat(date): allow dates to be sorted and add dates to analysis table

PrivateAIM · Aug 29, 2024 · 9cdcd7f · 9cdcd7f
1 parent 1212d42
commit 9cdcd7f
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -110,16 +110,24 @@ 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">
                 {{ 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 }}