File ui/src/VueComponent/ItemSearch.php

1:	<?php
2:
3:	declare(strict_types=1);
4:
5:	namespace Atk4\Ui\VueComponent;
6:
7:	use Atk4\Data\Model;
8:	use Atk4\Ui\View;
9:
10:	/**
11:	* Will send query with define callback and reload a specific view.
12:	*/
13:	class ItemSearch extends View
14:	{
15:	/** @var View\|string the atk4 View to be reloaded or a id selector string View to be reloaded that contains data to be filtered. */
16:	public $reload;
17:
18:	/** @var string The initial query. */
19:	public $q;
20:
21:	/** @var string The CSS for the input field. */
22:	public $inputCss = 'ui input right icon transparent';
23:
24:	/**
25:	* Keyboard debounce time in ms for the input.
26:	* Will limit network request while user is typing search criteria.
27:	*
28:	* @var int
29:	*/
30:	public $inputTimeOut = 250;
31:
32:	/**
33:	* The jQuery selector where you need to add the Fomantic-UI 'loading' class.
34:	* Default to reload selector.
35:	*
36:	* @var View
37:	*/
38:	public $context;
39:
40:	/** @var string\|null The URL argument name use for query. If null, then->>name will be assigned. */
41:	public $queryArg;
42:
43:	public $defaultTemplate = 'item-search.html';
44:
45:	#[\Override]
46:	protected function init(): void
47:	{
48:	parent::init();
49:
50:	if (!$this->queryArg) {
51:	$this->queryArg = $this->name;
52:	}
53:
54:	if (!$this->q) {
55:	$this->q = $this->getQuery();
56:	}
57:	}
58:
59:	/**
60:	* @return string
61:	*/
62:	public function getQuery()
63:	{
64:	return $this->getApp()->tryGetRequestQueryParam($this->queryArg) ?? '';
65:	}
66:
67:	public function setModelCondition(Model $model): void
68:	{
69:	$q = $this->getQuery();
70:	if ($q) {
71:	$model->addCondition($model->titleField, 'like', '%' . $q . '%');
72:	}
73:	}
74:
75:	#[\Override]
76:	protected function renderView(): void
77:	{
78:	$this->class = [];
79:	parent::renderView();
80:
81:	// $reloadId is the view ID selector name that needs to be reloaded
82:	// this will be pass as get argument to __atk_reload
83:	if ($this->reload instanceof View) {
84:	$reloadId = $this->reload->name;
85:	} else {
86:	$reloadId = $this->reload;
87:	}
88:
89:	$this->vue('AtkItemSearch', [
90:	'reload' => $reloadId,
91:	'queryArg' => $this->queryArg,
92:	'url' => $this->reload->jsUrl(),
93:	'q' => $this->q,
94:	'context' => $this->context,
95:	'options' => [
96:	'inputTimeOut' => $this->inputTimeOut,
97:	'inputCss' => $this->inputCss,
98:	],
99:	]);
100:	}
101:	}
102:

Namespaces

Classes