Hello to my favorite forum!
Got a little UI snag that I could use some help with.
Having the following 2 migrations.
...
class CreateSomethingTable extends Migration
{
Schema::create('somethings', function(Blueprint $table) {
$table->id;
$table->string('name');
$table->text('description')->nullable();
$table->unsignedInteger('sort_order')->default(0);
});
}
...
...
class CreateSomethingOptionTable extends Migration
{
Schema::create('something_options', function(Blueprint $table) {
$table->id;
$table->foreignId('something_id');
$table->string('option_value');
$table->json('not_relevant');
});
}
...
Which way is the best way to create a user interface that is used to build out related model objects?
You know, click "Add Something" fill in details and then click on "Add Something Option" and fill in details. Then again click "Add Something" etc. etc. All without leaving the current view.
Client-Side stack is irrelevant, I just want to know how the creation flow should be done.
Does the "Add Something" button make an ajax call to store a new Something model and get back an ID that can be used later on the same "something model" when adding the "Something Options"? And when adding an option do I make a call to get an ID for that? I hate Front-end work because of this, but I need to get this "builder" done.
Does anyone have some resources they can share on how to implement something like a builder UI but not the front-end stuff which is irrelevant. Needs to show how it actually handles data creation/update/deletion.
What I've done so far is the following:
With Vuejs I create an empty array (of somethings) where I add new Something objects and within those I add the something options objects into the something_options array. But handling validation is a nightmare when building out many somethings and options for each something using a single "Builder Interface". Deletion is also an issue on server-side. Which "Something" was removed from the incoming data or which Option was removed from that "something"...
Example:
let somethings = [
{
"name" : "A something name",
"description": "A something description",
"something_options": [
{
"option_value": "An option value",
},
{
"option_value": "Something else",
}
]
},
{
"name" : "A something else name",
"description": "A something else description",
"something_options": [
{
"option_value": "Another option value",
}
]
}
]
The options must have a Unique ID that is used to retrieve relevant data from the database. Think of a Faceted Search UI but facets need be created with the builder and can't be built-out dynamically from the aggregated buckets.
Thanks in advance for your time!
