Add custom datetime patterns functionality

Author: Arp-G

apps/dashboard/assets/css/custom.scss

@@ -132,42 +132,49 @@ body {
   text-overflow: ellipsis;
 }
 
-#date-time-patterns-container {
-  padding-top: 10px;
-  height: 300px;
-  overflow-y: auto;
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable; // Reserve space for scrollbar to avoid UI shifting when scrollbar appears
-  scrollbar-color: #d4aa70 #e4e4e4; // Works for non-chromium (tested on firfox)
-}
-
-#db-attrs-container {
+// Custom scroll bar implementation
+.scrollable-container {
   padding: 10px;
-  height: 300px;
   overflow-y: auto;
   scroll-behavior: smooth;
   scrollbar-gutter: stable; // Reserve space for scrollbar to avoid UI shifting when scrollbar appears
   scrollbar-color: #d4aa70 #e4e4e4; // Works for non-chromium (tested on firfox)
 
-  li { display: list-item; }
-
-  .db-attr-index {
-    padding: 2px;
-  }
-
   // Custom Scrollbar css  works only for chromium based browser
   &::-webkit-scrollbar {
     width: 10px;
   }
-  
+
   &::-webkit-scrollbar-track {
     background-color: #e4e4e4;
     border-radius: 100px;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     border-radius: 100px;
     background-color: #d4aa70;
     box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
   }
 }
+
+#db-attrs-container {
+  height: 300px;
+
+  li {
+    display: list-item;
+  }
+
+  .db-attr-index {
+    padding: 2px;
+  }
+}
+
+#date-patterns-container, #date-time-patterns-container {
+  height: 250px;
+}
+
+// Matched Custom Date/DateTime pattern input glow
+.matched-input {
+  border-color: green;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px green;
+}

apps/dashboard/assets/js/app.js

@@ -19,18 +19,22 @@ let hooks = {
 
 let liveSocket = new LiveSocket("/live", Socket, { hooks, params: { _csrf_token: csrfToken } });
 liveSocket.connect();
-
-// expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
-// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
-// >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket;
 
-// Listen for scroll events and auto scroll to end
+// Listen for phx "scroll-to-bottom" events and scroll to end of given element id
 window.addEventListener(
   "phx:scroll-to-bottom",
   e => {
     const element = document.getElementById(e.detail.id);
     element.scrollTop = element.scrollHeight;
   }
 )
+
+// Listen for phx "scroll-into-view" events and scroll the given element id into view
+window.addEventListener(
+  "phx:scroll-into-view",
+  e => {
+    const element = document.getElementById(e.detail.id);
+    element.scrollIntoView({behavior: "smooth",  block: "nearest"});
+  }
+)

apps/dashboard/lib/dashboard/config.ex

@@ -30,6 +30,7 @@ defmodule DashBoard.Config do
 
     # Misc
     field(:csv_count, :integer)
+    field(:date_time_trial, :string)
 
     embeds_many(:db_attrs, DashBoard.DbAttribute, on_replace: :delete)
     embeds_many(:date_patterns, DashBoard.DatePattern, on_replace: :delete)

apps/dashboard/lib/dashboard/helpers.ex

@@ -3,6 +3,24 @@ defmodule Dashboard.Helpers do
 
   defguard present?(value) when value != nil and value != ""
 
+  def match_date_time(changeset, date_time_sample) do
+    date_index =
+      changeset
+      |> Ecto.Changeset.get_field(:date_patterns, [])
+      |> get_matching_pattern_index(date_time_sample)
+
+    if is_nil(date_index) do
+      date_time_index =
+        changeset
+        |> Ecto.Changeset.get_field(:date_time_patterns, [])
+        |> get_matching_pattern_index(date_time_sample)
+
+      if is_nil(date_time_index), do: false, else: {:date_time, date_time_index}
+    else
+      if is_nil(date_index), do: false, else: {:date, date_index}
+    end
+  end
+
   def create_db_url(configs, hide_password \\ true)
 
   def create_db_url(
@@ -37,4 +55,13 @@ defmodule Dashboard.Helpers do
     do: password |> String.split("") |> Enum.map(fn _ -> "•" end) |> Enum.join("")
 
   defp hide_password(password, false), do: password
+
+  defp get_matching_pattern_index(patterns, string) do
+    Enum.find_index(patterns, fn pattern_struct ->
+      case Timex.parse(string, pattern_struct.pattern) do
+        {:ok, _} -> true
+        {:error, _} -> false
+      end
+    end)
+  end
 end

apps/dashboard/lib/dashboard_web/live/config_live.ex

@@ -281,9 +281,7 @@ defmodule DashboardWeb.Live.ConfigLive do
             <%= hidden_input(assoc_form, :id) %>w
             <%= hidden_input(assoc_form, :pattern) %>
           <% end %>
-        <% end %>
 
-        <%= if @modal != "add-datepatterns" do %>
           <%= inputs_for f, :date_patterns, fn assoc_form -> %>
             <%= hidden_input(assoc_form, :id) %>w
             <%= hidden_input(assoc_form, :pattern) %>
@@ -292,7 +290,7 @@ defmodule DashboardWeb.Live.ConfigLive do
 
         <%= case @modal do %>
           <% "add-more-db-attrs" -> %> <.db_attrs_modal id="db_attrs_modal" form={f} changeset={@changeset} />
-          <% "add-date-time-patterns" -> %> <.date_time_patterns_modal id="date_time_patterns_modal" form={f} changeset={@changeset} />
+          <% "add-date-time-patterns" -> %> <.date_time_patterns_modal id="date_time_patterns_modal" form={f} changeset={@changeset} matching_date_time={@matching_date_time}/>
           <% _ -> %>
         <% end %>
       </.form>

apps/dashboard/lib/dashboard_web/live/main_live.ex

@@ -1,5 +1,6 @@
 defmodule DashboardWeb.Live.MainLive do
   use DashboardWeb, :live_view
+  import Dashboard.Helpers
   alias DashBoard.{Config, DbAttribute}
   alias Csv2sql.Database.ConnectionTest
 
@@ -14,7 +15,8 @@ defmodule DashboardWeb.Live.MainLive do
        path_validator_debouncer: nil,
        db_connection_debouncer: nil,
        db_connection_established: false,
-       changeset: Ecto.Changeset.change(%DashBoard.Config{})
+       changeset: Ecto.Changeset.change(%DashBoard.Config{}),
+       matching_date_time: nil
      )}
   end
 
