feat: add administrative settings UI with sidebar navigation and search functionality
This commit is contained in:
Ümit Tunç
@@ -1,40 +1,6 @@
|
||||
<?php
|
||||
$tabs = [
|
||||
'Naks Center' => 'setting',
|
||||
'Welding Methods' => 'setting',
|
||||
'Materials' => 'setting',
|
||||
'P-Numbers' => 'setting',
|
||||
'Welding Positions' => 'setting',
|
||||
'Hazard Classes' => 'setting',
|
||||
'Joint Type' => 'setting',
|
||||
'Joint View' => 'setting',
|
||||
'Electrode Coating' => 'setting',
|
||||
'Ru Welding Geometry ' => 'setting',
|
||||
'Current Types' => 'setting',
|
||||
'Welding Consumables' => 'setting',
|
||||
'Product Type' => 'setting',
|
||||
'Welding Machine Type' => 'setting',
|
||||
'Welding Materials Brend' => 'setting',
|
||||
'Work Type' => 'setting',
|
||||
'Performed Works Type' => 'setting',
|
||||
'Type of Consumable' => 'setting',
|
||||
'Job Descriptions' => 'setting',
|
||||
'Results' => 'setting',
|
||||
'NDE Defects' => 'setting',
|
||||
'Line List Category' => 'setting',
|
||||
'Line List Group' => 'setting',
|
||||
'UT Types' => 'setting',
|
||||
'Beveelings' => 'setting',
|
||||
'Discipline' => 'setting',
|
||||
'TP Discipline' => 'setting',
|
||||
'Locations' => 'setting',
|
||||
'Piping Types' => 'setting',
|
||||
'Duty Types' => 'setting',
|
||||
'User Levels' => 'user-levels',
|
||||
'Material Group Map' => 'material-group-map',
|
||||
'QC Activity' => 'qc-activity',
|
||||
'Material Group Test Piece' => 'material-group-test-piece',
|
||||
'Surface Area Constants' => 'surface-area-constants',
|
||||
];
|
||||
|
||||
// Aktif tab'ı belirle
|
||||
@@ -42,9 +8,9 @@ $currentTab = get("t");
|
||||
$currentTitle = "";
|
||||
|
||||
// Eğer aktif bir tab varsa başlığını bulalım
|
||||
if($currentTab) {
|
||||
foreach($tabs as $tabName => $val) {
|
||||
if(str_slug($tabName) == $currentTab) {
|
||||
if ($currentTab) {
|
||||
foreach ($tabs as $tabName => $val) {
|
||||
if (str_slug($tabName) == $currentTab) {
|
||||
$currentTitle = $tabName;
|
||||
break;
|
||||
}
|
||||
@@ -66,11 +32,8 @@ if($currentTab) {
|
||||
<!-- Arama Kutusu -->
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="settingSearch"
|
||||
placeholder="{{e2('Search settings...')}}"
|
||||
autocomplete="off">
|
||||
<input type="text" class="form-control" id="settingSearch"
|
||||
placeholder="{{e2('Search settings...')}}" autocomplete="off">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">
|
||||
<i class="fa fa-search"></i>
|
||||
@@ -78,17 +41,16 @@ if($currentTab) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Menü Listesi -->
|
||||
<div class="list-group list-group-flush" id="settingsList" style="max-height: 78vh; overflow-y: auto;">
|
||||
<?php foreach($tabs AS $tab => $icon) {
|
||||
$id = str_slug($tab);
|
||||
$isActive = ($currentTab == $id);
|
||||
<div class="list-group list-group-flush" id="settingsList"
|
||||
style="max-height: 78vh; overflow-y: auto;">
|
||||
<?php foreach ($tabs as $tab => $icon) {
|
||||
$id = str_slug($tab);
|
||||
$isActive = ($currentTab == $id);
|
||||
?>
|
||||
<a class="list-group-item list-group-item-action setting-link {{$isActive ? 'active' : ''}}"
|
||||
href="?t={{$id}}"
|
||||
data-title="{{strtolower($tab)}}"
|
||||
style="display: block; width: 100%;">
|
||||
<a class="list-group-item list-group-item-action setting-link {{$isActive ? 'active' : ''}}"
|
||||
href="?t={{$id}}" data-title="{{strtolower($tab)}}" style="display: block; width: 100%;">
|
||||
<i class="fa fa-cog mr-2"></i>
|
||||
{{e2($tab)}}
|
||||
</a>
|
||||
@@ -97,126 +59,133 @@ if($currentTab) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Sağ Taraf: İçerik -->
|
||||
<div class="col-md-9">
|
||||
<?php if(getisset("t")) { ?>
|
||||
<div class="block block-rounded block-bordered">
|
||||
<div class="block-header block-header-default">
|
||||
<h3 class="block-title">{{e2($currentTitle)}}</h3>
|
||||
</div>
|
||||
<div class="block-content p-0">
|
||||
@include("admin.type.settings." . get("t"))
|
||||
</div>
|
||||
<?php if (getisset("t")) { ?>
|
||||
<div class="block block-rounded block-bordered">
|
||||
<div class="block-header block-header-default">
|
||||
<h3 class="block-title">{{e2($currentTitle)}}</h3>
|
||||
</div>
|
||||
<div class="block-content p-0">
|
||||
@include("admin.type.settings." . get("t"))
|
||||
</div>
|
||||
</div>
|
||||
<?php } else { ?>
|
||||
<div class="block block-rounded block-bordered">
|
||||
<div class="block-content block-content-full">
|
||||
<div class="py-50 text-center">
|
||||
<i class="si si-settings text-primary display-3"></i>
|
||||
<h1 class="h2 font-w700 mt-30 mb-10">{{e2("Settings System")}}</h1>
|
||||
<h2 class="h3 font-w400 text-muted mb-50">{{e2("Please select a setting from the list to configure")}}</h2>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="alert alert-info">
|
||||
<i class="fa fa-info-circle mr-1"></i>
|
||||
{{e2("You can use the search box on the left to quickly find the setting you are looking for.")}}
|
||||
</div>
|
||||
<div class="block block-rounded block-bordered">
|
||||
<div class="block-content block-content-full">
|
||||
<div class="py-50 text-center">
|
||||
<i class="si si-settings text-primary display-3"></i>
|
||||
<h1 class="h2 font-w700 mt-30 mb-10">{{e2("Settings System")}}</h1>
|
||||
<h2 class="h3 font-w400 text-muted mb-50">
|
||||
{{e2("Please select a setting from the list to configure")}}
|
||||
</h2>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="alert alert-info">
|
||||
<i class="fa fa-info-circle mr-1"></i>
|
||||
{{e2("You can use the search box on the left to quickly find the setting you are looking for.")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Sidebar Link Stilleri */
|
||||
.setting-link {
|
||||
border: none;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
/* Sidebar Link Stilleri */
|
||||
.setting-link {
|
||||
border: none;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.setting-link:hover {
|
||||
background-color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
border-left-color: #dee2e6;
|
||||
}
|
||||
.setting-link:hover {
|
||||
background-color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
padding-left: 20px;
|
||||
border-left-color: #dee2e6;
|
||||
}
|
||||
|
||||
.setting-link.active {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-left-color: #0056b3;
|
||||
}
|
||||
.setting-link.active {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-left-color: #0056b3;
|
||||
}
|
||||
|
||||
.setting-link.active:hover {
|
||||
background-color: #0069d9;
|
||||
}
|
||||
.setting-link.active:hover {
|
||||
background-color: #0069d9;
|
||||
}
|
||||
|
||||
/* Scrollbar düzenlemesi */
|
||||
#settingsList::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
#settingsList::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
#settingsList::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#settingsList::-webkit-scrollbar-thumb:hover {
|
||||
background: #bbb;
|
||||
}
|
||||
.block-content .content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* Arama kutusu odaklanma efekti */
|
||||
.input-group-focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
/* Scrollbar düzenlemesi */
|
||||
#settingsList::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#settingsList::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#settingsList::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#settingsList::-webkit-scrollbar-thumb:hover {
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
.block-content .content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Arama kutusu odaklanma efekti */
|
||||
.input-group-focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const searchInput = document.getElementById('settingSearch');
|
||||
|
||||
if (searchInput) {
|
||||
// Arama fonksiyonu
|
||||
searchInput.addEventListener('input', function(e) {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const links = document.querySelectorAll('.setting-link');
|
||||
|
||||
links.forEach(link => {
|
||||
const title = link.getAttribute('data-title') || '';
|
||||
if (title.includes(searchTerm)) {
|
||||
link.style.display = 'block';
|
||||
} else {
|
||||
link.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Input focus efektleri
|
||||
searchInput.addEventListener('focus', function() {
|
||||
this.closest('.input-group').classList.add('input-group-focus');
|
||||
});
|
||||
|
||||
searchInput.addEventListener('blur', function() {
|
||||
this.closest('.input-group').classList.remove('input-group-focus');
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const searchInput = document.getElementById('settingSearch');
|
||||
|
||||
// Eğer aktif link varsa, scroll'u oraya kaydır
|
||||
const activeLink = document.querySelector('.setting-link.active');
|
||||
if (activeLink) {
|
||||
activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
if (searchInput) {
|
||||
// Arama fonksiyonu
|
||||
searchInput.addEventListener('input', function (e) {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const links = document.querySelectorAll('.setting-link');
|
||||
|
||||
links.forEach(link => {
|
||||
const title = link.getAttribute('data-title') || '';
|
||||
if (title.includes(searchTerm)) {
|
||||
link.style.display = 'block';
|
||||
} else {
|
||||
link.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Input focus efektleri
|
||||
searchInput.addEventListener('focus', function () {
|
||||
this.closest('.input-group').classList.add('input-group-focus');
|
||||
});
|
||||
|
||||
searchInput.addEventListener('blur', function () {
|
||||
this.closest('.input-group').classList.remove('input-group-focus');
|
||||
});
|
||||
|
||||
// Eğer aktif link varsa, scroll'u oraya kaydır
|
||||
const activeLink = document.querySelector('.setting-link.active');
|
||||
if (activeLink) {
|
||||
activeLink.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user