feat: Improve search results page (#458)

Co-authored-by: Michele Franchi <michele.franchi933@gmail.com>

src/components/AccountNamesTable.vue

@@ -24,7 +24,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="name in accountNames?.data"
+        v-for="name in accountNames.data"
         :key="name.name">
         <td>
           <app-link :to="`/names/${name.name}`">

src/components/AccountNamesTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="account-names-table-condensed">
+  <div>
     <table
-      v-for="name in accountNames?.data"
+      v-for="name in accountNames.data"
       :key="name.name"
       class="account-names-table-condensed__table">
       <tbody>

src/components/AccountTransactionsTable.vue

@@ -30,7 +30,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="transaction in accountTransactions?.data"
+        v-for="transaction in accountTransactions.data"
         :key="transaction.hash">
         <td>
           <value-hash-ellipsed

src/components/AccountTransactionsTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="account-transactions-table-condensed">
+  <div>
     <table
-      v-for="transaction in accountTransactions?.data"
+      v-for="transaction in accountTransactions.data"
       :key="transaction.hash"
       class="account-transactions-table-condensed__table">
       <tbody>

src/components/ContractCallTransactionsTableCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="contract-call-transactions-table-condensed">
+  <div>
     <table
       v-for="transaction in contractCallTransactions.data"
       :key="transaction.hash"

src/components/ContractEventsTableCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="contract-events-table-condensed">
+  <div>
     <table
       v-for="event in contractEvents.data"
       :key="event.callTxHash"

src/components/ContractsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="contracts-table__table">
+  <table class="contracts-table">
     <thead>
       <tr>
         <th>
@@ -76,9 +76,7 @@ defineProps({
 
 <style scoped>
 .contracts-table {
-  &__table {
-    margin-bottom: var(--space-4);
-  }
+  margin-bottom: var(--space-4);
 
   &__data {
     vertical-align: top;

src/components/ContractsTableCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="contracts-table-condensed">
+  <div>
     <table
       v-for="contract in contracts.data"
       :key="contract.contractId"

src/components/KeyblockMicroblocksTableCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="keyblock-microblocks-table-condensed">
+  <div>
     <table
       v-for="microblock in microblocks.data"
       :key="microblock.hash"

src/components/MicroblockTransactionsTable.vue

@@ -30,7 +30,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="transaction in transactions?.data"
+        v-for="transaction in transactions.data"
         :key="transaction.hash">
         <td>
           <value-hash-ellipsed

src/components/MicroblockTransactionsTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="microblock-transactions-table-condensed">
+  <div>
     <table
-      v-for="transaction in transactions?.data"
+      v-for="transaction in transactions.data"
       :key="transaction.hash"
       class="microblock-transactions-table-condensed__table">
       <tbody>

src/components/NameHistoryTable.vue

@@ -24,7 +24,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="action in actions?.data"
+        v-for="action in actions.data"
         :key="action.hash">
         <td>
           <value-hash-ellipsed

src/components/NameHistoryTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="name-history-table-condensed">
+  <div>
     <table
-      v-for="action of actions?.data"
+      v-for="action of actions.data"
       :key="action.hash"
       class="name-history-table-condensed__table">
       <tbody>

src/components/NamesActiveTable.vue

@@ -37,7 +37,7 @@
       </thead>
       <tbody>
         <tr
-          v-for="name in names?.data"
+          v-for="name in names.data"
           :key="name.name">
           <td>
             <app-link :to="`/names/${name.name}`">

src/components/NamesActiveTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="names-active-table-condensed">
+  <div>
     <table
-      v-for="name of names?.data"
+      v-for="name of names.data"
       :key="name.name"
       class="names-active-table-condensed__table">
       <tbody>

src/components/NamesExpiredTable.vue

@@ -30,7 +30,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="name in names?.data"
+        v-for="name in names.data"
         :key="name.name">
         <td>
           <app-link :to="`/names/${name.name}`">

src/components/NamesExpiredTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="names-expired-table-condensed">
+  <div>
     <table
-      v-for="name in names?.data"
+      v-for="name in names.data"
       :key="name.name"
       class="names-expired-table-condensed__table">
       <tbody>

src/components/NamesInAuctionTable.vue

@@ -30,7 +30,7 @@
     </thead>
     <tbody>
       <tr
-        v-for="name in names?.data"
+        v-for="name in names.data"
         :key="name.name">
         <td>
           <app-link :to="`/names/${name.name}`">

src/components/NamesInAuctionTableCondensed.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="names-in-auction-table-condensed">
+  <div>
     <table
-      v-for="name in names?.data"
+      v-for="name in names.data"
       :key="name.name"
       class="names-in-auction-table-condensed__table">
       <tbody>

src/components/OracleEventsTableCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="oracle-events-table-condensed">
+  <div>
     <table
       v-for="(event, index) in oracleEvents.data"
       :key="event.respondTx"

src/components/OraclesTableCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="oracles-table-condensed">
+  <div>
     <table
       v-for="oracle in oracles.data"
       :key="oracle.oracleId"

src/components/SearchNamesPanel.vue

@@ -0,0 +1,57 @@
+<template>
+  <app-panel>
+    <paginated-content
+      :entities="namesResults"
+      :limit="limit"
+      @prev-clicked="loadPrevNames"
+      @next-clicked="loadNextNames">
+      <search-names-table
+        :names="namesResults"
+        class="search-names-panel__search-names-table"/>
+      <search-names-table-condensed
+        :names="namesResults"
+        class="search-names-panel__search-names-table-condensed"/>
+    </paginated-content>
+  </app-panel>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { isDesktop } from '@/utils/screen'
+import { useSearchStore } from '@/stores/search'
+
+const searchStore = useSearchStore()
+const { namesResults } = storeToRefs(searchStore)
+const { fetchNamesResults } = searchStore
+
+const limit = computed(() => process.client && isDesktop() ? 10 : 3)
+const route = useRoute()
+
+await fetchNamesResults({ query: route.params.id, limit: limit.value })
+
+async function loadPrevNames() {
+  await fetchNamesResults({ queryParameters: namesResults.value.prev })
+}
+
+async function loadNextNames() {
+  await fetchNamesResults({ queryParameters: namesResults.value.next })
+}
+</script>
+
+<style scoped>
+.search-names-panel {
+  &__search-names-table {
+    display: none;
+    @media (--desktop) {
+      display: revert;
+    }
+  }
+
+  &__search-names-table-condensed {
+    @media (--desktop) {
+      display: none;
+    }
+  }
+}
+</style>

src/components/SearchNamesTable.vue

@@ -0,0 +1,49 @@
+<template>
+  <table class="search-names-table">
+    <thead>
+      <tr>
+        <th>
+          Name
+          <hint-tooltip>
+            {{ namesHints.name }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Status
+          <hint-tooltip>
+            {{ namesHints.status }}
+          </hint-tooltip>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="name in names.data"
+        :key="name.name">
+        <td>
+          <app-link :to="`/names/${name.name}`">
+            {{ name.name }}
+          </app-link>
+        </td>
+        <td>{{ name.status }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { namesHints } from '@/utils/hints/namesHints'
+
+defineProps({
+  names: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.search-names-table {
+  margin-bottom: var(--space-4);
+}
+</style>

src/components/SearchNamesTableCondensed.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <table
+      v-for="name in names.data"
+      :key="name.name"
+      class="search-names-table-condensed__table">
+      <tbody>
+        <tr class="search-names-table-condensed__row">
+          <th class="search-names-table-condensed__header">
+            <app-tooltip>
+              Name
+              <template #tooltip>
+                {{ namesHints.name }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="search-names-table-condensed__data">
+            <app-link :to="`/names/${name.name}`">
+              {{ name.name }}
+            </app-link>
+          </td>
+        </tr>
+        <tr class="search-names-table-condensed__row">
+          <th class="search-names-table-condensed__header">
+            <app-tooltip>
+              Status
+              <template #tooltip>
+                {{ namesHints.status }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="search-names-table-condensed__data">
+            {{ name.status }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { namesHints } from '@/utils/hints/namesHints'
+import AppLink from '@/components/AppLink'
+import AppTooltip from '@/components/AppTooltip'
+
+defineProps({
+  names: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.search-names-table-condensed {
+  &__table {
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-midnight-25);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>