Overview
Comment:Improve account selector search
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | dev
Files: files | file ages | folders
SHA3-256: 605e25ef2fa25925c7afb2be9732f758a1c091fb169586d52c60dc7008b93e97
User & Date: bohwaz on 2021-04-06 19:12:47
Other Links: branch diff | manifest | tags
Context
2021-04-07
14:08
Fix [9de0e8bedad3d7f412b66ed6e1fd892bee3eccf1] fix links to images and files from other pages check-in: e35246d917 user: bohwaz tags: dev
2021-04-06
19:12
Improve account selector search check-in: 605e25ef2f user: bohwaz tags: dev
17:05
Fix add _dialog to dynamic input-list buttons check-in: ef83f56682 user: bohwaz tags: dev
Changes

Modified src/templates/acc/charts/accounts/selector.tpl from [4fc94408d5] to [a831512af8].

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
{include file="admin/_head.tpl" title="Sélectionner un compte"}

{if empty($grouped_accounts) && empty($accounts)}
	<p class="block alert">Le plan comptable ne comporte aucun compte de ce type. Pour afficher des comptes ici, les <a href="{$www_url}admin/acc/charts/accounts/all.php?id={$chart.id}" target="_blank">modifier dans le plan comptable</a> en sélectionnant le type de compte favori voulu.</td>

{elseif isset($grouped_accounts)}

	<?php $index = 1; ?>
	{foreach from=$grouped_accounts item="group"}
		<h2 class="ruler">{$group.label}</h2>

		<table class="list">
			<tbody>
			{foreach from=$group.accounts item="account"}
				<tr data-idx="{$index}">
					<td>{$account.code}</td>
					<th>{$account.label}</th>
					<td class="desc">{$account.description}</td>
					<td class="actions">
						<button class="icn-btn" value="{$account.id}" data-label="{$account.code} — {$account.label}" data-icon="&rarr;">Sélectionner</button>
					</td>
				</tr>
				<?php $index++; ?>
			{/foreach}
			</tbody>
		</table>
	{/foreach}

{else}

	<h2 class="ruler">
		<input type="text" placeholder="Recherche rapide" id="lookup" />

		<label>{input type="checkbox" name="typed_only" value=0 default=0 default=$all} N'afficher que les comptes favoris</label>

	</h2>


























	<table class="accounts">
		<tbody>
		{foreach from=$accounts item="account"}
			<tr data-idx="{$iteration}" class="account-level-{$account.code|strlen}">
				<td>{$account.code}</td>
				<th>{$account.label}</th>
				<td>
				{if $account.type}
					{icon shape="star"} <?=Entities\Accounting\Account::TYPES_NAMES[$account->type]?>
				{/if}
				</td>
				<td class="actions">
					<button class="icn-btn" value="{$account.id}" data-label="{$account.code} — {$account.label}" data-icon="&rarr;">Sélectionner</button>
				</td>
			</tr>
		{/foreach}
		</tbody>
	</table>


{/if}

<script type="text/javascript" src="{$admin_url}static/scripts/selector.js?{$version_hash}"></script>

{include file="admin/_foot.tpl"}





<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<




>

>


>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

>





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
{include file="admin/_head.tpl" title="Sélectionner un compte"}

{if empty($grouped_accounts) && empty($accounts)}
	<p class="block alert">Le plan comptable ne comporte aucun compte de ce type. Pour afficher des comptes ici, les <a href="{$www_url}admin/acc/charts/accounts/all.php?id={$chart.id}" target="_blank">modifier dans le plan comptable</a> en sélectionnant le type de compte favori voulu.</td>
























