Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[LiveComponent] delete component from DOM #2007

Open
tito10047 opened this issue Jul 25, 2024 · 10 comments · May be fixed by #2192
Open

[LiveComponent] delete component from DOM #2007

tito10047 opened this issue Jul 25, 2024 · 10 comments · May be fixed by #2192
Labels

Comments

@tito10047
Copy link

Hi, I want delete component on ajax and remove element from DOM.
It is possible?

Some like this:

   #[LiveAction]
   public function delete(
   ) {
   	$repo  = $this->repositpry->delete($this->item);
   	$this->item = null;
   	return new Response(null, 204);
   }

But when I do this, black backdrop is showing.

@smnandre
Copy link
Member

It's not possible afaik today, but this is a great feature idea! Would you like to work on it ?

@smnandre smnandre added the Feature New Feature label Jul 26, 2024
@tito10047
Copy link
Author

Oh yes, I'm excited.
But I don't have idea where to start. I will have to look inside this package in more detail 👀

@tito10047
Copy link
Author

Ok, I found it in your code.
So, it's ok as it described in root issue? Or you want some special response?

@smnandre
Copy link
Member

That's the key aspect of this i guess... is just a "204" header enough ? I'm not sure...

Probably it would be safer to add some header no ?

@WebMamba
Copy link
Contributor

WebMamba commented Jul 29, 2024

We agree to say that is an entire component that you want to remove and not just an item inside your component?

If so I think we can have a custom header that gives the ID of the component that should be removed from the DOM (UX-LIVE_COMPONENT-REMOVE='ddjf13224?D?D').

I think this could be a good candidate for a new plugin.

We need to give a good way to easily create CSS transition.

And what do you think instead of returning a 404, having an attribute #[Descruct], so user don't need to know about all the headers details.

   #[Desctruct]
   public function delete(
   ) {
   	$repo  = $this->repositpry->delete($this->item);
   	$this->item = null;
   	return new Response(null, 204);
   }

And it can be useful to trigger an event onDescrut WDYT ?

@tito10047
Copy link
Author

Yes, this sounds good. Can you give me short intro where I can find some similar in library where I can inspirate?

@WebMamba
Copy link
Contributor

Maybe you can take inspiration on the loading features:
https://symfony.com/bundles/ux-live-component/current/index.html#adding-and-removing-classes-or-attributes
The work for css transition has already been done. And you have a plugin you can take inspiration on https://github.com/symfony/ux/blob/2.x/src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts

@smnandre
Copy link
Member

I suggest we split this in two PR: first let's handle the delete / header / response things
.. and then we can work on the attribute/effects .. wdyt ?

@tito10047
Copy link
Author

tito10047 commented Jul 31, 2024

If I understand it correctly,
I can create custom plugin for removing entire element from dom. In this component will be listener for event render:started and inside this plugin will check correct header from backendResponse and remove element from dom.

Can I try do it like this?

@smnandre
Copy link
Member

I think it would probably be easier to do directly where we handle redirections for instance... and then have a plugin to handle animation/etc.

Because if the content is not returned by the response this would generate an error today

@tito10047 tito10047 linked a pull request Sep 22, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants