Improve search results layout

Author: danniel

client/src/components/index.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import IconMdi from './IconMdi'
 import BaseTable from './table/BaseTable'
 import BaseTableAsync from './table/BaseTableAsync'
-import SearchResultsTable from './table/SearchResultsTable'
 
 import BaseCard from './BaseCard'
 import BaseTitle from './BaseTitle'
@@ -13,6 +12,5 @@ Vue.component('icon-mdi', IconMdi)
 Vue.component('Banner', Banner)
 Vue.component('BaseTable', BaseTable)
 Vue.component('BaseTableAsync', BaseTableAsync)
-Vue.component('SearchResultsTable', SearchResultsTable)
 Vue.component('BaseCard', BaseCard)
 Vue.component('BaseTitle', BaseTitle)

client/src/components/table/ActionsTableSearch.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <ActionButtonGoto
+      icon="eye-outline"
+      :path="{ name: 'entity-view', params: { idTable, idEntity: props.id } }"
+    />
+
+  </div>
+</template>
+
+<script>
+import ActionButtonGoto from './ActionButtonGoto'
+
+export default {
+  components: {
+    ActionButtonGoto
+  },
+  props: {
+    idTable: Number,
+    props: Object
+  },
+  methods: {}
+}
+</script>

client/src/components/table/BaseTable.vue

@@ -53,6 +53,7 @@ import ActionsCharts from './ActionsCharts'
 import ActionsDatabaseArchived from './ActionsDatabaseArchived'
 import ActionsDatabaseActive from './ActionsDatabaseActive'
 import ActionsTableView from './ActionsTableView'
+import ActionsTableSearch from './ActionsTableSearch'
 import ActionsTable from './ActionsTable'
 
 import FieldOwnerLink from './FieldOwnerLink'
@@ -69,6 +70,7 @@ export default {
     ActionsDatabaseArchived,
     ActionsDatabaseActive,
     ActionsTableView,
+    ActionsTableSearch,
     ActionsTable,
     FieldOwnerLink,
     FieldTagList,

client/src/components/table/BaseTableAsync.vue

@@ -104,6 +104,7 @@ import ActionsPlugin from './ActionsPlugin'
 import ActionsTable from './ActionsTable'
 import ActionsTableEntity from './ActionsTableEntity'
 import ActionsTableView from './ActionsTableView'
+import ActionsTableSearch from './ActionsTableSearch'
 import ActionsUser from './ActionsUser'
 
 import FieldCheckbox from './FieldCheckbox'
@@ -132,6 +133,7 @@ export default {
     ActionsTable,
     ActionsTableEntity,
     ActionsTableView,
+    ActionsTableSearch,
     ActionsUser,
 
     FieldCronInfo,

client/src/components/table/SearchResultsTable.vue

@@ -108,12 +108,11 @@ const ImportService = {
   }
 }
 
+
 const SearchService = {
   searchEntries(query) {
-    // TODO
-    console.log("SearchService")
     const queryString = query != null ? '?' + QueryString(query) : ''
-    return ApiService.get(`entries/search/${queryString}`)
+    return ApiService.get(`tables/search/${queryString}`)
   }
 }
 

client/src/services/data.js

@@ -42,7 +42,7 @@
           <div class="columns">
             <div class="column is-6">
               <VField :label="$t('searchTermLabel')" rules="required">
-                <b-input v-model="searchTerm" />
+                <b-input v-model="searchInput" />
               </VField>
             </div>
             <div class="column is-6">
@@ -54,7 +54,16 @@
           </div>
         </div>
 
-        <BaseTable :data="searchResults" :fields="fields.results" />
+        <BaseCard v-for="searchTable in searchTables" :title="searchTable.name" :key="'searchResults'+searchTable.id">
+          <!-- <div>{{ searchTableResults[searchTable.id] }}</div> -->
+          <BaseTableAsync
+            :table="searchTable"
+            :tableEntries="searchTableResults[searchTable.id] || {}"
+            @update="updateTableEntries(searchTable.id)"
+            tableActionsComponent="ActionsTableSearch"
+          />
+        </BaseCard>
+
       </BaseCard>
     </ValidationObserver>
 
@@ -63,7 +72,7 @@
 
 <script>
 import { FilterQuery } from '@/utils/helpers'
-import { DataService, SearchService } from '@/services/data'
+import { DataService, SearchService, TableService } from '@/services/data'
 import { mapState } from 'vuex'
 import BaseCardChart from '@/components/charts/BaseCardChart'
 
@@ -72,8 +81,12 @@ export default {
   components: { BaseCardChart },
   data() {
     return {
+      searchInput: '',
       searchTerm: '',
-      searchResults: null,
+      searchTables: [],
+      searchTableIds: [],
+      searchTableResults: {},
+      searchFilterMode: false,
       cards: [],
       fields: {
         charts: [
@@ -173,20 +186,41 @@ export default {
         })
       })
     },
+    updateTableEntries(tableId) {
+      TableService.getEntries(tableId, {search: this.searchTerm}).then(response => {
+        this.searchTableResults[tableId] = response
+      })
+    },
     submitSearch() {
+      this.searchTables = []
+      this.searchTableIds = []
+      this.searchTableResults = {}
+      this.searchTerm = this.searchInput
+
       SearchService.searchEntries({
         query: this.searchTerm
       }).then(response => {
-        let results = []
-        for (const item of response.results) {
-          results.push({
-            data: {
-              context: JSON.stringify(item.data)
-            }
-          })
+        let resultTableIds = []
+        for (const item of response) {
+          resultTableIds.push(item.table)
         }
-        this.searchResults = results
-        console.log(this.searchResults)
+        this.searchTableIds = resultTableIds
+
+        let resultTables = []
+        // let results = {}
+        this.searchTableIds.forEach(tableId => {
+          TableService.getTable(tableId).then(response => {
+            resultTables.push(response)
+          })
+          // TableService.getEntries(tableId, {search: this.searchTerm}).then(response => {
+          //   results[tableId] = response
+          // })
+          this.updateTableEntries(tableId)
+        })
+        // this.searchTableResults = results
+        // console.log('Search table results', this.searchTableResults)
+        this.searchTables = resultTables
+        console.log('Search tables', this.searchTables)
       })
     }
   }