{else}

	<h2 class="ruler">
		<input type="text" placeholder="Recherche rapide" id="lookup" />
		{if !isset($grouped_accounts)}
		<label>{input type="checkbox" name="typed_only" value=0 default=0 default=$all} N'afficher que les comptes favoris</label>
		{/if}
	</h2>


	{if isset($grouped_accounts)}
		<?php $index = 1; ?>
		{foreach from=$grouped_accounts item="group"}
			<h2 class="ruler">{$group.label}</h2>

			<table class="list">
				<tbody>
				{foreach from=$group.accounts item="account"}
					<tr data-idx="{$index}">
						<td>{$account.code}</td>
						<th>{$account.label}</th>
						<td class="desc">{$account.description}</td>
						<td class="actions">
							<button class="icn-btn" value="{$account.id}" data-label="{$account.code} — {$account.label}" data-icon="&rarr;">Sélectionner</button>
						</td>
					</tr>
					<?php $index++; ?>
				{/foreach}
				</tbody>
			</table>
		{/foreach}

	{else}

		<table class="accounts">
			<tbody>
			{foreach from=$accounts item="account"}
				<tr data-idx="{$iteration}" class="account-level-{$account.code|strlen}">
					<td>{$account.code}</td>
					<th>{$account.label}</th>
					<td>
					{if $account.type}
						{icon shape="star"} <?=Entities\Accounting\Account::TYPES_NAMES[$account->type]?>
					{/if}
					</td>
					<td class="actions">
						<button class="icn-btn" value="{$account.id}" data-label="{$account.code} — {$account.label}" data-icon="&rarr;">Sélectionner</button>
					</td>
				</tr>
			{/foreach}
			</tbody>
		</table>

	{/if}
{/if}

<script type="text/javascript" src="{$admin_url}static/scripts/selector.js?{$version_hash}"></script>

{include file="admin/_foot.tpl"}

Modified src/www/admin/acc/charts/accounts/selector.php from [fb856540e1] to [f3271645a4].

36
37
38
39
40
41
42
43






44
45
46
47
48
49
50
51
52
53
54
	throw new UserException('Aucun exercice ouvert disponible');
}

$accounts = $chart->accounts();

$tpl->assign(compact('chart', 'targets'));

$all = (bool) qg('all');







if (!$targets) {
	$tpl->assign('accounts', !$all ? $accounts->listCommonTypes() : $accounts->listAll());
}
else {
	$tpl->assign('grouped_accounts', $accounts->listCommonGrouped(explode(':', $targets)));
}

$tpl->assign('all', $all);

$tpl->display('acc/charts/accounts/selector.tpl');







|
>
>
>
>
>
>











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
	throw new UserException('Aucun exercice ouvert disponible');
}

$accounts = $chart->accounts();

$tpl->assign(compact('chart', 'targets'));

$all = qg('all');

if (null !== $all) {
	$session->set('account_selector_all', (bool) $all);
}

$all = (bool) $session->get('account_selector_all');

if (!$targets) {
	$tpl->assign('accounts', !$all ? $accounts->listCommonTypes() : $accounts->listAll());
}
else {
	$tpl->assign('grouped_accounts', $accounts->listCommonGrouped(explode(':', $targets)));
}

$tpl->assign('all', $all);

$tpl->display('acc/charts/accounts/selector.tpl');

Modified src/www/admin/static/scripts/selector.js from [049f79c975] to [8cf8f0f8b5].

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115

rows.forEach((e, k) => {
	e.classList.add('clickable');
	var l = e.querySelector('td').innerText + ' ' + e.querySelector('th').innerText;
	e.setAttribute('data-search-label', normalizeString(l));

	e.querySelector('button').onfocus = () => {
		rows.forEach((r) => {
			if (r == e) {
				return;
			}

			r.classList.remove('focused');
		});

		e.classList.add('focused');
	};

	e.onclick = (evt) => {
		if (evt.target.tagName && evt.target.tagName == 'BUTTON') {
			return;
		}

		e.querySelector('button').click();
	};
});

document.onkeydown = (evt) => {
	let focus = document.activeElement;
	let new_focus;


	// Get first element
	if (focus.tagName != 'BUTTON') {
		new_focus = document.querySelector('table tr');
	}

	if (evt.key == 'ArrowUp' && !new_focus) {
		let idx = focus.parentNode.parentNode.dataset.idx - 1;



		if (idx == 0) {
			return true;
		}

		new_focus = rows[idx - 1];
	}
	else if (evt.key == 'ArrowDown' && !new_focus) {

		let idx = focus.parentNode.parentNode.dataset.idx - 1;



		if (idx >= rows.length - 1) {
			return true;


		}

		new_focus = rows[idx + 1];
	}
	else {
		new_focus = null;




	}



	if (!new_focus) {



		return true;
	}


	new_focus.querySelector('button').focus();



	return false;
};

