This repository has been archived by the owner on Aug 26, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
actions.html
252 lines (234 loc) · 67.7 KB
/
actions.html
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
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
136
137
138
139
140
141
142
143
144
145
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Actions | Sanjab</title>
<meta name="generator" content="VuePress 1.5.4">
<link rel="icon" href="/images/favicon.ico">
<meta name="description" content="Sanjab is an admin package for laravel framework. create admin panels quick and extendiable.">
<meta property="og:site_name" content="Sanjab">
<meta property="og:title" content="Actions">
<meta property="og:type" content="website">
<meta property="og:url" content="/actions.html">
<meta name="twitter:title" content="Actions">
<meta name="twitter:url" content="/actions.html">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/assets/css/0.styles.2e8fc617.css" as="style"><link rel="preload" href="/assets/js/app.bb080b10.js" as="script"><link rel="preload" href="/assets/js/3.0ca36dc4.js" as="script"><link rel="preload" href="/assets/js/4.fb05333f.js" as="script"><link rel="prefetch" href="/assets/js/10.f2fbcc00.js"><link rel="prefetch" href="/assets/js/11.a88150f7.js"><link rel="prefetch" href="/assets/js/12.3f4fc49f.js"><link rel="prefetch" href="/assets/js/13.2f7bbe92.js"><link rel="prefetch" href="/assets/js/14.f69c3be7.js"><link rel="prefetch" href="/assets/js/15.146fd77b.js"><link rel="prefetch" href="/assets/js/16.7040661a.js"><link rel="prefetch" href="/assets/js/17.10c67635.js"><link rel="prefetch" href="/assets/js/18.b258fc52.js"><link rel="prefetch" href="/assets/js/19.0d164613.js"><link rel="prefetch" href="/assets/js/20.2cf36932.js"><link rel="prefetch" href="/assets/js/21.8f19317a.js"><link rel="prefetch" href="/assets/js/22.3dc04c9b.js"><link rel="prefetch" href="/assets/js/23.7d93154e.js"><link rel="prefetch" href="/assets/js/24.d10068db.js"><link rel="prefetch" href="/assets/js/25.ecd8acc3.js"><link rel="prefetch" href="/assets/js/26.5ae91a18.js"><link rel="prefetch" href="/assets/js/27.1ae60bea.js"><link rel="prefetch" href="/assets/js/28.1dd28706.js"><link rel="prefetch" href="/assets/js/29.8c489115.js"><link rel="prefetch" href="/assets/js/30.effa9b52.js"><link rel="prefetch" href="/assets/js/31.5f330bfc.js"><link rel="prefetch" href="/assets/js/32.4ac193d2.js"><link rel="prefetch" href="/assets/js/33.afce904a.js"><link rel="prefetch" href="/assets/js/34.29769f89.js"><link rel="prefetch" href="/assets/js/35.85aef861.js"><link rel="prefetch" href="/assets/js/36.5b05176c.js"><link rel="prefetch" href="/assets/js/37.40a67162.js"><link rel="prefetch" href="/assets/js/38.0585aaff.js"><link rel="prefetch" href="/assets/js/39.085c73ff.js"><link rel="prefetch" href="/assets/js/40.667cd531.js"><link rel="prefetch" href="/assets/js/41.9bf9596e.js"><link rel="prefetch" href="/assets/js/42.7bf6bc5a.js"><link rel="prefetch" href="/assets/js/43.dbde9849.js"><link rel="prefetch" href="/assets/js/44.a1a7fab3.js"><link rel="prefetch" href="/assets/js/45.af6c374b.js"><link rel="prefetch" href="/assets/js/46.22ab45aa.js"><link rel="prefetch" href="/assets/js/47.095fc7de.js"><link rel="prefetch" href="/assets/js/48.fafabd31.js"><link rel="prefetch" href="/assets/js/49.8b56a6bd.js"><link rel="prefetch" href="/assets/js/5.57d9df4b.js"><link rel="prefetch" href="/assets/js/50.523e948d.js"><link rel="prefetch" href="/assets/js/51.2b0f3efa.js"><link rel="prefetch" href="/assets/js/6.3a56987d.js"><link rel="prefetch" href="/assets/js/7.8bfd5ac9.js"><link rel="prefetch" href="/assets/js/8.3d2834af.js"><link rel="prefetch" href="/assets/js/9.e3de8168.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.26dc1fe9.js">
<link rel="stylesheet" href="/assets/css/0.styles.2e8fc617.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.svg" alt="Sanjab" class="logo"> <span class="site-name can-hide">Sanjab</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://discord.gg/kwuTZQd" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discussion
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/sanjabteam/sanjab" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://discord.gg/kwuTZQd" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discussion
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/sanjabteam/sanjab" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">Sanjab</a></li><li><a href="/install.html" class="sidebar-link">Installation</a></li><li><a href="/crud.html" class="sidebar-link">CRUD</a></li><li><a href="/setting.html" class="sidebar-link">Setting</a></li><li><section class="sidebar-group collapsable depth-0"><a href="/widgets" class="sidebar-heading clickable"><span>Widgets</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/cards" class="sidebar-heading clickable"><span>Cards</span> <span class="arrow right"></span></a> <!----></section></li><li><a href="/actions.html" aria-current="page" class="active sidebar-link">Actions</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/actions.html#example" class="sidebar-link">Example</a></li><li class="sidebar-sub-header"><a href="/actions.html#action-types" class="sidebar-link">Action Types</a></li><li class="sidebar-sub-header"><a href="/actions.html#properties" class="sidebar-link">Properties</a></li><li class="sidebar-sub-header"><a href="/actions.html#authorization" class="sidebar-link">Authorization</a></li><li class="sidebar-sub-header"><a href="/actions.html#bulk-2" class="sidebar-link">Bulk</a></li><li class="sidebar-sub-header"><a href="/actions.html#prepend-an-action" class="sidebar-link">Prepend an action</a></li></ul></li><li><a href="/localization.html" class="sidebar-link">Localization</a></li><li><a href="/authorization.html" class="sidebar-link">Authorization</a></li><li><a href="/compile.html" class="sidebar-link">Custom compile</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="actions"><a href="#actions" class="header-anchor">#</a> Actions</h1> <ul><li><a href="#example">Example</a></li> <li><a href="#action-types">Action Types</a> <ul><li><a href="#url">URL</a></li> <li><a href="#ajax">Ajax</a></li> <li><a href="#custom-component-modal">Custom component modal</a></li></ul></li> <li><a href="#properties">Properties</a></li> <li><a href="#authorization">Authorization</a></li> <li><a href="#bulk">Bulk</a></li> <li><a href="#prepend-an-action">Prepend an action</a></li></ul> <p>Actions are buttons that defined in <a href="/crud.html">CRUD controllers</a>.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <p>This example creates a link button at the top of the list.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'All Products'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">icon</span><span class="token punctuation">(</span>MaterialIcons<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">LINK</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'products'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>And the following example creates a link button for each one of the items in the table.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>PerItemAction</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> PerItemAction<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Product Page'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">icon</span><span class="token punctuation">(</span>MaterialIcons<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">LINK</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$product</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">route</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'product'</span><span class="token punctuation">,</span> <span class="token variable">$product</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">target</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'_blank'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="action-types"><a href="#action-types" class="header-anchor">#</a> Action Types</h2> <p>There are 3 types of actions in sanjab.</p> <ul><li>Link actions</li> <li>Ajax actions with <a href="https://sweetalert2.github.io/" target="_blank" rel="noopener noreferrer">sweetalert<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> confirmation popup</li> <li>Custom <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> components inside a modal using <a href="/compile.html">Custom Compile</a></li></ul> <h3 id="url"><a href="#url" class="header-anchor">#</a> URL</h3> <p>You can create a link as a button above the table or in the actions section of the CRUD table.
All you need to do is set the URL property of action.
For example <code>create</code> / <code>edit</code> buttons in a CRUD table are URL actions.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'All Products'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">icon</span><span class="token punctuation">(</span>MaterialIcons<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">LINK</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'products'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="ajax"><a href="#ajax" class="header-anchor">#</a> Ajax</h3> <p>You can show a confirm popup with sweet alert and then use ajax to do an action.
For example delete button in CRUD controllers is an Ajax action.
<img src="/assets/img/sweetalert.6ec3a054.jpg" alt="Sweet Alert Confirm Popup"></p> <p>To create an ajax action you need to set <code>action</code> property of action.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Approve comment'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">perItem</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">action</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'approve'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// this is your action</span>
</code></pre></div><p>Then you need create a function in your CRUD controller with your action name.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package"><span class="token punctuation">\</span>App<span class="token punctuation">\</span>YourModel</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">approve</span><span class="token punctuation">(</span>YourModel <span class="token variable">$item</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// Do what ever should be done</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// You should return this to show a successful message after ajax finished.</span>
<span class="token punctuation">}</span>
</code></pre></div><p>To customize confirm message you should set <code>confirm</code> property.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Are you want to approve this comment?'</span><span class="token punctuation">)</span>
</code></pre></div><p>Also if you want to customize successful message you should define message in your return.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">approve</span><span class="token punctuation">(</span>YourModel <span class="token variable">$item</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'You confirmed comment successfully.'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can also show a error message if action was not successful.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">approve</span><span class="token punctuation">(</span>YourModel <span class="token variable">$item</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">false</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'This action is not allowed for this item.'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'You confirmed comment successfully.'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="ajax-with-an-input"><a href="#ajax-with-an-input" class="header-anchor">#</a> Ajax with an input.</h4> <p>With the sweet alert, you can define an input inside popup to get input from the user.
<img src="/assets/img/sweetalert-input.843cb008.jpg" alt="sweetalert input"></p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">perItem</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">action</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'replyComment'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInput</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'text'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInputTitle</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply Text'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply to a comment'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmYes</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply'</span><span class="token punctuation">)</span>
</code></pre></div><p>And you can validate and use input value like this.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Comment</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">replyComment</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> Comment <span class="token variable">$comment</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'input'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'require|string|min:5'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token variable">$comment</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">input</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Or anything else</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'You replied successfully!'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="custom-component-modal"><a href="#custom-component-modal" class="header-anchor">#</a> Custom component modal</h3> <p><img src="/assets/img/custom.da2dbf5e.jpg" alt="Custom component">
You should know how to compile sanjab yourself to make custom components so please read <a href="/compile.html">Custom Compile</a> documents first.</p> <p>To create a custom component modal you need to set tag property and also create your Vue component and register it.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Order List'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">tag</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'order-list'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">perItem</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">modalSize</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"lg"</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">variant</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"primary"</span><span class="token punctuation">)</span>
</code></pre></div><p>Then you should create a vue component.</p> <p>OrderList.vue:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
{{ item.name }}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
item<span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><blockquote><p>item property is your selected item.</p></blockquote> <p>But to get more information or do more actions you need some custom actions in your CRUD controller.
To do that first create your method and submit routes:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Order</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Route</span><span class="token punctuation">;</span>
<span class="token comment">/**
* Get order list.
*
* @return \Illuminate\Database\Eloquent\Collection
*/</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">orderList</span><span class="token punctuation">(</span>Order <span class="token variable">$order</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token variable">$order</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">products</span><span class="token punctuation">;</span> <span class="token comment">// Or anthing else as response</span>
<span class="token punctuation">}</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function">routes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> void
<span class="token punctuation">{</span>
<span class="token keyword">parent</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">routes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">prefix</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"modules"</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"modules."</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">group</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token keyword">static</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'route'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'/{order}/list'</span><span class="token punctuation">,</span> <span class="token keyword">static</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token keyword">class</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'@orderList'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token keyword">static</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'route'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'.order-list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>And your ajax code would be something like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
item<span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
orderList<span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">loadOrderList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">loadOrderList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token function">sanjabUrl</span><span class="token punctuation">(</span><span class="token string">'modules/orders/'</span><span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>item<span class="token punctuation">.</span>id <span class="token operator">+</span> <span class="token string">'/list'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// use sanjabUrl to get full URL</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
self<span class="token punctuation">.</span>orderList <span class="token operator">=</span> response<span class="token punctuation">.</span>data<span class="token punctuation">;</span> <span class="token comment">// Your data is here!</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> self<span class="token punctuation">.</span><span class="token function">loadOrderList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// retry after 1 second</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="properties"><a href="#properties" class="header-anchor">#</a> Properties</h2> <h4 id="url-2"><a href="#url-2" class="header-anchor">#</a> url</h4> <p><code>type: string|callable</code></p> <p>URL for link actions. if you are creating a per item action then its recommended to use a callback.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">route</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'test'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'item'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token variable">$item</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="target"><a href="#target" class="header-anchor">#</a> target</h4> <p><code>type: string</code></p> <p>Html target attribute for the link button.</p> <h4 id="peritem"><a href="#peritem" class="header-anchor">#</a> perItem</h4> <p><code>type: boolean</code></p> <p>Set true if you want a button inside table different per item.</p> <p>Alternatively, you can use <code>Sanjab\Helpers\PerItemAction</code> class instead of <code>Sanjab\Helpers\Action</code> Class.</p> <h4 id="bulk"><a href="#bulk" class="header-anchor">#</a> bulk</h4> <p><code>type: boolean</code></p> <p>By default all per item ajax actions also available as a bulk action.
Set this to false if you don't want this behavior.</p> <h4 id="variant"><a href="#variant" class="header-anchor">#</a> variant</h4> <p><code>type: string</code></p> <p>Action button bootstrap variant (Examples: 'success', 'danger', ...)</p> <h4 id="tag"><a href="#tag" class="header-anchor">#</a> tag</h4> <p><code>type: string</code></p> <p>If you want an action inside a modal with custom Vue.js component then set your component tag with this property.</p> <h4 id="tagcontent"><a href="#tagcontent" class="header-anchor">#</a> tagContent</h4> <p><code>type: string</code></p> <p>If you are using custom component action then with this property you can set content of inside your tag and recive it with a <a href="https://vuejs.org/v2/guide/components-slots.html" target="_blank" rel="noopener noreferrer">slot<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> in your component.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>your-component</span><span class="token punctuation">></span></span>
{{ tagContent }}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>your-component</span><span class="token punctuation">></span></span>
</code></pre></div><h4 id="tagattributes"><a href="#tagattributes" class="header-anchor">#</a> tagAttributes</h4> <p><code>type: array</code></p> <p>You can set attribute dynamically per each action with this property. and you can recevice values in your component with <a href="https://vuejs.org/v2/guide/components-props.html" target="_blank" rel="noopener noreferrer">props<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.
Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">tagAttributes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'width'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'height'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="modalsize"><a href="#modalsize" class="header-anchor">#</a> modalSize</h4> <p><code>type: string</code></p> <p>Size of the bootstrap modal. (sm, md, lg)</p> <h4 id="action"><a href="#action" class="header-anchor">#</a> action</h4> <p><code>type: string</code></p> <p>If you want an ajax action then set this to your function name.
Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Approve'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">perItem</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">action</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'approve'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Are you sure for approve this?'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">variant</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">approve</span><span class="token punctuation">(</span>\<span class="token package">App<span class="token punctuation">\</span>YourModel</span> <span class="token variable">$item</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="confirm"><a href="#confirm" class="header-anchor">#</a> confirm</h4> <p><code>type: string</code></p> <p>If you are using ajax action then this is alert's confirm text.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Are you sure for approving this?'</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="confirmyes"><a href="#confirmyes" class="header-anchor">#</a> confirmYes</h4> <p><code>type: string</code></p> <p>Yes button text.</p> <h4 id="confirmno"><a href="#confirmno" class="header-anchor">#</a> confirmNo</h4> <p><code>type: string</code></p> <p>No button text.</p> <h4 id="confirmok"><a href="#confirmok" class="header-anchor">#</a> confirmOk</h4> <p><code>type: string</code></p> <p>Ok button text.</p> <h4 id="confirminput"><a href="#confirminput" class="header-anchor">#</a> confirmInput</h4> <p><code>type: string</code></p> <p>if you want a text input in your alert then set this to HTML input type.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInput</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'text'</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="confirminputtitle"><a href="#confirminputtitle" class="header-anchor">#</a> confirmInputTitle</h4> <p><code>type: string</code></p> <p>Placeholder of confirm input.</p> <h4 id="confirminputattributes"><a href="#confirminputattributes" class="header-anchor">#</a> confirmInputAttributes</h4> <p><code>type: array</code></p> <p>Attributes of confirm input.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInput</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'number'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInputAttributes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'min'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'max'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">1000</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="authorization"><a href="#authorization" class="header-anchor">#</a> Authorization</h2> <p>You can check the authorization of a button and hide the button if needed with the authorize property.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">authorize</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> Auth<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">user</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">can</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'do-that'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>If you have a per item and authorization for each item is different then you can receive the item with parameter.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">authorize</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token variable">$item</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">user_id</span> <span class="token operator">==</span> Auth<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> Auth<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">user</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">isA</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'super_admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="bulk-2"><a href="#bulk-2" class="header-anchor">#</a> Bulk</h2> <p>By default, all ajax actions have bulk action.
You can disable this feature by setting <code>bulk</code> property to false.
You don't need to do any changes to your code.
Your code will work for both single and bulk ajax actions.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Comment</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Helpers<span class="token punctuation">\</span>Action</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">icon</span><span class="token punctuation">(</span>MaterialIcons<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">CHAT</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">perItem</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">action</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'replyComment'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInput</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'text'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirmInputTitle</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply Text'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Reply to a comment'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">variant</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'warning'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">authorize</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token variable">$item</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">reply_id</span> <span class="token operator">==</span> <span class="token constant">null</span><span class="token punctuation">;</span> <span class="token comment">// 1 level comment replies</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// ...</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">replyComment</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> Comment <span class="token variable">$comment</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'You replied successfully!'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>But if you want to receive all items at once not one-by-one when using bulk action then you should use <code>Collection</code> class type in your method parameter.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Collection</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">replyComment</span><span class="token punctuation">(</span>Collection <span class="token variable">$comments</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$comments</span> <span class="token keyword">as</span> <span class="token variable">$comment</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token single-quoted-string string">'success'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token boolean constant">true</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token single-quoted-string string">'You replied to '</span><span class="token punctuation">.</span><span class="token variable">$comments</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token single-quoted-string string">' comment'</span><span class="token punctuation">.</span><span class="token punctuation">(</span><span class="token variable">$comment</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token single-quoted-string string">''</span> <span class="token punctuation">:</span> <span class="token single-quoted-string string">'s'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token single-quoted-string string">' successfully!'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="prepend-an-action"><a href="#prepend-an-action" class="header-anchor">#</a> Prepend an action</h2> <p>If you want to put your action before all existing actions in the CRUD list you should use <code>array_unshift</code> to prepend action.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token function">array_unshift</span><span class="token punctuation">(</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">actions</span><span class="token punctuation">,</span>
Action<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Order List'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">tag</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'order-list'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">perItem</span><span class="token punctuation">(</span><span class="token boolean constant">true</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/sanjabteam/docs/edit/master/docs/actions.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/cards/stats.html" class="prev">
Stats Card
</a></span> <span class="next"><a href="/localization.html">
Localization
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.bb080b10.js" defer></script><script src="/assets/js/3.0ca36dc4.js" defer></script><script src="/assets/js/4.fb05333f.js" defer></script>
</body>
</html>