1818 <thead >
1919 <tr >
2020 <th data-column-id =" device_id" data-identifier =" true" data-type =" numeric" data-visible =" false" >Device ID</th >
21- <th data-column-id =" hostname" >Device</th >
21+ <th data-column-id =" hostname" data-formatter =" link" >hostname</th >
22+ <th data-column-id =" sysName" data-formatter =" link" >sysName</th >
2223 <th data-column-id =" custom_field_value" >Field Value</th >
2324 <th data-column-id =" commands" data-formatter =" commands" data-sortable =" false" >Actions</th >
2425 </tr >
3334</div >
3435
3536<!-- Bulk Edit Modal -->
36- <div class =" modal fade" id =" bulkEditModal" tabindex =" -1" aria-labelledby =" bulkEditModalLabel" aria-hidden =" true" >
37- <div class =" modal-dialog" >
37+ <div class =" modal fade" id =" bulkEditModal" tabindex =" -1" role = " dialog " aria-labelledby =" bulkEditModalLabel" aria-hidden =" true" >
38+ <div class =" modal-dialog" role = " document " >
3839 <div class =" modal-content" >
3940 <div class =" modal-header" >
4041 <h5 class =" modal-title" id =" bulkEditModalLabel" >Bulk Edit Devices</h5 >
8283 var fieldEditUrl = " {!! route (' plugin.nmscustomfields.devicefield.edit' , [' device' => ' :device' , ' customdevicefield' => ' :customfield' ]) ! !}" ;
8384 var fieldDeleteUrl = " {!! route (' plugin.nmscustomfields.devicefield.destroy' , [' device' => ' :device' , ' customdevicefield' => ' :customfield' ]) ! !}" ;
8485
85- var selected_field_name = ' ' ;
86-
8786 $ (function () {
8887 var grid = $ (" #device-customfields-table" );
8988
9089 grid .on (" initialized.rs.jquery.bootgrid" , function (e ) {
91- var device_id = $ (" #device_id" );
92- var custom_field_id = $ (" #custom_field_id" );
93- var grid = $ (" #device-customfields-table" );
90+ let device_id = $ (" #device_id" );
91+ let custom_field_id = $ (" #custom_field_id" );
92+ let grid = $ (" #device-customfields-table" );
9493
9594 // create customfield object for select2
9695 // initalize filter
97- var customfield_object = {
96+ let customfield_object = {
9897 id: " {{ $customfield -> id } }" ,
9998 text: " {{ $customfield -> name } }"
10099 }
117116
118117 custom_field_id .on (" select2:select" , function (e ) {
119118 grid .bootgrid (" reload" );
120- selected_field_name = e .params .data .text ;
121119 }).on (" select2:clearing" , function (e ) {
122120 e .preventDefault ();
123121 });
124122 })
123+
125124 grid .bootgrid ({
125+ url: ' {{ route (" plugin.nmscustomfields.table.customfieldvalues" ) } }' ,
126126 ajax: true ,
127127 rowCount: [25 , 50 , 100 , 250 , - 1 ],
128128 columnSelection: true ,
139139
140140 templates: {
141141 header: " {!! nl2br ($escapedHeaderTemplate ) ! !}" ,
142- noResults: " <tr><td colspan=\" @ {{ctx.columns}}\" class=\" no-results\" >No results found for <span id=\" bootgrid_selected_field_name\" ></span>. <button id=\" add-devices-btn\" class=\" btn btn-primary\" >Add devices</button></td></tr>"
142+ noResults: " <tr><td colspan=\" @ {{ctx.columns}}\" class=\" no-results\" >No results found for field: <span id=\" bootgrid_selected_field_name\" ></span><button id=\" add-devices-btn\" class=\" btn btn-primary\" >Add devices</button></td></tr>"
143143 },
144144
145145 formatters: {
146+ " link " : function (column , row ) {
147+ let url = " {{ url (' device' ) } }" + ' /' + row .device_id ;
148+ return " <a href=\" " + url + " \" >" + row[column .id ] + " </a>" ;
149+ },
146150 " commands " : function (column , row ) {
147- return " <button type=\" button\" class=\" btn btn-xs btn-default command-edit\" data-row-id=\" " + row .device_id + " \" ><span class=\" glyphicon glyphicon-edit\" ></span></button> " +
148- " <button type=\" button\" class=\" btn btn-xs btn-default command-delete\" data-row-id=\" " + row .device_id + " \" ><span class=\" glyphicon glyphicon-trash\" ></span></button>" ;
151+ let editUrl = fieldEditUrl .replace (' :device' , row .device_id ).replace (' :customfield' , row .custom_field_value_id );
152+ return " <a href=\" " + editUrl + " \" class=\" btn btn-xs btn-default command-edit\" ><span class=\" glyphicon glyphicon-edit\" ></span > </a> " +
153+ " <button class=\" btn btn-xs btn-default command-delete\" x-data-device_id=\" " + row .device_id + " \" x-data-custom_field_value_id=\" " + row .custom_field_value_id + " \" ><span class=\" glyphicon glyphicon-trash\" ></span></button>" ;
149154 }
150155 },
151156
154159 request .custom_field_id = $ (" #custom_field_id" ).val ();
155160 return request;
156161 },
157-
158- url: ' {{ route (" plugin.nmscustomfields.table.customfieldvalues" ) } }' ,
159162 }).on (" loaded.rs.jquery.bootgrid" , function (e ) {
160163 $ (' #bulk-edit-btn' ).prop (' disabled' , true );
161164 $ (' #bulk-delete-btn' ).prop (' disabled' , true );
162165
163- // set the selected field name when no results are found
164- if (grid .bootgrid (" getTotalRowCount" ) != 0 ) {
165- /* Executes after data is loaded and rendered */
166- grid .find (" .command-edit" ).on (" click" , function (e ) {
167- var row_index = $ (this ).closest (' tr' ).index ();
168- var row = grid .bootgrid (" getCurrentRows" )[row_index];
169- var url = fieldEditUrl .replace (' :device' , row .device_id ).replace (' :customfield' , row .custom_field_value_id );
170- window .location .href = url;
171- }).end ().find (" .command-delete" ).on (" click" , function (e ) {
172- var row_index = $ (this ).closest (' tr' ).index ();
173- var row = grid .bootgrid (" getCurrentRows" )[row_index];
174- var url = fieldDeleteUrl .replace (' :device' , row .device_id ).replace (' :customfield' , row .custom_field_value_id );
175- window .location .href = url;
176- });
177- } else {
166+ // log total number of rows
167+ let total = grid .bootgrid (" getTotalRowCount" );
168+ if (total === 0 ) {
169+ let selected_field_name = $ (' #custom_field_id option:selected' ).text ();
170+ // bind add devices button to open bulk edit modal
178171 $ (' #bootgrid_selected_field_name' ).text (selected_field_name);
179172
180- $ (' #add-devices-btn' ).on (' click' , function () {
173+ $ (" #add-devices-btn" ).on (' click' , function (event ) {
181174 $ (' #bulkEditModal' ).modal (' show' );
182175 });
183176 }
184177
178+ $ (" button.command-delete" ).on (" click" , function () {
179+ // confirm delete
180+ if (! confirm (" Are you sure you want to delete this custom field value?" )) {
181+ return ;
182+ }
183+
184+ let device_id = $ (this ).attr (' x-data-device_id' );
185+ let custom_field_value_id = $ (this ).attr (' x-data-custom_field_value_id' );
186+ let url = fieldDeleteUrl .replace (' :device' , device_id).replace (' :customfield' , custom_field_value_id);
187+ $ .ajax ({
188+ type: " DELETE" ,
189+ url: url,
190+ success : function (response ) {
191+ grid .bootgrid (" reload" );
192+ },
193+ error : function (response ) {
194+ console .log (response);
195+ }
196+ });
197+ });
198+
185199 }).on (" selected.rs.jquery.bootgrid" , function (e , rows ) {
186200 // Enable bulk edit button when rows are selected
187201 $ (' #bulk-edit-btn' ).prop (' disabled' , false );
197211 $ (' #bulkEditModal' ).modal (' show' );
198212 });
199213
214+ // Handle bulk delete button click
200215 $ (" div#manage-device-customfields" ).on (' click' , ' #bulk-delete-btn' , function () {
201- var selectedRowIds = grid .bootgrid (" getSelectedRows" );
202- var rows = grid .bootgrid (" getCurrentRows" );
203- var selectedRows = rows .filter (row => selectedRowIds .includes (row .device_id ));
204- var device_ids = selectedRows .map (row => row .device_id ).join (" ," );
205-
206- var custom_field_id = $ (" #custom_field_id" ).val ();
207- var url = " {{ route (' plugin.nmscustomfields.devicefield.bulkdestroy' ) } }" ;
208- var data = {
216+ let selectedRowIds = grid .bootgrid (" getSelectedRows" );
217+ let rows = grid .bootgrid (" getCurrentRows" );
218+ let selectedRows = rows .filter (row => selectedRowIds .includes (row .device_id ));
219+ if (selectedRows .length === 0 ) {
220+ return ;
221+ }
222+ let device_ids = selectedRows .map (row => row .device_id ).join (" ," );
223+
224+ let custom_field_id = $ (" #custom_field_id" ).val ();
225+ let url = " {{ route (' plugin.nmscustomfields.devicefield.bulkdestroy' ) } }" ;
226+ let data = {
209227 device_ids: device_ids,
210228 custom_field_id: custom_field_id
211229 };
223241 });
224242 });
225243
244+
226245 // bind shown to modal to focus on input field
227246 $ (' #bulkEditModal' ).on (' shown.bs.modal' , function () {
228- var selectedRowIds = grid .bootgrid (" getSelectedRows" );
229-
230- var inputField = $ (' #custom-field-value' );
231- var multipleValuesWarning = ' Warning: Multiple different values selected. This will override all selected devices with this value.' ;
232-
233- if (selectedRowIds .length !== 0 ) {
234- var rows = grid .bootgrid (" getCurrentRows" );
235- var selectedRows = rows .filter (row => selectedRowIds .includes (row .device_id ));
236- var uniqueValues = [... new Set (selectedRows .map (row => row .custom_field_value ))];
237- if (uniqueValues .length === 1 ) {
238- inputField .val (uniqueValues[0 ]);
239- inputField .attr (' placeholder' , ' ' );
240- } else {
241- inputField .val (' ' );
242- $ (' #alert-container' ).text (multipleValuesWarning).removeClass (' hidden' );
243- }
244- }
245-
246247 // Initialize Select2 for the multi-select field
247248 $ (' #select-devices' ).select2 ({
248249 placeholder: " Search for devices" ,
254255 }
255256 });
256257
257- // Populate Select2 with selected devices
258- var selectDevices = $ (' #select-devices' );
258+ let selectDevices = $ (' #select-devices' );
259259 selectDevices .empty ();
260- selectedRows .forEach (function (row ) {
261- var option = new Option (row .hostname , row .device_id , true , true );
262- selectDevices .append (option).trigger (' change' );
263- });
264260
265- // set the selected device ids in the hidden input field
266- $ (' #device_ids' ).val (selectedRows .map (row => row .device_id ).join (" ," ));
261+ let inputField = $ (' #custom-field-value' );
262+ inputField .val (' ' );
263+
264+ let selectedRowIds = grid .bootgrid (" getSelectedRows" );
265+ let multipleValuesWarning = ' Warning: Multiple different values selected. This will override all selected devices with this value.' ;
266+
267+ if (selectedRowIds .length !== 0 ) {
268+ let rows = grid .bootgrid (" getCurrentRows" );
269+ let selectedRows = rows .filter (row => selectedRowIds .includes (row .device_id ));
270+ let uniqueValues = [... new Set (selectedRows .map (row => row .custom_field_value ))];
271+ if (uniqueValues .length === 1 ) {
272+ inputField .val (uniqueValues[0 ]);
273+ inputField .attr (' placeholder' , ' ' );
274+ } else {
275+ inputField .val (' ' );
276+ $ (' #alert-container' ).text (multipleValuesWarning).removeClass (' hidden' );
277+ }
278+
279+ // Populate Select2 with selected devices
280+ selectedRows .forEach (function (row ) {
281+ let option = new Option (row .hostname , row .device_id , true , true );
282+ selectDevices .append (option).trigger (' change' );
283+ });
284+
285+ // set the selected device ids in the hidden input field
286+ $ (' #device_ids' ).val (selectedRows .map (row => row .device_id ).join (" ," ));
287+ }
267288
268289 $ (' #custom-field-value' ).focus ();
269290 // set the blkedit_custom_field_id to the value of custom_field_id
270291 $ (' #blkedit_custom_field_id' ).val ($ (" #custom_field_id" ).val ());
271292 });
272293
273- // Handle add field to devices button click
274- // when no results are found
275- $ (" div#manage-device-customfields" ).on (' click' , ' #add-devices-btn' , function () {
276- $ (' #bulkEditModal' ).modal (' show' );
277- });
278-
279294 $ (" div#bulkEditModal" ).on (' click' , ' #save-bulk-edit-btn' , function () {
280- var form = $ (' #bulk-edit-form' );
281- var url = form .attr (' action' );
282- var data = form .serialize ();
295+ let form = $ (' #bulk-edit-form' );
296+ let url = form .attr (' action' );
297+ let data = form .serialize ();
298+ // log post values
299+ console .log (data);
300+ // / return
283301 $ .ajax ({
284302 type: " POST" ,
285303 url: url,
298316 e .preventDefault ();
299317 grid .bootgrid (" search" , $ (" #hostname" ).val ());
300318 });
319+
320+
301321 });
302322 </script >
303323@endsection
0 commit comments