Pretty HABTM List Entry

Question

I have a Recipe, Item, and Units table/model. I have a HABTM relationship with Recipe and Item, and I get the default multiple-select box when adding/editing Recipe. (am using Bake for everything for the most part). The problem is I need to associate quantities and units with each Item.

Sample of UI I'm hoping for:

sample

A big component of it is the ability to add/delete/edit the individual items. I imagine looking at the submitted form data, and using some jquery and clone would work. But I was wondering if someone already created a Behavior perhaps for this already?

Current Models (shortened to the relevant stuff, ie removed users/notes/etc):

class Item extends AppModel {
    var $name = 'Item';

// id : int
// name : varchar
// unit_id : int

    var $belongsTo = array(
        'Unit' => array(
            'className' => 'Unit',
            'foreignKey' => 'unit_id'
        ),
    );

    var $hasAndBelongsToMany = array(
        'Recipe' => array(
            'className' => 'Recipe',
            'joinTable' => 'recipes_items',
            'foreignKey' => 'item_id',
            'associationForeignKey' => 'recipe_id',
        )
    );
}

.

class Recipe extends AppModel {
        var $name = 'recipe';
        var $displayField = "name";

// id : int
// name : varchar


        var $hasAndBelongsToMany = array(
            'Item' => array(
                'className' => 'Item',
                'joinTable' => 'recipes_items',
                'foreignKey' => 'recipe_id',
                'associationForeignKey' => 'item_id',
            )
        );
    }

.

class RecipesItem extends AppModel {
    var $name = 'RecipesItem';

// id : int
// quantity : int
// unit_id : int
// recipe_id : int
// item_id : int



    var $belongsTo = array(
        'Unit' => array(
            'className' => 'Unit',
            'foreignKey' => 'unit_id'
        ),
        'Recipe' => array(
            'className' => 'Recipe',
            'foreignKey' => 'recipe_id'
        ),
        'Item' => array(
            'className' => 'Item',
            'foreignKey' => 'item_id'
        )
    );
}

As far as I know, CakePHP doesn't allow you to have properties on HABTM relationships, so you should change your first 2 models from HABTM to hasMany relationships (linking them to RecipesItem). Later, you can bake the MVC for RecipesItem and you will have all done. To accomplish what you asked, you can "move" the baked add view to Recipes add method, making the necessary changes on JS. — tvdias, Jul 24 '12 at 13:46

score 0 · Answer 1 · answered Aug 28 '11 at 19:11

Not quite sure what you're asking. For adding, editing and deleting items you would need create actions in your items controller. Saving association data (ie which Items a Recipe has) should be handled more-or-less automatically by the save() method in your controller action, assuming you have your forms set up correctly.

Out of curiosity, where did the RecipesItem model come from? What does that represent? If I am understanding you correctly, you have a Recipe model, and an Item model, with HABTM relationship. You shouldn't need a model for their join table, the recipes_items table just relates items from the two models.

basically an auto-'magic' (ie. bake or behavior) that will create the kind of form element in the mockup... if it exists (or is simple to create). I made the 3rd model in hopes that I could some how define that that field element should have additional related fields (still feeling my way through Cake), and have bake create the appropriate inputs, — mondo, Aug 28 '11 at 20:29

score 0 · Answer 2 · answered Aug 28 '11 at 20:41

0

that's not something Cake can do for you. Maybe there's some js that can helps you a bit, but you'll pretty much have to write your own javascript for that.

answered Aug 28 '11 at 20:41

Anh Pham

5,431
3
23
27

score 0 · Answer 3 · answered Aug 29 '11 at 14:58

You have to use javascript to "transform" the select tag into something "cooler".

Here is the jquery-multiselect plugin which I use quite a bit. You can easily set it up to replace all of your multi selects with 1 line of code.

More info here: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Pretty HABTM List Entry

3 Answers3

Linked