From 7135848d279c021618e9ab05714596316b8fb7b9 Mon Sep 17 00:00:00 2001 From: shahryar tavakkoli Date: Sun, 19 Mar 2023 13:24:16 +0330 Subject: [PATCH] add form aggregator in setting component, based on #44, #4 --- .../components/blocks/settings.ex | 67 ++++++++++++++++--- .../components/mishka_core_component.ex | 51 ++++++++++++++ 2 files changed, 108 insertions(+), 10 deletions(-) diff --git a/lib/mishka_template_creator/components/blocks/settings.ex b/lib/mishka_template_creator/components/blocks/settings.ex index a272f02..45bd216 100644 --- a/lib/mishka_template_creator/components/blocks/settings.ex +++ b/lib/mishka_template_creator/components/blocks/settings.ex @@ -2,6 +2,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do use Phoenix.Component alias Phoenix.LiveView.JS + import Phoenix.HTML.Form import MishkaTemplateCreatorWeb.CoreComponents import MishkaTemplateCreatorWeb.MishkaCoreComponent alias MishkaTemplateCreator.{Components.Blocks.ElementMenu, Data.TailwindSetting} @@ -87,7 +88,6 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do """ end - import Phoenix.HTML.Form attr :id, :string, required: true attr :child, :string, required: false, default: nil @@ -96,7 +96,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do ~H"""
-
+
<.button :for={ {field_id, field_title, _field_description, _field_configs, _field_allowed_types} <- @@ -113,23 +113,70 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
-
+
+ + <%= @selected_setting.form_id %> +

You can apply the following settings on this section. If you don't need to change the settings, you can skip this section.

- <.form_block :let={f} for={%{}} as={:config_form} phx-change="save_config"> - <%= multiple_select( - f, - String.to_atom(@selected_setting.form_id), - @selected_setting.form_configs, - class: "border !border-gray-300 rounded-md w-full space-y-2" - ) %> + <.form_block :let={f} for={%{}} as={String.to_atom(@id)} phx-change="save_config"> + <.aggregate_forms_type_in_favor_of_types f={f} options={@selected_setting} />
""" end + attr :f, :any, required: true + attr :options, :map, required: true + attr :selected, :any, required: false, default: nil + attr :sizes, :list, required: false, default: [:sm, :md, :lg, :xl, :"2xl"] + + @spec aggregate_forms_type_in_favor_of_types(map) :: Phoenix.LiveView.Rendered.t() + def aggregate_forms_type_in_favor_of_types(assigns) do + ~H""" + <.multiple_select + :if={:multi_select in @options.types} + form={@f} + options={@options} + selected={@selected} + /> + <.select + :if={:multi_select not in @options.types} + form={@f} + options={@options} + selected={@selected} + /> + +
+

+ You can set it for different sizes: +

+

+ To adjust in different sizes, consider the first mobile step or the smallest size and go to larger sizes +

+
+ <.multiple_select + :for={size <- @sizes} + :if={:multi_select in @options.types and :media_queries in @options.types} + form={@f} + options={@options} + id={size} + title={size} + /> + <.select + :for={size <- @sizes} + :if={:multi_select not in @options.types and :media_queries in @options.types} + form={@f} + options={@options} + id={size} + title={size} + /> +
+ """ + end + def aggregate_form_data_in_favor_of_tailwind(_form_data) do end end diff --git a/lib/mishka_template_creator/components/mishka_core_component.ex b/lib/mishka_template_creator/components/mishka_core_component.ex index d76d147..df7e670 100644 --- a/lib/mishka_template_creator/components/mishka_core_component.ex +++ b/lib/mishka_template_creator/components/mishka_core_component.ex @@ -1,5 +1,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do use Phoenix.Component + import Phoenix.HTML.Form + alias MishkaTemplateCreator.Components.Blocks.{Content, Aside} alias Phoenix.LiveView.JS import MishkaTemplateCreatorWeb.CoreComponents @@ -118,6 +120,55 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do """ end + attr :form, :any, required: true + attr :options, :map, required: true + attr :selected, :list, required: false, default: nil + attr :title, :string, required: false, default: nil + attr :id, :atom, required: false, default: nil + + attr :class, :string, + required: false, + default: "border !border-gray-300 rounded-md w-full space-y-2" + + @spec multiple_select(map) :: Phoenix.LiveView.Rendered.t() + def multiple_select(assigns) do + ~H""" +

<%= @title %>:

+ <%= multiple_select( + @form, + @id || String.to_atom(@options.form_id), + @options.form_configs, + class: @class, + selected: @selected + ) %> + """ + end + + attr :form, :any, required: true + attr :options, :map, required: true + attr :selected, :any, required: false, default: nil + attr :title, :string, required: false, default: nil + attr :id, :atom, required: false, default: nil + + attr :class, :string, + required: false, + default: "border !border-gray-300 rounded-md w-full mx-0 my-0" + + @spec select(map) :: Phoenix.LiveView.Rendered.t() + def select(assigns) do + ~H""" +

<%= @title %>:

+ <%= select( + @form, + @id || String.to_atom(@options.form_id), + @options.form_configs, + class: @class, + selected: @selected, + prompt: "Choose your config" + ) %> + """ + end + def create_element(%{type: type, index: _index, parent: parent, parent_id: _parent_id} = params) do id = Ecto.UUID.generate()