shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile index actions

Browse Source
This commit is contained in:
Burak Civan 2022-11-09 17:52:22 +03:00
parent 1e1bc29b16
commit 819f6587bd
2 changed files with 149 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/akaunting-js/generalAction.js vendored
View File

@ -11,7 +11,7 @@ document.querySelectorAll("[data-table-list]").forEach((row) => {
//redirect edit or show page for table row click
document.querySelectorAll("[data-table-body]").forEach((table) => {
if (document.body.clientWidth >= 991) {
if (document.body.clientWidth < 768 || document.body.clientWidth > 1200) {
let rows = table.querySelectorAll("tr");
rows.forEach((row) => {
@ -27,6 +27,7 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
if (row_href) {
for (let i = first_selector; i < td.length - 1; i++) {
let td_item = td[i];
td_item.addEventListener("click", () => {
window.location.href = row_href;
});
@ -42,6 +43,20 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
}
});
}
if (document.body.clientWidth <= 768) {
table.querySelectorAll('[data-table-list]').forEach((actions) => {
actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show', 'flex');
this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('hidden');
this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
this.classList.add('hidden');
this.classList.remove('show', 'flex');
});
});
});
}
});
//redirect edit or show page for table row click

133
resources/views/components/table/actions.blade.php
View File

@ -3,6 +3,138 @@
$more_actions = [];
@endphp
@mobile
<div
data-mobile-actions
class="absolute w-7 h-7 flex items-center justify-center ltr:right-0 rtl:left-0 -top-4 py-0.5 px-1 bg-white border rounded-full cursor-pointer hover:bg-gray-100"
>
<span class="material-icons-outlined text-lg">
arrow_drop_up
</span>
</div>
<div
data-mobile-actions-modal
class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background"
>
<div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
<div class="p-5 bg-body rounded-lg">
@foreach ($actions as $action)
@if (! empty($action['permission']))
@can($action['permission'])
@endif
@if ($count_buttons > 3 && $loop->count > 4)
@break
@endif
@php
$type = ! empty($action['type']) ? $action['type'] : 'link';
@endphp
@switch($type)
@case('button')
<button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
<span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
{{ $action['title'] }}
</span>
</button>
@break
@case('delete')
@php
$title = $action['title'] ?? null;
$modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
$modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
@endphp
<x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
@break
@default
<a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
<span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
{{ $action['title'] }}
</span>
</a>
@endswitch
@php
array_shift($actions);
$count_buttons++;
@endphp
@if (! empty($action['permission']))
@endcan
@endif
@endforeach
@foreach ($actions as $action)
@if (! empty($action['permission']))
@can($action['permission'])
@php $more_actions[] = $action; @endphp
@endcan
@else
@php $more_actions[] = $action; @endphp
@endif
@endforeach
@if ($more_actions)
@php $divider = false; @endphp
@foreach ($more_actions as $action)
@php
$type = ! empty($action['type']) ? $action['type'] : 'link';
@endphp
@switch($type)
@case('button')
@php $divider = false; @endphp
<button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
<span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
{{ $action['title'] }}
</span>
</button>
@break
@case('delete')
@php $divider = false; @endphp
@php
$title = $action['title'] ?? null;
$modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
$modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
@endphp
<x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
@break
@case('divider')
@if (! $divider)
@php $divider = true; @endphp
<div class="py-2 px-2">
<div class="w-full border-t border-gray-200"></div>
</div>
@endif
@break
@default
@php $divider = false; @endphp
<a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
<span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
{{ $action['title'] }}
</span>
</a>
@endswitch
@endforeach
@endif
</div>
</div>
</div>
@else
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
@foreach ($actions as $action)
@if (! empty($action['permission']))
@ -132,3 +264,4 @@
</div>
@endif
</div>
@endmobile