Editing tabs and the months modal
This commit is contained in:
@@ -145,7 +145,9 @@ foreach ($data as $employee) {
|
||||
max-width: 350px;
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
overflow-x: auto;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
padding: 0.45rem;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
background: var(--surface-tabs);
|
||||
@@ -158,6 +160,40 @@ foreach ($data as $employee) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-month-more {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.ui-month-more-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.35rem);
|
||||
right: 0;
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
min-width: 9rem;
|
||||
max-height: 16rem;
|
||||
overflow-y: auto;
|
||||
padding: 0.35rem;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--surface-panel, #fff);
|
||||
border: 1px solid var(--border-glass, #e5e7eb);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.ui-month-more-menu.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui-month-more-item {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.month-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem 0.85rem;
|
||||
@@ -190,6 +226,8 @@ foreach ($data as $employee) {
|
||||
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
|
||||
box-shadow: var(--shadow-soft);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.attendance-table {
|
||||
@@ -283,27 +321,51 @@ foreach ($data as $employee) {
|
||||
رکورد ترددی برای این شخص ثبت نشده است.
|
||||
</div>
|
||||
@else
|
||||
<div class="month-tabs">
|
||||
@foreach(array_keys($recordsGrouped) as $month)
|
||||
@php
|
||||
$monthLabel = $month;
|
||||
if (preg_match('/^(\d{4})-(\d{2})$/', (string) $month, $mm)) {
|
||||
try {
|
||||
$jj = new Jalalian((int) $mm[1], (int) $mm[2], 1);
|
||||
$monthLabel = ((int) $mm[1] === (int) $currentJalaliYear)
|
||||
? $jj->format('%B')
|
||||
: $jj->format('%B') . ' ' . $mm[1];
|
||||
} catch (\Throwable $e) {
|
||||
$monthLabel = $month;
|
||||
}
|
||||
@php
|
||||
$allMonthKeys = array_keys($recordsGrouped);
|
||||
$recentMonthKeys = array_slice($allMonthKeys, 0, 3);
|
||||
$olderMonthKeys = array_slice($allMonthKeys, 3);
|
||||
$monthLabelOf = function ($month) use ($currentJalaliYear) {
|
||||
if (preg_match('/^(\d{4})-(\d{2})$/', (string) $month, $mm)) {
|
||||
try {
|
||||
$jj = new Jalalian((int) $mm[1], (int) $mm[2], 1);
|
||||
return ((int) $mm[1] === (int) $currentJalaliYear)
|
||||
? $jj->format('%B')
|
||||
: $jj->format('%B') . ' ' . $mm[1];
|
||||
} catch (\Throwable $e) {
|
||||
return $month;
|
||||
}
|
||||
@endphp
|
||||
}
|
||||
|
||||
return $month;
|
||||
};
|
||||
@endphp
|
||||
<div class="month-tabs">
|
||||
@foreach($recentMonthKeys as $month)
|
||||
<button type="button"
|
||||
class="month-tab tablinks-{{ $employee->id }}"
|
||||
onclick="openMonth(event, 'month_{{ $employee->id }}_{{ $month }}', '{{ $employee->id }}')">
|
||||
{{ $monthLabel }}
|
||||
{{ $monthLabelOf($month) }}
|
||||
</button>
|
||||
@endforeach
|
||||
|
||||
@if(!empty($olderMonthKeys))
|
||||
<div class="ui-month-more">
|
||||
<button type="button"
|
||||
class="month-tab ui-month-more-btn"
|
||||
onclick="toggleAdminMonthMore(event, 'month-more-{{ $employee->id }}')"
|
||||
title="ماههای دیگر">⋯</button>
|
||||
<div id="month-more-{{ $employee->id }}" class="ui-month-more-menu hidden">
|
||||
@foreach($olderMonthKeys as $month)
|
||||
<button type="button"
|
||||
class="month-tab tablinks-{{ $employee->id }} ui-month-more-item"
|
||||
onclick="openMonth(event, 'month_{{ $employee->id }}_{{ $month }}', '{{ $employee->id }}'); closeAdminMonthMore('month-more-{{ $employee->id }}');">
|
||||
{{ $monthLabelOf($month) }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@foreach($recordsGrouped as $month => $records)
|
||||
@@ -382,6 +444,30 @@ foreach ($data as $employee) {
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAdminMonthMore(evt, menuId) {
|
||||
if (evt) evt.stopPropagation();
|
||||
document.querySelectorAll('.ui-month-more-menu').forEach(menu => {
|
||||
if (menu.id !== menuId) menu.classList.add('hidden');
|
||||
});
|
||||
const menu = document.getElementById(menuId);
|
||||
if (menu) menu.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function closeAdminMonthMore(menuId) {
|
||||
const menu = document.getElementById(menuId);
|
||||
if (menu) menu.classList.add('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function () {
|
||||
document.querySelectorAll('.ui-month-more-menu').forEach(menu => menu.classList.add('hidden'));
|
||||
});
|
||||
|
||||
document.querySelectorAll('.ui-month-more-menu').forEach(menu => {
|
||||
menu.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const firstEmployeeBtn = document.querySelector('.emp-btn');
|
||||
if (firstEmployeeBtn) {
|
||||
|
||||
@@ -932,7 +932,9 @@
|
||||
.ui-month-tabs {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
overflow-x: auto;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
padding: 0.45rem;
|
||||
@@ -950,13 +952,15 @@
|
||||
.ui-month-more {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.ui-month-more-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.35rem);
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
right: 0;
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
min-width: 9rem;
|
||||
max-height: 16rem;
|
||||
overflow-y: auto;
|
||||
@@ -964,14 +968,14 @@
|
||||
border-radius: 0.75rem;
|
||||
background: var(--surface-panel, #fff);
|
||||
border: 1px solid var(--border-glass, #e5e7eb);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.ui-month-more-menu.hidden {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui-month-more-item {
|
||||
@@ -1015,6 +1019,8 @@
|
||||
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
|
||||
box-shadow: var(--shadow-soft);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -147,8 +147,8 @@ if (!empty($user->tasks)) {
|
||||
|
||||
|
||||
<div class="w-full flex justify-center mt-4 pb-20" style="">
|
||||
<div class="overflow-hidden rounded-[23px] max-w-[350px]">
|
||||
<div class=" border-b border-gray-300 text-center w-full">
|
||||
<div class="overflow-visible rounded-[23px] max-w-[350px] relative z-20">
|
||||
<div class="text-center w-full">
|
||||
|
||||
|
||||
<!-- Your Table Code Here -->
|
||||
@@ -815,6 +815,10 @@ if (!empty($user->tasks)) {
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('month-more-menu')?.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('click', function () {
|
||||
closeMonthMore();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user