buttons[0].focus();

var q = document.getElementById('lookup');

if (q) {
	q.onkeyup = (e) => {
		var query = new RegExp(RegExp.escape(normalizeString(q.value)), 'i');

		rows.forEach((elm) => {
			if (elm.getAttribute('data-search-label').match(query)) {
				elm.style.display = null;
			}
			else {
				elm.style.display = 'none';
			}
		});














		return false;
	};

	q.focus();
}

var o = document.getElementById('f_typed_only_0');

if (o) {
	o.onchange = () => {
		let s = new URLSearchParams(window.location.search);
		s.set("all", o.checked ? 0 : 1);
		window.location.search = s.toString();
	};
}







|
<
<
<
<
|
<
|












|
|
<

>
|
|
|
|
|
<
<
|
>
>
|
|
|
|
<

|
>
|
>
>
|
<
<
>
>
|
|
<

<
|
>
>
>
>
|
>
>
|
<
>
>
>



>
|
>
>
>

|






|




|


|



>
>
>
>
>
>
>
>
>
>
>
>
>

|













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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

rows.forEach((e, k) => {
	e.classList.add('clickable');
	var l = e.querySelector('td').innerText + ' ' + e.querySelector('th').innerText;
	e.setAttribute('data-search-label', normalizeString(l));

	e.querySelector('button').onfocus = () => {
		if (f = document.querySelector('tr.focused')) {




			f.classList.remove('focused');

		}
		e.classList.add('focused');
	};

	e.onclick = (evt) => {
		if (evt.target.tagName && evt.target.tagName == 'BUTTON') {
			return;
		}

		e.querySelector('button').click();
	};
});

document.addEventListener('keydown', (evt) => {
	let current = document.querySelector('tbody tr.focused:not(.hidden)') || document.querySelector('tbody tr');


	if (evt.key == 'ArrowUp') { // Previous item
		while (current && (current = current.previousElementSibling)) {
			if (!current.classList.contains('hidden')) {
				break;
			}
		}


	}
	else if (evt.key == 'ArrowDown') {
		while (current && (current = current.nextElementSibling)) {
			if (!current.classList.contains('hidden')) {
				break;
			}
		}

	}
	else if (evt.key == 'PageUp') {
		let i = 0;
		while (current && (current = current.previousElementSibling)) {
			if (i++ < 10) {
				continue;
			}


			if (!current.classList.contains('hidden')) {
				break;
			}
		}

	}

	else if (evt.key == 'PageDown') {
		let i = 0;
		while (current && (current = current.nextElementSibling)) {
			if (i++ < 10) {
				continue;
			}
			if (!current.classList.contains('hidden')) {
				break;
			}

		}
	}
	else {
		return true;
	}

	if (current) {
		current.querySelector('button').focus();
	}

	evt.preventDefault();
	return false;
});

buttons[0].focus();

var q = document.getElementById('lookup');

if (q) {
	q.addEventListener('keyup', (e) => {
		var query = new RegExp(RegExp.escape(normalizeString(q.value)), 'i');

		rows.forEach((elm) => {
			if (elm.getAttribute('data-search-label').match(query)) {
				g.toggle(elm, true);
			}
			else {
				g.toggle(elm, false);
			}
		});

		if (first = document.querySelector('tbody tr:not(.hidden)')) {
			if (f = document.querySelector('tr.focused')) {
				f.classList.remove('focused');
			}
			first.classList.add('focused');
		}

		if (e.key == 'Enter') {
			if (first = document.querySelector('tbody tr.focused:not(.hidden) button')) {
				first.click();
			}
		}

		return false;
	});

	q.focus();
}

var o = document.getElementById('f_typed_only_0');

if (o) {
	o.onchange = () => {
		let s = new URLSearchParams(window.location.search);
		s.set("all", o.checked ? 0 : 1);
		window.location.search = s.toString();
	};
}