save and load config from local storage

Author: Arp-G

apps/dashboard/assets/css/custom.scss

@@ -69,6 +69,7 @@ body {
   position: relative;
   top: -4px;
   padding-right: 2px;
+  cursor: pointer;
 }
 
 .mysql-label {

apps/dashboard/assets/css/live_view.scss

@@ -5,9 +5,15 @@
   display: block;
 }
 
-.phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback {
-  display: none;
-}
+/*
+  Any DOM container with the phx-feedback-for attribute will receive a phx-no-feedback class in cases where the 
+  form fields has yet to receive user input/focus, in such cases we hide the error.
+
+  In our case if still show the errors always
+*/
+// .phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback {
+//   display: none;
+// }
 
 .phx-click-loading {
   opacity: 0.5;

apps/dashboard/assets/js/app.js

@@ -13,11 +13,27 @@ let hooks = {
       // Initialize bootstrap tooltips
       // Ref: https://getbootstrap.com/docs/5.2/components/tooltips/#enable-tooltips
       new bootstrap.Tooltip(this.el);
+
+      this.handleEvent("save-config", ({ config }) => {
+        console.log("write to local", JSON.stringify(config))
+        localStorage.setItem("config", JSON.stringify(config))
+      }
+      )
     }
   }
 };
 
-let liveSocket = new LiveSocket("/live", Socket, { hooks, params: { _csrf_token: csrfToken } });
+let liveSocket = new LiveSocket(
+  "/live",
+  Socket,
+  {
+    hooks,
+    params: {
+      _csrf_token: csrfToken,
+      localConfig: (JSON.parse(localStorage.getItem('config') || '{}'))
+    }
+  });
+
 liveSocket.connect();
 window.liveSocket = liveSocket;
 
@@ -35,6 +51,6 @@ window.addEventListener(
   "phx:scroll-into-view",
   e => {
     const element = document.getElementById(e.detail.id);
-    element.scrollIntoView({behavior: "smooth",  block: "nearest"});
+    element.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }
 )

apps/dashboard/lib/dashboard/config.ex

@@ -1,3 +1,11 @@
+# This is required so that changesets can be serialized and stored in browser local storage
+# We are using only changes on a changeset
+defimpl Jason.Encoder, for: Ecto.Changeset do
+  def encode(changeset, opts) do
+    Jason.Encode.map(changeset.changes, opts)
+  end
+end
+
 defmodule DashBoard.Config do
   use Ecto.Schema
   import Ecto.Changeset
@@ -37,20 +45,41 @@ defmodule DashBoard.Config do
     embeds_many(:date_time_patterns, DashBoard.DateTimePattern, on_replace: :delete)
   end
 
-  def changeset(params) do
+  def get_defaults do
+    %__MODULE__{
+      db_type: :mysql,
+      db_worker_count: 10,
+      drop_existing_tables: false,
+      insert_data: true,
+      insert_schema: true,
+      insertion_chunk_size: 100,
+      log: false,
+      ordered: false,
+      parse_datetime: true,
+      remove_illegal_characters: false,
+      schema_infer_chunk_size: 100,
+      varchar_limit: 200,
+      worker_count: System.schedulers_online()
+    }
+  end
+
+  def changeset(params), do: changeset(%__MODULE__{}, params)
+
+  def changeset(%__MODULE__{} = config, params) do
     attrs_to_cast =
       :fields
       |> __MODULE__.__schema__()
+      # Reject nested attributes from cast, they will be loaded via cast_embed/2
       |> Enum.reject(fn
         field when field in ~w[db_attrs date_patterns date_time_patterns]a -> true
         _field -> false
       end)
 
     changeset =
-      %__MODULE__{}
+      config
       |> cast(params, attrs_to_cast)
       |> validate_source_directory()
-      |> validate_path(:schema_path)
+      |> validate_path(:schema_path, true)
       |> cast_embed(:db_attrs)
       |> cast_embed(:date_patterns)
       |> cast_embed(:date_time_patterns)
@@ -65,14 +94,19 @@ defmodule DashBoard.Config do
     |> add_csv_count()
   end
 
-  defp validate_path(changeset, field) do
-    changeset
-    |> get_change(field, "")
-    |> File.dir?()
-    |> if(
-      do: changeset,
-      else: add_error(changeset, field, "Invalid path, enter a path to a valid directory")
-    )
+  defp validate_path(changeset, field, allow_blank \\ false) do
+    value = get_change(changeset, field, "")
+
+    if allow_blank && value == "" do
+      changeset
+    else
+      value
+      |> File.dir?()
+      |> if(
+        do: changeset,
+        else: add_error(changeset, field, "Invalid path, enter a path to a valid directory")
+      )
+    end
   end
 
   defp add_csv_count(%Ecto.Changeset{valid?: true} = changeset) do

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

@@ -278,12 +278,12 @@ defmodule DashboardWeb.Live.ConfigLive do
 
         <%= if @modal != "add-date-time-patterns" do %>
           <%= inputs_for f, :date_time_patterns, fn assoc_form -> %>
-            <%= hidden_input(assoc_form, :id) %>w
+            <%= hidden_input(assoc_form, :id) %>
             <%= hidden_input(assoc_form, :pattern) %>
           <% end %>
 
           <%= inputs_for f, :date_patterns, fn assoc_form -> %>
-            <%= hidden_input(assoc_form, :id) %>w
+            <%= hidden_input(assoc_form, :id) %>
             <%= hidden_input(assoc_form, :pattern) %>
           <% end %>
         <% end %>

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

@@ -8,14 +8,18 @@ defmodule DashboardWeb.Live.MainLive do
 
   @impl true
   def mount(_params, _session, socket) do
+    localstorage_config = (get_connect_params(socket) || %{}) |> Map.get("localConfig", %{})
+    # Check for DB connection on config load from local storage
+    timer_ref = Process.send_after(self(), :check_db_connection, @debounce_time)
+
     {:ok,
      assign(socket,
        page: "config",
        modal: false,
        path_validator_debouncer: nil,
-       db_connection_debouncer: nil,
+       db_connection_debouncer: timer_ref,
        db_connection_established: false,
-       changeset: Ecto.Changeset.change(%DashBoard.Config{}),
+       changeset: Config.get_defaults() |> Config.changeset(localstorage_config),
        matching_date_time: nil
      )}
   end
@@ -50,7 +54,7 @@ defmodule DashboardWeb.Live.MainLive do
       |> db_connection_checker(args)
       |> update_matching_date_time(attrs)
 
-    {:noreply, socket}
+    {:noreply, socket |> push_event("save-config", %{config: socket.assigns.changeset})}
   end
 
   @impl true
@@ -172,7 +176,6 @@ defmodule DashboardWeb.Live.MainLive do
 
     case match_date_time(assigns.changeset, date_time_sample) do
       {type, index} ->
-
         socket
         |> assign(matching_date_time: {type, index})
         |> push_event("scroll-into-view", %{

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

@@ -113,7 +113,7 @@ defmodule DashboardWeb.Live.UI do
     """
   end
 
-    @doc """
+  @doc """
   Generates tag for inlined form input errors.
   """
   def error_tag(form, field) do