add js logic for logs search

apps/block_scout_web/assets/js/app.js

@@ -23,6 +23,7 @@ import './locale'
 import './pages/address'
 import './pages/address/coin_balances'
 import './pages/address/transactions'
+import './pages/address/logs'
 import './pages/address/validations'
 import './pages/address/internal_transactions'
 import './pages/blocks'

apps/block_scout_web/assets/js/pages/address/logs.js

@@ -0,0 +1,64 @@
+import $ from 'jquery'
+import _ from 'lodash'
+import URI from 'urijs'
+import humps from 'humps'
+import { subscribeChannel } from '../../socket'
+import { connectElements } from '../../lib/redux_helpers.js'
+import { createAsyncLoadStore } from '../../lib/async_listing_load'
+
+export const initialState = {
+    addressHash: null
+}
+
+export function reducer (state, action) {
+    switch (action.type) {
+    case 'PAGE_LOAD':
+    case 'ELEMENTS_LOAD': {
+        return Object.assign({}, state, _.omit(action, 'type'))
+    }
+    default:
+        return state
+    }
+}
+
+const elements = {
+    '[data-search-field]' : {
+        render ($el, state) {
+            $el
+        }
+    },
+    '[data-search-button]' : {
+        render ($el, state) {
+            $el
+        }
+    }
+}
+
+if ($('[data-page="address-logs"]').length) {
+    console.log('iffff')
+    const store = createAsyncLoadStore(reducer, initialState, 'dataset.identifierHash')
+    const addressHash = $('[data-page="address-details"]')[0].dataset.pageAddressHash
+    const $element = $('[data-async-listing]')
+
+
+    connectElements({ store, elements })
+
+    store.dispatch({
+        type: 'PAGE_LOAD',
+        addressHash: addressHash})
+
+    function loadSearchItems () {
+        var topic = $('[data-search-field]').val();
+        var path = "/search_logs?topic=" + topic + "&address_id=" + store.getState().addressHash
+        store.dispatch({type: 'START_REQUEST'})
+        $.getJSON(path, {type: 'JSON'})
+            .done(response => store.dispatch(Object.assign({type: 'ITEMS_FETCHED'}, humps.camelizeKeys(response))))
+            .fail(() => store.dispatch({type: 'REQUEST_ERROR'}))
+            .always(() => store.dispatch({type: 'FINISH_REQUEST'}))
+    }
+
+
+    $element.on('click', '[data-search-button]', (event) => {
+        loadSearchItems()
+    })
+}

apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex

@@ -0,0 +1,54 @@
+<div data-test="transaction_log" class="tile tile-muted" data-identifier-hash="<%= @log.transaction.hash %>">
+  <dl class="row">
+    <dt class="col-md-2"> <%= gettext "Transaction" %> </dt>
+    <dd class="col-md-10">
+      <h3 class="">
+        <%= link(
+            @log.transaction,
+            to: transaction_path(@conn, :show, @log.transaction),
+            "data-test": "log_address_link",
+            "data-address-hash": @log.transaction
+            ) %>
+      </h3>
+    </dd>
+    <dt class="col-md-2"><%= gettext "Topics" %></dt>
+    <dd class="col-md-10">
+      <div class="raw-transaction-log-topics">
+        <%= unless is_nil(@log.first_topic) do %>
+          <div class="text-dark">
+            <span class="text-dark">[0]</span>
+            <%= @log.first_topic %>
+          </div>
+        <% end %>
+        <%= unless is_nil(@log.second_topic) do %>
+          <div class="text-dark">
+            <span class="">[1] </span>
+            <%= @log.second_topic %>
+          </div>
+        <% end %>
+        <%= unless is_nil(@log.third_topic) do %>
+          <div class="text-dark">
+            <span>[2]</span>
+            <%= @log.third_topic %>
+          </div>
+        <% end %>
+        <%= unless is_nil(@log.fourth_topic) do %>
+          <div class="text-dark">
+            <span>[3]</span>
+            <%= @log.fourth_topic %>
+          </div>
+        <% end %>
+      </div>
+    </dd>
+    <dt class="col-md-2">
+      <%= gettext "Data" %>
+    </dt>
+    <dd class="col-md-10">
+      <%= unless is_nil(@log.data) do %>
+        <div class="text-dark raw-transaction-log-data">
+          <%= @log.data %>
+        </div>
+      <% end %>
+    </dd>
+  </dl>
+</div>

apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex

@@ -1,82 +1,33 @@
 <section class="container">
   <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
+  <section data-page="address-logs">
   <div class="card">
     <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>
 
-    <div class="card-body">
+    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
-
       <h2 class="card-title"><%= gettext "Logs" %></h2>
 
-      <%= if @next_page_url do %>
+      <input data-search-field type='text' placeholder=<%= gettext("Topic") %> id='search-text-input' />
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, next_page_path: @next_page_url %>
+      <button data-search-button type="button"><%= gettext("Search") %></button>
-      <% end %>
 
-      <%= if !@next_page_url do %>
+      <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
-        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true %>
-      <% end %>
 
-     <%= if Enum.count(@logs) > 0 do %>
+        <button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
-        <%= for log <- @logs do %>
+          <span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
-          <div data-test="transaction_log" class="tile tile-muted">
+        </button>
-            <dl class="row">
+
-              <dt class="col-md-2"> <%= gettext "Transaction" %> </dt>
+        <div data-empty-response-message style="display: none;">
-              <dd class="col-md-10">
+          <div class="tile tile-muted text-center" data-selector="empty-logs-list">
-                <h3 class="">
+            <%= gettext "There are no logs for this address." %>
-                  <%= link(
-                      log.transaction,
-                      to: transaction_path(@conn, :show, log.transaction),
-                      "data-test": "log_address_link",
-                      "data-address-hash": log.transaction
-                      ) %>
-                </h3>
-              </dd>
-              <dt class="col-md-2"><%= gettext "Topics" %></dt>
-              <dd class="col-md-10">
-                <div class="raw-transaction-log-topics">
-                  <%= unless is_nil(log.first_topic) do %>
-                    <div class="text-dark">
-                      <span class="text-dark">[0]</span>
-                      <%= log.first_topic %>
-                    </div>
-                  <% end %>
-                  <%= unless is_nil(log.second_topic) do %>
-                    <div class="text-dark">
-                      <span class="">[1] </span>
-                      <%= log.second_topic %>
-                    </div>
-                  <% end %>
-                  <%= unless is_nil(log.third_topic) do %>
-                    <div class="text-dark">
-                      <span>[2]</span>
-                      <%= log.third_topic %>
-                    </div>
-                  <% end %>
-                  <%= unless is_nil(log.fourth_topic) do %>
-                    <div class="text-dark">
-                      <span>[3]</span>
-                      <%= log.fourth_topic %>
-                    </div>
-                  <% end %>
-                </div>
-              </dd>
-              <dt class="col-md-2">
-                <%= gettext "Data" %>
-              </dt>
-              <dd class="col-md-10">
-                <%= unless is_nil(log.data) do %>
-                  <div class="text-dark raw-transaction-log-data">
-                    <%= log.data %>
-                  </div>
-                <% end %>
-              </dd>
-            </dl>
           </div>
-        <% end %>
-    <% else %>
-      <div class="tile tile-muted text-center">
-        <span><%= gettext "There are no logs for this address." %></span>
         </div>
-      <% end %>
+
+        <div data-items></div>
+
+        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+
     </div>
+
   </div>
   </section>
+</section>