Skip to content

Commit

Permalink
Merge pull request bagisto#8021 from devansh-webkul/2.x-datagrid-refi…
Browse files Browse the repository at this point in the history 
…nement

🚀 feat: mass action enhanced
  • Loading branch information
@jitendra-webkul
jitendra-webkul committed Aug 24, 2023
2 parents 5f4784e + 17207a9 commit a8300e6
Show file tree
Hide file tree
Showing 9 changed files with 127 additions and 127 deletions.
20 changes: 2 additions & 18 deletions packages/Webkul/Admin/src/DataGrids/AttributeDataGrid.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,26 +144,10 @@ public function prepareActions()
public function prepareMassActions()
{
$this->addMassAction([
'title' => trans('admin::app.catalog.attributes.index.datagrid.delete'),
'icon' => 'icon-delete',
'title' => trans('admin::app.datagrid.delete'),
'method' => 'POST',
'url' => route('admin.catalog.attributes.mass_delete'),
]);

// dummy sample for all datagrids
// $this->addMassAction([
// 'title' => trans('admin::app.catalog.attributes.index.datagrid.update-status'),
// 'method' => 'POST',
// 'url' => route('admin.catalog.attributes.mass_delete'),
// 'options' => [
// [
// 'name' => trans('admin::app.catalog.attributes.index.datagrid.active'),
// 'value' => 1,
// ],
// [
// 'name' => trans('admin::app.catalog.attributes.index.datagrid.inactive'),
// 'value' => 0,
// ],
// ],
// ]);
}
}
11 changes: 5 additions & 6 deletions packages/Webkul/Admin/src/Resources/views/catalog/attributes/index.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
<x-admin::layouts>
<div class="flex gap-[16px] justify-between items-center max-sm:flex-wrap">
<div class="flex items-center justify-between gap-[16px] max-sm:flex-wrap">
{{-- Title --}}
<p class="text-[20px] text-gray-800 font-bold">
<p class="text-[20px] font-bold text-gray-800">
@lang('admin::app.catalog.attributes.index.title')
</p>

<div class="flex gap-x-[10px] items-center">

<div class="flex items-center gap-x-[10px]">
<a href="{{ route('admin.catalog.attributes.create') }}">
<div class="px-[12px] py-[6px] bg-blue-600 border border-blue-700 rounded-[6px] text-gray-50 font-semibold cursor-pointer">
<div class="cursor-pointer rounded-[6px] border border-blue-700 bg-blue-600 px-[12px] py-[6px] font-semibold text-gray-50">
@lang('admin::app.catalog.attributes.index.create-btn')
</div>
</a>
</div>
</div>

