add button to restore table column defaults and ux improvements

templates/Froxlor/src/js/components/tablecolumns.js

@@ -3,19 +3,35 @@ $(document).ready(function () {
 	 * table columns - manage columns modal
 	 */
 	let form = $('#manageColumnsModal form');
+
 	form.submit(function (event) {
 		$.ajax({
-			url: 'lib/ajax.php?action=tablelisting&listing=' + form.data('listing') + '&theme=' + window.$theme,
+			url: 'lib/ajax.php?action=updatetablelisting&listing=' + form.data('listing') + '&theme=' + window.$theme,
 			type : 'POST',
 			dataType : 'json',
 			data : form.serialize(),
-			success : function (result) {
-				window.location.reload();
+			success : function () {
+				window.location.href = '';
 			},
-			error: function (xhr, resp, text) {
-				console.log(xhr, resp, text);
+			error: function (request) {
+				alert(request.responseJSON.message);
 			}
 		});
 		event.preventDefault();
 	});
+
+	$('#manageColumnsModal form #reset').click(function () {
+		$.ajax({
+			url: 'lib/ajax.php?action=resettablelisting&listing=' + form.data('listing') + '&theme=' + window.$theme,
+			type : 'POST',
+			dataType : 'json',
+			data : {},
+			success : function () {
+				window.location.href = '';
+			},
+			error: function (request) {
+				alert(request.responseJSON.message);
+			}
+		});
+	});
 });

templates/Froxlor/src/js/main.js

@@ -7,7 +7,7 @@ import 'chart.js/dist/chart';
 global.$ = require('jquery');
 global.bootstrap = require('bootstrap');
 
-$(function() {
+$(function () {
 	window.$theme = 'Froxlor';
 });
 

templates/Froxlor/src/scss/_global.scss

@@ -58,3 +58,8 @@
 		border-bottom: none;
 	}
 }
+
+.focus-none {
+	outline: none !important;
+	box-shadow: none !important;
+}

templates/Froxlor/table/table.html.twig

@@ -11,8 +11,8 @@
 			</div>
 		{% else %}
 			<div class="d-flex flex-column align-items-end mt-n2">
-				<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75" data-bs-toggle="modal" data-bs-target="#manageColumnsModal">
-					<i class="fa fa-cog"></i>
+				<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75">
+					<span type="button" data-bs-toggle="modal" data-bs-target="#manageColumnsModal"><i class="fa fa-cog"></i></span>
 				</div>
 			</div>
 			<div class="card table-responsive">
@@ -74,7 +74,7 @@
 					<p>{{ lng('panel.managetablecolumnsmodal.description') }}</p>
 					{% for key, column in listing.available_columns %}
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" value="" id="checkColumn{{ key }}" name="columns[{{ key }}]" {{ column.checked ? 'checked' : '' }}>
+							<input class="form-check-input" type="checkbox" value="{{ key }}" id="checkColumn{{ key }}" name="columns[{{ key }}]" {{ column.checked ? 'checked' : '' }}>
 							<label class="form-check-label" for="checkColumn{{ key }}">
 								{{ column.label }}
 							</label>
@@ -82,6 +82,7 @@
 					{% endfor %}
 				</div>
 				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" id="reset">{{ lng('panel.default') }}</button>
 					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ lng('panel.modalclose') }}</button>
 					<button type="submit" class="btn btn-primary">{{ lng('panel.save') }}</button>
 				</div>