Skip to content

Commit

Permalink
feat: some datagrid changes done
Browse files Browse the repository at this point in the history
  • Loading branch information
@devansh-webkul
devansh-webkul committed Aug 16, 2023
1 parent 816c1a4 commit 48707e4
Show file tree
Hide file tree
Showing 5 changed files with 452 additions and 394 deletions.
77 changes: 0 additions & 77 deletions packages/Webkul/Admin/src/Resources/views/components/binding-component/index.blade.php
View file

This file was deleted.

31 changes: 28 additions & 3 deletions packages/Webkul/Admin/src/Resources/views/components/datagrid/index.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<v-datagrid {{ $attributes }}></v-datagrid>
<v-datagrid {{ $attributes }}>
{{ $slot }}
</v-datagrid>

@pushOnce('scripts')
<script
Expand All @@ -13,8 +15,31 @@
<!-- Datagrid Filter X-Component -->
<x-admin::datagrid.filters></x-admin::datagrid.filters>
<!-- Datagrid Table X-Component -->
<x-admin::datagrid.table></x-admin::datagrid.table>
<x-admin::datagrid.table>
<template #header>
<slot
name="header"
:columns="available.columns"
:actions="available.actions"
:mass-actions="available.massActions"
:records="available.records"
:meta="available.meta"
>
</slot>
</template>
<template #body>
<slot
name="body"
:columns="available.columns"
:actions="available.actions"
:mass-actions="available.massActions"
:records="available.records"
:meta="available.meta"
>
</slot>
</template>
</x-admin::datagrid.table>
</div>
</div>
</script>
Expand Down
190 changes: 113 additions & 77 deletions packages/Webkul/Admin/src/Resources/views/components/datagrid/table.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,122 @@
<div class="box-shadow relative w-full overflow-x-auto rounded-[4px] border">
<x-admin::table>
<x-admin::table.thead>
<x-admin::table.thead.tr>
<!-- Mass Actions -->
<x-admin::table.th>
<label for="mass_action_select_all_records">
<input
type="checkbox"
name="mass_action_select_all_records"
id="mass_action_select_all_records"
class="peer hidden"
:checked="['all', 'partial'].includes(this.applied.massActions.meta.mode)"
@change="selectAllRecords"
>
<v-table>
{{ $slot }}
</v-table>

@pushOnce('scripts')
<script type="text/x-template" id="v-table-template">
<div class="w-full shadow-[0px_8px_10px_0px_rgba(0,_0,_0,_0.20)] border-[1px] border-gray-300 rounded-[4px] mt-[16px] bg-white">
<div class="table-responsive grid w-full">
<slot name="header">
<div
class="row grid px-[16px] py-[10px] border-b-[1px] border-gray-300 text-gray-600 bg-gray-50"
:style="`grid-template-columns: repeat(${gridsCount}, 1fr)`"
>
<!-- Mass Actions -->
<p>
<label for="mass_action_select_all_records">
<input
type="checkbox"
name="mass_action_select_all_records"
id="mass_action_select_all_records"
class="peer hidden"
:checked="['all', 'partial'].includes($parent.applied.massActions.meta.mode)"
@change="$parent.selectAllRecords"
>

<span
class="icon-uncheckbox cursor-pointer rounded-[6px] text-[24px]"
:class="[
this.applied.massActions.meta.mode === 'all' ? 'peer-checked:icon-checked peer-checked:text-blue-600' : (
this.applied.massActions.meta.mode === 'partial' ? 'peer-checked:icon-checkbox-partial peer-checked:text-blue-600' : ''
),
]"
<span
class="icon-uncheckbox cursor-pointer rounded-[6px] text-[24px]"
:class="[
$parent.applied.massActions.meta.mode === 'all' ? 'peer-checked:icon-checked peer-checked:text-navyBlue' : (
$parent.applied.massActions.meta.mode === 'partial' ? 'peer-checked:icon-checkbox-partial peer-checked:text-navyBlue' : ''
),
]"
>
</span>
</label>
</p>

