Comment: | Implement drag and drop ordering of fields |
---|---|
Downloads: | Tarball | ZIP archive | SQL archive |
Timelines: | family | ancestors | descendants | both | dev |
Files: | files | file ages | folders |
SHA3-256: |
9f76a46aa156ee924a38478a75262912 |
User & Date: | bohwaz on 2022-03-11 04:12:55 |
Other Links: | branch diff | manifest | tags |
2022-03-12
| ||
02:08 | Implement saving of dynamic fields sort order, improve JS drag and sort check-in: 0abf9de2e4 user: bohwaz tags: dev | |
2022-03-11
| ||
04:12 | Implement drag and drop ordering of fields check-in: 9f76a46aa1 user: bohwaz tags: dev | |
02:04 | Upgrade new user form check-in: 2591fb802e user: bohwaz tags: dev | |
Modified src/templates/admin/config/_menu.tpl from [fffca7d347] to [ab9107d0d2].
1 2 3 4 5 | <nav class="tabs"> <ul> <li{if $current == 'index'} class="current"{/if}><a href="{$admin_url}config/">Général</a></li> <li{if $current == 'custom'} class="current"{/if}><a href="{$admin_url}config/custom.php">Personnalisation</a></li> <li{if $current == 'categories'} class="current"{/if}><a href="{$admin_url}config/categories/">Catégories de membres</a></li> | | | 1 2 3 4 5 6 7 8 9 10 11 12 13 | <nav class="tabs"> <ul> <li{if $current == 'index'} class="current"{/if}><a href="{$admin_url}config/">Général</a></li> <li{if $current == 'custom'} class="current"{/if}><a href="{$admin_url}config/custom.php">Personnalisation</a></li> <li{if $current == 'categories'} class="current"{/if}><a href="{$admin_url}config/categories/">Catégories de membres</a></li> <li{if $current == 'fields'} class="current"{/if}><a href="{$admin_url}config/fields/">Fiche des membres</a></li> <li{if $current == 'backup'} class="current"{/if}><a href="{$admin_url}config/backup/">Sauvegardes</a></li> <li{if $current == 'plugins'} class="current"{/if}><a href="{$admin_url}config/plugins.php">Extensions</a></li> <li{if $current == 'advanced'} class="current"{/if}><a href="{$admin_url}config/advanced/">Fonctions avancées</a></li> </ul> {if $current == 'advanced'} <ul class="sub"> |
︙ | ︙ |
Modified src/templates/admin/config/categories/index.tpl from [7b5889b61d] to [885e1ad798].
︙ | ︙ | |||
14 15 16 17 18 19 20 | <tr> <th>{$cat.name}</th> <td class="num">{$cat.count}</td> <td class="permissions"> {display_permissions permissions=$cat} </td> <td class="actions"> | | | 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <tr> <th>{$cat.name}</th> <td class="num">{$cat.count}</td> <td class="permissions"> {display_permissions permissions=$cat} </td> <td class="actions"> {if $cat.id != $logged_user.id_category} {linkbutton shape="delete" label="Supprimer" href="supprimer.php?id=%d"|args:$cat.id} {/if} {linkbutton shape="edit" label="Modifier" href="modifier.php?id=%d"|args:$cat.id} {linkbutton shape="users" label="Liste des membres" href="!membres/?cat=%d"|args:$cat.id} </td> </tr> {/foreach} |
︙ | ︙ |
Modified src/templates/admin/config/fields/index.tpl from [e15825a3fa] to [5abe1156d8].
|
| | | > > > > > > | | | | | | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | < < < < < < < < < | < < < | < < < < | < < < < < < < < | < | < | < < < < < < < < < < | < < < < < < < < < < < | < | | < < | < < < | < < < < < < | < < < < < < | < < < < < < < < < < < < < < < < < < < < < < < < < < | < < < < < < | < < < < < < < < < | < < < | < | < < < < | < | < | < < | < | < < < | < < | < < < | < < < < < < < < < < < < | < < < < < < < | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | < < < < < < < < | < < < < | < < < < < < < < < < < < < < < < < | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | {include file="admin/_head.tpl" current="config" title="Fiche des membres"} {include file="admin/config/_menu.tpl" current="fields"} <nav class="tabs"> <aside> {linkbutton shape="plus" label="Ajouter un champ" href="new.php"} </aside> </nav> {if isset($status) && $status == 'OK'} <p class="block confirm"> La configuration a bien été enregistrée. </p> {elseif isset($status) && $status == 'ADDED'} <p class="block alert"> Le champ a été ajouté à la fin de la liste. Pour vérifier et sauvegarder les modifications de la fiche membre cliquer sur le bouton « Vérifier les changements » en base de page. </p> {/if} {form_errors} <form method="post" action="{$self_url_no_qs}"> <table class="list"> <thead> <tr> <td>Ordre</td> <th>Libellé</th> <td>Liste des membres</td> <td></td> </tr> </thead> <tbody> {foreach from=$fields item="field"} <tr> <td> {button shape="menu" title="Cliquer, glisser et déposer pour modifier l'ordre"} <input type="hidden" name="sort_order[]" value="{$field.id}" /> </td> <th>{$field.label}</th> <td>{if $field.list_row}Oui{else}Non{/if}</td> <td class="actions"> {if !$field.system || ($field.system && !($field.system | $field::PRESET))} {linkbutton shape="delete" label="Supprimer" href="delete.php?id=%d"|args:$field.id} {/if} {linkbutton shape="edit" label="Modifier" href="edit.php?id=%d"|args:$field.id} </td> </tr> {/foreach} </tbody> </table> </form> <script type="text/javascript" src="{$admin_url}static/scripts/dragdrop-table.js"></script> <script type="text/javascript"> {literal} enableTableDragAndDrop(document.querySelector('table')); {/literal} </script> {include file="admin/_foot.tpl"} |
Modified src/templates/admin/config/index.tpl from [0b8c620213] to [cf8abf6a45].
︙ | ︙ | |||
69 70 71 72 73 74 75 | </dl> </fieldset> <fieldset> <legend>Membres</legend> <dl> {input type="select" name="categorie_membres" source=$config options=$membres_cats required=true label="Catégorie par défaut des nouveaux membres"} | < < | 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | </dl> </fieldset> <fieldset> <legend>Membres</legend> <dl> {input type="select" name="categorie_membres" source=$config options=$membres_cats required=true label="Catégorie par défaut des nouveaux membres"} </dl> </fieldset> <p class="submit"> {csrf_field key="config"} {button type="submit" name="save" label="Enregistrer" shape="right" class="main"} </p> |
︙ | ︙ |
Modified src/www/admin/config/fields/index.php from [0aca5c7236] to [775ccccf5d].
1 2 3 | <?php namespace Garradin; | < | < < < < < < < < | < < | < < < < < < < < < < < < < < < < | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | | 1 2 3 4 5 6 7 8 9 | <?php namespace Garradin; use Garradin\Users\DynamicFields; require_once __DIR__ . '/../_inc.php'; $tpl->assign('fields', DynamicFields::getInstance()->all()); $tpl->display('admin/config/fields/index.tpl'); |
Modified src/www/admin/config/index.php from [746271d6a0] to [2ca815358a].
1 2 3 4 5 6 7 8 9 10 11 | <?php namespace Garradin; use Garradin\Users\Categories; use Garradin\Files\Files; use Garradin\Entities\Files\File; require_once __DIR__ . '/_inc.php'; if (qg('check_version') !== null) { echo json_encode(Upgrade::fetchLatestVersion()); | > | 1 2 3 4 5 6 7 8 9 10 11 12 | <?php namespace Garradin; use Garradin\Users\Categories; use Garradin\Users\DynamicFields; use Garradin\Files\Files; use Garradin\Entities\Files\File; require_once __DIR__ . '/_inc.php'; if (qg('check_version') !== null) { echo json_encode(Upgrade::fetchLatestVersion()); |
︙ | ︙ | |||
30 31 32 33 34 35 36 | 'new_version' => $latest, 'php_version' => phpversion(), 'has_gpg_support' => \KD2\Security::canUseEncryption(), 'server_time' => time(), 'sqlite_version' => \SQLite3::version()['versionString'], 'countries' => Utils::getCountryList(), 'membres_cats' => Categories::listSimple(), | < > > | 31 32 33 34 35 36 37 38 39 40 41 42 43 | 'new_version' => $latest, 'php_version' => phpversion(), 'has_gpg_support' => \KD2\Security::canUseEncryption(), 'server_time' => time(), 'sqlite_version' => \SQLite3::version()['versionString'], 'countries' => Utils::getCountryList(), 'membres_cats' => Categories::listSimple(), 'garradin_website' => WEBSITE, 'login_field' => DynamicFields::getLoginField(), 'name_field' => DynamicFields::getNameFields()[0], ]); $tpl->display('admin/config/index.tpl'); |
Added src/www/admin/static/scripts/dragdrop-table.js version [53e281cf53].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | window.enableTableDragAndDrop = function (table) { var items = table.querySelectorAll('tbody tr'); items.forEach(function (row) { const btn = row.querySelector('button'); row.draggable = true; btn.classList.add('draggable'); row.dataset.label = row.querySelector('th').textContent; row.addEventListener('dragstart', handleDragStart, false); row.addEventListener('dragenter', handleDragEnter, false); row.addEventListener('dragover', handleDragOver, false); row.addEventListener('dragleave', handleDragLeave, false); row.addEventListener('drop', handleDrop, false); row.addEventListener('dragend', handleDragEnd, false); }); var dragSrcEl = null; function handleDragStart(e) { this.parentNode.parentNode.classList.add('dragging'); this.classList.add('dragging'); dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); // Hide ghost image var i = new Image; i.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; e.dataTransfer.setDragImage(i, 0, 0); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; } function handleDragEnter(e) { if (this == dragSrcEl) { dragSrcEl.querySelector('th').textContent = dragSrcEl.dataset.label; return; } changeLabel(this); this.classList.add('placeholder'); } function handleDragLeave(e) { if (this == dragSrcEl) { return; } // Restore label, but only of current element this.querySelector('th').textContent = this.dataset.label; this.classList.remove('placeholder'); } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); // stops the browser from redirecting. } if (dragSrcEl != this) { var src_label = dragSrcEl.dataset.label; var target_label = this.dataset.label; dragSrcEl.innerHTML = this.innerHTML; dragSrcEl.querySelector('th').textContent = target_label; dragSrcEl.dataset.label = target_label; this.dataset.label = src_label; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } function changeLabel(elm) { dragSrcEl.querySelector('th').textContent = elm.dataset.label; elm.querySelector('th').textContent = dragSrcEl.dataset.label; } function handleDragEnd(e) { this.classList.remove('dragging'); this.parentNode.parentNode.classList.remove('dragging'); items.forEach(function (item) { item.classList.remove('placeholder'); }); } }; |
Modified src/www/admin/static/styles/03-forms.css from [2ce7e6ae49] to [43a5eca13c].
︙ | ︙ | |||
399 400 401 402 403 404 405 | line-height: 1.5rem; color: var(--gBorderColor); } p.submit { margin: 1em; } | < | 399 400 401 402 403 404 405 406 407 408 409 410 411 412 | line-height: 1.5rem; color: var(--gBorderColor); } p.submit { margin: 1em; } form .checkUncheck { float: left; } form span.password_check { margin-left: 1em; |
︙ | ︙ |
Modified src/www/admin/static/styles/06-tables.css from [3a60ef01c4] to [94df5f62df].
︙ | ︙ | |||
146 147 148 149 150 151 152 | width: 1.5em; color: rgba(var(--gTextColor), 0.3); } table.list .folder .icon { color: rgba(var(--gTextColor), 0.5); } | > > > > > > > > > > > > > > > > > > > | 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | width: 1.5em; color: rgba(var(--gTextColor), 0.3); } table.list .folder .icon { color: rgba(var(--gTextColor), 0.5); } /** Draggable table rows */ table .draggable { cursor: move; user-select: none; } table tr.placeholder { outline: 4px solid rgb(var(--gSecondColor)); !important; } table tr.dragging { opacity: 0.5; outline: 4px solid var(--gBorderColor) !important; } table.dragging td { opacity: 0; } |
Modified src/www/admin/static/styles/config.css from [cd8a35a686] to [0adb6dba86].
︙ | ︙ | |||
38 39 40 41 42 43 44 | padding: .2em .5em; } .error .event table { margin: .5em; } | < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < | 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | padding: .2em .5em; } .error .event table { margin: .5em; } .image-preview img, .image-preview figure { vertical-align: middle; } .image-preview img { max-width: 150px; } |
︙ | ︙ |