Initial addition of layout dynamization changes, based on #44, #4, #63

mishka-group · Mar 24, 2023 · 6b99c81 · 6b99c81
1 parent cb3f656
commit 6b99c81
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 189 deletions.
diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html
diff --git a/lib/mishka_template_creator/components/blocks/history.ex b/lib/mishka_template_creator/components/blocks/history.ex
@@ -21,6 +21,8 @@ defmodule MishkaTemplateCreator.Components.Blocks.History do
 
   @impl true
   def handle_event("save", %{"html" => html}, socket) do
+    # TODO: It should check directory exists
+    # TODO: Create html file
     Path.join("deployment", ["templates/test1.html"]) # name should be selected by user
     |> File.write(html)
     {:noreply, socket}

diff --git a/lib/mishka_template_creator/components/elements/layout.ex b/lib/mishka_template_creator/components/elements/layout.ex
@@ -26,7 +26,11 @@ defmodule MishkaTemplateCreator.Components.Elements.Layout do
   @spec layout(map) :: Phoenix.LiveView.Rendered.t()
   def layout(assigns) do
     ~H"""
-    <div class="create-layout group" id={"layout-#{@id}"} data-type="layout">
+    <div
+      class={"create-layout group"}
+      id={"layout-#{@id}"}
+      data-type="layout"
+    >
       <div class="flex flex-row justify-start items-center space-x-3 absolute -left-[2px] -top-11 bg-gray-200 border border-gray-200 p-2 rounded-tr-3xl z-1 w-54">
         <MobileView.block_mobile_view block_id={@id} />
         <DarkMod.block_dark_mod block_id={@id} />
@@ -39,7 +43,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Layout do
       </div>
       <div
         id={@id}
-        class={"flex flex-row justify-start items-center w-full space-x-3 px-3 #{if length(@children) == 0, do: "py-10"}"}
+        class={if !is_nil(@class), do: Enum.join(@class, " "), else: "flex flex-row justify-start items-center w-full space-x-3 px-3 #{if length(@children) == 0, do: "py-10"}"}
         data-type="layout"
       >
         <Section.section

diff --git a/lib/mishka_template_creator/components/mishka_core_component.ex b/lib/mishka_template_creator/components/mishka_core_component.ex
@@ -1,7 +1,7 @@
 defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
   use Phoenix.Component
   import Phoenix.HTML.Form
-
+  alias MishkaTemplateCreator.Data.TailwindSetting
   alias MishkaTemplateCreator.Components.Blocks.{Content, Aside, History}
   alias Phoenix.LiveView.JS
   import MishkaTemplateCreatorWeb.CoreComponents
@@ -174,10 +174,10 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
 
     cond do
       type == "layout" and parent == "dragLocation" ->
-        Map.merge(params, %{id: id, children: []})
+        Map.merge(params, %{id: id, children: [], class: TailwindSetting.default_layout()})
 
       type == "section" and parent == "layout" ->
-        Map.merge(params, %{id: id, children: []})
+        Map.merge(params, %{id: id, children: [], class: TailwindSetting.default_section()})
 
       type in @elements_type and parent == "section" ->
         Map.merge(params, %{id: id, children: []})

diff --git a/lib/mishka_template_creator/data/tailwind_setting.ex b/lib/mishka_template_creator/data/tailwind_setting.ex
@@ -596,6 +596,7 @@ defmodule MishkaTemplateCreator.Data.TailwindSetting do
          {"flex-direction", "Flex Direction",
           "Utilities for controlling the direction of flex items.",
           [
+            "flex",
             "flex-row",
             "flex-row-reverse",
             "flex-col",
@@ -8602,4 +8603,32 @@ defmodule MishkaTemplateCreator.Data.TailwindSetting do
 
     Enum.member?(configs, converted_class)
   end
+
+  def default_layout() do
+    [
+      "flex",
+      "flex-row",
+      "justify-start",
+      "items-center",
+      "w-full",
+      "space-x-3",
+      "px-3",
+      "py-10"
+    ]
+  end
+
+  def default_section() do
+    [
+      "flex",
+      "flex-col",
+      "justify-between",
+      "items-stretch",
+      "min-h-[200px]",
+      "w-full",
+      "border",
+      "border-dashed",
+      "border-gray-400",
+      "p-1"
+    ]
+  end
 end
diff --git a/lib/mishka_template_creator_web/live/template_creator_live.ex b/lib/mishka_template_creator_web/live/template_creator_live.ex
@@ -10,7 +10,7 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
 
   @impl true
   def mount(_params, _, socket) do
-    if connected?(socket), do: Process.send_after(self(), :update, 30000)
+    if connected?(socket), do: Process.send_after(self(), :save_db, 10000)
 
     new_socket =
       assign(socket, elemens: [], selected_block: nil, submit: true, selected_setting: nil)
@@ -201,8 +201,9 @@ defmodule MishkaTemplateCreatorWeb.TemplateCreatorLive do
     {:noreply, new_assign}
   end
 
-  def handle_info(:update, socket) do
-    Process.send_after(self(), :update, 30000)
+  def handle_info(:save_db, socket) do
+    # TODO: it should be saved in DB
+    Process.send_after(self(), :save_db, 10000)
     {:noreply, socket}
   end