@@ -34,7 +36,7 @@ defmodule DashboardWeb.Live.MainLive do
   end
 
   @impl true
-  def handle_event("validate-and-save", attrs, socket) do
+  def handle_event("validate-and-save", attrs, ~M{assigns} = socket) do
     args = Map.get(attrs, "config", %{})
 
     socket =
@@ -46,6 +48,7 @@ defmodule DashboardWeb.Live.MainLive do
       # DB connection checker is expensive and returns result to caller process with delay
       # so we don't do this validation on changeset level
       |> db_connection_checker(args)
+      |> update_matching_date_time(attrs)
 
     {:noreply, socket}
   end
@@ -95,13 +98,16 @@ defmodule DashboardWeb.Live.MainLive do
     updated_changeset =
       Ecto.Changeset.put_embed(assigns.changeset, association, updated_association)
 
-    {:noreply, assign(socket, changeset: updated_changeset)}
+    {:noreply,
+     socket
+     |> assign(changeset: updated_changeset)
+     |> update_matching_date_time()}
   end
 
   @impl true
   def handle_info(:check_db_connection, ~M{assigns} = socket) do
     with(
-      db_url = Dashboard.Helpers.create_db_url(assigns.changeset.changes, false),
+      db_url = create_db_url(assigns.changeset.changes, false),
       true <- not ("NA" == db_url),
       db_type <- Ecto.Changeset.get_field(assigns.changeset, :db_type),
       false <- is_nil(db_type),
@@ -158,4 +164,23 @@ defmodule DashboardWeb.Live.MainLive do
       Ecto.Changeset.get_field(changeset, :db_host) != Map.get(args, "db_host") ||
       Ecto.Changeset.get_field(changeset, :db_name) != Map.get(args, "db_name")
   end
+
+  defp update_matching_date_time(~M{assigns} = socket, attrs \\ %{}) do
+    date_time_sample =
+      get_in(attrs, ["config", "date_time_trial"]) ||
+        Ecto.Changeset.get_field(assigns.changeset, :date_time_trial)
+
+    case match_date_time(assigns.changeset, date_time_sample) do
+      {type, index} ->
+
+        socket
+        |> assign(matching_date_time: {type, index})
+        |> push_event("scroll-into-view", %{
+          id: "config_#{type}_patterns_#{index}_pattern"
+        })
+
+      false ->
+        assign(socket, matching_date_time: nil)
+    end
+  end
 end

apps/dashboard/lib/dashboard_web/live/modals/date_time_patterns_modal.ex

@@ -1,5 +1,6 @@
 defmodule DashboardWeb.Live.Modal.DateTimePatternsModal do
   use DashboardWeb, :component
+  import Dashboard.Helpers
 
   @date_time_pattern_hints [
     {"{YYYY}", "full year number (0..9999)"},
@@ -18,14 +19,17 @@ defmodule DashboardWeb.Live.Modal.DateTimePatternsModal do
   ]
 
   def date_time_patterns_modal(assigns) do
-    custom_date_patterns_added =
+    custom_date_time_patterns_added =
       assigns.changeset |> Ecto.Changeset.get_field(:date_time_patterns, []) |> length() != 0
 
+    custom_date_patterns_added =
+      assigns.changeset |> Ecto.Changeset.get_field(:date_patterns, []) |> length() != 0
+
     ~H"""
       <DashboardWeb.Live.Modals.modal title="Add additional Date Time patterns">
         <div>
           <div class="fst-italic mt-2 ms-2">
-            Add datetime patterns
+            Add date patterns
           </div>
 
           <!-- TODO: Make this better: data list only works on double click -->
@@ -37,28 +41,65 @@ defmodule DashboardWeb.Live.Modal.DateTimePatternsModal do
 
           <div class="container">
             <div class="row">
-              <div class="col-6 border" id="date-time-patterns-container">
-                <%= if custom_date_patterns_added do %>
-                  <%= for {date_time_patterns_form, index} <- Enum.with_index(inputs_for(@form, :date_time_patterns), 1) do %>
-                    <div class="d-flex flex-row">
-                      <div class="input-group mb-3">
-                        <span class="input-group-text fw-bold pe-2 pt-1"><%= index %>.</span>
-                        <%= text_input date_time_patterns_form, :pattern, class: "form-control", placeholder: "Pattern", list: "date-time-patterns-suggestions" %>
+              <div class="col-6">
+                <div class="border">
+                  <div class="scrollable-container" id="date-patterns-container" class="border">
+                    <%= if custom_date_patterns_added do %>
+                      <%= for {date_patterns_form, index} <- Enum.with_index(inputs_for(@form, :date_patterns), 1) do %>
+                        <div class="d-flex flex-row">
+                          <div class="input-group mb-3">
+                            <span class="input-group-text fw-bold pe-2 pt-1"><%= index %>.</span>
+                            <%= text_input date_patterns_form, :pattern, class: input_class(index, :date, @matching_date_time), placeholder: "Pattern", list: "date-patterns-suggestions" %>
+                          </div>
+
+                          <%= hidden_input(date_patterns_form, :id) %>
+
+                          <div role="button" phx-click="remove-date-pattern" phx-value-attrid={Ecto.Changeset.get_field(date_patterns_form.source, :id)}>
+                            <IconSvg.remove_icon class="ms-2 pt-1"/>
+                          </div>
+                        </div>
+                      <% end %>
+                    <% else %>
+                      <div class="text-center mt-4 pt-4">
+                        <div> <IconSvg.empty_icon {%{height: 100, width: 100}}/> </div>
+                        <div class="fw-bold fst-italic font-monospace text-danger"> No custom date patterns added! </div>
                       </div>
+                    <% end %>
+                  </div>
+                  <div class="add-pattern" phx-click="add-new-date-pattern">
+                    <IconSvg.add_icon {%{width: 28}} />
+                    <span> Add datetime pattern </span>
+                  </div>
+                </div>
+                <div class="border">
+                  <div class="scrollable-container" id="date-time-patterns-container">
+                    <%= if custom_date_time_patterns_added do %>
+                      <%= for {date_time_patterns_form, index} <- Enum.with_index(inputs_for(@form, :date_time_patterns), 1) do %>
+                        <div class="d-flex flex-row">
+                          <div class="input-group mb-3">
+                            <span class="input-group-text fw-bold pe-2 pt-1"><%= index %>.</span>
+                            <%= text_input date_time_patterns_form, :pattern, class: input_class(index, :date_time, @matching_date_time), placeholder: "Pattern", list: "date-time-patterns-suggestions" %>
+                          </div>
 
-                      <%= hidden_input(date_time_patterns_form, :id) %>
+                          <%= hidden_input(date_time_patterns_form, :id) %>
 
-                      <div role="button" phx-click="remove-date-time-pattern" phx-value-attrid={Ecto.Changeset.get_field(date_time_patterns_form.source, :id)}>
-                        <IconSvg.remove_icon class="ms-2 pt-1"/>
+                          <div role="button" phx-click="remove-date-time-pattern" phx-value-attrid={Ecto.Changeset.get_field(date_time_patterns_form.source, :id)}>
+                            <IconSvg.remove_icon class="ms-2 pt-1"/>
+                          </div>
+                        </div>
+                      <% end %>
+                    <% else %>
+                      <div class="text-center mt-4 pt-4">
+                        <div> <IconSvg.empty_icon {%{height: 100, width: 100}}/> </div>
+                        <div class="fw-bold fst-italic font-monospace text-danger"> No custom date time patterns added! </div>
                       </div>
-                    </div>
-                  <% end %>
-                <% else %>
-                  <div class="text-center mt-4 pt-4">
-                    <div> <IconSvg.empty_icon {%{height: 100, width: 100}}/> </div>
-                    <div class="fw-bold fst-italic font-monospace text-danger"> No custom date time patterns added! </div>
+                    <% end %>
+                  </div>
+                  <div class="add-pattern" phx-click="add-new-date-time-pattern">
+                    <IconSvg.add_icon {%{width: 28}} />
+                    <span> Add datetime pattern </span>
                   </div>
-                <% end %>
+                </div>
               </div>
               <div class="col-6 border">
                 <p>
@@ -75,10 +116,20 @@ defmodule DashboardWeb.Live.Modal.DateTimePatternsModal do
                   <% end %>
                 </div>
                 <p> *Fractional seconds and timezones are not supported. </p>
-              </div>
-              <div class="col-8 add-link text-center">
-                <IconSvg.add_icon {%{width: 28}} />
-                <span phx-click="add-new-date-time-pattern"> Add datetime pattern </span>
+
+                <div id="date-time-try-it">
+                  <div class="d-flex flex-row">
+                    <!-- TODO: Fix tolltip title gone on hook init -->
+                    <.popup
+                      title="Enter a sample date or date time to check if it matches any added custom patterns"
+                      id="date-time-try-it-hint"/>
+                    <label for="date-time-trial"> Enter sample date time </label>
+                  </div>
+                  <%= if present?(Ecto.Changeset.get_field(@changeset, :date_time_trial)) && is_nil(@matching_date_time) do %>
+                    <span> No matching patterns found </span>
+                  <% end %>
+                  <%= text_input @form, :date_time_trial, class: "form-control", placeholder: "Pattern", id: "date-time-trial" %>
+                </div>
               </div>
             </div>
           </div>
@@ -88,4 +139,7 @@ defmodule DashboardWeb.Live.Modal.DateTimePatternsModal do
   end
 
   defp date_time_pattern_hints, do: @date_time_pattern_hints
+
+  defp input_class(index, type, {match_type, match_index}) when type == match_type and index == match_index + 1, do: "form-control matched-input"
+  defp input_class(_index, _type, _), do: "form-control"
 end

apps/dashboard/lib/dashboard_web/live/modals/db_attrs_modal.ex

@@ -21,7 +21,7 @@ defmodule DashboardWeb.Live.Modal.DbAttributesModal do
             <option value="socket"/>
           </datalist>
 
-          <div id="db-attrs-container">
+          <div class="scrollable-container" id="db-attrs-container">
             <%= if db_attrs_added do %>
               <%= for {db_attrs_form, index} <- Enum.with_index(inputs_for(@form, :db_attrs), 1) do %>
                 <div class="d-flex flex-row">