<x-admin::datagrid :src="route('admin.catalog.attributes.index')"></x-admin::datagrid>
</x-admin::layouts>
</x-admin::layouts>
24 changes: 13 additions & 11 deletions packages/Webkul/Admin/src/Resources/views/components/datagrid/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,14 +467,6 @@
}
},
setupMassAction(action) {
this.applied.massActions.meta.action = action;
},
setupMassActionOption(option) {
this.applied.massActions.value = option.value;
},
validateMassAction() {
if (!this.applied.massActions.indices.length) {
alert('No records have been selected.');
Expand All @@ -490,17 +482,27 @@
if (
this.applied.massActions.meta.action?.options?.length &&
!this.applied.massActions.value
this.applied.massActions.value === null
) {
alert('You must select a mass action\'s option.');
return false;
}
if (! confirm('Are you sure you want to perform this action?')) {
return false;
}
return true;
},
performMassAction() {
performMassAction(currentAction, currentOption = null) {
this.applied.massActions.meta.action = currentAction;
if (currentOption) {
this.applied.massActions.value = currentOption.value;
}
if (!this.validateMassAction()) {
return;
}
Expand All @@ -515,7 +517,7 @@
case 'post':
case 'put':
case 'patch':
this.$axios[method](action.action, {
this.$axios[method](action.url, {
indices: this.applied.massActions.indices,
value: this.applied.massActions.value,
})
Expand Down
118 changes: 66 additions & 52 deletions packages/Webkul/Admin/src/Resources/views/components/datagrid/toolbar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,19 @@
</template>

<template v-else>
<div class="flex gap-[16px] mt-[28px] justify-between items-center max-md:flex-wrap">
<div class="mt-[28px] flex items-center justify-between gap-[16px] max-md:flex-wrap">
<!-- Left Toolbar -->
<div class="flex gap-x-[4px]">
<!-- Mass Actions Panel -->
<div class="flex gap-x-[4px] w-full items-center" v-if="applied.massActions.indices.length">
<div
class="flex w-full items-center gap-x-[4px]"
v-if="applied.massActions.indices.length"
>
<!-- Mass Action Dropdown -->
<x-admin::dropdown>
<!-- Dropdown Toggler -->
<x-slot:toggle>
<button class="inline-flex gap-x-[8px] justify-between w-full max-w-max px-[10px] py-[6px] cursor-pointer appearance-none items-center rounded-[6px] border border-gray-300 bg-white text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:border-gray-400 focus:ring-black">
<button class="inline-flex w-full max-w-max cursor-pointer appearance-none items-center justify-between gap-x-[8px] rounded-[6px] border border-gray-300 bg-white px-[10px] py-[6px] text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:border-gray-400 focus:ring-black">
<span>
@lang('admin::app.components.datagrid.toolbar.mass-actions.select-action')
</span>
Expand All @@ -23,64 +26,75 @@

<!-- Dropdown Content -->
<x-slot:menu>
<x-admin::dropdown.menu.item
v-for="massAction in available.massActions"
v-text="massAction.title"
@click="setupMassAction(massAction)"
>
</x-admin::dropdown.menu.item>
</x-slot:menu>
</x-admin::dropdown>

<!-- Mass Action's Options Dropdown -->
<x-admin::dropdown v-if="applied.massActions.meta.action?.options?.length">
<!-- Dropdown Toggler -->
<x-slot:toggle>
<button class="inline-flex gap-x-[8px] justify-between w-full max-w-max px-[10px] py-[6px] cursor-pointer appearance-none items-center rounded-[6px] border border-gray-300 bg-white text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:border-gray-400">
<span>
@lang('admin::app.components.datagrid.toolbar.mass-actions.select-option')
</span>

<span class="icon-sort-down text-[24px]"></span>
</button>
</x-slot:toggle>

<!-- Dropdown Content -->
<x-slot:menu>
<x-admin::dropdown.menu.item
v-for="option in applied.massActions.meta.action.options"
v-text="option.name"
@click="setupMassActionOption(option)"
>
</x-admin::dropdown.menu.item>
<template v-for="massAction in available.massActions">
<li
class="group/item relative overflow-visible"
v-if="massAction?.options?.length"
>
<a
class="whitespace-no-wrap block cursor-not-allowed rounded-t px-4 py-2 hover:bg-gray-400"
href="javascript:void(0);"
>
<i
:class="massAction.icon"
v-if="massAction?.icon"
>
</i>

@{{ massAction.title }}
</a>

<ul class="absolute left-full top-0 z-10 hidden w-max rounded-[4px] bg-white shadow-[0px_8px_10px_0px_rgba(0,0,0,0.20),0px_6px_30px_0px_rgba(0,0,0,0.12),0px_16px_24px_0px_rgba(0,0,0,0.14)] group-hover/item:block">
<li v-for="option in massAction.options">
<a
class="whitespace-no-wrap block rounded-t px-4 py-2 hover:bg-gray-400"
href="javascript:void(0);"
v-text="option.name"
@click="performMassAction(massAction, option)"
>
</a>
</li>
</ul>
</li>

<li v-else>
<a
class="whitespace-no-wrap block rounded-b px-4 py-2 hover:bg-gray-400"
href="javascript:void(0);"
@click="performMassAction(massAction)"
>
<i
:class="massAction.icon"
v-if="massAction?.icon"
>
</i>

@{{ massAction.title }}
</a>
</li>
</template>
</x-slot:menu>
</x-admin::dropdown>

<!-- Mass Action Execution Button -->
<button
type="button"
class="px-[12px] py-[6px] cursor-pointer rounded-[6px] border border-blue-700 bg-blue-600 font-semibold text-gray-50"
@click="performMassAction"
>
@lang('admin::app.components.datagrid.toolbar.mass-actions.submit')
</button>

<div class="pl-[10px]">
<p class="text-[14px] text-gray-800 font-light">
<p class="text-[14px] font-light text-gray-800">
<!-- Need to manage this translation. -->
@{{ applied.massActions.indices.length }} of @{{ available.meta.total }} Selected
</p>
</div>
</div>

<!-- Filters And Search Panel -->
<div class="flex gap-x-[4px] w-full items-center" v-else>
<div
class="flex w-full items-center gap-x-[4px]"
v-else
>
<!-- Filters Activation Button -->
<div
class=""
@click="toggleFilters"
>
<div class="inline-flex w-full max-w-max px-[4px] py-[6px] cursor-pointer appearance-none items-center justify-between gap-x-[4px] rounded-[6px] border border-gray-300 bg-white text-center font-semibold text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gratext-gray-600 select-none">
<div class="focus:ring-gratext-gray-600 inline-flex w-full max-w-max cursor-pointer select-none appearance-none items-center justify-between gap-x-[4px] rounded-[6px] border border-gray-300 bg-white px-[4px] py-[6px] text-center font-semibold text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:outline-none focus:ring-2">
<span class="icon-filter text-[24px]"></span>

<span>
Expand All @@ -101,19 +115,19 @@ class=""
type="text"
name="search"
value=""
class="block w-full py-[6px] pl-[12px] rounded-lg border border-gray-300 bg-white leading-6 text-gray-400 transition-all hover:border-gray-400"
class="block w-full rounded-lg border border-gray-300 bg-white py-[6px] pl-[12px] leading-6 text-gray-400 transition-all hover:border-gray-400"
placeholder="@lang('admin::app.components.datagrid.toolbar.search.title')"
@keyup.enter="filterPage"
>

<div class="icon-search flex absolute pointer-events-none right-[10px] top-[8px] items-center text-[22px]">
<div class="icon-search pointer-events-none absolute right-[10px] top-[8px] flex items-center text-[22px]">
</div>
</div>
</div>

<!-- Information Panel -->
<div class="pl-[10px]">
<p class="text-[14px] text-gray-800 font-light">
<p class="text-[14px] font-light text-gray-800">
<!-- Need to manage this translation. -->
@{{ available.meta.total }} Results
</p>
Expand All @@ -129,7 +143,7 @@ class="block w-full py-[6px] pl-[12px] rounded-lg border border-gray-300 bg-whit
<x-admin::dropdown>
<!-- Dropdown Toggler -->
<x-slot:toggle>
<button class="inline-flex w-full max-w-max px-[10px] py-[6px] cursor-pointer appearance-none items-center justify-between gap-x-[8px] rounded-[6px] border border-gray-300 bg-white text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:border-gray-400">
<button class="inline-flex w-full max-w-max cursor-pointer appearance-none items-center justify-between gap-x-[8px] rounded-[6px] border border-gray-300 bg-white px-[10px] py-[6px] text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:border-gray-400">
<span v-text="applied.pagination.perPage"></span>

<span class="icon-sort-down text-[24px]"></span>
Expand All @@ -150,7 +164,7 @@ class="block w-full py-[6px] pl-[12px] rounded-lg border border-gray-300 bg-whit
<p class="whitespace-nowrap text-gray-600 max-sm:hidden">per page</p>

<div
class="min-w-[40px] min-h-[38px] ml-[8px] inline-flex w-full gap-x-[4px] appearance-none justify-center items-center max-w-max px-[12px] py-[6px] rounded-[6px] border border-gray-300 bg-white text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-black max-sm:hidden"
class="ml-[8px] inline-flex min-h-[38px] w-full min-w-[40px] max-w-max appearance-none items-center justify-center gap-x-[4px] rounded-[6px] border border-gray-300 bg-white px-[12px] py-[6px] text-center leading-[24px] text-gray-600 transition-all marker:shadow hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-black max-sm:hidden"
v-text="available.meta.current_page"
>
</div>
Expand All @@ -164,14 +178,14 @@ class="min-w-[40px] min-h-[38px] ml-[8px] inline-flex w-full gap-x-[4px] appeara
<!-- Pagination -->
<div class="flex items-center gap-[4px]">
<div
class="inline-flex gap-x-[4px] appearance-none items-center justify-between w-full max-w-max cursor-pointer rounded-[6px] border border-transparent p-[6px] text-center text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-black active:border-gray-300"
class="inline-flex w-full max-w-max cursor-pointer appearance-none items-center justify-between gap-x-[4px] rounded-[6px] border border-transparent p-[6px] text-center text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-black active:border-gray-300"
@click="changePage('previous')"
>
<span class="icon-sort-left text-[24px]"></span>
</div>

<div
class="inline-flex gap-x-[4px] appearance-none items-center justify-between w-full max-w-max p-[6px] cursor-pointer rounded-[6px] border border-transparent text-center text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-black active:border-gray-300"
class="inline-flex w-full max-w-max cursor-pointer appearance-none items-center justify-between gap-x-[4px] rounded-[6px] border border-transparent p-[6px] text-center text-gray-600 transition-all marker:shadow hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-black active:border-gray-300"
@click="changePage('next')"
>
<span class="icon-sort-right text-[24px]"></span>
Expand Down
8 changes: 4 additions & 4 deletions packages/Webkul/Admin/src/Resources/views/components/dropdown/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<v-dropdown position="{{ $position }}" {{ $attributes->merge(['class' => 'relative']) }}>
@isset($toggle)
{{ $toggle }}

<template v-slot:toggle>
{{ $toggle }}
</template>
Expand All @@ -28,7 +28,7 @@

@pushOnce('scripts')
<script type="text/x-template" id="v-dropdown-template">
<div>
<div>
<div
class="select-none"
ref="toggleBlock"
Expand All @@ -48,7 +48,7 @@ class="select-none"
leave-to-class="transform opacity-0 scale-95"
>
<div
class="absolute bg-white shadow-[0px_8px_10px_0px_rgba(0,0,0,0.20),0px_6px_30px_0px_rgba(0,0,0,0.12),0px_16px_24px_0px_rgba(0,0,0,0.14)] rounded-[4px] w-max z-10 overflow-hidden"
class="absolute bg-white shadow-[0px_8px_10px_0px_rgba(0,0,0,0.20),0px_6px_30px_0px_rgba(0,0,0,0.12),0px_16px_24px_0px_rgba(0,0,0,0.14)] rounded-[4px] w-max z-10"
:style="positionStyles"
v-show="isActive"
>
Expand All @@ -73,7 +73,7 @@ class="absolute bg-white shadow-[0px_8px_10px_0px_rgba(0,0,0,0.20),0px_6px_30px_
toggleBlockWidth: 0,
toggleBlockHeight: 0,
isActive: false,
};
},
Expand Down
34 changes: 34 additions & 0 deletions public/themes/admin/default/build/assets/app-0e929f36.js
View file

Large diffs are not rendered by default.

34 changes: 0 additions & 34 deletions public/themes/admin/default/build/assets/app-7e7a20dc.js
View file

This file was deleted.

1 change: 1 addition & 0 deletions public/themes/admin/default/build/assets/app-ce5df987.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions public/themes/admin/default/build/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@
"css": [
"assets/app-c04ede37.css"
],
"file": "assets/app-7e7a20dc.js",
"file": "assets/app-0e929f36.js",
"isEntry": true,
"src": "src/Resources/assets/js/app.js"
},
Expand All @@ -209,4 +209,4 @@
"isEntry": true,
"src": "src/Resources/assets/js/chart.js"
}
}
}

0 comments on commit a8300e6

Please sign in to comment.