AshNewar

AshNewar

How to pass values to a modal?

Can show one help me to pass the values of the item to the modal when i click edit button

defmodule ZomatoWeb.Restraurents.RestraurentMenuLive do
  alias Zomato.Shops
  alias Zomato.Items
  alias Zomato.Item
  use ZomatoWeb, :live_view
  alias ZomatoWeb.NavbarComponent

  @impl true
  def mount(_params, %{"restraurent_token" => restraurent_token}=_session, socket) do
    restaurant = Shops.get_restraurent_by_session_token(restraurent_token)  # Assuming you have a way to get the restaurant ID from the session
    items = Zomato.Items.list_items_by_restaurant(restaurant.id)
    item = Items.change_item(%Item{})  # Create an empty changeset
    {:ok, assign(socket, items: items, restaurant_id: restaurant.id, item: item)}
  end

  @impl true
  def handle_event("save", %{"item" => item_params}, socket) do

    case Items.create_item(item_params, socket.assigns.restaurant_id) do
      {:ok, _item} ->
        {:noreply,
         socket
         |> Phoenix.LiveView.put_flash(:info, "Item created successfully.")
         |> Phoenix.LiveView.redirect(to: ~p"/restraurents/menu")}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end

  def handle_event("cancel", _, socket) do
    {:noreply, assign(socket, show_edit_modal: false, item: %{})}
  end


  @impl true
  def render(assigns) do
    ~H"""
    <div class="bg-gray-100">
      <div class="flex-col flex h-screen">
        <.live_component module={NavbarComponent} id={0}/>

        <div class="flex-1 p-6">
          <h2 class="text-3xl font-semibold mb-6">Menu Items</h2>

          <div class="mb-4">
            <button phx-click={show_modal("create_item")} class="bg-green-600 text-white font-bold py-2 px-4 rounded hover:bg-green-700">
              Add Item
            </button>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            <%= for item <- @items do %>
              <div class="bg-white rounded-lg shadow-md p-4">
                <div class="mb-4">
                  <img id="item-image" src="https://via.placeholder.com/150" alt="Menu Item Image" class="w-full h-32 object-cover rounded-md mb-2" />
                </div>
                <p class="text-gray-600 mb-4"><%= item.description %></p>
                <h3 class="text-xl font-semibold mb-2"><%= item.name %></h3>

                <div class="flex justify-between">
                  <button phx-click={show_modal("edit_item")} class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-700">Edit</button>
                  <button phx-click={show_modal("delete_item")} class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-700">Delete</button>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <.modal id="delete_item">
            <h2 class="text-2xl font-bold mb-4">Confirm Deletion</h2>
            <p class="mb-4">Are you sure you want to delete this item?</p>
            <div class="flex justify-between">
              <button phx-click="confirm_delete"  class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-700">
                Yes, Delete
              </button>
              <button phx-click="cancel"  class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">
                Cancel
              </button>
            </div>
    </.modal>

    <.modal id="create_item" >
        <h2 class="text-2xl font-semibold mb-4 text-center">Add Item Details</h2>
        <form phx-submit="save">
          <div class="mb-4">
            <label for="item_name" class="block text-sm font-medium text-gray-700">Item Name</label>
            <input type="text" name="item[name]" id="item_name" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required />
          </div>

          <div class="mb-4">
            <label for="item_description" class="block text-sm font-medium text-gray-700">Description</label>
            <textarea name="item[description]" id="item_description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required></textarea>
          </div>

          <div class="mb-4">
            <label for="item_price" class="block text-sm font-medium text-gray-700">Price</label>
            <input type="number" name="item[price]" id="item_price" step="0.01" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required />
          </div>

          <div class="mb-4">
            <label for="item_category" class="block text-sm font-medium text-gray-700">Category</label>
            <input type="text" name="item[category]" id="item_category" step="0.01" class="mt-1 block w-full border border-gray-300 rounded-md p-2" required />
          </div>

          <div class="mb-4">
            <label for="item_image" class="block text-sm font-medium text-gray-700">Upload Image</label>
            <input type="file" name="item[image]" id="item_image" class="mt-1 block w-full border border-gray-300 rounded-md p-2" />
          </div>

          <button type="submit" class="mt-4 w-full bg-blue-600 text-white rounded-md py-2 hover:bg-blue-700">Add Item</button>
        </form>

    </.modal>

    <.modal id="edit_item">
        <h2 class="text-2xl font-bold mb-4">Edit Item</h2>
          <form phx-submit="save_changes" >
            <div class="mb-4">
              <label for="item_name" class="block text-sm font-medium text-gray-700">Item Name</label>
              <input type="text" id="item_name" name="item_name" value={"Ashish"} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required />
            </div>
            <div class="mb-4">
              <label for="item_description" class="block text-sm font-medium text-gray-700">Description</label>
              <textarea id="item_description" name="item_description" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>Descrip lik do</textarea>
            </div>  alias ZomatoWeb.CoreComponents

            <div class="mb-4">
              <label for="item_price" class="block text-sm font-medium text-gray-700">Price</label>
              <input type="number" id="item_price" name="item_price" value={55} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required />
            </div>
            <div class="flex justify-between">
              <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save Changes</button>
              <button phx-click="cancel" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Cancel</button>
            </div>
          </form>

    </.modal>


    """
  end




end

please give me hint

First Post!

jimzhang.ex

jimzhang.ex

Try
mix phx.gen.live Sales Product products name:string price:integer description:string

Trace the code generated, and you’ll see how to show a modal and pass values to it.

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New

Other popular topics Top

skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52673 488
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54120 245
New

We're in Beta

About us Mission Statement