cms-frontend/resources/views/pages/system-parameters.blade.php

103 lines
3.4 KiB
PHP

@extends('layouts.app')
@section('page_title', 'System Parameters')
@section('content')
@include('components.table-component', [
'pageTitle' => 'System Parameters',
'data' => $parameters ?? [],
'columns' => [
['name' => 'Name', 'key' => 'name', 'sortable' => true],
['name' => 'Value', 'key' => 'value', 'sortable' => true],
['name' => 'Type', 'key' => 'type', 'sortable' => true],
['name' => 'Description', 'key' => 'description', 'sortable' => true],
['name' => 'Last Updated', 'key' => 'updated_at', 'sortable' => true]
],
'allFields' => [
['name' => 'Name', 'key' => 'name', 'type' => 'text', 'required' => true],
['name' => 'Value', 'key' => 'value', 'type' => 'text', 'required' => true],
['name' => 'Type', 'key' => 'type', 'type' => 'select', 'options' => ['String', 'Number', 'Boolean', 'JSON'], 'required' => true],
['name' => 'Description', 'key' => 'description', 'type' => 'textarea', 'required' => true]
],
'actions' => ['edit', 'view', 'delete'],
'showAddButton' => true,
'addButtonUrl' => route('system-parameters.create'),
'showCheckboxes' => true,
'showBatchDelete' => true,
'showEditModal' => true,
'showViewModal' => true,
'baseRoute' => 'system-parameters'
])
@endsection
@push('scripts')
<script>
$(document).ready(function() {
// Handle parameter type change
$(document).on('change', '[name="type"]', function() {
const type = $(this).val();
const valueInput = $(this).closest('form').find('[name="value"]');
switch(type) {
case 'Number':
valueInput.attr('type', 'number');
break;
case 'Boolean':
valueInput.replaceWith(`
<select name="value" class="form-control">
<option value="true">True</option>
<option value="false">False</option>
</select>
`);
break;
case 'JSON':
valueInput.replaceWith(`<textarea name="value" class="form-control" rows="3"></textarea>`);
break;
default:
valueInput.attr('type', 'text');
}
});
// Validate JSON input
$(document).on('submit', 'form', function(e) {
const type = $(this).find('[name="type"]').val();
const value = $(this).find('[name="value"]').val();
if (type === 'JSON') {
try {
JSON.parse(value);
} catch (error) {
e.preventDefault();
alert('Please enter valid JSON');
}
}
});
// Format JSON display
$('.table td:nth-child(2)').each(function() {
const type = $(this).closest('tr').find('td:nth-child(3)').text().trim();
const value = $(this).text().trim();
if (type === 'JSON') {
try {
const formatted = JSON.stringify(JSON.parse(value), null, 2);
$(this).html(`<pre class="mb-0">${formatted}</pre>`);
} catch (error) {
// Keep original value if not valid JSON
}
}
});
});
</script>
@endpush
@push('styles')
<style>
pre {
background-color: #f8f9fa;
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
</style>
@endpush