Mesour Editable – editace tabulky i s relacemi v modálním okně
- mesour
- Nette Blogger | 236
Zdravím :-)
když jsem se s tímhle problémem před nedávnem potýkal, tak mě napadlo, že by bylo super mít komponentu nastavitelnou na backendu podobně jako Nette formuláře, nastavil bych si callbacky na eventy a řešil pouze validaci a práci s DB. Taky bych ale očekával velkou možnost customizace na front-endu.
Takže po pár úvahách a nějakých strávených hodinách je tu balíček mesour/editable, který je v podstatě JavaScriptová komponenta nastavitelná z PHP. Podrobněji jsem to popsal zde: http://devel.cz/…i-s-relacemi
Demo
http://components.mesour.com/…nt/editable/#demo
Dokumentace: http://components.mesour.com/…nt/editable/
Sandbox
Stačí si stáhnout balíček mesour/editable, vytvořit databázi (config v index.php nahoře), importovat /examples/db.sql a spustit soubor /examples/index.php
Pro Nette
- Pro Nette ideální použít bridge: http://components.mesour.com/…idges/nette/, kde po nainstalování stačí přidat extensionu do DI kontejneru. Ta vytvoří instanci Mesour\UI\Application a přidá jako službu.
- Pak se například inspirovat zde: https://github.com/…dControl.php a vytvořit BaseControl pro editable :)
Plány
Napadlo mě, že ty data, které se posílají dost prozrazují o struktuře DB a názvech sloupců. Někde v adminu, kam chodí pár lidí to nevadí, ale na frontu by to mohl být potencionální bezpečnostní problém, takže zvažuji přidat možnost hashovat názvy sloupců a tabulek s nějakou solí. Pak by se akorát při vypisování HTML musely názvy přeložit stejně, ale do eventů po uložení už by chodily správné názvy, o to už by se komponenta postarala :)
Editoval mesour (1. 5. 2016 12:24)
- premek_k
- Člen | 172
Pěkné, jen na Mac OS to moc nefunguje (to live Demo):
- v Safari je nutno CTRL + dvouklik (první klik vyvolá contextové menu)
- v Chrome to nefunguje vůbec, nevyskočí ani context menu
- ve Firefox to také nefunguje, resp. vyskočí jen context menu.
Možná ten CTRL není dobrá volba (???).
BTW: nehaním, naopak chci jen pomoct…
Editoval premek_k (30. 3. 2016 10:05)
- mesour
- Nette Blogger | 236
premek_k napsal(a):
Pěkné, jen na Mac OS to moc nefunguje (to live Demo):
- v Safari je nutno CTRL + dvouklik (první klik vyvolá contextové menu)
- v Chrome to nefunguje vůbec, nevyskočí ani context menu
- ve Firefox to také nefunguje, resp. vyskočí jen context menu.
Možná ten CTRL není dobrá volba (???).
BTW: nehaním, naopak chci jen pomoct…
Ahoj, díky :)
Tohle není problém v balíčku, ale ve scriptu na stránce v dokumentaci, HTML a eventy a si už děláš sám, tohle jsem nechal na tom, kdo to bude integrovat, jsou tam díky tomu větší možnosti :) Ale k věci, je tam zjednodušeně:
<script>
$(document).on('click', '[data-editable]', function (event) {
/* removed code */
if (event.ctrlKey) {
event.preventDefault();
mesour.editable.getComponent(COMPONENT_NAME).edit(name, $this, id, value);
}
/* removed code */
});
</script>Tím pádem pro Mac se to asi bude odchytávat jinak pro klávesu cmd než z
event.ctrlKey. Nemám Mac OS, takže to nevyzkouším :/
Editoval mesour (31. 3. 2016 16:52)
- iguana007
- Člen | 970
mesour napsal(a):
Tím pádem pro Mac se to asi bude odchytávat jinak pro klávesu cmd než zevent.ctrlKey. Nemám Mac OS, takže to nevyzkouším :/
Možná by jako reference pomohlo toto: https://github.com/…keymaster.js
- mesour
- Nette Blogger | 236
iguana007 napsal(a):
mesour napsal(a):
Tím pádem pro Mac se to asi bude odchytávat jinak pro klávesu cmd než zevent.ctrlKey. Nemám Mac OS, takže to nevyzkouším :/Možná by jako reference pomohlo toto: https://github.com/…keymaster.js
To je dobré, ale možná až příliž na to, co potřebuji na to demo. Upravil jsem to na:
<script>
if(event.ctrlKey || event.metaKey) {
}
</script>@premek_k: vyzkoušej to teď :)
Editoval mesour (31. 3. 2016 18:44)
- mesour
- Nette Blogger | 236
Stable je venku :)
- Oprávnění je implementované
- Přibyla možnost přepnout mezi inline a popover editem (default popover)
- Nyní jsou defaultně všechny možnosti na joinovaných fieldech navíc jako třeba remove, attach, add vypnuté, je možné zapnout přes enable* metody
- Pořešeny nullové hodnoty a další drobnosti
- Přidána možnost zobrazovat validační hlášky i pro inline fieldy
Todo
- Updatovat dokumentaci
Editoval mesour (1. 5. 2016 12:55)