Skip to content

Commit e1ca440

Browse files
committed
Bug fixes and ui code improvement.
- Fix modal state reset #2 . - Show both hostname and sysName with clickable links. - Fix bulk delete so it does not delet all values. Behaves correctly. - Fix JS code to use let instead of var.
1 parent 3f4e0da commit e1ca440

File tree

3 files changed

+113
-93
lines changed

3 files changed

+113
-93
lines changed

resources/views/customfield/devices.blade.php

Lines changed: 94 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
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>
@@ -33,8 +34,8 @@
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>
@@ -82,19 +83,17 @@
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
}
@@ -117,12 +116,13 @@
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,
@@ -139,13 +139,18 @@
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
@@ -154,34 +159,43 @@
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);
@@ -197,15 +211,19 @@
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
};
@@ -223,26 +241,9 @@
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",
@@ -254,32 +255,49 @@
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,
@@ -298,6 +316,8 @@
298316
e.preventDefault();
299317
grid.bootgrid("search", $("#hostname").val());
300318
});
319+
320+
301321
});
302322
</script>
303323
@endsection

src/Http/Controllers/DeviceCustomFieldController.php

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -228,28 +228,27 @@ public function bulkedit(Request $request)
228228
$device_ids = $request->device_ids;
229229
$custom_field_id = $request->custom_field_id;
230230
$custom_field_value = $request->custom_field_value;
231-
// the device_id list is the master list of devices
232-
// that is supposed to have this field with this value
233-
// if any device is missing the field, we need to create it
234-
// if any device has the field but with a different value, we need to update it
235-
// if any device has this field but no in the array of device_ids, we need to delete it
231+
232+
// device_id contains a list of all devices that should have this custom field
233+
// we need to compare this list with the list of devices that already have this custom field
234+
// and update the custom field value accordingly
235+
// if the custom field is not present, we need to create it
236+
// if the custom field is present but with a different value, we need to update it
237+
// if the custom field is present for the device but not in the list, we need to delete it
236238
$customFieldDevice = CustomFieldDevice::where('custom_field_id', $custom_field_id)
239+
->whereIn('device_id', $device_ids)
237240
->get();
238241

239-
$customFieldDevice->each(function ($customFieldDevice) use ($device_ids, $custom_field_value) {
240-
if (!in_array($customFieldDevice->device_id, $device_ids)) {
241-
$customFieldDevice->customFieldValue->delete();
242-
$customFieldDevice->delete();
243-
} elseif ($customFieldDevice->customFieldValue->value != $custom_field_value) {
244-
$customFieldDevice->customFieldValue->value = $custom_field_value;
245-
$customFieldDevice->customFieldValue->save();
246-
}
242+
$customFieldDevice->each(function ($customFieldDevice) use ($custom_field_value) {
243+
$customFieldDevice->customFieldValue->value = $custom_field_value;
244+
$customFieldDevice->customFieldValue->save();
247245
});
248246

249247
$device_ids = array_diff($device_ids, $customFieldDevice->pluck('device_id')->toArray());
250-
$device_ids = Device::whereIn('device_id', $device_ids)->get();
251-
$device_ids->each(function ($device) use ($custom_field_id, $custom_field_value) {
252-
$device->customFields()->attach($custom_field_id);
248+
249+
$device_ids = collect($device_ids)->map(function ($device_id) use ($custom_field_id, $custom_field_value) {
250+
$device = Device::find($device_id);
251+
$device->customFields()->syncWithoutDetaching($custom_field_id);
253252
$device = $device->fresh();
254253
$customFieldDevice = $device->customFieldDevices->where('custom_field_id', $custom_field_id)->first();
255254
CustomFieldValue::create([
@@ -258,8 +257,6 @@ public function bulkedit(Request $request)
258257
]);
259258
});
260259

261-
262-
263260
return response()->json(['success' => true]);
264261
}
265262

src/Http/Controllers/Table/CustomFieldValueController.php

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,13 @@ protected function baseQuery($request)
4848
->when($request->input('device_id'), function ($query, $device_id) {
4949
return $query->where('device_id', $device_id);
5050
});
51+
5152
// if we have searchPhrase then we need to filter the results on device hostname, custom field value
5253
if ($request->input('searchPhrase')) {
5354
$searchPhrase = '%' . $request->input('searchPhrase') . '%';
5455

5556
$query->whereHas('device', function ($query) use ($searchPhrase) {
56-
$query->where('hostname', 'like', $searchPhrase);
57+
$query->where('hostname', 'like', $searchPhrase)->orWhere('sysName', 'like', $searchPhrase);
5758
})->orWhereHas('customFieldValue', function ($query) use ($searchPhrase) {
5859
$query->where(
5960
'value',
@@ -62,6 +63,7 @@ protected function baseQuery($request)
6263
);
6364
});
6465
}
66+
6567
return $query;
6668
}
6769

@@ -75,6 +77,7 @@ protected function formatResponse($paginator)
7577
return [
7678
'device_id' => $item->device_id,
7779
'hostname' => $item->device->hostname,
80+
'sysName' => $item->device->sysName,
7881
'custom_field_id' => $item->custom_field_id,
7982
'custom_field_value' => $item->customFieldValue->value,
8083
'custom_field_value_id' => $item->customFieldValue->id,

0 commit comments

Comments
 (0)