<!-- Columns -->
<p
v-for="column in $parent.available.columns"
v-text="column.label"
@click="$parent.sortPage(column)"
>
</span>
</label>
</x-admin::table.th>
</p>

<!-- Actions -->
<p>
@lang('admin::app.components.datagrid.table.actions')
</p>
</div>
</slot>

<!-- Columns -->
<x-admin::table.th
v-for="column in available.columns"
v-text="column.label"
class="cursor-pointer"
@click="sortPage(column)"
>
</x-admin::table.th>
<slot name="body">
<div
class="row grid px-[16px] py-[16px] border-b-[1px] border-gray-300 text-gray-600"
v-for="record in $parent.available.records"
:style="`grid-template-columns: repeat(${gridsCount}, 1fr)`"
>
<!-- Mass Actions -->
<p>
<label :for="`mass_action_select_record_${record[$parent.available.meta.primary_column]}`">
<input
type="checkbox"
class="peer hidden"
:name="`mass_action_select_record_${record[$parent.available.meta.primary_column]}`"
:value="record[$parent.available.meta.primary_column]"
:id="`mass_action_select_record_${record[$parent.available.meta.primary_column]}`"
v-model="$parent.applied.massActions.indices"
@change="$parent.setCurrentSelectionMode"
>

<!-- Actions -->
<x-admin::table.th v-if="available.actions.length">
@lang('admin::app.components.datagrid.table.actions')
</x-admin::table.th>
</x-admin::table.thead.tr>
</x-admin::table.thead>
<span class="icon-uncheckbox peer-checked:icon-checked cursor-pointer rounded-[6px] text-[24px] peer-checked:text-navyBlue">
</span>
</label>
</p>

<x-admin::table.tbody>
<x-admin::table.tbody.tr v-for="record in available.records">
<!-- Mass Actions -->
<x-admin::table.td>
<label :for="`mass_action_select_record_${record[available.meta.primary_column]}`">
<input
type="checkbox"
class="peer hidden"
:name="`mass_action_select_record_${record[available.meta.primary_column]}`"
:value="record[available.meta.primary_column]"
:id="`mass_action_select_record_${record[available.meta.primary_column]}`"
v-model="applied.massActions.indices"
@change="setCurrentSelectionMode"
<!-- Columns -->
<p
v-for="column in $parent.available.columns"
v-text="record[column.index]"
>
</p>

<span class="icon-uncheckbox peer-checked:icon-checked cursor-pointer rounded-[6px] text-[24px] peer-checked:text-blue-600">
</span>
</label>
</x-admin::table.td>
<!-- Actions -->
<p>
<span
class="cursor-pointer rounded-[6px] p-[6px] text-[24px] transition-all hover:bg-gray-100 max-sm:place-self-center"
:class="action.icon"
v-text="!action.icon ? action.title : ''"
v-for="action in record.actions"
@click="$parent.performAction(action)"
>
</span>
</p>
</div>
</slot>
</div>
</div>
</script>

<!-- Columns -->
<x-admin::table.td
v-for="column in available.columns"
v-text="record[column.index]"
>
</x-admin::table.td>
<script type="module">
app.component('v-table', {
template: '#v-table-template',
<!-- Actions -->
<x-admin::table.td class="flex gap-2">
<span
class="cursor-pointer rounded-[6px] text-[24px] transition-all hover:bg-gray-100 max-sm:place-self-center"
:class="action.icon"
v-text="!action.icon ? action.title : ''"
v-for="action in record.actions"
@click="performAction(action)"
>
</span>
</x-admin::table.td>
</x-admin::table.tbody.tr>
</x-admin::table.tbody>
</x-admin::table>
</div>
computed: {
gridsCount() {
let count = this.$parent.available.columns.length;
if (this.$parent.available.actions.length) {
++count;
}
if (this.$parent.available.massActions.length) {
++count;
}
return count;
},
},
});
</script>
@endpushOnce
Loading

0 comments on commit 48707e4

Please sign in to comment.