devel.cz

Již před delší dobou jsem zde publikoval jeden balíček a některé názory a komentáře byly přínosné, takže jsem se rozhodl totéž udělat s novým balčíčkem pro inline editaci entity i s kolekcemi. mesour/editable je zatím ve verzi @beta, ale do stable verze neplánuji žádné BC breaky.

DEMO: http://components.mesour.com/version3/component/editable/#demo
Documentation: http://components.mesour.com/version3/component/editable/
Example usage: http://components.mesour.com/version3/component/editable/#usage
GITHUB: https://github.com/mesour/editable

Features

Editace celé tabulky i s relacemi bez nutnosti definovat x formulářů a nutit uživatele se proklikávat skrz x stránek než edituje například uživatele s jeho telefony, adresami, firmami a já nevím čeho ještě.

Source je ne jenom pro Doctrine, ale i pro Nette Database Table a array. V plánu je source pro PDO.

Jednoduché nastavení:

1. Vytvořit source a nastavit relace
2. Vytvořit editable structure a nastavit pole a jejich názvy pro editaci
3. Vytvořit instanci application
4. Vytvořit instanci editable, který attachnout na application a nastavit mu strukturu
5. Vypsat na front-endu data a vytvořit JavaScript

• Inline editace typů: text | number | date | bool | enum
• Editace one to one relace
• Editace one to many relace s možností přidat nový záznam nebo odstranit stávající
• Editace many to many relace s možností přidat nový záznam, připojit nebo odstranit stávající
• Není potřeba řešit linky a posílání dat, pouze se navěsí callback na volané eventy
• Je možná validace na backendu a to tak, že v eventu stačí vyhodit výjimku
• Variabilita na front-endu
• Vše jde přes translator, je možné nastavit globální rovnou na application

Front end

V javascriptu jsou důležité tři metody newEntry, remove a edit. Jednoduše si vytáhnu instanci daného editable podle názvu komponenty. Pokud je zanořená, tak se názvy oddělují pomlčkou.

var editable = mesour.editable.getComponent(COMPONENT_NAME);

Pak už se dá jednoduše zavolat daná akce, takže napojení eventů v javascriptu je čistě ve vašich rukou

var editable = mesour.editable.getComponent(COMPONENT_NAME);
 
// nový záznam
editable.newEntry(fieldName, $fieldElement, id);
 
// editace záznamu
// value = například u one to one je to ID řádku
editable.edit(fieldName, $fieldElement, id, value);
 
// smazání záznamu
// value = ID mazaného záznamu
editable.remove(name, $this, id, value);

Pro ukázku nějaký kompletní example

$(function () {
    var COMPONENT_NAME = 'mesourApp-editableTest';
 
    $(document).on('click', '[data-editable]', function (e) {
        var $this = $(this);
 
        if ($this.attr('data-no-action')) {
            return;
        }
 
        if (e.ctrlKey) {
            e.preventDefault();
 
            var name = $this.attr('data-editable'),
                isAdd = $this.attr('data-is-add'),
                isRemove = $this.attr('data-is-remove'),
                value = $this.attr('data-value'),
                id = $this.attr('data-id');
 
            if (isAdd) {
                mesour.editable.getComponent(COMPONENT_NAME).newEntry(name, $this, id);
            } else if (isRemove) {
                mesour.editable.getComponent(COMPONENT_NAME).remove(name, $this, id, value);
                $('[data-editable=' + name + ']').not('[data-is-add]').remove();
            } else {
                mesour.editable.getComponent(COMPONENT_NAME).edit(name, $this, id, value);
            }
        }
    });
});

PHP

Validace

Na front-endu se projeví jako alert, pokud se jedná o inline edit. Ve formu se pak začervení pole a v horní části modálního okna se vypíše error message.

$editable->onEditField[] = function (
    \Mesour\Editable\Structures\Fields\IStructureField $field,
    $newValue,
    $oldValue,
    $identifier = null,
    array $params = []
) use ($context, $source) {
    if ($field->getName() === 'email' && !\Nette\Utils\Validators::isEmail($newValue)) {
 
        $exception = new \Mesour\Editable\ValidatorException('Value must be valid email.');
        // specify field (best in forms)
        $exception->setFieldName($field->getName()); 
 
        throw $exception;
 
    }
    $data = [
        $field->getName() => $newValue,
    ];
 
    // here update in DB
};

Dotazy

• Jde mi o to zjistit váš názor na balíček
• Proč třeba nepoužít?
• Nějaké názory na kód?
• Nápady na vylepšení?
• Něco tam chybí?
• Něco není jasné?
• Cokoli vás napadne ;-)