search

preaction / Yancy

The Best Web Framework Deserves the Best Content Management System
http://preaction.me/yancy/
Other
54 stars 21 forks source link

Show item edit form by url #85

Open tigrankhachikyan opened 4 years ago

tigrankhachikyan commented 4 years ago

Is there a way to show specified item's edit section by sending some parameter from url. for example /yancy/items/1/edit or via hash fragment/yancy/items/1#edit={id}

This can be very helpful feature, like I can just put the yancy edit url from the item details page.

preaction commented 4 years ago

Not presently, no. I do want to make the editor a more-idiomatic single-page application, and making each UI state its own routable endpoint is part of that. VueJS has the vue-router project which will make this easy (see #76 section "Single-Page App with Vue Router"). If it could be made isomorphic (where the Vue components use Mojolicious templates somehow), that'd be even better: More, easier customizations.

If this is something you're interested in helping out with, I'd be happy to help answer any questions!

tigrankhachikyan commented 4 years ago

Yeah, dedicated edit page would be wonderful. I would be more than happy to try to help you. Yancy is one of my loved project along with Mojolicious And I like the Vue as well.

I'll dig a bit in your codes. If you have any technical guidance just let me know.

preaction commented 4 years ago

That's great! The key to the feature is going to be making the item form Vue component do the reading and writing of items (fetching the item when the form is created, sending the item to the server when the Save button is clicked). Once it can read/write items, it can exist outside of the list of items as its own component. Then the vue-router can use it as a component to route to. The item form component will need to be able to save existing items and create new items.

I use the 'test-app' for testing, in the 'eg/test-app' folder. It's a simple app with a bunch of data that doesn't get saved anywhere. That will be the easiest way to try to see if your code is working.

If you're feeling ambitious, there are automated tests for the editor's JavaScript (using Selenium via Test::Mojo::Role::Selenium) . It's not necessary to write tests, but it might make testing your changes less tedious (as otherwise you will have to click a bunch of times to get to the right spot in the editor app). The test is in the t/selenium/editor.t file and has some documentation at the top for how to get it working. Selenium can be hard to get working, so don't worry if it doesn't work. It took me days to get what I've got in there working, and even that is pretty fragile...

Otherwise, this shouldn't need any complicated parts of vue-router: One route to list a schema and page through it, one route to edit an item in a schema, and one route to create a new item in a schema. Anything else can be done later :)